Hi louisjpe.
1. You could use a header image or background as discussed in this thread.
2. You could copy header.php to a child theme and add a dynamic sidebar.
I guess I’d ask why you want to do this since you already have the blog heading/subheading and the featured post image on the screen. If all you want to do is make the heading/subheading more prominent there are several css font properties you can apply, along with color and background.
Thanks for the speedy response bdbrown, as ever.
I want to do this in order to make the title of the blog ‘Financial Democracy’ far more obvious. This is a strong message which currently gets lost in the rest of the page. For context, this is what I have in mind. There are several corporate identity / content marketing considerations behind this.
As you can see, a header image is not really what I’m after. Can this be achieved with a dynamic sidebar?
Thanks in advance,
Louis
Hi again bdbrown,
I just tried the CSS code you posted on this thread, but as expected it changed the background of the entire header. So I removed it.
I’d really like the header background to remain blue, as shown in the mock-up I linked above.
How can this be achieved?
Thanks in advance,
Louis
You probably don’t need a dynamic sidebar. You could copy header.php to a child theme, add a <div> container with a class somewhere after the menu block, then use the same idea to set a background image on the <div> and size/position it using css.
Hey bdbrown,
So I created a child theme and copied header.php into it, and then isolated where I think the <div> container should go:
`</div><!–/.container-inner–>
</div><!–/.container–>
*HERE?*
</header><!–/#header–>`
And then I added the following code to no avail whatsoever – I must be missing something obvious:
`<div class=”container-fluid”>
#container-fluid {
background-image: url(“https://c5b06bb50b4a498184fd627c9abb20de.objectstore.eu/symbid_production/ed493a7981174a428bb45ba91bf614bb/875/Symbid_crowdfunding_funding_network_-_blog.jpg”);
background-repeat: no-repeat;
width: auto;
height: auto;
margin: 0;
padding: 0;
}
</div>`
Any ideas? You’d be saving my head from being banged against a wall repeatedly.
Thanks in advance,
Louis
Couple of things. The css doesn’t go inside the <div> container; the container should be empty. You’d put the css in your child theme style.css file. Also, you set a class on the <div> but the css is targeting an id. Either change the class to an id, or change the css from #container-fluid to .container-fluid. See if that fixes it.
It did not fix it unfortunately. I now have this in the header.php child template:
</header><!–/#header–>
<div id=”container-fluid”>
</div>
<div class=”container” id=”page”>
<div class=”container-inner”>
<div class=”main”>
<div class=”main-inner group”>
And this in my child style.css:
#container-fluid {
background-image: url(“https://c5b06bb50b4a498184fd627c9abb20de.objectstore.eu/symbid_production/ed493a7981174a428bb45ba91bf614bb/875/Symbid_crowdfunding_funding_network_-_blog.jpg”);
background-repeat: no-repeat;
width: auto;
height: auto;
margin: 0;
padding: 0;
}
But I see no result on my site. I’m beginning to question whether I’ll ever be able to do this. Might be time to give up or contact my coder friend.
Thanks so much for all your help!
Louis
This is the source on your home page:
</header><!–/#header–>
<div class=”container” id=”page”>
<div class=”container-inner”>
<div class=”main”>
<div class=”main-inner group”>
<section class=”content”>
I don’t see the <div id=”container-fluid”>. Maybe you have a cache or CDN that hasn’t been updated?
If you want the image just above the menu bar it would be better to drop it in just above the nav-header section:
<div id="container-fluid"></div>
<?php if ( has_nav_menu('header') ): ?>
And, in your css, you’ll need to set the width and height equal to the image size.
Also you can set
margin: 0, auto;
and it should center the image over the menu.
For comparison, here are a couple of threads that show ways to get the container to automatically size to the background image:
http://stackoverflow.com/questions/600743/how-to-get-div-height-to-auto-adjust-to-background-size
http://stackoverflow.com/questions/15961824/css-how-to-set-container-size-equal-to-background-image-size
Hey,
I removed the <div id=”container-fluid”></div> from the header.php template as it wasn’t working. i just re-added it where you suggested, and still nothing. My style.css reads like this:
#container-fluid {
background-image: } url(“http://symbid.wpengine.com/wp-content/uploads/2015/04/Symbid-crowdfunding-funding-network-blog.jpg”);
background-repeat: no-repeat;
width: 1920;
height: 543;
margin: 0, auto;
padding: 0;
Could something be overriding it? I’m really stuck here.
Louis
The #container-fluid div is now in two places; the original location outside the header and the new location above the menu. This is the css that’s being applied. The closing } is in the wrong place; it should be at the end of the group.
#container-fluid {
background-image: } url("http://symbid.wpengine.com/wp-content/uploads/2015/04/Symbid-crowdfunding-funding-network-blog.jpg");
background-repeat: no-repeat;
width: 1920;
height: 543;
margin: 0, auto;
padding: 0;
OK, thanks, so I removed the #container-fluid div from outside the header, and I moved the } to the end, and still no luck. Here’s the CSS now:
#container-fluid {
background-image: url(“http://symbid.wpengine.com/wp-content/uploads/2015/04/Symbid-crowdfunding-funding-network-blog.jpg”);
background-repeat: no-repeat;
width: 1920;
height: 543;
margin: 0, auto;
padding: 0;
}
The old css is still in the code. Whatever cache you’re using doesn’t appear to be getting updated.
Hi bdbrown,
It turned out that in addition to the problems you highlighted, my width and height were missing ‘px’. I’m not sure if the cache is an issue, it seems to be working fine now.
Thanks a lot for your help!
Louis
