Custom Header Tip

Share your own extensions, modifications, custom BBCodes and template changes in here.
1 post Page 1 of 1
Contributors
Post
Image Custom Header Tip
splicker
#115
Hi all,

I hope you're enjoying using the template and discovering your unique look and theme.

I've had a few questions regarding the header banner. If you look at the top of this page you'll see that our header has a logo and a background image behind it instead of a solid colour.

To accomplish this you need to change the "Header background colour" field in the template settings:

Normally you'd use a colour code, for example: #19a78b
But to use a background image as well as or instead of a background colour, you can enter HTML in this back.

So to get the background you see in our page, enter this in to the header background colour field:
url('./styles/Splicker/theme/images/default-header.png'); background-color:#19a78b
We add a url to the image we want to use as our background:
url('./styles/Splicker/theme/images/default-header.png');
Because the background image we use on this site is translucent, we want to add a background colour to bring it forward. So we add a background colour on the end:
background-color:#19a78b
Now our header looks a lot more stylish and you can experiment using any CSS code in this field.

Enjoy :)
1 post Page 1 of 1