WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Change h1 tag in TwentyEleven (21 posts)

  1. williamkeck
    Member
    Posted 1 year ago #

    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

  2. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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?

  3. Jose Castaneda
    Member
    Posted 1 year ago #

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

  4. williamkeck
    Member
    Posted 1 year ago #

    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 ;)

  5. williamkeck
    Member
    Posted 1 year ago #

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

  6. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    This works in Firebug:

    .entry-title, .entry-title a {
       background-color: XXXXXXpx;
       margin-left: -100px;
    }
  7. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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.

  8. williamkeck
    Member
    Posted 1 year ago #

    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 :(

  9. williamkeck
    Member
    Posted 1 year ago #

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

  10. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

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

  11. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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">
  12. williamkeck
    Member
    Posted 1 year ago #

    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
  13. williamkeck
    Member
    Posted 1 year ago #

    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

  14. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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
  15. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

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

  16. williamkeck
    Member
    Posted 1 year ago #

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

  17. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    No problem, I certainly would avoid plug-ins when possible and for CSS, it's just a question of getting the basics. Looks like that background is being overridden by this:

    .entry-content h1

    so try changing your new style to:

    .entry-content h1.tab {
    ...
    }

    Are you using Firebug to work with the CSS -- if not, you're making this much harder for yourself :) !!

  18. williamkeck
    Member
    Posted 1 year ago #

    WPyogi, I got the background to change using the first block of the code below, but when I add the second block for arrow and I do a span in the tag, it just doesnt show up... check it out...

    .entry-title, .entry-title a {
      background-color: #e3e3e3;
      padding:  10px 40px;
      margin-left: -100px;
      position:relative;
      width:90%;
      font-size:60;
    }
    
    .entry-title, .entry-title .arrow {
      width:0;
      height:0;
      line-height:0;
      border-left: 20px solid transparent;
      border-top: 10px solid #c8c8c8;
      top: 100%;
      left:0;
      position:absolute;
    }

    and in the page...

    <h1>The Snapshot <span class="arrow"></span></h1>

    You are seriously my hero right now. You have helped me come so far. I shall drink a pint in your honor.

  19. williamkeck
    Member
    Posted 1 year ago #

    And if I do the same thing but only add color:red; in the arrow class, it changes the text to red. I dont understand why a span would override the color of the text that came before it...

  20. williamkeck
    Member
    Posted 1 year ago #

    okay, i finally did it. Holy Crap!!! I was making such a silly error. i was doing everything around within the page and I needed to change it in the content-page ...

    Okay. Resolved.

  21. williamkeck
    Member
    Posted 1 year ago #

    Resolved.

Topic Closed

This topic has been closed to new replies.

About this Topic