1

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?

  • You need to add your CSS within <style> tags, not <script> – Lodder Jun 29 '17 at 0:06
  • @Lodder - I actually am mistaken I have it pulling from a https site like so <link rel="stylesheet" type="text/css" href="https:"/> - I updated my post to reflect. – IcyPopTarts Jun 29 '17 at 0:08
2

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:

  • According to the first link you provided, adding in the <link> tag like I did should over-ride the css. – IcyPopTarts Jun 29 '17 at 12:15
0

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());
} ?>
  • Using F12 I have verified that the .css is being loaded on the page. – IcyPopTarts Jun 29 '17 at 12:08

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.