WordPress.org

Support

Support » Themes and Templates » [Resolved] Change h1 tag in TwentyEleven

[Resolved] Change h1 tag in TwentyEleven

  • williamkeck
    Member

    @williamkeck

    First, to start and avoid confusion, I am using a child theme on http://www.parispoc.com. 🙂 Just for those that will mention.

    So, problem I am having… I want to use <h1> tags throughout the site and want to change the background of these headers. I have been to style.css and tried to change everything with h1, with .entry-title, .single .entry-title and with the a, I even tried #branding h1 and anything else a beginner like me would imagine.

    If anyone could help, I would be soooo happy.

    Cheers,

    William

Viewing 15 replies - 1 through 15 (of 20 total)
  • WPyogi
    Forum Moderator

    @wpyogi

    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?

    Jose Castaneda
    THEME COFFEE MONKEY

    @jcastaneda

    Better yet: where do you want to use the h1 tags?

    williamkeck
    Member

    @williamkeck

    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 😉

    williamkeck
    Member

    @williamkeck

    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…

    WPyogi
    Forum Moderator

    @wpyogi

    This works in Firebug:

    .entry-title, .entry-title a {
       background-color: XXXXXXpx;
       margin-left: -100px;
    }

    WPyogi
    Forum Moderator

    @wpyogi

    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.

    williamkeck
    Member

    @williamkeck

    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 🙁

    williamkeck
    Member

    @williamkeck

    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…

    WPyogi
    Forum Moderator

    @wpyogi

    Now I’m confused – that’s not a standard child theme set up. Where are you adding custom CSS code?

    WPyogi
    Forum Moderator

    @wpyogi

    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">

    williamkeck
    Member

    @williamkeck

    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
    williamkeck
    Member

    @williamkeck

    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

    WPyogi
    Forum Moderator

    @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

    WPyogi
    Forum Moderator

    @wpyogi

    Glad your found an easy solution :). Reading up on CSS a bit will likely be helpful too!

    williamkeck
    Member

    @williamkeck

    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…

Viewing 15 replies - 1 through 15 (of 20 total)
  • The topic ‘[Resolved] Change h1 tag in TwentyEleven’ is closed to new replies.