- This topic is empty.
-
AuthorPosts
-
June 7, 2018 at 9:01 am #272242beginnersmindParticipant
Hey,
Newbie question: I want to assign a border to a specific piece of text on one specific page on my site.
Unfortunately, I can’t find an individual id for the div element, it’s called “text-content” which applies to all body text.
Can I give this div a new name and make it specific to the piece of text and then assign a new class to it? Where do I need to go to do that?
I only know basic CSS, but I don’t know where to assign a class to a div.
Here’s what it says right now:
div class=”text-content”I need it to say:
div class=”border-homepage”I hope this was clear – can you help me out? Thanks!
June 7, 2018 at 11:27 am #272282tomnoble92ParticipantWell it depends on your situation. Do you have access to the main style sheet or is it a wordpress theme. If you post the url we will be able help more.
June 7, 2018 at 11:46 am #272283Paulie_DMemberClasses are “assigned” in the HTML.
PRovided you have access to that HTML I’d suggest you ADD a class to the
text-content
div so that it becomes<div class="text-content border-homepage">
June 7, 2018 at 1:24 pm #272285beginnersmindParticipantHere’s my url: http://www.irisbarzen.com/
It’s a wordpress theme, I do have access to the editor. That’s basically my question, I don’t know where to edit the html. I know that’s a total begginer’s question, but that’s the stuff I find hard to find at Google. :)
If I use the code you provided, does that mean it would assign text-content the homepage-border class? I don’t want to edit the complete text-content div, since that would change all my body text. If you look at the homepage right now, I just want the paragraphs that start with this text to have a border: “Be productive without beating yourself up – while having enough time to enjoy your life (and start reading fiction again).”
June 8, 2018 at 4:06 am #272352Paulie_DMemberAs I said, if you are trying to select a single div generally you need to add a specific identifier in the HTML
Then that identifier can be used as a selector in the CSS.
So, if you have access to the HTML you can add an ID or class and then use that to target the CSS rule.
Other than that we are going to have to get really specific with out CSS selector…let have a look.
The text you refer to is actually an
h3
not a paragraph…and it’s inside thelanding-inner
div…..but there’s one of those on most of the pages but this one is on the homepage. Fortunately, WP adds a specific class (.home
) to those soooo….home .landing-inner h3 { border: 2px solid purple; padding: 2px; /* a little breathing room */ }
..would seem to get us there…but there are a lot of
h3
elements inlanding-inner
divs so we’ll have to get even more specific.So, there’s lots of
landing-inner
divs but this one is specifically the 2nd child of the#main
div sooo…..home #main :nth-child(2) .landing-inner h3 { /* notice the spaces */ border: 2px solid purple; padding: 4px; /* 4 px looks a little better - but that's a matter of choice */ }
Phew! :)
As you can see, accessing the HTML and adding an ID would be much simpler.
June 8, 2018 at 5:13 am #272353beginnersmindParticipantThank you! I figured out how to edit the HTML. Duh, it was in the HTML/text editor on the individual pages and posts. Now I feel silly for asking.
But thank you so much for your help, your answer was really well written aka easy to understand step by step. :)
June 8, 2018 at 6:46 am #272362beginnersmindParticipantOkay, now I’m trying to target another div using your method – it’s on a page where I can’t go into the html editor.
It’s on this page: http://www.irisbarzen.com/coaching/ I’m trying to target the text inside the first text box and change the fonts or make it an h3 instead of an h2.
Here’s what I’ve tried, what am I missing?
https://codepen.io/anon/pen/VdmGzJ
Thanks!
June 8, 2018 at 7:01 am #272363Paulie_DMemberI’d suggest using your Developer Tools to inspect the code.
That page has a class (added by WP) of
.page-id-4061
and go from there. -
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.