I’m not totally clear what you are trying to do — can you explain more? Where do you want the background image? And do you want a different one on each page?
Better yet: where do you want to use the h1 tags?
Hey, not background image, background color for the text…the idea is similar to this… <a
http://www.youtube.com/watch?v=15twIcSuBaA&feature=relmfu
Basically, add background color, offset, use arrow and some tricky shading to make it look like tabs. However, the rest is easy, the hard part is getting edits I make in style.css to be reflected in the page when I do an h1 tab. Only way so far is to do it directly in the page which doesnt make much sense …
Does that help? Sorry if I confused anyone 😉
When I do a new page and I am writing in the page (not post), I want to use h1 to divide sections. For example, I want to change the background color on http://parispoc.com/live-page/1st/ where it says Crossing the rich and the poor…
This works in Firebug:
.entry-title, .entry-title a {
background-color: XXXXXXpx;
margin-left: -100px;
}
Posted the above before I saw your last post — you’d need to use a class on those h1 tags so you can target them… Also, don’t know if it’s relevant, but using multiple h1 tags on a page may affect your SEO.
Implemented is not working. Also, not sure if entry title and h1 are the same. H1 would be ideal so that I can reuse it. Also, this code is not working. In the page or single column file, could it be overriding what h1 means? I am so lost 🙁
Thanks for the SEO tip. Either way, I could do it for any tag type, but want to be able to implement this. To make the class for h1 is this in the style sheet? I feel like I have already done this…
Now I’m confused – that’s not a standard child theme set up. Where are you adding custom CSS code?
You will need to use some class to add the styles you want — either an existing class (as in .entry-title which could be added to any tag, yes) or create your own class — maybe something like this:
.divider {
background-color: XXXXXXpx;
margin-left: -100px;
whatever other styles you want;
}
but then you must add that class to the element you want those styles to appear on…
<h1 class="divider">
I did…
in the content-page
<div class="entry-content">
<h1 class="tab"></h1>
<?php the_content(); ?>
<?php wp_link_pages( array( 'before' => '<div class="page-link"><span>' . __( 'Pages:', 'twentyeleven' ) . '</span>', 'after' => '</div>' ) ); ?>
and in the page
<h1>The Snapshot</h1>
and in style.css
/* Headings */
h1,h2,h3,h4,h5,h6 {
clear: both
}
.tab {
background-color: #e3e3e3;
padding: 10px 20px;
margin-left: -20px;
position:relative;
width:70%;
font-size:40
}
Still not working
Wow, found such an easy solution. I think that twentyeleven overrides everything. however, if you do it in the theme extensions plugin, it is really easy. wow
thanks so much for your time Wpyogi
This is what the rendered HTML is showing:
<div class="entry-content">
<h1 class="tab"></h1>
<h1>The Snapshot</h1>
You’ve added it twice — but only one has the class…remove it from the content.php file and add the class when you add it to the page itself.
Also, the background is getting overridden, so change the CSS to this:
h1.tab
Glad your found an easy solution :). Reading up on CSS a bit will likely be helpful too!
I tried the h1.tab and called it in the page using class but it still did not work. I would prefer to find a solution in the css because I am not a huge fan of relying on a plugin. However, i am wondering what is overriding everything like that background…
