How to Add a Slider to Your Main Page to Promote Special Content

[Eric Suesz]

A lof of people ask us about the "slider" on Creators at the top of our Main Page. They love it. We do, too!

A slider (sometimes also called a "carousel"or "hero" box) automatically rotates in and out promotional content. It's a very effective way to spotlight specific things on your network that you want returning members (and visitors) to notice and visit. You could also use a slider like this to run your own ads, particularly if you have lined up sponsors or advertisers directly and can create an ad for them. It looks like this: 

I know that a number of Network Creators are going to flip over this new slider we've created. It's free for the taking, so check out this article on Adding a Slider to see if it's something you'd like to put on your network.

You will need to be able to upload the images you want to display, and you can do that with the File Manager (among other ways). You will also need to be able to look at some HTML, but these instructions are straightforward and should be doable for most Network Creators. If you're unsure about how to do it, you might want to try it out first on your test network and then paste the final code into a Text Box on your live network. 

Enjoy! 

 

[Gusk]

Yes, good points. I like to have it on an off depending on the slide.

 

What is the CSS code for the height of the overlay (or is that the actual .png dimensions) and how to change the transparency to somewhat more transparent?

[James Hawkins]

Hi again,

The png image is only 10 x10 px but I'm having a hard time testing a solution for a few more  days because I'm on a very slow dial-up connection via my Nokia modem. However I spotted why your text is not white. You need to begin with a <p> and end with a </p> as in this image.

..so you need to go back into the text box and add those (<p> ...</p>and your text should turn to white.

James

[Gusk]

Ah FANTASTIC! Thanks so much for your help. I must have lost them when cutting and pasting. 

Full marks for crowd-sourced help!

[Gusk]

except it doesn't work. the <p> is being stripped out for some reason. 

 

I think I'll go back to square 1 and re-do it. My test network is working OK.

[James Hawkins]

Are you making the changes in the html editor?

[Gusk]

In the html view but in the text box itself. I think I'll do it in Notepad and paste it back. Weird stuff is happening in general. I am not getting emails from my site at the moment and code is just being weird.

[James Hawkins]

Note: a <p> added to front and a </p> added between </a> and </div> at the end. ...note the backslash in the ending

[Gusk]

Yep, of course... it's being stripped out.

[James Hawkins]

Hi,

Try to do and save these changes in a different browser. I think it is possible that it is not saving the changes correctly or completely.

James

 

EDIT: Also do a "hard refresh" (ctrl-f5) to clear your browser's cache so you are seeing the "true' latest revision of your site.

[James Hawkins]

I also see that the editor added a <br> between the last two lines of your text box coding which switched the arrows to a vertical alignment instead of horizontal. If you want to return to default placement all you need to do is delete the <br>.

[Gusk]

OK so weird stuff is happening - mostly with this slider but other stuff too. I'll take a ticket.

Basically I paste this in:

<div id="profile_slider"> <div id="profile_slider_inner"><div class="item"><a href="http://www.bisa.asn.au"><img src="http://dl.dropbox.com/u/136289/BISA_spring_slide.jpg"; width="500" /></a><div class="overlay"><h3>Sping Ride</h3>

<p>Family fun on Oct 30... <a href="http://www.adelaidecyclists.com/events/bicycle-institute-spring-ride">more</a></p></div></div>

And this is what is there after I save and come back:

<div id="profile_slider"><div id="profile_slider_inner"><div class="item"><a href="http://www.bisa.asn.au"><img src="http://dl.dropbox.com/u/136289/BISA_spring_slide.jpg" width="500"  /></a><div class="overlay"><h3>Sping Ride</h3>

Family fun on Oct 30... <a href="http://www.adelaidecyclists.com/events/bicycle-institute-spring-ride">more</a></div></div>

That is just one of my 6. Note the <p> is striped out. The final </div> is also missing. The result is my text does not show. I tried in IE as well.

I am also not getting email from my NC so I will take a ticket.

 

 

[George Sprouse]

I dont see the line to edit the number of sliders anymore. How can i add more slides?