• Registered: 2010-08-23
  • Posts: 14

Topic: Add Arrows like Original Theme

I'm wondering if it's possible to add the arrows to the slideshow like the original theme has. I saw in the home.php file it's still using the #controls class, and I copied over the images as well as the code for the CSS, but it's not displaying. Any suggestions? Thanks!

Thumbs up

2 Reply by zy

  • zy
  • zy
  • Theme Author
  • Offline
  • From: Singapore
  • Registered: 2009-12-29
  • Posts: 584
  • User Karma: 42

Re: Add Arrows like Original Theme

You also need to copy some of the Javascript parameters over. All the options available can be found here:
http://jquery.malsup.com/cycle/options.html

Twitter | Blog

zy's Website

Thumbs up

  • Registered: 2010-08-23
  • Posts: 14

Re: Add Arrows like Original Theme

zy wrote:

You also need to copy some of the Javascript parameters over. All the options available can be found here:
http://jquery.malsup.com/cycle/options.html

I looked in the slideshow.php file, and the options are already there. I added all of the "#control" data as well as moved the graphics over, but I can't seem to get them to appear. Suggestions?

Thumbs up

  • Registered: 2010-08-23
  • Posts: 14

Re: Add Arrows like Original Theme

I figured it out and will post the answer just in case someone else was looking. You need to add this code: 

 
           <div id="controls">
                <a href="" class="prev"><?php _e('Prev', 'arras') ?></a>
                <a href="" class="next"><?php _e('Next', 'arras') ?></a>
            </div>

In the home.php file located in the arras-classical-gamer/library. Place it between the slideshow div and the slideshow-outer div. Then add this to user.css

 
#controls { position: relative; float: left; z-index: 100; top: 90px; }
#controls .next, #controls .prev { text-indent: -9000px; width: 30px; height: 30px; display: block; z-index: 1000; opacity: 0.7; }
#controls .prev    { background: url(http://kevinlien.com/images/prev.png) no-repeat; float: left; position: absolute; left: 10px; }
#controls .next    { background: url(http://kevinlien.com/images/next.png) no-repeat; float: right; position: absolute; left: 610px; }
#controls .next:hover, #controls .prev:hover { opacity: 1; }
#controls a:focus { outline: none; }

Then start massaging the css. smile

Thumbs up

  • From: uk
  • Registered: 2011-10-11
  • Posts: 7

Re: Add Arrows like Original Theme

Thanks for the help! I have been looking for ways to add arrows into the slideshow as well. Little did I know it would be that easy. If only my skills in CSS is as good as yours.

Thumbs up