current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Sign up ×
Magento Stack Exchange is a question and answer site for users of the Magento e-Commerce platform. It's 100% free, no registration required.
up vote 1 down vote favorite

hey guys i need a bit of help here regarding the use of CSS and Java Script in Magento

I wanted to Add a tooltip.js ,thumbnail-slider.js,tooltip.css, slider.css,generic.css to my Home page so i made following Changes in Local.XML 

    <reference name="head">

        <action method="addJs"><script>themes/4/tooltip.js</script></action> 
        <action method="addJs"><script>themes/4/thumbnail-slider.js</script></action>

          <action method="addCss"><stylesheet>themes/4/tooltip.css</stylesheet></action> 
        <action method="addCss"><stylesheet>themes/4/slider.css</stylesheet></action>
         <action method="addCss"><stylesheet>themes/generic.css</stylesheet></action>

        <action method="addCss"><stylesheet>css/skin.css</stylesheet></action>
    </reference>

this Added the all JS and CSS i wanted to use on my home page ,i checked the view-source option and all of then where loaded

but later when i tired using the JS by going to CMS option and editing the Home Page by adding the following Code

<body>

<div class="div2">
<div id="mcts1">
            <img src="images/thumbnail-slider-1.jpg" onmouseover="tooltip.pop(this, 'This is the first slide')" />
            <img src="images/thumbnail-slider-2.jpg" onmouseover="tooltip.pop(this, '#tip2')" />
            <img src="images/thumbnail-slider-3.jpg" onmouseover="tooltip.pop(this, '#tip3')" />
            <div class="class1" onmouseover="tooltip.pop(this, '#tip4')"><p>HTML Content</p>This slide shows that HTML/Text can also be used as thumbnails</div>
            <a href="http://www.menucool.com" onmouseover="tooltip.pop(this, '#tipA')"><img src="images/thumbnail-slider-4.jpg" /></a>
            <img src="images/thumbnail-slider-5.jpg" onmouseover="tooltip.pop(this, '#tipB')" />
            <img src="images/thumbnail-slider-6.jpg" onmouseover="tooltip.pop(this, 'Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...')" />
            <img src="images/thumbnail-slider-7.jpg" onmouseover="tooltip.pop(this, '#tipC')" />
            <img src="images/thumbnail-slider-8.jpg" onmouseover="tooltip.pop(this, 'Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur')" />
        </div>
    </div>
    <div  style="display:none;">
        <div id="tip2">
            <div class="tips">
                <img src="images/thumbnail-slider-2.jpg" style="float:right;margin-left:6px;margin-bottom:6px;width:154px;height:80px;" />
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </div>
        </div>
        <div id="tip3">
            <div class="tips">
                <img src="images/thumbnail-slider-3.jpg" style="float:left;margin-right:8px;margin-bottom:8px;width:87px;height:80px;" />
                <b>Lorem Ipsum</b>
                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </div>
        </div>
        <div id="tip4">
            <div class="tips">
                <img src="images/thumbnail-slider-1.jpg" style="float:left;margin-right:8px;margin-bottom:8px;width:111px;height:80px;" />
                <b>Lorem Ipsum</b>
                Donec nec orci sed enim malesuada scelerisque eget id felis. Phasellus sapien sem, convallis quis vehicula ut, lobortis ut ipsum. Aliquam erat volutpat. Curabitur ac sem ac orci accumsan feugiat.
            </div>
        </div>
        <div id="tipA">
            <div class="tips">
                <b>Duis Aute Irure</b>
                Nullam sodales lectus id justo facilisis dignissim quis a dui. Curabitur dictum lectus porttitor felis hendrerit varius.
            </div>
        </div>
        <div id="tipB">
            <div class="tips">
                <b>Phasellus Et Nulla Sem</b>
                Etiam interdum consectetur quam, ac aliquet dui ornare nec. Ut tincidunt elit enim, eu posuere orci. Mauris et velit ac risus vehicula aliquet et a dolor. Fusce id nulla orci, sed aliquam nunc.
            </div>
        </div>
        <div id="tipC">
            <div class="tips">
                <img src="images/thumbnail-slider-7.jpg" style="float:left;margin-right:8px;margin-bottom:8px;width:140px;height:80px;" />
                <b>jQuery Slider with Tooltip</b>
                This is a demo showing how to integrate the Menucool Tooltip with the Menucool jQuery Slider.
            </div>
        </div>
    </div>


</body>

it didn't work, what did i do wrong ,what should i do so this works ?

share|improve this question
    
"i checked the view-source option and all of then where loaded" - are you sure they are loaded? Your code will include JS files from /js/themes/4/tooltip.js and CSS files from /skin/frontend/base/default/themes/4/tooltip.css - is this really where the files are at? – fschmengler Jul 14 at 12:45

3 Answers 3

up vote 0 down vote

navigate to

Admin > CMS > Pages > Edit your page home page

The goto design tab and Layout Update XML.

Add here, it will only affected to specific page alone

<reference name="head">
        <action method="addJs"><script>themes/4/tooltip.js</script></action> 
        <action method="addJs"><script>themes/4/thumbnail-slider.js</script></action>

          <action method="addCss"><stylesheet>themes/4/tooltip.css</stylesheet></action> 
        <action method="addCss"><stylesheet>themes/4/slider.css</stylesheet></action>
         <action method="addCss"><stylesheet>themes/generic.css</stylesheet></action>

        <action method="addCss"><stylesheet>css/skin.css</stylesheet></action>
    </reference>

Cms edit page

share|improve this answer
up vote 0 down vote

What layout handle did you use to add you js/CSS to the head? You can use default to add to all pages, otherwise you can do as Meenakshi suggested and add an update specifically to the Cms page through admin.

share|improve this answer
up vote 0 down vote

The layout handle for homepage is <cms_index_index> so you can add your layout updates, the one that includes the js and css files in one of your layout files or in local.xml from your theme inside the layout handle I mentioned.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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