{"id":246,"date":"2024-06-20T00:15:06","date_gmt":"2024-06-20T00:15:06","guid":{"rendered":"https:\/\/www.yellowfalconmedia.com\/blog\/2024\/06\/20\/help-to-modify-css-in-wordpress-sitepoint\/"},"modified":"2024-06-20T00:15:06","modified_gmt":"2024-06-20T00:15:06","slug":"help-to-modify-css-in-wordpress-sitepoint","status":"publish","type":"post","link":"https:\/\/www.yellowfalconmedia.com\/blog\/2024\/06\/20\/help-to-modify-css-in-wordpress-sitepoint\/","title":{"rendered":"Help to modify CSS in WordPress – SitePoint"},"content":{"rendered":"

Could you help me find in this CSS file what I need to modify so that the underlined titles (h2, h3, etc.) have the correct line spacing for easy reading and so that the font size of the paragraph is like what it looks like now (currently, I have to add the HTML tag <p class=\"has-text-align-justify has-medium-font-size\"><\/code> to make it look like this) by default? I also want to change the appearance of the links, which currently appear in red, to the traditional blue color.
I need these changes to be visible on both the desktop and mobile versions. <\/p>\n

\"Screenshot_20231210_002643_Chrome\"<\/p>\n
<\/use><\/svg>Screenshot_20231210_002643_Chrome<\/span>774\u00d71520 195 KB<\/span><\/use><\/svg><\/div>\n

<\/a><\/div>\n

style.css<\/a> (36.8 KB)
Often people use all sort of plugins with WP, which insert their own CSS in all sorts of places. I recently helped with a WP site using Elementor, and the number of locations CSS was stored was mind-boggling. You basically have to use the browser devtools to track down where each style is coming from and then work out where that style is stored within the godforsaken mess that\u2019s euphemistically known as WordPress.
In principle, there is no plugin that adds CSS, as far as I know. The issue is that the theme\u2019s design is not mine, and I don\u2019t know where it might come from. It\u2019s not built with any builder like Elementor or Divi; rather, it\u2019s done directly with code. This makes me think that the mentioned adjustments should be in the CSS file attached earlier, although I cannot identify it. The blog post where the applied code is most clearly visible is this one: Nightshade Poisoning Data<\/a>
There are at least four CSS files in there, and various ones set line heights for the text. All text seems to be set at 1.8 em in various sheets, but the one that is prevailing is this one<\/a>.
I don\u2019t see a specific line height set for headings. I guess the author didn\u2019t think about what would happen if headings stretched over multiple lines.
You could perhaps go into any style sheet, or create a custom one (ah WordPress) and maybe set line height to something like this:
@ralphm<\/a> It\u2019s the challenge of working with code created by someone else; you\u2019re unfamiliar with many of these aspects. So, are there 4 style sheets in the same sheet? Are they redundant? Would what you linked be the main one? As far as I know, the mobile version was done through CSS, correct? Would it change for both versions of the website?
The CSS example I provided would only affect the line spacing of the headers, leaving the other attributes unchanged. And what is a rem?
To make the change to the default paragraph text without having to inline it as in this post, what would I need to look for, the <p><\/code> tag in the CSS sheet?
So, are there 4 style sheets in the same sheet? Are they redundant?
As far as I can see, there are five separate style sheets, and more inline styles in the head of each page. They each probably have a lot in them, with various overlaps and duplications that fight it out with each other in the \u201ccascade\u201d (the C is CSS). Unfortunately, I don\u2019t really know the answers to your questions. My suggestion would be to create your own custom style sheet in WP and set any style modifications there, such that they override any styles in those other style sheets. (That\u2019s what I do when I help people with WordPress, which is thankfully very rare.)
Here\u2019s a screen shot of the CSS files I see in the inspector:<\/p>\n

\"styles\"<\/p>\n
<\/use><\/svg>styles<\/span>760\u00d7256 31.5 KB<\/span><\/use><\/svg><\/div>\n

<\/a><\/div>\n

The one that\u2019s highlighted seems to be the one setting the line height for your text and headings (at least on desktop screens). I don\u2019t think there\u2019s any value in trying to modify those. Best to leave them alone.
@ralphm<\/a> Upon seeing the less descriptive names of the CSS sheets, it occurred to me that they might have been created by the Litespeedcache cache plugin, which minifies, combines, etc., the CSS. That would explain why I can\u2019t find them on my server, and they might be \u201cconfusing\u201d the browser\u2019s developer console. Is that possible?
You can access a version of the website before Litespeedcache applies any adjustments if you want to check: https:\/\/www.fotov60.com\/2023\/12\/06\/nightshade-envenenamiento-datos\/?LSCWP_CTRL=before_optm<\/a>
Ah, I see. Interesting. Looking at the pre-Lightspeed version does seem to show just one CSS file.
The line height is set at line 152:
But that\u2019s really for all elements inside the .entry<\/code> element. You can just set your desired line heights for your headings anywhere in that file. You just need to give them higher specifity than the rule copied above.
Then I must write something like this?
Sure. That will help for the H2 elements, but not the H3. You might find that spreads the lines too<\/em> far apart, but just play with the setting to get it how you like it.
@ralphm<\/a> I\u2019ve made the changes, and finally, I added line-height: 1em;<\/code>, which seems to provide good separation. What do you think about the current styles for h2, h3, h4, etc.? https:\/\/www.fotov60.com\/?LSCWP_CTRL=before_optm<\/a> Are they consistent, or would you change any parameters like font-size, font-weight, or any other for any of them to make their appearance correspond to their order of importance? I don\u2019t know much about CSS, but it seems like this stylesheet is quite disorganized, with elements defined in various parts of it, isn\u2019t it?
Looks okay to me. Certainly readable. I tend to like a bit more space between the lines, but as long as it\u2019s readable, that\u2019s really all that matters.
I don\u2019t know much about CSS, but it seems like this stylesheet is quite disorganized, with elements defined in various parts of it, isn\u2019t it?
That\u2019s quite common as a stylesheet gets longer and longer. There are ways of writing CSS that are designed to make things less messy, but I\u2019m not sure how much difference they really make.
Don\u2019t you think that h3 and h2 are perhaps too similar, and it might be confusing which one is more important? Or is it just me paying too much attention? \":joy:\"
They are different enough from each other. But I prefer each next heading to be smaller, just to make it obvious to the visual reader what the hierarchy is.
But I prefer each next heading to be smaller, just to make it obvious to the visual reader what the hierarchy is.
Can you recommend me what to change to make the hierarchy more obviously?
Your <h3><\/code> text is appearing bold (on my browser at least) because bold is a default for <h3><\/code> text. It is not being declared bold by CSS.
Edit:
to:
Your <h3><\/code> text is appearing bold (on my browser at least) because bold is a default for <h3><\/code> text.
Happens the same to h4,h5 or h6?
To modify the paragraph style how I can do it? Now in the last post I used <p class=\"has-text-align-justify has-medium-font-size\"><\/code> to obtain something acceptable, because without it watches so small. I want to use orkney and serif fonts, an appropriate size to default text, and justified text if it is possible. What style lines I must write to achieve it?
Default headings are shown here:
https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\/Heading_Elements#examples<\/a>
I am surprised the H5 and H6 fonts are so small.
Your CSS for <h1><\/code> to <h6><\/code> is in this file:
https:\/\/www.fotov60.com\/wp-content\/litespeed\/css\/5dcb158dce52540584d3bae115f63f3c.css?ver=bf25a<\/a>
As the code has been minified, you can unminify it using https:\/\/unminify.com\/<\/a> (or a similar website). You will then see that the CSS for <h1><\/code> to <h6><\/code> starts at line 171.
Instead of editing that code, you could append CSS to it which will overrule previous declarations of the same properties.
You can use the shorthand font property:
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
. . . and the CSS color property:
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
As far as I can see your webpage is not downloading the Orkney font.
Now you know why I would never use WordPress \":grinning:\".
Your CSS for <h1><\/code> to <h6><\/code> is in this file:
https:\/\/www.fotov60.com\/wp-content\/litespeed\/css\/5dcb158dce52540584d3bae115f63f3c.css?ver=bf25a <\/a>
As the code has been minified, you can unminify it using https:\/\/unminify.com\/<\/a> (or a similar website). You will then see that the CSS for <h1><\/code> to <h6><\/code> starts at line 171.
If you want see the CSS sheet before Litespeed cache optimize it you can se trough this url as I sayed in a post before
https:\/\/www.fotov60.com\/?LSCWP_CTRL=before_optm<\/a>
As far as I can see your webpage is not downloading the Orkney font
Is strange, almost h1, h2\u2026et are declared with this fonts
Now you know why I would never use WordPress \":grinning:\".
I dont understand, dont use the same CSS rules as the others tools?
I want to obtain the cleanest CSS possible, thats why Im editing source CSS stylesheet. Later I must eliminate some things like references to lastfm or other things I never use because are outdated. Thats why I whant to make a rule to style text like this as I say in my previous post:
\u00bfAlguna vez te has preguntado qu\u00e9 sucede con tus obras de arte cuando las subes a internet? Imagina que cada trazo, cada pixel, puede convertirse en una arma secreta contra aquellos que intentan apropiarse de tu creatividad sin tu permiso. Bueno, resulta que ahora hay una herramienta que permite a los artistas hacer precisamente eso. \u00a1Bienvenido a la era del envenenamiento de datos!<\/code>
The Orkney font is available to download from a number of websites. It is a sans-serif font, nothing like the font that I see on my browser or as seen in your own screenshot in post #1<\/span>.
As it is not a Google font, I would expect to see the font downloaded to site visitors\u2019 browsers by @font-face<\/span>:
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
Of course you would need to upload the font file to your server.
Powered by Discourse<\/a>, best viewed with JavaScript enabled<\/p>\n

source<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Could you help me find in this CSS file what I need to modify so that the underlined titles (h2, h3, etc.) have the correct line spacing for easy reading and so that the font size of the paragraph is like what it looks like now (currently, I have to…<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-246","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.yellowfalconmedia.com\/blog\/wp-json\/wp\/v2\/posts\/246","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.yellowfalconmedia.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.yellowfalconmedia.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.yellowfalconmedia.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.yellowfalconmedia.com\/blog\/wp-json\/wp\/v2\/comments?post=246"}],"version-history":[{"count":0,"href":"https:\/\/www.yellowfalconmedia.com\/blog\/wp-json\/wp\/v2\/posts\/246\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.yellowfalconmedia.com\/blog\/wp-json\/wp\/v2\/media?parent=246"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.yellowfalconmedia.com\/blog\/wp-json\/wp\/v2\/categories?post=246"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.yellowfalconmedia.com\/blog\/wp-json\/wp\/v2\/tags?post=246"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}