Magento Forum

Quick Question: HTML and CSS
 
itzik
Member
 
Total Posts:  36
Joined:  2008-07-21
 

Is there any way to add HTML via CMS so that default Magento CSS will not be applied?

I.e. I want to add an html table to the homepage which has its own “style” tag, but it still inherits default Magento CSS.  I tried adding the tag “ !important” but it still didn’t override default Magento CSS.

I would appreciate any advice...thanks!

 
Magento Community Magento Community
Magento Community
Magento Community
 
lotusseedsD
Mentor
 
Avatar
Total Posts:  1144
Joined:  2007-08-31
 

well, you can do inline styling, which has highest specificity and will overrule the external style sheets. Note that it’s not a good practise to use inline style, but I am not a purist, and sometimes in a dynamic site the need for inline styling is quite necessary .

example: <table style="margin: 10px 5px 20px 0; background: url(your-image.gif’; font-size: .95em">

 
Magento Community Magento Community
Magento Community
Magento Community
 
nikefido
Guru
 
Avatar
Total Posts:  481
Joined:  2008-07-11
New Haven, CT
 

This is an issue of CSS rules and specificity.

Best advice I can give you is to either use inline CSS or to get specific with your css rules.

For instance, use rules like

#myTable .myClass {
//some rule
}

You can add and remove CSS files via this file:
app/design/frontend/default/default/layout/page.xml

There, you will find this node in the xml:

<block type="page/html_head" name="head" as="head">
                <
action method="addJs"><script>prototype/prototype.js</script></action>
                <
action method="addJs"><script>prototype/validation.js</script></action>
                <
action method="addJs"><script>scriptaculous/builder.js</script></action>
                <
action method="addJs"><script>scriptaculous/effects.js</script></action>
                <
action method="addJs"><script>scriptaculous/dragdrop.js</script></action>
                <
action method="addJs"><script>scriptaculous/controls.js</script></action>
                <
action method="addJs"><script>scriptaculous/slider.js</script></action>
                <
action method="addJs"><script>varien/js.js</script></action>
                <
action method="addJs"><script>varien/form.js</script></action>
                <
action method="addJs"><script>varien/menu.js</script></action>
                <
action method="addJs"><script>mage/translate.js</script></action>
                <
action method="addJs"><script>mage/cookies.js</script></action>
                <
action method="addCss"><stylesheet>css/reset.css</stylesheet></action>
                <
action method="addCss"><stylesheet>css/boxes.css</stylesheet></action>
                <
action method="addCss"><stylesheet>css/clears.css</stylesheet></action>
                <
action method="addCss"><stylesheet>css/menu.css</stylesheet></action>

                <
action method="addItem"><type>skin_css</type><name>css/iestyles.css</name><params/><if>IE</if></action>
                <
action method="addItem"><type>skin_css</type><name>css/ie7.css</name><params/><if>IE 7</if></action>
                <
action method="addItem"><type>skin_css</type><name>css/ie7minus.css</name><params/><if>lt IE 7</if></action>

                <
action method="addItem"><type>js</type><name>lib/ds-sleight.js</name><params/><if>lt IE 7</if></action>
                <
action method="addItem"><type>js</type><name>varien/iehover-fix.js</name><params/><if>lt IE 7</if></action>

                <
action method="addCss"><stylesheet>css/print.css</stylesheet><params>media="print"</params></action>
            </
block>
You can see here how they added their CSS / JS and other pages into the header of the pages.
css and js is buried in the “skin” folder, also in the root (skin/frontend/default/default/...)

Hope this helps!

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top