Custom css but only on specified areas of page or lines

[bulgin]

Hello.

I know there is a simple solution to this. I have a client who specifically wants to change the line spacing of only certain paragraphs/lines on a page.

The custom.css applies to existing known h2, h3, h1, p, br etc. and making changes here applies to *all* paragraphs with h2, h3, p, etc. across the site.

But I only need to apply a custom line-height in selected areas on pages, and would prefer to be able to make this so I can see it in the fckeditor pull down window for styles or headings so it's would be easy to apply.

Any help much appreciated.

Thanks!

[Per Yngve Berg]

Use a more restrictive selector, i.e. a class name.

Code: Select all

h2.special {...}
div.special h2 {....}

https://www.w3schools.com/cssref/css_selectors.asp

[bulgin]

Ok. Great. Thank you, this is a good start.

In my custom.css I have placed the code:

h2.special {
line-height:3.00em;
}

but it neither shows up under the JCE editor pull down window under styles or format, nor can be hard-coded into the code editor.

What am I doing wrong?

[Per Yngve Berg]

Have you specified custom.css as the editor content css file in Global Configuration of the JCE Editor?

[bulgin]

Okay. I will do that but a question first: if I specify custom.css then I assume only the entries in custom.css will apply in JCE editor - thereby losing many of the other classes in template.css.

So is it better than to place the code in template.css so that I won't lose the classes int template.css ?

[Per Yngve Berg]

It only affects what is shown in the drop-down. You can make a file with the classes that shall show in the drop-down. The css files are loaded in the template and what is shown on the site is not affected.

[bulgin]

Great! Thanks for explaining all that. You are a life-saver!