You need to be logged in to post in the forum - Log In

An active JCE Pro Subscription is required to post in the forum - Buy a Subscription

Support is currently Online

Official support hours
Monday to Friday
09:00 - 17:00 Europe/London (BST)

#114206 Custom css for many selectors

Posted in ‘Editor’
This is a public ticket

Everybody will be able to see its contents. Do not include usernames, passwords or any other sensitive information.

Latest post by toonetcreation on Friday, 21 July 2023 12:35 BST

Monday, 17 July 2023 13:40 BST

toonetcreation
Hi,

I would like to create a custom css to add a background color on many paragraph, titles etc...

I don't something like this : https://www.screenpresso.com/=DNvAd

But I need a full background for all the lines/the section on all the page page width, with top and bottom margins.

How can I do that?

Thanks
L.

Wednesday, 19 July 2023 14:15 BST

toonetcreation
any news?

Wednesday, 19 July 2023 16:34 BST

Ryan
Assuming you want to apply a number of styles to a selection of block elements (paragraphs, headings etc.) then you can add a css file to your template stylesheet with the different styles, eg: 

.background_styles {
    bacgkround-color: #eee;
    margin: 5px 0;
}
Then drag select the paragraphs etc. in the editor, and select "paragraph_styles" (or whatever you have called it) from the Styles list in the editor toolbar.

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Edited by Ryan on 2023-07-19 16:34 BST

Thursday, 20 July 2023 08:35 BST

toonetcreation
If I add this css class for instance to my custom.css file, then it is not displayed in the styles list in the editor toolbar.

Thursday, 20 July 2023 09:36 BST

Ryan
Which template are you using?

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Thursday, 20 July 2023 10:07 BST

toonetcreation
helix from joomshaper

Thursday, 20 July 2023 12:05 BST

Ryan
Pelase try JCE Pro 2.9.39 RC - https://www.joomlacontenteditor.net/downloads/editor/pro/development

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Thursday, 20 July 2023 12:46 BST

toonetcreation
ok after installing 2.9.39 RC :

- I see this https://www.screenpresso.com/=HYPMb
- but from editing mode I see this : https://www.screenpresso.com/=Oubkc
- and after saving article, from front-end (after exiting edit mode), I see this : https://www.screenpresso.com/=qaVyg => css class has not been applied


I have a specific css class for the page, is it a problem?

Thursday, 20 July 2023 12:51 BST

toonetcreation
sorry some cache was not deleted.

works fine, but css class is applied on each paragraph :

see here : https://www.screenpresso.com/=S8Wee

how can I remove white lines between each paragraph ?
or make the background color homogeneous without blank separation?

and what is the difference between adding css class inside custom.css file and using this screen https://www.screenpresso.com/=bHwqg ?
Edited by toonetcreation on 2023-07-20 12:53 BST

Thursday, 20 July 2023 16:38 BST

Ryan
If you want to apply the styles to a single container affecting a number of elements, rather to individual elements, then you can create a Custom Style that applies a
to the selected elements, with the same class you added to your custom.css file. For example,

In Editor Profiles -> Plugin Parameters -> Style Select, create a new Custom Style with the following values:

Title: Background Style Container
Tag: Div
Classes: background_styles (or whatever you name the style in your custom.css file)

Click Save, then open an article, select all the paragraphs etc. and select "Background Style Container" from the Styles list.

Using a css rule your custom.css file is better than using inline styles on an element as you can change the styles in the rule later without having to edit each article.

https://cdn.joomlacontenteditor.net/tmp/114206-custom-css-for-many-selectors.jpg

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Friday, 21 July 2023 12:35 BST

toonetcreation
perfect works fine, many thanks.
L.