Gradient Alignment Confusion

Working on a new template and need help? Come here for support.

Moderator: Help Desk Team

Gradient Alignment Confusion

Postby PaganPotato » February 14th, 2018, 11:41 pm

Hey there I'm kinda new to this site and have started using the "Pyro Black" template. It's a great template but I can't seem to align the gradients (I deleted the top fade gradient and only have the bottom). It falls short just before the comic's right edge ends. I want to be able to stretch it out to fit the whole comic. Is there a way to do this? It looks very strange to leave it like it is. Thank you for your time.
Attachments
delete.jpg.png
delete.jpg.png (38.14 KiB) Viewed 1679 times
User avatar
PaganPotato
 
Posts: 4
Joined: January 31st, 2018, 3:41 am

Re: Gradient Alignment Confusion

Postby eishiya » February 15th, 2018, 8:37 am

Uuugh, Pyro's a mess with those gradients :D It was made in an age where everybody had tiny screens, I guess.

Add this override to your CSS to make the image stretch to cover the entire width of the page:
Code: Select all
.image, .image img {
width: 100%;
}


Hey Admin, could you perhaps make this change in the default Pyro code? To the top gradient too? There's pretty much no scenario where the current version looks good D:
Better yet, maybe use a CSS gradient instead of an image?
Image
User avatar
eishiya
 
Posts: 9393
Joined: December 5th, 2009, 11:17 am

Re: Gradient Alignment Confusion

Postby PaganPotato » February 15th, 2018, 8:27 pm

Sorry where would I go about putting in that code, I'm kind of a noob. Would it be under the gradient code. And yup this is a different one because I thought it was just the SJ's gradient acting up so I added my own buuut it was a no go

The code rn is:

Code: Select all
{CONTENT}
<div class="image"><img src="https://img00.deviantart.net/cdef/i/2018/045/6/e/page_fade_by_fluffywolfpaw-dc37nra.png" alt=" width="100" /></div>
</div>
User avatar
PaganPotato
 
Posts: 4
Joined: January 31st, 2018, 3:41 am

Re: Gradient Alignment Confusion

Postby eishiya » February 15th, 2018, 8:42 pm

The code I provided is a CSS override, so it goes in a <style> element. In Overall Layout, find </head> (with the slash), and right above it create a style element:
Code: Select all
<style>

</style>

Between those two style tags, add the CSS from my earlier post.

You should remove the width="100" part from your code. It means nothing since there aren't units, and you don't need to set a width on the image anyway.
Image
User avatar
eishiya
 
Posts: 9393
Joined: December 5th, 2009, 11:17 am

Re: Gradient Alignment Confusion

Postby PaganPotato » February 15th, 2018, 9:07 pm

Oh my gosh you are a superhero! Thank you so much c: worked like a charm!
Will remove the 100
User avatar
PaganPotato
 
Posts: 4
Joined: January 31st, 2018, 3:41 am


Return to Template Development & Support

Who is online

Users browsing this forum: No registered users and 4 guests