Ecommerce Developer
 
 

Platforms & Shopping Carts

Building a Magento Theme Start to Finish, Part Nine: A Content Slider

By Armando Roggio on March 12, 2010 · with 16 Comments

 

Content sliders can place a lot of content in a small amount of space.

So in this episode of the series, I am going to add a content slider to the home page. I still have a little style clean up to do first, but this content slider explanation will move the project ahead.

About This Magento Theme Series

For the past several weeks, I have been walking you through the process of developing a Magento theme. The process has gotten slow in a couple of spots, so it's time to get moving.

The Magento Theme Series, To Date

The goal of this series is to help you become familiar with how Magento works—its environment, if you will—and how to work with it.

Modify Fly-Out Navigation

It is time to address the grayish fly-out navigation at the top of the page. The CSS declaration that I am going to start with is #nav ul, located around about line 57 in menu.css, which is located at skin > frontend > default > pine > css.

My first change is to reposition the ul so that it does not cover up the tab. To do this, I change the top attribute from 22px to 40px.

Next, I change the border color to the brown on the Pine Theme pallette and remove the border-bottom description. I also reset the background to the same Pine Theme brown. I also extend the padding at the bottom of the element to 40px: padding:3px 8px 40px;.

Now, it's time to add a border-radius, if you have been following along in the series, you should be very familiar with the code.

border-radius: 0px 0px 20px 20px; /* CSS 3 */ -moz-border-radius: 0px 0px 20px 20px; /* Firefox */   -icab-border-radius: 0px 0px 20px 20px; /* iCab */  -khtml-border-radius: 0px 0px 20px 20px; /* Konqueror */  -webkit-border-bottom-left-radius: 20px; -webkit-border-bottom-right-radius: 20px; /* Safari */

Put all together, my style looks like this:

/************ 2ND LEVEL ************/
#nav ul { position:absolute; width:15em; top:40px; left:-10000px; border:1px solid #372016;  padding:3px 8px 40px; background:#372016; font-size:11px; border-radius: 0px 0px 20px 20px; /* CSS 3 */ -moz-border-radius: 0px 0px 20px 20px; /* Firefox */   -icab-border-radius: 0px 0px 20px 20px; /* iCab */  -khtml-border-radius: 0px 0px 20px 20px; /* Konqueror */  -webkit-border-bottom-left-radius: 20px; -webkit-border-bottom-right-radius: 20px; /* Safari */ }

With the ul styled to my liking, I am going to change the anchor text color for the subcategories in the fly-out menu. This style is described by #nav ul li a, which is on line 64 of my menu.css file after I have added the code described above. I want to set the color to the tan, #F29A43 from the Pine Theme pallette. For the hover text color, I am going to use the red from the palette.

#nav ul li a { padding:3px 0; color:#F29A43 !important; }
#nav ul li a:hover { padding:3px 0; color:#9D0000 !important; }

Screen capture shows the navigation section

Formatting the Main Merchandising Section

Next, I am going to do some basic formatting work around the main merchandising section of the home page. The content for this section is controlled from the administration panel, but I can control the size of that content block from the CSS.

I am first going to change the size of the content block in boxes.css, which is located in the same folder as menu.css. I want to locate a style for the class middle. In my current boxes.css file it is on line 302. I simply make the min-height attribute 405px.

.middle         { min-height:405px; padding:6px 0 50px 0; }

Now, I want to change the top padding for .middle to give a bit more headroom. This style is located at approximately line 1,270 of boxes.css.

.cms-home .middle { margin-top:-7px; padding:15px 8px 8px 8px; position:relative; }

Next, I remove the white background and the grayish border around this section. The background and border styles are described in the class outline-creator on about line 309 of boxes.css. The class is not empty, but it won't be for long. I add a color attribute to make the text in this section white.

.outline-creator {color: #fff; }

Image shows the content area sans background color and border with white font

Adding A Content Carousel

As I said before, this section of the site will be controlled in the administration panel, which means that I cannot really pay content with the theme per se. What I like to do in these situations is put a content slider or other bit of interactivity in place and provide it as a supplement along with instructions regarding implementation.

For this main section, I am going to use a JavaScript plug-in that web developer Vic Stanciu created, called carousel.js. It is based on the Prototype JavaScript Library that Magento already uses, so I don't have to worry about potential conflicts, which could be the case if I used another JavaScript Library. This plug-in is offered under a MIT License.

I start by downloading a minified version of the tool. I place the file in js > prototype.

Next, I need to open page.xml, which you may recall is located at app > design > frontend > default > pine > layout. As I have already done a couple of times in this series, I add a JavaScript.

<action method="addJs"><script>prototype/carousel-min.js</script></action>

With the JavaScript in place, I go to the administration panel and navigate to CMS > Manage Pages > Home Page. I paste the following code in place.

<div  id="carousel-wrapper">
				<div  id="carousel-content">

					<div class="slide" id="slide1">
                                                <a href=""><img src="http://localhost/Theme-Dev-Pine/skin/frontend/default/pine/images/slide-one.png" border="0" alt="" /></a>
					</div>					

                                          <div class="slide" id="slide2">
						<a href=""><img src="http://localhost/Theme-Dev-Pine/skin/frontend/default/pine/images/slide-two.png" border="0" alt="" /></a>
					</div>
					<div class="slide" id="slide3">
						<a href=""><img src="http://localhost/Theme-Dev-Pine/skin/frontend/default/pine/images/slide-three.png" border="0" alt="" /></a>
					</div>

					<div class="slide" id="slide4">
						<a href=""><img src="http://localhost/Theme-Dev-Pine/skin/frontend/default/pine/images/slide-four.png" border="0" alt="" /></a>
					</div>



					
					
				</div>

			</div>

			<div class="menu">
				<a href="#" rel="slide1" class="tab carousel-jumper">&#9830;</a>
				<a href="#" rel="slide2" class="tab carousel-jumper">&#9830;</a>
				<a href="#" rel="slide3" class="tab carousel-jumper">&#9830;</a>
				<a href="#" rel="slide4" class="tab carousel-jumper">&#9830;</a>


			</div>


			<script type="text/javascript">
				Pine_Slider = new Carousel($('carousel-wrapper'), $$('#carousel-wrapper .slide'), $$(' a.carousel-jumper', 'a.carousel-control'), { duration: 0.5, auto: true, frequency: 10, circular: 'true', effect: 'fade',   selectedClassName: 'selected'});
			</script>
</div>

Next, I need to add some style to boxes.css. I will place this style at the bottom of the CSS file.

/* Home page content slider*/
#carousel-wrapper {
    width: 960px;
    height: 540px;
    overflow: hidden;
}
#carousel-content {
    width: 2500px;
}
#carousel-content .slide {
    float: left;
    width: 960px;
    height: 540px;
}

Finally, I create a few images for my slider and upload these to Magento.

I still have some styling to do before the content slider is finished, but I will pick that up in the next episode.

Related Articles

Category: Platforms & Shopping Carts | Tags: Magento, Classes and Instruction, video, Content Slider

16 Comments

Rss-sm