Modifying left and right sides of header « Support Forum | Kriesi.at

Support Forum » Abundance

Modifying left and right sides of header

5 posts from 3 voices

Started 9 months ago by sweenetoad
Latest reply from Devin
This topic is not a support question

Tags:

sweenetoad
Member

Hello - I've added a custom image to the header using the Quick CSS function. It currently looks like this:

https://www.dropbox.com/s/zo8nw2dahzb3n5i/custom_header.jpg

I'd like to add my images to the top-left and top-right sides to that header (and also remove those white lines) so it looks like this:

https://www.dropbox.com/s/pa8isnuwlzu5lst/custom_banner_correct.jpg

Could you direct me where to add/change the code for this?

thanks!

Posted 9 months ago #
Devin
Moderator

Hi sweenetoad,

It might be more effective to actually make the background a single large image centered on the content and then have the pattern repeat behind that.

Since you have a coming soon page up could you create a temporary admin account for me so that I can take a look at exactly what you have now and see which option would be easier to implement.

You can send the information to my email at DevinVinson (at) gmail.com. Make sure to include a link to this topic so that my spam filter doesn't grab it :)

Regards,

Devin

Posted 9 months ago #
sweenetoad
Member

Devin - just emailed you the login credentials.

thanks!

Posted 9 months ago #
Mya

Hi,

Going to tag this for Devin so he'll have easy access.

Regards,
Mya

Posted 9 months ago #
Devin
Moderator

Hi sweenetoad,

The border is coming from the file it looks like. The right edge has a bit of a white/gradient or something so getting rid of that will get rid of the border.

I changed your background for the #header to repeat-x so that it repeats across the entire area. If you switch out the image with a new one that includes the leaf border on the bottom and matches your background gradient you can keep the current css.

You may need to adjust the position of the gradient background OR replace it with one that matches where the leaf gradient will stop. Then, make your pages background color the same as where the background image ends and set the green to white gradient background to repeat-x as well (i've done this just now in your quick css just to save you a step).

Hope that helps :)

Regards,

Devin

Posted 9 months ago #