Good morning.
I’m searching how I can change the text color of my posts in my blog or, if I need it, in all text inside my site, but I can’t find it in the Visual page.
I’d like to know if there is a specific field in the wordpress platform or X-theme masks where I can set the color in a simple way (dimension, font style e color) without a using CSS instructions, because I think that it’s important to change a style text in a site or blog in un a short a user-friedly way. I have seen the Toolbar Toggle bottom, but I can’t see the color used in the present moment neither the font and the dimension of the text, so, if I change the color using the Toolbar Toggle bottom… I can’t reset the original color of the posts if I need to do it. That’s why I want before listen to you.
I want to specify an important thing: The color is perfect if I see my blog on the mobile phone, and I don’t want to change it at all. BUT in the PC the posts text color is to much light, very different compared to the color that I see on the mobile phone. So, my problem is bigger than a simple modification of the color. I’d like to have on the PC the same color that I see on the mobile phone. On the mobile phone the color is a beautiful gray, but on the PC the color is a gray so light that it’s almost difficult read a post.
Is it possible to have the same gray on the PC view that a I see on the mobile phone for the posts in my blog and eventually change it also inside the sidebar? Or, how can I change the intensity of the gray color that I see on my computer for the posts without change the perfect color that I see on the mobile phone? With “inspector” I have seen that the color used in the text inside the sidebar and the blog is this #7a7a7a, and it is to much light ONLY on the PC visualization. In the mobile phone it is more dark and it is perfect for reading well a post.
The same problem I have with the dimension of the text: on the mobile phone it’s perfect when I read a post, but on the PC it’s smaller, to much light and small that I can’t read a post in a confortable way.
Thank you for helping me.
Best regards
Hey Patrizia,
Regretfully, there is no option anywhere to change colors per screen size. You will need custom CSS for that. But, I’d recommend that you consider changing #7a7a7a to a darker tone because it’s really light. It’s in the middle of white and black so it doesn’t have good contrast.
It might just look fine in your phone because maybe of color enhancement features but for other phones which does not have that feature, it might be light as well. There is no way to take into account what your website users screen features would be. Some will have high contrast and some might have washed out screen.
The best practice in web design also is to use a global contrast and not set contrast per screen for the reason I said above that you have no way to take into account device screen features.
If you still want to change colors, you will need to use CSS Media Queries. If you give us the page URL and a screenshot of the text, we might give you a sample custom CSS. Just note that providing custom code is not a part of our support service. You will need to take the sample and learn CSS so you can use it per your requirements.
Thanks.
First of all, thank you Christian for answer me.
My site is: hagarlane.com and as you can see there is a big difference between the good visibility of the test in the mobile phone and in a PC. I’m reffering to the Hagar Blog page. If you see the demo posts that I have imported and I want to change them with my first posts (I’m using the Ethos1 template in the X-Theme) the text is smaller and lighter, to much smaller and lighter for a confortable reading by a user. I’d like to have (also with a CSS code, because I know that it’s enoght to put the instruction on the CSS custom global page) the text on the main sidebar and the text of my post a little more dark and bigger or noone can read my site on the PC because it’s no confortable.
I know that X-Theme was created as a perfect responsive theme, and that means that I can’t have the style (dimension and color) text so different between the PC visualization and the mobile phone visualization, or it isn’t created as responsive theme, but as a theme perfect for mobile phone visualization. But I chosed X-Theme because I didn’t want problems with this specific aspect: PC and mobile phone visualization, in order to customize it fast and start with the most important activity: insert my posts. The color is perfect on the header because the background color is dark, but the same color is to much light in the sidebar and in the text of the posts because the backgroud color is white, so I think it is logical to set a color more dark where the background color is white or there isn’t the foundamental contrast.
Thank you.
Here’s a sample code to change the content’s and sidebar elements’ color to black from portrait tablet screen size and above. Insert the code in X > Theme Options > CSS.
@media (min-width:979px) {
body,
.x-sidebar * {
color: #000 !important;
}
}
You can change the color value in the code.
Regarding your concern about the font being small in desktop but looks OK in mobile, you can set a larger font-size per predefined screen size in X > Theme Options > Typography
Hope that helps.
Thank you so much for your answer.
I have tested right now your code and it is PERFECT for my Pc.
Thank you a lot.
For the dimension the problem is the same, isn’t it?
If I use the Typography section in X-Theme Option I have seen that it change the dimension also on the mobile phone, and the text is too big. If I want to increase the dimension only on my PC I have to use another instruction in CSS, right?
I have insert the instruction font-size as I write below and now my sidebar is perfect in dimension and color (dark gray), but the dimension and the color of the text inside the posts aren’t change at all. Can you help me, please, in order to change also the text inside the posts and not only inside the sidebar? If I use Typography is a disaster because it increase the dimension ALSO in the mobile phone, and it becames too big.
@media (min-width:979px) {
body,
.x-sidebar * {
color: #5A5A5A !important;
font-size: 16px
}
No, that will change the font size of your mobile view also and you won’t be able to take advantage of the Responsive Typography of X.
If you take a look at the Typography Font Size screenshot, you will see that you can set the font size for each screen widths. The extra small view which is a small phone is the XS size. Your phone might be in the SM to MD range so please test setting them to 14 so they remain the same size as before which is the default.
The desktop size starts from LG to XL so that is the one you need to change if you’re only concerned about making the font size big in desktop screens.
Thanks.
THANK YOU CHRISTIANNNNN 
Now everithing is perfect, as you wrote to me.
I was afraid that in the X-Theme was impossible customize in a different way for differente screen, but lucky it isn’t so, and in Typography I can customise some things (the most important things).
Now it works perfect in the PC screen and in my mobile.
THANK YOU!!!
Best regards
You’re most welcome, Patrizia.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.