Need help? Check out our Support site, then

Add Tagline to Rubric

  1. I have the CSS upgrade. What code do I use to add a tagline to the Rubric theme?



  2. You could write a div in a text widget, something like this:

    <div id="mytagline">
    Your tagline here

    Then, in you CSS style it something like:

    #mytagline {
         position: absolute;
         top: [value];
         left: [value];

    You'd need to play with the values of the top and left properties. If it doesn't have it, add the "position: relative;" rule to the wrapper.


  3. Every time that I added the code to the text widget and saved it, the <div id="mytagline"> disappeared. I have something that works using code similar to above, but it looks different depending on the browser window size.

    Chris is the site.

  4. I remember now that ids in text widgets get stripped out. Instead of an id, try using a class.

    <div class="mytagline">
    Your tagline here

    and the CSS

    .mytagline {
         position: absolute;
         top: [value];
         left: [value];

    You'd still need to add the position: "relative;" rule to the wrapper definition.

  5. @devblog. Do you have a moment to look at this thread?

    I directed her over here because I think she might be able to use this coding to achieve the effect she wants but I'm not sure. You'd know better than me.

  6. Sure, I'll take a look at it.

  7. You'd still need to add the position: "relative;" rule to the wrapper definition.

    Can you please explain this? Thanks!

  8. I'll try to explain as best as I can...

    A child element with a position set to "absolute" will be positioned to the far top-left corner of the browser if its parent element lacks the "position: relative;" in its definition. But, if the parent element has it defined (position: relative;), then the child element will be position to the top-left of its parent element.

    See, for instance, the CSS code I gave to ruhi; I added the "position: relative;" rule to the #primary element definition. This is so the welcome message will be set absolutely to the top-left of the #primary sidebar. If the definition didn't have it, then the welcome message would've been displayed to the far top left of the browser... phew...

    I hope I was clear in my explanation...

  9. Clear as mud :) I think I understand that the child element here is .mytagline but I don't know what the parent element is. What I'm missing, I guess, is where to add that position in my CSS code since I don't see anything called "wrapper" in it and when I use the code above to include my tagline, the position doesn't hold. I tried the following code but it still doesn't work;

    #wrapper {
  10. Probably the theme you're using doesn't have a #wrapper element... Let me see what I can do...

  11. Try:

    #container {position: relative;}
  12. Thank you so much!

  13. Also, in you "@media print" you might want to take this out:

    div#wrapper {
    div#wrapper * {

    You don't have those elements in your theme, so these definitions are just taking space...


  14. devblog - you need a tip jar somewhere :) This worked perfectly. (My comment in between yours above must have been a little delayed in posting as I didn't see your answer until now.) I wondered if the container was where that needed to go (as I saw that's where you gave me the code for the image in the left corner).

    I really do appreciate your help.

  15. I spoke too soon :( The tagline moves when I click on a post, but it is fine on the front page. Is there something that would fix this?

  16. Let me rephrase - that happens in Firefox but not in IE.

  17. devblog - you need a tip jar somewhere

    Thanks, just pay it forward whenever you can.

    Let me see what's going on, and I'll let you know as soon as I have an answer.

  18. Vivian, it seems your single post page will need some tweaking. The #container is not enveloping the content and sidebar. Give me some more time and I'll see what I can do for you. I don't promise I will look into it today, though, but I'll do it in the next couple of days.

  19. Thank you! I really appreciate it.

    And by all means, I'll pay it forward. You can count on it :)

  20. I haven't forgotten about you, Vivian. I'll try to have the fix to your header as soon as I can.

  21. Thanks, devblog. I really appreciate it.

  22. Vivian,

    This cannot be fixed using CSS only because the single post page source code is messed up. The only way to fix it would be modifying the source code of the template itself.

    You see, on the front page, the structure of the elements are like this (which is correct);

    <div id="container">
    	<div id="content"></div>
    	<div id="sidebar"></div>
            <div class="clearleft"></div>
    <div id="footer"></div>

    But in the single post page it is like this (which is wrong):

    <div id="container">
    	<div id="content"></div>
    <div id="sidebar"></div>
    <div class="clearleft"></div>
    <div id="footer"></div>

    The sidebar is outside the container which affects how the container should envelop the content, that's why I said in one of my previous "#container is not enveloping the content and sidebar." Go figure.

    Since the tagline is in the sidebar, which is outside the container (in the sinlge post page), it will appear elsewhere in your header.

    Also, I noticed that this happens when you're logged in and the wp admin bar is displayed. If you logout, the tagline appears "as it should"...

    Your "Contact Me" page, there your tagline is displaying fine. The 'similar' thing I can see on your Contact Me page and your front page is that they don't have comments.

    This, for sure, needs to be fixed by Automattic, but let's try to diagnose the source of the problem a bit more. Do me a favor an try this:

    Write a test post and page but disable comments. If the tagline on those pages appear the way it should, activate comments on one of them and type something, if the tagline gets off place, then the way comments are handled by the software on this template is the reason for this issue.

    A solution to this problem (for your tagline, that is) is to create an image with your tagline in it and use it as a background image for your H1 element (like you did with your mermaid); so, something like this might do the trick:

    #container h1 {
         width: 400px;
         background: #fff url('path/to/tagline.gif') top right no-repeat;


  23. devblog - thanks so much for your help. Yes, the problem appears to be with the comments. I wrote a test page with the comments disabled - no problem with the tagline. As soon as I enabled comments, the tagline moved.

    I'll work on getting the image with the tagline in it up.

    Once again, I really appreciate your help on this

  24. By the way - I missed the part where you wrote about the problem not showing up unless you are logged in. That explains why I haven't gotten any complaints from my readers - because they aren't seeing it.

  25. My pleasure, have a grate weekend.

  26. devblog - thanks to your excellent help, the folks here at WP have fixed the problem.

Topic Closed

This topic has been closed to new replies.

About this Topic