Archived topic
Changing Link Color & Spacing on Posts & Post Achieve Pages
7 replies · Started by Eric on June 26, 2021
Hi, I'm wanting to change some style settings, such as the color of my links, color of link hover, and the spacing between lines.
The thing is, I only want to change these settings for my blog pages (I've relocated my main blog page to a category page). And so the blog posts are all posts with that same category. I can't figure out how to change these settings for these pages, without affecting the settings for the rest of my site. I tried using elements to create a template, but that only let me change the content width.
How do I change these style settings for a specific subset of my pages? Thanks!
Hi there,
WP outputs category-your_term_slug Classes that can be used in your CSS. eg. a Category term of tutorial will output category-tutorial
For category archives that class is added as a body_class to the <body> of the HTML and on single posts and blog page it is added as a post_class to the <article> element.
So the same class but in two different places.
As long as we're dealing with just text and links in the content you can do this:
/* Change line-height of text */
.category-tutorial p {
line-height: 2em;
}
/* Change link color */
.category-tutorial p a {
color: #ff0000;
}
/* Change link hover color */
.category-tutorial p a:hover {
color: #00ff00;
}
If that doesn't work then we have other CSS at play and i would need to see a link to the relevant archive.
This solution works great for me! I'm still struggling to find the right way to add padding to the right and left for these pages. I tried .category-sex-love content and .category-sex-love body, but these didn't work.
I am also struggling to add a margin to the bottom of my images. I tried .category-sex-love size-large, but no luck. I'm not that great at css yet.
Hi there,
This solution works great for me! I’m still struggling to find the right way to add padding to the right and left for these pages. I tried .category-sex-love content and .category-sex-love body, but these didn’t work.
I am also struggling to add a margin to the bottom of my images. I tried .category-sex-love size-large, but no luck. I’m not that great at css yet.
.category-sex-love body won't work because the selector is a class of <body>.
Also, we can't be sure if the actual slug exists unless we check it for ourselves. If you can link us to a sample page in question and point us to the specific elements within the page, we can help you out with the writeup. :D
Here is a link, not all of the changes I've made will be reflected because we have multiple layers of caching, but you shouldn't need that to help me.
Also, I should warn that this site has adult content, but nothing explicit at this URL: https://emmassexstore.com/sex-love/the-truth-about-g-spot-its-not-just-a-myth-and-it-improves-lives/
I want to add padding 20px to the left and right of the content, and I want to add a margin of some amount below each included image.
Also, I have a few other modifications I want to make to my blog pages, should I make a new thread or ask those questions here as well? Thanks so much!
Thanks.
I've checked the page and .category-sex-love exists.
If you're trying to style an element within articles under this category, you can do something like this:
example #1: on :hover links under sex-love category.
.category-sex-love a:hover{
color: pink;
}example #2: adding padding to the whole content area.
.category-sex-love > .inside-article{
padding: 0 20px;
}example #3: adding margin bottom to image blocks.
.category-sex-love .entry-content > figure.wp-block-image {
margin-bottom: 20px;
}Works perfectly. Thanks!
No problem. glad to be of any help. :D
