WordPress.org

Forums

[resolved] [Theme: Twenty Eleven (Child)] Change look and lay-out "More" Tag (20 posts)

  1. pucklitaay
    Member
    Posted 2 years ago #

    I've read the codex and searched the internet but can't seem to change the lay-out of my more tag on my blog. I want to align it in the entre, change the font and etc.

    Something like this: click or this manrepeller.com.

    My blog is oneofpoints.com. Is there any way to do this? I use a child theme.

  2. Andrew
    Nuh uh moderator
    Posted 2 years ago #

    For CSS-specific issues, you should be researching CSS issues not WordPress issues
    http://www.w3.org/Style/Examples/007/center.en.html

  3. pucklitaay
    Member
    Posted 2 years ago #

    I do know how to centre it and how to change a font - I just don't know what part to modify in the style.css of my child theme to make the more tag change :)

    Sorry if this wasn't clear, do you have any idea how to do this?

  4. Andrew
    Nuh uh moderator
    Posted 2 years ago #

    Yeah, display it block and text align it center.

  5. pucklitaay
    Member
    Posted 2 years ago #

    Thanks, but I mean what part of the style.css do I modify? Like h3, h6 - what part in my style.css relates to the more tag?

  6. Andrew
    Nuh uh moderator
    Posted 2 years ago #

    It's probably in the parent stylesheet, in which case you'll need to write the new style in your Child Theme stylesheet.

  7. pucklitaay
    Member
    Posted 2 years ago #

    I can add it to the stylesheet of my child theme. But do I write an entire new part or can I take something out of the parent stylesheet? If not, what do I add to the Child stylesheet and how do I connect it to my current more tag?

  8. Andrew
    Nuh uh moderator
    Posted 2 years ago #

    Try using a browser developer tool for this kind of exploratory CSS work.
    I use Google Chrome's built-in Developer Tool and it's really easy to expose the webpage's underlying HTML and CSS.

    Once you know the style, from being exposed by the Developer Tool, you can add a new style to override it.

  9. pucklitaay
    Member
    Posted 2 years ago #

    I tried, it says class="more-link" but I can't find it in the style.css of the parent theme..

  10. Andrew
    Nuh uh moderator
    Posted 2 years ago #

    The Developer Tool is only supposed to expose the HTML and CSS.
    You shouldn't need to go looking for the CSS in the original stylesheet.
    You should instead go forth and create new styles from that information you received when the Developer Tool exposed HTML and CSS.

    Post here the CSS you're trying in your Child Theme style.css file if it still doesn't work.

  11. pucklitaay
    Member
    Posted 2 years ago #

    I tried to add this to my stylesheet but it doesn't seem to work:

    #more-link {
     font-family: 'Times New Roman', serif; !important;
     font-size: 20px !important;
     text-transform:uppercase;
     color: #000 !important;
     display:block;
     line-height:3.333em;
     text-decoration:none;
     padding:0 1.2125em;
    }
  12. Andrew
    Nuh uh moderator
    Posted 2 years ago #

    Remember, more-link is a class.

  13. pucklitaay
    Member
    Posted 2 years ago #

    I'm sorry, I'm not quite sure I know what you mean. Why wouldn't this work? The developer shows me that the more link is connected to something like this.

  14. Andrew
    Nuh uh moderator
    Posted 2 years ago #

    Classes and IDs are called differently in CSS http://www.w3schools.com/css/css_id_class.asp

  15. pucklitaay
    Member
    Posted 2 years ago #

    So I need to use an ID other then a class? :) How do I find the ID then - I'm sorry for all these questions hah.

  16. Andrew
    Nuh uh moderator
    Posted 2 years ago #

    You have an ID already, the ID is represented by the hash tag.
    You need to use a class.

  17. pucklitaay
    Member
    Posted 2 years ago #

    How do I create a class then?

  18. Andrew
    Nuh uh moderator
    Posted 2 years ago #

    Use a full stop character.

  19. pucklitaay
    Member
    Posted 2 years ago #

    Hm, I really don't get it. The code looks like this now:

    a. #more-link {
     font-family: 'Times New Roman', serif; !important;
     font-size: 20px !important;
     text-transform:uppercase;
     color: #000 !important;
     display:block;
     line-height:3.333em;
     text-decoration:none;
     padding:0 1.2125em;
    }

    But nothing works ):

  20. Andrew
    Nuh uh moderator
    Posted 2 years ago #

    It's worth taking a read through that W3schools resource I posted.

Topic Closed

This topic has been closed to new replies.

About this Topic