Return to previous page

Add image to header background? - by freerunner

This topic has 15 replies, 4 voices, and was last updated 9 years, 7 months ago ago by Robert Hall

freerunner

Participant

September 13, 2014 at 01:45

How do I add an image to the header background like in version 2 or 3 of the header type? I am using the Snowboard template. Thanks

#15307 Copied

14 Answers

Olga Barlow

Support staff

September 13, 2014 at 09:15

Hello,

This is not header background, this is transparent bg of header and slider on the background, see here https://www.8theme.com/demo/royal/?page_id=16411&et_styles=0-1-1-8-0-1
To create such effect go to Theme options > Header and select 2, 3 or 5 header type. Then edit your homepage and at the Page Layout area set slider at “Show revolution slider instead of breadcrumbs and page title”.

Regards,
Olga Barlow

#15342 Copied

freerunner

Participant

September 13, 2014 at 15:35

Thanks for the response, that seems to work. But what if I want to use header 10 but change the background color from white to grey and then change the font color within the header? Thanks for your time.

#15378 Copied
Eva Kemp

Support staff

September 13, 2014 at 16:18
Hello,

You can change color in the header using this code in custom.css file:
```
.header-wrapper.header-type-10.header-scrolling, .fixed-header-area {
background-color: grey;
}
```
Please specify font color of which items you want to change in the header.
Thank you.

Regards,
Eva Kemp.
#15380 Copied
freerunner

Participant

September 13, 2014 at 16:22

Is there anyway that you can make a transparent version of Header 10? I absolutely love this header option but I would like to put in my own background. Thanks for your time and consideration.

#15382 Copied

freerunner

Participant

September 13, 2014 at 21:46

Continued question: Or is there a way to place a custom image in the header 10 background? And how do I change the font color in the header only? Thanks

#15400 Copied

freerunner

Participant

September 14, 2014 at 00:38

I figured out how to change the background to an image:

.header-wrapper.header-type-10, .fixed-header-area
{
background-image: url(“”)
}

Also, looks like I figured out how to change the font color in the header (header template 10) for Signin, Register, My Account, Login with this code here:

.header-wrapper.header-type-10, .fixed-header-area, a:link
{
color: white;
}

.header-wrapper.header-type-10, .fixed-header-area, a:visited
{
color: white;
}

But how do I change the cart font color from black to white and also change the color of the little golden lock above the cart price in the header on the right hand side (to a custom color)? Thanks.

#15408 Copied

freerunner

Participant

September 14, 2014 at 00:47

Also, how do I change the menu links from black to white when scrolling down the page? Thanks for your time and help on this.

#15410 Copied

freerunner

Participant

September 14, 2014 at 02:39

Never mind. I guess all the text color changes changed the text color within the categories to white as well. So my question is, how do I successfully change only the color of the text within the header and cart, as well as the floating menu items when scrolling down the page. I would like all of this text to be white in color. Thanks.

#15412 Copied
Eva Kemp

Support staff

September 14, 2014 at 15:53
Hello,

To change text color in the header type 10 please add this code into custom.css file:
```
.header-type-10 .navbar-header .top-links ul li a, .shop-text, .total {
   color: white !important;
}
```
Regards,
Eva Kemp.
#15433 Copied
freerunner

Participant

September 15, 2014 at 03:02

Thanks for the code. That fixed the text color for the fixed header, but the scrolling header text is still dark. Can you please provide mw with the code to make the scrolling header text white for the menu items? Thank you.

#15446 Copied

Robert Hall

Support staff

September 15, 2014 at 07:05

Hello,

Please provide us with link to the page.

Regards,
Robert Hall.

#15460 Copied
Eva Kemp

Support staff

September 15, 2014 at 08:33
Hello,

Please add this code into custom.css as well:
```
.fixed-header-area .menu > li > a, .fixed-header-area .shop-text, .fixed-header-area .total  {
   color: #FFF !important;
}
```
Regards,
Eva Kemp.
#15469 Copied
freerunner

Participant

September 15, 2014 at 13:47

Eva,

That code worked. Thanks so much.

#15542 Copied

Robert Hall

Support staff

September 15, 2014 at 13:55

Hello,

You’re welcome!

Regards,
Robert Hall.

#15544 Copied
Tagged: background, header, image, templates, woocommerce, wordpress
Viewing 15 results - 1 through 15 (of 15 total)