Grow your CSS skills. Land your dream job.

How to override body styles in same CSS?

  • # May 20, 2013 at 5:51 pm

    I am working in Joomla 1.5 (unfortunately). It’s Struggle City over here. I am trying to create some landing pages unique from the rest of the site. I have no idea how to call a new stylesheet and cancel out the other one, so to do this, I need to write the new CSS in the global.css (where the rest of the CSS for the sit is) so that it overrides the other CSS, but just on the pages I assign. Here is what I’ve tried but it’s not working:

    .page466 #body { width:864px; margin:0px 20px 20px 80px; background-color: #007FFF; }

    Any ideas would be much appreciated.

    # May 20, 2013 at 5:59 pm

    Is there a way for you to create a template for this type of page?
    Is there a way for you to add ID’s or Classes to the HTML?

    > .page466 #body { width:864px; margin:0px 20px 20px 80px; background-color: #007FFF; }

    This doesn’t give us much info. Do you have a live example? Or you can code one here: http://codepen.io/pen/

    # May 20, 2013 at 6:17 pm

    I know you can override CSS styles using Jquery and you can have the color and just about anything change with onclick or when the page loads. Heres an example of what i mean. http://codepen.io/Jarolin/pen/DsklI

    # May 20, 2013 at 6:41 pm

    Do you actually have an element with id body or is it a typo?

    `.page466 #body` targets element with id body

    `.page466 body` targets body element

    …assuming you have class page466 on the html element.

    # May 20, 2013 at 6:56 pm

    I’m a big dummy and I had the wrong page #. Thanks guys!

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".