Archived topic
use css only on blog page
3 replies · Started by Ignacio on December 17, 2020
Hello, first of all I apologize if the wording of the question is not good, I have used the google translator. I would like to know what is the way to add css to the blog page without affecting the rest of the web pages. Everything is already designed and the page that shows the entries shows the images, texts and titles without margin.
I have added the necessary css to the images, paragraphs and titles from customize> additional css using the ip of the blog page and it was as I need, but they are transferred to the entire web.
I found the following advice from Tom on the forum:
"If you're going to target CSS for blog only, you need to add it to global CSS (Appearance> Simple CSS) with the .blog selector:
.blog .my-selector,
.archive .my-selector {
/ * CSS in here will show up on your main posts page and archives * /
} "
I have tried it too, but the changes continue to apply to the rest of the web.
what I want to apply only to the blog post page is the following.
img {
margin-left: 20px; margin-right: 20px; margin-bottom: 0px;
}
p {
margin: 30px; text-align: justify;
}
h2 {
margin: 30px; text-align: center;
}
How can I make it only apply on the blog?
Hi Jose,
It's tough for me to provide the best answer without seeing the site in question.
Give this a shot first, try to replace your css with this:
.blog img, .archive img {
margin-left: 20px;
margin-right: 20px;
margin-bottom: 0px;
}
.blog p, .archive p {
margin: 30px;
text-align: justify;
}
.blog h2, .archive h2 {
margin: 30px;
text-align: center;
}If this doesn't help, could you please provide the site link in the private info field?
Let me know :)
It has worked perfectly. Thanks a lot.
You are welcome :)
