Override Global CSS within Article

Question

I have one article, where I want to apply different styling to it than what the global is.

I tried to add it like so <link rel="stylesheet" type="text/css" href="https:"/ tag at the top of my article, however it is not overriding the global CSS.

Is it possible to override the global css within this article through settings and apply my own? How can I give special css to this article only?

Answer 1

There are a lot of resources in this site about overriding CSS. Depending on your template and overall site/page configuration, you might be able to just do this by using a unique css selector that might exist only in that page and add your own css rules in a custom.css on your template.

For example, if you link that article with a menu item and your special css is intended only for the markup inside your article, you can give your menu item a special class (from inside the menu item edit page -> Page Display tab -> Page Class field) and add your css in the custom.css file.

If for example you add give special class for that menu-item, then in your custom.css you can target elements inside your article with:

.item-pagespecial h1 {
    color: red;
}

_{the .item-pagespecial selector could be the final produced class that your template/template overrides will generate.}

---

Useful Resources to Read On:

The following links in this site could be proved useful to study. Have a look at:

• How do I override the CSS styles in my template?

• Custom css 'Page Class'

• Adding custom CSS styling on some of my pages

• JSE General Search: "custom css"

Answer 2

I assume TinyMCE will be stripping that tag because it is not valid in the body of the page. I believe it is not possible to set <link> as a valid element in TinyMCE. As such, if you go to Extensions > Plugins and temporarily unpublish TinyMCE then you will be able to enter it using the blank editor.

If you do it this way, I'd suggest you add it to the page in a CustomHTML module and apply that to the page instead (this approach is only possible if the article is linked to a menu item), as saving the article using TinyMCE in future will always strip the tag.

If this does not work, press F12 and use your console to make sure the CSS is actually loading (it is unclear if you are loading it from your own site. If not, you may simply not be allowed to embed it.)

If it is on the page and loading correctly, make sure that your styles are being correctly overridden. It may just be that they aren't written in such a way that will take precident over your existing styles.

Finally, the best approach to adding such styles is probably in your template.

The following code will add a style sheet when the menu item id is 101.

<?php if (JFactory::getApplication()->getMenu()->getActive()->id=="101") {

        JHtml::_('stylesheet', 'https://cdn.sstatic.net/Sites/stackoverflow/all.css', array());
    } ?>

and the following will do the same when it detects an article of ID 1 (though if you are using other components, it may require additional validation to make sure the id belongs to com_content and not one of the other components)

<?php if (JFactory::getApplication()->input->get('id')=="1") {

    JHtml::_('stylesheet', 'https://cdn.sstatic.net/Sites/stackoverflow/all.css', array());
} ?>