Support » Plugin: Slideshow » RIght justified pagination circles

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Stefan Boonstra

    (@stefanboonstra)

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

    Thread Starter burlingtonpress

    (@burlingtonpress)

    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.

    Thanks.

    Plugin Author Stefan Boonstra

    (@stefanboonstra)

    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.

    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!

    Thread Starter burlingtonpress

    (@burlingtonpress)

    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;
    }
Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘RIght justified pagination circles’ is closed to new replies.