Style . css changes don't take effect?

Hello,

According to this site WP Beginner

I need to paste this code (Below) on my child theme’s style . css page to style my archive page? When I do nothing changes?

My Archives page under development - https://www.waterstreetgallery.co.uk/archives/

Thanks

ul.bycategories {
margin: 0;
padding: 0;
}
ul.bycategories li {
list-style: none; 
list-style-type: none;
margin: 0; 
padding: 0;
}
ul.bycategories li a {
list-style: none; 
list-style-type: none;
margin: 0 20px 15px 0; 
float: left; 
background: #eee; 
color: #464646; 
padding: 5px 10px;
border-radius: 5px; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px;
}
ul.bycategories li a:hover{
text-decoration: none; 
background: #ff6200; 
color: #fff;
}
.clear{clear: both;}

Hi @outer_net,

thanks for writing in.

First, you need to setup child theme.

then you can follow the thread below on how to customize using child theme.

If still not helping, please share us your FTP. admin credentials and disabled your plugin that prevent us from doing inspect element or viewp page source.

Don’t forget to set it in a secure note.

Thanks.

Hello,thanks for the reply,

I have already created a child theme and got the custom template archive page set up. When I apply style it has no effect

Hi There,

Base on your custom CSS above, you’re styling a <ul> tag with a class of bycategories. But I’ve checked the site and found none of the <ul> tags on this page has the class bycategories so it did not affect them. Add the class to the <ul> tags.

e.g.

<ul class="bycategories">
	<li>Some content here</li>
	<li>Some content here</li>
	<li>Some content here</li>
</ul>

Hope it helps,
Cheers!

Thanks,

I have tried this in Global and specific page CSS ( What is the difference? Specific page is that page alone?)

<ul class="bycategories"> {
margin: 0;
padding: 0;
}
<ul class="bycategories"> li {
list-style: none; 
list-style-type: none;
margin: 0; 
padding: 0;
}
<ul class="bycategories"> li a {
list-style: none; 
list-style-type: none;
margin: 0 20px 15px 0; 
float: left; 
background: #eee; 
color: #464646; 
padding: 5px 10px;
border-radius: 5px; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px;
}
<ul class="bycategories"> li a:hover{
text-decoration: none; 
background: #ff6200; 
color: #fff;
}
.clear{clear: both;}

Is this the correct code now?

Thanks

Sorry:

<ul class="bycategories"> {
margin: 0;
padding: 0;
}
<ul class="bycategories"> li {
list-style: none; 
list-style-type: none;
margin: 0; 
padding: 0;
}
<ul class="bycategories"> li a {
list-style: none; 
list-style-type: none;
margin: 0 20px 15px 0; 
float: left; 
background: #eee; 
color: #464646; 
padding: 5px 10px;
border-radius: 5px; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px;
}
<ul class="bycategories"> li a:hover{
text-decoration: none; 
background: #ff6200; 
color: #fff;
}
.clear{clear: both;}

Hi again,

Try replacing your code with the following code:

ul {
margin: 0;
padding: 0;
}
ul li {
list-style: none; 
list-style-type: none;
margin: 0; 
padding: 0;
}
ul li a {
list-style: none; 
list-style-type: none;
margin: 0 20px 15px 0; 
float: left; 
background: #eee; 
color: #464646; 
padding: 5px 10px;
border-radius: 5px; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px;
}
ul li a:hover{
text-decoration: none; 
background: #ff6200; 
color: #fff;
}
.clear{clear: both;}

Hope this helps!

@outer_net,

If you changed it in the global css, where exactly did you edit this?

Did you add the style or did you edit the style?

I was able to use the FF Developer inspector tool and edited it successfully “in page” on the browser - that is why I am asking…

I am not sure how proficient you are at css editing, but you might be editing in an area where the cascade is nullifying your edits… just a guess at this point…

I don’t want to ask the cache questions because I am guessing that you have cleared your cache or used a different browser etc… already…

Message me directly if you like :slight_smile:

Felix

@outer_net,

As mentioned by @Felixius, CSS is one of those things that while simple on the surface, it can quickly become more difficult to figure out how to get styles overwriting one another if things aren’t structured properly. Always keep the “cascade” in mind when writing CSS. For example, if something is styled using:

ul.custom-selector {
  /* styles here */
}

And you try to style it with the following:

.custom-selector {
  /* styles here */
}

The second style will not take effect because the weight of the first one is more since it is using the p tag as part of the selector. There is a bit more to all of this, but this is a really great article you can check out that explains “selector specificity” really well:

Also, at one point your screenshots were showing you using some HTML markup within your CSS. Remember the syntax for CSS references aspects of HTML, but doesn’t mirror it. So if you wanted to style an element <ul class="custom-selector"> with CSS, you would not use that literal tag name in the CSS selector. Instead, you could use the following:

ul.custom-selector {
  /* styles here */
}

Finally, where your CSS is being output matters a great deal as well. For example, if you setup your CSS in a child theme as mentioned by @nico and place all your styles in the theme’s style.css file, if you utilized the same CSS selectors in the page level CSS editors in our tool, that page level CSS would take precedence over the style.css styles because CSS on a page has a higher specificity.

I just wanted to give you a little more background to take with you while you make edits to your theme. Of course, we are certainly here to assist you should you need anything further, but I just wanted to try and help give you a little more context for making edits when you need moving forward.

Hopefully that all helps to point you in the right direction, cheers!