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?

1
  • Welcome to JSE, please take our tour while you wait for support.
    – mickmackusa
    Apr 23 at 14:11
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

0
0

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

3
  • Did you clear browser cache?
    – Oleg
    Apr 25 at 4:59
  • Yes I did, and still no works
    – Vicent G.
    Apr 26 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
    May 28 at 8:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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