Docs

[StudioNeal]

Hello!
I’m attempting to add an accent bar at the top of my header so that it appears at the very top of all pages – similar to this http://malala.org.
I’ve added the code in the customizer that I found in another post, but I’m still not seeing it on the site. I tested the URL and it seems to be working fine.

My site is still under construction, so I will post a link and creds in a private post below.

[StudioNeal]

This reply has been marked as private.

[Joao]

Hi There,

Let´s do different,

Go to Appereance > Customizer > Header > Activate Topbar Content, remove all content that is inside in case there is something.

Add to appereance > customizer > custom > css

.x-topbar {
background: url(http://www.indiaprojectinc.org/wp-content/uploads/2016/10/HEADERBACKGROUNDBAR.jpg) no-repeat;
background-size: cover;
}

Hope it helps

Joao

[StudioNeal]

That worked beautifully, thank you! Is it possible to have the same bar run across the bottom, at the very top of the footer?

[StudioNeal]

Also, I’d like to run the same image across a column. Per another thread, I added this to the style field for the column, and it doesn’t seem to be working.

background-image: url(‘http://www.indiaprojectinc.org/wp-content/uploads/2016/10/indiaprojectaccentbarheader.jpg’);

[StudioNeal]

The column image did work – Cornerstone just took awhile to update!

[Lely]

Hi There,

Try this instead for top part of the footer(Widget section):

.x-colophon.top {
    background: url(http://www.indiaprojectinc.org/wp-content/uploads/2016/10/indiaprojectaccentbarheader.jpg) no-repeat;
    background-size: cover;
}

If you want to add it just above footer content, try this:

.x-colophon.bottom {
    background: #e8903e url(http://www.indiaprojectinc.org/wp-content/uploads/2016/10/indiaprojectaccentbarheader.jpg) no-repeat;
    background-size: cover;
}

But then you have to update the image to be PNG type and remove the white background.

Hope this helps.

[Author]

Posts