Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
For CSS-specific issues, you should be researching CSS issues not WordPress issues
http://www.w3.org/Style/Examples/007/center.en.html
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?
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Yeah, display it block and text align it center.
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?
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
It’s probably in the parent stylesheet, in which case you’ll need to write the new style in your Child Theme stylesheet.
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?
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
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.
I tried, it says class=”more-link” but I can’t find it in the style.css of the parent theme..
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
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.
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;
}
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Remember, more-link is a class.
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.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Classes and IDs are called differently in CSS http://www.w3schools.com/css/css_id_class.asp
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.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
You have an ID already, the ID is represented by the hash tag.
You need to use a class.
