1

I would like to modify CSS styling to some of my pages, and override the default template styling.

By default, I have this class (.article-intro-image) on my template css with some parameters (for example border-radius: 3px;)

But just in ONE page attached to a menu item, I'd like to change the parameter to border-radius: 10px;

How can I do that without affecting all of the website?

I guess it can be done with "page classes" in the menu item editor, under the "Page display" tab, but I can't figure out how to change/edit the class so it doesn't affect the rest of the web.

Thanks mickmackusa, but still doesn't work. I add the class you told me, but when I force to reload my web the images are still affected by the general class:

.article-list .article .article-intro-image, .article-list .article .article-featured-video, .article-list .article .article-featured-audio, .article-list .article .article-feature-gallery {
    margin: 0px 20px 60px 0px;
    border-radius: 3px;
    border-bottom: 1px solid #f5f5f5;
    overflow: hidden;
    display: none;

Of course, I tried to put on "Page display" tab this class too (just in case), but don't work. Any other sugestion?

Improve this question
1
  • Welcome to JSE, please take our tour while you wait for support.
    – mickmackusa
    Commented Apr 23, 2021 at 14:11

2 Answers 2

Reset to default
2

Create a custom class i.e. .alt-image and define the CSS in your template as follows

.alt-image .article-intro-image img {border-radius: 10px !important}

Then you simply add your class in the menu item editor, page display tab in the "Page Class" field.

This will add the class to the <body> tag of the item.

enter image description here

Improve this answer
0
0

In your template css write: .page_class .article-intro-image {border-radius: 10px;} See Descendant Selector

Improve this answer
3
  • Did you clear browser cache?
    – Oleg
    Commented Apr 25, 2021 at 4:59
  • Yes I did, and still no works
    – Vicent G.
    Commented Apr 26, 2021 at 2:59
  • Can you see the newly inserted class in the browser source code? Does your template contain an override for this file: github.com/joomla/joomla-cms/blob/staging/modules/mod_menu/tmpl/…. Maybe you can post the code. Sometimes it's a small thing. For example, a missing space. The latter causes the two classes "class1" and "class2" to become one: "class1class2"
    – astridx
    Commented May 28, 2021 at 8:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.