ptytomas Posted June 27, 2020 Share Posted June 27, 2020 Site URL: https://www.tradeway-global.com/blog/why-it-pays-to-visit-the-factory Hi there, I want to customise my blog posts. I want the title to be in a color and the rest of the content to be in a different color, as you can find in the attached screenshots. Right now, if I change the color, the whole post will change colors. Thank you Link to comment
tuanphan Posted June 28, 2020 Share Posted June 28, 2020 Add this to Home > Design > Custom CSS (affect all posts) .blog-item-title h1 { color: red !important; } .blog-item-content-wrapper * { color: green !important; } If you want to apply to certain post, edit post > Add Code Block > paste this code <style> .blog-item-title h1 { color: red !important; } .blog-item-content-wrapper * { color: green !important; } </style> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
rwp Posted June 28, 2020 Share Posted June 28, 2020 .blog-item-wrapper article.entry { padding-right: 0px !important; padding-left: 0px !important; } .blog-item-wrapper .blog-item-top-wrapper { padding-left: 4vw; padding-right: 4vw; } .sqs-block-content { padding-left: 4vw; padding-right: 4vw; } .blog-item-wrapper .sqs-block.html-block.sqs-block-html { background-color: antiquewhite; color: black; } #footer-sections .sqs-block.html-block.sqs-block-html { background-color: #2a3617; color: white; } Give that a go....... I think that's what you are looking for, we might have to do some more tweaking. Link to comment
ptytomas Posted June 28, 2020 Author Share Posted June 28, 2020 3 hours ago, rwp said: .blog-item-wrapper article.entry { padding-right: 0px !important; padding-left: 0px !important; } .blog-item-wrapper .blog-item-top-wrapper { padding-left: 4vw; padding-right: 4vw; } .sqs-block-content { padding-left: 4vw; padding-right: 4vw; } .blog-item-wrapper .sqs-block.html-block.sqs-block-html { background-color: antiquewhite; color: black; } #footer-sections .sqs-block.html-block.sqs-block-html { background-color: #2a3617; color: white; } Give that a go....... I think that's what you are looking for, we might have to do some more tweaking. Yes, that's exactly what I was looking for. However, there's still some tweaking I would like to do, can you help me? When I added a photo to my post, the photo is still under the green background, I would only the title to have the darker green background. I did a really quick photoshop concept to illustrate what I am talking about. Secondly, All of the text is in black, except for the first sentence, which is in h2 size. I would like it to also be black. Thank you so much for your help, I really appreciate it! Link to comment
rwp Posted June 28, 2020 Share Posted June 28, 2020 Unfortunately, I can't access that blog post anymore. Can you provide a link to another one? Please add in the CSS I provided so we can tweak it from there. Link to comment
ptytomas Posted June 28, 2020 Author Share Posted June 28, 2020 21 minutes ago, rwp said: Unfortunately, I can't access that blog post anymore. Can you provide a link to another one? Please add in the CSS I provided so we can tweak it from there. Hey there! I really apologize for taking the link offline. Here is the link for the blog post. https://www.tradeway-global.com/blog/why-it-pays-to-visit-the-factory So basically, with the default settings, the background is in a beige tone, I want the title part to be in green. Thank you for your help and for your time! Link to comment
rwp Posted June 28, 2020 Share Posted June 28, 2020 Unfortunately, the only way I know how to do it is to have the background be green and then turn the rest tan. If you can put the code in that I provided, so I can see the issues, we can probably straighten it out. Link to comment
ptytomas Posted June 28, 2020 Author Share Posted June 28, 2020 28 minutes ago, rwp said: Unfortunately, the only way I know how to do it is to have the background be green and then turn the rest tan. If you can put the code in that I provided, so I can see the issues, we can probably straighten it out. Ok, I have just done that. So now we need to figure out how to get the text that says "Here are the 17 reasons" in black and then get the background of the photo in tan. Once again, thank you very much! Link to comment
rwp Posted June 28, 2020 Share Posted June 28, 2020 Making the font black: .blog-item-content-wrapper .preFade.fadeIn { color: black; } can you send me a screen shot after you add that? Link to comment
ptytomas Posted June 28, 2020 Author Share Posted June 28, 2020 Yes, that solved the issue! Thank you very much! Here's the screenshot from another one of my scheduled blog posts. Now my last question is, on the blog page, where it shows all my blog posts, I want the background to be tanned. This is the page that I am talking about https://www.tradeway-global.com/blog . You will find a screenshot for what I want to do. Thank you! 12 minutes ago, rwp said: Making the font black: .blog-item-content-wrapper .preFade.fadeIn { color: black; } can you send me a screen shot after you add that? Link to comment
rwp Posted June 28, 2020 Share Posted June 28, 2020 Try this, its acting a bit weird on my end, but sometimes it works when the code is actually in place. .blog-basic-grid.collection-content-wrapper { background-color: tan; margin-left: 0px !important; margin-right: 0px !important; } .blog-basic-grid--container.entry.blog-item.is-loaded { padding-left: 4vw; padding-right: 4vw; } Link to comment
ptytomas Posted June 29, 2020 Author Share Posted June 29, 2020 19 hours ago, rwp said: Try this, its acting a bit weird on my end, but sometimes it works when the code is actually in place. .blog-basic-grid.collection-content-wrapper { background-color: tan; margin-left: 0px !important; margin-right: 0px !important; } .blog-basic-grid--container.entry.blog-item.is-loaded { padding-left: 4vw; padding-right: 4vw; } For the sake of simplicity, I decided to give up on changing the colours of the blog posts. However, I still want the grid to be in another color. As of now, I am only using the following code: .blog-basic-grid.collection-content-wrapper { background-color: #f2f6ea; margin-left: 0px !important; margin-right: 0px !important; } I want the text to be in black instead of white. If I can get that working, that will be perfect already. Thank you Link to comment
rwp Posted June 29, 2020 Share Posted June 29, 2020 Add in these 3 things .tweak-blog-basic-grid-width-inset .blog-basic-grid { max-width: unset !important; } .blog-title.preFade.fadeIn { color: black; } .blog-date.preFade.fadeIn { color: black; } Link to comment
ptytomas Posted June 29, 2020 Author Share Posted June 29, 2020 49 minutes ago, rwp said: Add in these 3 things .tweak-blog-basic-grid-width-inset .blog-basic-grid { max-width: unset !important; } .blog-title.preFade.fadeIn { color: black; } .blog-date.preFade.fadeIn { color: black; } That's perfect! Works like a charm, thank you for your help 🙂 Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.