Help to modify CSS in WordPress

CMS & WordPress
1

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

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.

Screenshot_20231210_002643_Chrome
Screenshot_20231210_002643_Chrome774Ă—1520 195 KB

style.css (36.8 KB)

2

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’s euphemistically known as WordPress.

1 Like
3

In principle, there is no plugin that adds CSS, as far as I know. The issue is that the theme’s design is not mine, and I don’t know where it might come from. It’s not built with any builder like Elementor or Divi; rather, it’s 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

4

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.

I don’t see a specific line height set for headings. I guess the author didn’t 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:

h1, h2, h3 {
  line-height: 2.4rem;
}
5

@ralphm It’s the challenge of working with code created by someone else; you’re 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> tag in the CSS sheet?

6

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 “cascade” (the C is CSS). Unfortunately, I don’t 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’s what I do when I help people with WordPress, which is thankfully very rare.)

Here’s a screen shot of the CSS files I see in the inspector:

styles
styles760Ă—256 31.5 KB

The one that’s highlighted seems to be the one setting the line height for your text and headings (at least on desktop screens). I don’t think there’s any value in trying to modify those. Best to leave them alone.

7

@ralphm 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’t find them on my server, and they might be “confusing” the browser’s 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

8

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:

.column .entry {
  clear: left;
  line-height: 1.4em;
  font-size: 1.2em;
  line-height: 1.8em;
  padding-bottom: 10px;
}

But that’s really for all elements inside the .entry 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.

9

Then I must write something like this?

h2 {
  font-size: 2.8em;
  font-family: orkney,serif;
  font-weight: normal;
  line-height: 1.8em;
  padding-bottom: 9px;
}
10

Sure. That will help for the H2 elements, but not the H3. You might find that spreads the lines too far apart, but just play with the setting to get it how you like it.

11

@ralphm I’ve made the changes, and finally, I added line-height: 1em;, 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 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’t know much about CSS, but it seems like this stylesheet is quite disorganized, with elements defined in various parts of it, isn’t it?

1 Like
12

Looks okay to me. Certainly readable. I tend to like a bit more space between the lines, but as long as it’s readable, that’s really all that matters.

That’s 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’m not sure how much difference they really make.

1 Like
13

Don’t 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:

14

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.

16 
/*-------------------------------
START Typography & Colors
-------------------------------*/


h1 {
  font-size: 4.8em;
  font-family: orkney,serif;
  text-transform: uppercase;
  padding: 0 0 0 39px;
}

h1,
h1 a,
h1 a:hover,
h1 a:visited,
#header .description {
  text-decoration: none;
  color: #000;
}

h2 {
  font-size: 2.8em;
  font-family: orkney,serif;
  font-weight: normal;
  line-height: 1em;
  padding-bottom: 9px;
}

h2,
h2 a,
h2 a:visited,
h3,
h3 a,
h3 a:visited {
  font-family: orkney,serif;
  color: #cc0000;
  text-decoration: none;
}

#sidebar h2,
#wp-calendar caption,
cite {
  text-decoration: none;
}


h3 {
  font-size: 2.5em;
  line-height: 1em;
}

H4 {
  font-size: 2.4em;
  font-family: orkney,serif;
  color: #000;
  line-height: 1em;
  padding: 0px;
}

H4.footerwidget {
  padding-top: 20px;
}

H5 {
  font-size: 2em;
  font-family: orkney,serif;
  color: #000;
  line-height: 1em;
  padding: 12px 0 12px 0;
}


H6 {
  font-size: 1.6em;
  font-family: orkney,serif;
  color: #000;
  line-height: 1em; 
  padding: 0px 0 16px 0;
}

.sticky h2 {
  padding-top: 10px;
}

a:hover,
h3 a:hover {
  color: #0000ff;
  text-decoration: underline;
}

h2 a:hover,
h3 a:hover {
  color: #0000ff;
  border-bottom: 1px dashed;
  text-decoration: none;
}


/*-------------------------------
End Typography & Colors
-------------------------------*/


/*-------------------------------
START headers
-------------------------------*/

h1 {
  padding-top: 61px;
  margin: 0;
}

h2 {
  margin: 30px 0 0;
}

h2.pagetitle {
  margin-top: 0px;
  width: 512px;
}


h2.archivetitle {
  margin-top: 0px;
  color: #000;
  font-size: 2.5em;
  text-transform: uppercase;
  border-bottom: 1px dashed #575b59;
}

#sidebar h2 {
  margin: 5px 0 0;
  width: 208px;
  height: 39px;
  font-size: 12px;
  text-transform: uppercase;
  padding: 11px 0 0 47px;
  background: url('images/sidebar-headings.gif') top left no-repeat;
  color: #eef0eb;
  font-family: Tahoma, Verdana, Sans-Serif;
  font-size: 1.2em;
  font-weight: bold;
}


#sidebar h3 {
  margin: 5px 0 0;
  width: 208px;
  height: 39px;
  font-size: 12px;
  text-transform: uppercase;
  padding: 11px 0 0 47px;
  background: url('images/sidebar-headings.gif') top left no-repeat;
  color: #eef0eb;
  font-family: Tahoma, Verdana, Sans-Serif;
  font-size: 1.2em;
  font-weight: bold;

}

h3 {
  padding: 0;
  margin: 8px 0 18px;
}

/*-------------------------------
END headers
-------------------------------*/
/*Extra large tablet screen only*/
  }
  h2.pagetitle{
    width: 100%;
  }

/*for tablet screen*/

  h2.pagetitle{
    width: 100%;
  }

/*Responsive for mobile by farhat*/

    h2.pagetitle{
    width: 100%;
  }

Can you recommend me what to change to make the hierarchy more obviously?

17

Your <h3> text is appearing bold (on my browser at least) because bold is a default for <h3> text. It is not being declared bold by CSS.

Edit:

h3 {
  padding: 0;
  margin: 8px 0 18px;
}

to:

h3 {
  padding: 0;
  margin: 8px 0 18px;
  font-weight: normal;
}
19

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"> 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?

20

Default headings are shown here:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements#examples
I am surprised the H5 and H6 fonts are so small.

Your CSS for <h1> to <h6> is in this file:
https://www.fotov60.com/wp-content/litespeed/css/5dcb158dce52540584d3bae115f63f3c.css?ver=bf25a

As the code has been minified, you can unminify it using https://unminify.com/ (or a similar website). You will then see that the CSS for <h1> to <h6> 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:

. . . and the CSS color property:

As far as I can see your webpage is not downloading the Orkney font.

Now you know why I would never use WordPress :grinning:.

21

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

Is strange, almost h1, h2…et are declared with this fonts

/*-------------------------------
START Typography & Colors
-------------------------------*/


h1 {
  font-size: 4.8em;
  font-family: orkney,serif;
  text-transform: uppercase;
  padding: 0 0 0 39px;
}

h1,
h1 a,
h1 a:hover,
h1 a:visited,
#header .description {
  text-decoration: none;
  color: #000;
}

h2 {
  font-size: 2.8em;
  font-family: orkney,serif;
  font-weight: normal;
  line-height: 1em;
  padding-bottom: 9px;
}

h2,
h2 a,
h2 a:visited,
h3,
h3 a,
h3 a:visited {
  font-family: orkney,serif;
  color: #cc0000;
  text-decoration: none;
}

#sidebar h2,
#wp-calendar caption,
cite {
  text-decoration: none;
}


h3 {
  font-size: 2.5em;
  line-height: 1em;
}

H4 {
  font-size: 2.4em;
  font-family: orkney,serif;
  color: #000;
  line-height: 1em;
  padding: 0px;
}

H4.footerwidget {
  padding-top: 20px;
}

H5 {
  font-size: 2em;
  font-family: orkney,serif;
  color: #000;
  line-height: 1em;
  padding: 12px 0 12px 0;
}


H6 {
  font-size: 1.6em;
  font-family: orkney,serif;
  color: #000;
  line-height: 1em; 
  padding: 0px 0 16px 0;
}

.sticky h2 {
  padding-top: 10px;
}

a:hover,
h3 a:hover {
  color: #0000ff;
  text-decoration: underline;
}

h2 a:hover,
h3 a:hover {
  color: #0000ff;
  border-bottom: 1px dashed;
  text-decoration: none;
}


/*-------------------------------
End Typography & Colors
-------------------------------*/


/*-------------------------------
START headers
-------------------------------*/

h1 {
  padding-top: 61px;
  margin: 0;
}

h2 {
  margin: 30px 0 0;
}

h2.pagetitle {
  margin-top: 0px;
  width: 512px;
}


h2.archivetitle {
  margin-top: 0px;
  color: #000;
  font-size: 2.5em;
  text-transform: uppercase;
  border-bottom: 1px dashed #575b59;
}

#sidebar h2 {
  margin: 5px 0 0;
  width: 208px;
  height: 39px;
  font-size: 12px;
  text-transform: uppercase;
  padding: 11px 0 0 47px;
  background: url('images/sidebar-headings.gif') top left no-repeat;
  color: #eef0eb;
  font-family: Tahoma, Verdana, Sans-Serif;
  font-size: 1.2em;
  font-weight: bold;
}


#sidebar h3 {
  margin: 5px 0 0;
  width: 208px;
  height: 39px;
  font-size: 12px;
  text-transform: uppercase;
  padding: 11px 0 0 47px;
  background: url('images/sidebar-headings.gif') top left no-repeat;
  color: #eef0eb;
  font-family: Tahoma, Verdana, Sans-Serif;
  font-size: 1.2em;
  font-weight: bold;

}

h3 {
  padding: 0;
  margin: 8px 0 18px;
}

/*-------------------------------
END headers
-------------------------------*/
/*Extra large tablet screen only*/
  }
  h2.pagetitle{
    width: 100%;
  }

/*for tablet screen*/

  h2.pagetitle{
    width: 100%;
  }

/*Responsive for mobile by farhat*/

    h2.pagetitle{
    width: 100%;
  }

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:

¿Alguna vez te has preguntado qué 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. ¡Bienvenido a la era del envenenamiento de datos!

22

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.

As it is not a Google font, I would expect to see the font downloaded to site visitors’ browsers by @font-face:

Of course you would need to upload the font file to your server.