How do I know what to label my CSS?
-
How do I determine what I need to label my CSS so that particular CSS customizes the correct thing? I know that you need to look at the html of the site by going to the inspector, but how do I know what would be the right tag to select that will customize what I’m looking to customize. Sometimes I get lucky and guess the correct one. There is so many things I want to customize but I just don’t know what to label by different CSS elements.
Many Thanks!
-
If you reply with the link to your site and an example or three of what you’d like to change I can give you a step-by-step guide to tracking down the CSS you need. Hopefully that will help you the next time you find something you want to alter.
Having said that a lot of it is just practise, practise and more practise. It helps being pretty familiar with how WordPress themes are usually set up and an up-to-date knowledge of CSS and HTML goes a long way too.
-
Here is the link: https://greenoasisco.wordpress.com/
Like say I wanna add a text box around the text on top of the main photos.
Increase the “committed to you” title
I would also like to have my menu on the top fixed but everytime I do that the image under it moves up and behind the now fixed menu and gets cut off.
Thank you!
-
OK here goes!
I’m using FireFox on a Mac so it might be a bit different for you but hopefully you can still follow along. I’m assuming you have a working understanding of HTML and CSS and it’s the exploration and practical bit you need help with.
Like say I wanna add a text box around the text on top of the main photos.
First off, right click and inspect element on the title text you’re talking about. This will pop out the toolbar and focus in on the element in question. If you hover your mouse over it in the inspector pane it should be highlighted in the main window. The anchor element just highlights the title so mouse up the page to the parent element (in this case the h1 tag), that’s no better so once more to the div and bingo, this highlights the title and description.
Now there’s going to be a lot of divs on the page so this doesn’t help us much but there are a couple of classes which should narrow things down. They are “twelve” and “column”. Now classes can be reused anywhere on the page and these sound a bit generic so just to be safe we’ll look up the list of parent elements to find an ID (which has to be unique). All the way up at the section tag there’s an ID of “featured-content” so we’ll go with that.
Now we build the CSS by switching to the style editor tab of the toolbar. You already have some custom CSS so I scroll through the list of style sheets to find it (it’s always just called / and, in this case, has 20 rules) and then add our code to the bottom:
#featured-content .twelve.column { border: 3px dashed #f00; padding: 10px; }I’ve made the border gross and obvious to see if it works and thrown in some padding because it was sitting a bit too close to the text but other than that it’s looking good. Now you can cut it from the toolbar and paste it into your custom CSS. It’s always good to preview it on a few posts or pages to make sure it’s not targeting anything unintended. You can’t do this in the toolbar as it forgets the manually entered CSS every time you navigate to a new page.
Increase the “committed to you” title
Follow the same method as above and you should get something like this:
.services.title h2 { font-size: 4em; }Not so great, this is also affecting the “Services” title in the section above as they share the same classes and HTML structure. If you’ve not heard of it before we’re going to use the CSS nth-child pseudo class. Now the div containing our title is 5th in a row of 8 inside another div with the class “entry-content”. The new CSS would look like this:
body.home .entry-content div:nth-child(5) .services.title h2 { font-size: 4em; }You’ll also notice that I’ve included one more selector at the beginning to apply this only to the home page (just in case the theme has a similar layout on another page you don’t want to change). Every theme has the class “home” for the homepage, this is just one of the things you’ll pick up as you familiarise yourself with WordPress.
I would also like to have my menu on the top fixed but everytime I do that the image under it moves up and behind the now fixed menu and gets cut off.
Now I’d love to help you with this but based on your theme I can’t find a good way to do it.
I’ll talk you through the steps anyway. It sounds like you’ve already tried using the following to fix the menu/title bar:
#masthead { position: fixed; }But a position of “fixed” bumps the remaining page content upwards as if the header section had never existed. You can fix this by applying some padding to the top of the next element. Now on the homepage that can be done with:
.fc-contain { padding-top: 115px; }I found the pixel value by inspecting the header and then selecting Box Model in the right hand pane to calculate the height it took up.
The problem with your theme is that there isn’t a standard selector that appears next in the HTML on all your pages and I’m not familiar enough with the theme to confidently cover all bases.
The best I can suggest is for the homepage, regular pages and posts like so:
body.home .fc-contain, body.page #breadcrumbs, body.post #content { padding-top: 115px; }I haven’t touched on what to do if you have a declaration that should work but doesn’t. This is normally because of CSS specificity – some rules trump others based on how many of each type of selector is used (ID trumps class trumps element). You can see which style is applied in the Rules section of the right hand pane of the toolbar. Active ones are normal, overridden ones are crossed out. If this ever happens your best bet is to copy the current selectors or find a few more IDs to make your rules more specific.
Let me know if you have any specific questions about any of the steps. I can take a screenshot or two if any of it is completely bewildering.
-
Awesome you rock! Very good explanation. One thing is that nth-child class still effects both titles instead of only the “Committed To You”?
-
I’m glad it’s not too confusing. It works for me although I might have made a mistake somewhere, there are a few browser compatibility issues depending on what setup you’re using but I don’t think that’s likely to be the cause. Did you copy the code in exactly?
-
Yes I copied everything exactly. I played around with it a little bit but everything I tried still caused other things to change with it.
-
I’m not sure what to suggest next. If you put it back in your CSS and save it so I can take a look while it’s live I might be able to find out what’s causing the issue. But that’s only if you don’t mind any visitors seeing 2 giant blocks of text for a bit while we work on it.
-
https://greenoasisco.wordpress.com/
Yeah that’s no problem. Nobody is on the site yet anyway, we’re not even close to done with it. I copied it in exactly as you showed and what is on the screen is what it does. It doesn’t do anything at first but when I play with the CSS code things change but just not the one thing I want to change.
-
It looks good from here, I see 48px for “Services” and 64px for “Committed To You”.
It sounds like it’s a problem with your browser, it’s remembering the old styles and not quite refreshing correctly. Try hitting F5 or whichever the refresh key is or clearing the cache or just quitting the browser and restarting it. Viewing it in a separate browser should display it properly as well.
-
-
Is there any way to narrow the entire width of that “Services” and “Committed” section? I can’t find the proper selector to do it. Figured I’d ask since your on a role.
-
-
I did something like this
.features {
max-width: 80%;
}That changes the width but then i cant get that section centered in the webpage.
-
Yeah that’s pretty close, I did the same and then, mostly just hoping for the best, selected the next div down and that seemed to work. Also setting max-width is a good idea so it isn’t weirdly thin on mobiles or tablets. Here’s the final code:
.features div { max-width: 1000px; }
- The topic ‘How do I know what to label my CSS?’ is closed to new replies.
WordPress.com Forums 
