Add Tagline to Rubric

  • cbgiammona · Member ·

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

    Thanks

    Chris

  • 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

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

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

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

  • devblog · Member ·

    Sure, I’ll take a look at it.

  • vivianpaige · Member ·

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

    Can you please explain this? Thanks!

  • 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…

  • 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;
}
  • devblog · Member ·

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

  • devblog · Member ·

    Try:

    #container {position: relative;}
  • vivianpaige · Member ·

    Thank you so much!

  • 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

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

  • 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?

  • vivianpaige · Member ·

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

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

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

  • vivianpaige · Member ·

    Thank you! I really appreciate it.

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

  • devblog · Member ·

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

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