Adding Images To OST Magazines Featured Slider
If you would like to add images to the homepage slider but you are not sure how to go about doing so, then this short tutorial is what you have been looking for.
On the homepage slider you can see a line of white blocks underneath the rotating image(s), in the default index.html there are 5 small squares which represent the 5 information blocks that rotate.
This tutorial will show you how to modify the index.html (by adding code blocks) and the CSS file that is used solely for the featured slider.
Step 1 - Modify the index.html
Open up the index.html file in your editor of choice, Dreamweaver, notepad etc.
Find and locate the following:
<div class="wrapper col2">
<div id="featured_slide">
CODE BLOCK(S) HERE
</div>
</div>
In the above code block we have "CODE BLOCK(S) HERE" - the content that belongs there looks like:
<div class="featured_box">
<div class="floater">
<h2>1. Aliquatjusto quisque nam</h2>
<p>Orcimagna rhoncus et a nec antesque sed temportor pellus nibh conseque. Accumstsemper wisi pretium feugiat non ut eleifendrerisque at et condisse sce.</p>
</div>
<p class="readmore"><a href="#">Continue Reading »</a></p>
<img src="images/demo/930x375.gif" alt="" /></div>
The above code has been repeated in the default index.html 5 times, representing 5 rotating image blocks with information.
To add blocks, simply copy the above code block and add it in between the first code block (where in our demo it says "CODE BLOCK(S) HERE") underneath the code block where it should appear.
For a demo view this document: OST Magazine Featured Slider Demo Text File - right mouse click "save as" or "save link as" and save it to your desktop.
Step 2 - Modify the featured_slide.css
Find the following code in your "featured_slide.css" file which is located in the "styles" folder - if no changes have been made to the original file, the code starts on line 113:
#fsn ul{
position:relative;
margin:0 auto 0;
display:block;
width:200px;
height:20px;
padding:12px 0 0 0;
overflow:hidden;
list-style:none;
}
Replace it with:
#fsn ul{
position:relative;
margin:0 auto 0;
display:block;
width:280px; /* Modified */
height:20px;
padding:12px 0 0 0;
overflow:hidden;
list-style:none;
}
You can see that the width has changed from 200px to 280px. The explanation why:
Each square represents 40px - this is made up of the 20px squared white or grey box and the 20px margin between the boxes, to elaborate:
- A single image block is represented by 1 square which equals 40px
- Seven image blocks are represented by 7 squares which equals 280px
- Ten image blocks are represented by 10 squares which equals 400px
So in-turn when you add a new information block in the featured slider you have to make the changes in the CSS file as well.
Remember:
Each white square uses 40px of space - so if you want 6 blocks the width has to be changed to 40 x 6 = 240px