Add Tagline to Rubric

  • Author
    Posts
  • #177140

    cbgiammona
    Member

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

    Thanks

    Chris

    #177476

    devblog
    Member

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

    <div id="mytagline">
    Your tagline here
    </div>

    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.

    HTH

    #177564

    cbgiammona
    Member

    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
    cbgiammona.wordpress.com is the site.

    #177565

    devblog
    Member

    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
    </div>

    and the CSS

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

    You’d still need to add the position: “relative;” rule to the wrapper definition.

    #177567

    rosclarke
    Member

    @devblog. Do you have a moment to look at this thread? https://en.forums.wordpress.com/topic.php?id=19651&page&replies=9#post-151295

    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.

    #177568

    devblog
    Member

    Sure, I’ll take a look at it.

    #177637

    vivianpaige
    Member

    You’d still need to add the position: “relative;” rule to the wrapper definition.

    Can you please explain this? Thanks!

    #177640

    devblog
    Member

    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…

    #177643

    vivianpaige
    Member

    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 {
      position:relative;
    }

    #177644

    devblog
    Member

    Probably the theme you’re using doesn’t have a #wrapper element… Let me see what I can do…

    #177645

    devblog
    Member

    Try:

    #container {position: relative;}
    #177646

    vivianpaige
    Member

    Thank you so much!

    #177647

    devblog
    Member

    Also, in you “@media print” you might want to take this out:

    div#wrapper {
    	width:100%;
    }
    
    div#wrapper * {
    	width:auto;
    }

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

    HTH

    #177648

    vivianpaige
    Member

    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.

    #177649

    vivianpaige
    Member

    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?

    #177650

    vivianpaige
    Member

    Let me rephrase – that happens in Firefox but not in IE.

    #177651

    devblog
    Member

    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.

    #177652

    devblog
    Member

    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.

    #177653

    vivianpaige
    Member

    Thank you! I really appreciate it.

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

    #177663

    devblog
    Member

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

The topic ‘Add Tagline to Rubric’ is closed to new replies.