RIght justified pagination circles (6 posts)

  1. burlingtonpress
    Posted 2 years ago #

    Quick question. How do I right justify the pagination circles?


  2. Stefan Boonstra
    Plugin Author

    Posted 2 years ago #

    You can change the slideshow's stylesheet using a custom stylesheet. You can learn how to create a custom stylesheet in the FAQ section.

  3. burlingtonpress
    Posted 2 years ago #

    Hi Stefan-

    I'm using a custom CSS. I was just having some issues figuring out the exact structure you have going on there and was a little unsure of getting the circles right justified.


  4. Stefan Boonstra
    Plugin Author

    Posted 2 years ago #

    I'm sorry, at the moment I'm too busy to be able to help you find the right CSS values for aligning the pagination buttons to the right.

  5. dgissen
    Posted 2 years ago #

    If you could post the answer to this, I would appreciate it. I can't seem to figure it out and want the pagination circles to the right as well. Thanks!

  6. burlingtonpress
    Posted 2 years ago #

    Here's my custom style sheet. Feel free to discern from it the right justification. :)

    I'm not saying it like that to be funny, just that I'm not a CSS expert (I know enough to get what I want done, but learning along the way) and there's probably several pieces of code in this that are either useless or overkill. I just know I got it to work despite getting zero help in the forum.

    .slideshow_container { margin-top: -20px; margin-bottom: -20px;  }
    .slideshow_container a { text-decoration: none; }
    .slideshow_container .slideshow_slide { margin-right: 2px; }
    .slideshow_container .slideshow_slide_text h2 { text-align: center; font-size: 1.3em; }
    .slideshow_container .slideshow_slide_text p { text-align: center; }
    .slideshow_container .slideshow_slide_image { }
    .slideshow_container .slideshow_slide_video { }
    .slideshow_container .slideshow_description { background: #000; width: 100%; }
    .slideshow_container .slideshow_description h2  { font-size: 1.3em; text-align: center; }
    .slideshow_container .slideshow_description p  { text-align: center; }
    .slideshow_container .slideshow_description a  { color: #fff; }
    .slideshow_container .slideshow_transparent { filter: alpha(opacity = 50); opacity: 0.5; }
    .slideshow_container .slideshow_transparent:hover { filter: alpha(opacity = 80); opacity: 0.8; }
    .slideshow_container .slideshow_controlPanel {
    	width: 21px;
    	height: 21px;
    	margin-left: -11px;
    	background: #000;
    	border-radius: 2px;
    	-moz-border-radius: 10px;
    .slideshow_container .slideshow_controlPanel ul { }
    .slideshow_container .slideshow_controlPanel ul li {
    	margin: 3px;
    	width: 15px;
    	height: 15px;
    .slideshow_container .slideshow_controlPanel ul li:hover { }
    .slideshow_container .slideshow_play {
    	background: url('%plugin-url%/images/SlideshowPlugin/light-controlpanel-square.png') 0 0 no-repeat;
    .slideshow_container .slideshow_pause {
    	background: url('%plugin-url%/images/SlideshowPlugin/light-controlpanel-square.png') -15px 0 no-repeat;
    .slideshow_container .slideshow_button {
    	margin-top: -20px;
    	height: 40px;
    	width: 19px;
    	background: url('%plugin-url%/images/SlideshowPlugin/light-arrows.png') no-repeat;
    .slideshow_container .slideshow_previous { }
    .slideshow_container .slideshow_next {
    	background-position: -19px 0;
    .slideshow_container .slideshow_pagination {
            bottom: 35px;
            width: 800px;
            right: 0px;
            text-align: right;
    .slideshow_container .slideshow_pagination a {
            display: block;
    .slideshow_container .slideshow_pagination .slideshow_currentView {
    	filter: alpha(opacity = 80);
    	opacity: 0.8;
    .slideshow_container .slideshow_pagination ul {
    	list-style-type: none;
    	display: inline;
    	position: absolute;
            right: -3px;
            text-align: right;
            float: right;
            overflow: hidden;
    .slideshow_container .slideshow_pagination ul li {
    	margin: 0px 0px 0px 5px;
    	display: inline;
    	width: 14px;
    	height: 14px;
            float: left;
    	background: url('%plugin-url%/images/SlideshowPlugin/light-square.png') no-repeat;

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Slideshow
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic


No tags yet.