4 replies [Last post]
Moritz83
Moritz83's picture
Offline
newbie
Last seen: 7 years 34 weeks ago
Timezone: GMT+1
Joined: 2013-02-08
Posts: 5
Points: 9

Hi,

another day another problem. I recently installed a theme for the cyclone slider 2 plugin (Wordpress) and I want to center the controls below the images. I don't get it working :/

I've figured out a solution but that's not satisfying Sad

here the files:

PHP

<?php if($slider_count>0) $slider_id = $slider_id.'-'.$slider_count; ?>
<div class="cycloneslider cycloneslider-template-controls" id="cycloneslider-<?php echo $slider_id; ?>" style="max-width:<?php echo $slider_settings['width']-20; ?>px">
	<div class="cycloneslider-slides cycle-slideshow" <?php echo cycloneslider_settings($slider_settings, $slider_id); ?>>
		<?php foreach($slider_metas as $i=>$slider_meta): ?>
			<div class="cycloneslider-slide" <?php echo cycloneslider_slide_settings($slider_meta); ?>>
				<?php if ($slider_meta['link']!='') : ?><a target="<?php echo ('_blank'==$slider_meta['link_target']) ? '_blank' : '_self'; ?>" href="<?php echo $slider_meta['link'];?>"><?php endif; ?>
				<img src="<?php echo cycloneslider_thumb($slider_meta['id'], $slider_settings['width'], $slider_settings['height'], false, $slider_meta); ?>" alt="<?php echo $slider_meta['img_alt'];?>" title="<?php echo $slider_meta['img_title'];?>" />
				<?php if ($slider_meta['link']!='') : ?></a><?php endif; ?>
				<?php if(!empty($slider_meta['title']) or !empty($slider_meta['description'])) : ?>
				<div class="cycloneslider-caption">
					<?php if(!empty($slider_meta['title'])) : ?>
					<div class="cycloneslider-caption-title"><?php echo $slider_meta['title'];?></div>
					<?php endif; ?>
					<?php if(!empty($slider_meta['description'])) : ?>
					<div class="cycloneslider-caption-description"><?php echo $slider_meta['description'];?></div>
					<?php endif; ?>
				</div>
				<?php endif; ?>
			</div>
		<?php endforeach; ?>
	</div>
	<?php if ($slider_settings['show_prev_next'] or $slider_settings['show_nav']) : ?>
	<div class="cycloneslider-controls">
		<div class="cycloneslider-controls-inner">
			<?php if ($slider_settings['show_prev_next']) : ?>
			<div class="cycloneslider-next">Next</div>
			<div class="cycloneslider-play-pause">Play</div>
			<div class="cycloneslider-prev">Prev</div>
			<?php endif; ?>
			<?php if ($slider_settings['show_nav']) : ?>
			<div class="cycloneslider-pager"></div>
			<?php endif; ?>
		</div>
	</div>
	<?php endif; ?>
</div>

CSS file

/*** Template Controls ***/
.cycloneslider-template-controls{
	z-index:2;
}
.cycloneslider-template-controls img{
   display:block;
	margin:auto;
}
.cycloneslider-template-controls .cycloneslider-controls{
    position: absolute;
	left: 42%;
    bottom:-27px;
    z-index:102;
    padding:5px 0;
    height:16px;
}
.cycloneslider-template-controls .cycloneslider-controls-inner{
    padding:0 20px;
}
.cycloneslider-template-controls .cycloneslider-play-pause{
    display:block;
    float:right;
    margin:0 10px;
    width:14px;
    height:16px;
    background: url($tpl/images/sprite-controls.png) no-repeat -118px -3px;
    text-indent:-99999px;
    cursor:pointer;
}
 
.cycloneslider-template-controls .cycloneslider-play-pause:hover{
    background-position:-118px -25px;
}
.cycloneslider-template-controls .cycloneslider-play-pause.play{
    background-position:-61px -3px;
}
.cycloneslider-template-controls .cycloneslider-play-pause.play:hover{
    background-position:-61px -25px;
}
.cycloneslider-template-controls .cycloneslider-prev,
.cycloneslider-template-controls .cycloneslider-next{
    display:block;
    float:right;
    width:18px;
    height:16px;
    background: url($tpl/images/sprite-controls.png) no-repeat;
    text-indent:-99999px;
}
.cycloneslider-template-controls .cycloneslider-prev{
    background-position:-2px -3px;
    margin-left:7px;
}
.cycloneslider-template-controls .cycloneslider-next{
    background-position:-173px -3px;
}
.cycloneslider-template-controls .cycloneslider-prev:hover{
    background-position:-2px -25px;
}
.cycloneslider-template-controls .cycloneslider-next:hover{
    background-position:-173px -25px;
}
.cycloneslider-template-controls .cycloneslider-pager{
    float:right;
    height:16px;
    overflow:hidden;
}
.cycloneslider-template-controls .cycloneslider-pager span {
    display: block;
    float:left;
    margin: 0 3px;
    width: 15px;
    height: 16px;
    background: url($tpl/images/sprite-controls.png) no-repeat -235px -3px;
    text-indent: -99999px;
    font-size: 0;
    line-height: 0;
    opacity:0.3;
}
.cycloneslider-template-controls .cycloneslider-pager span.cycle-pager-active{
    background-position:-235px -25px;
    opacity:1;
}
.cycloneslider-template-controls .cycloneslider-caption{
    position:absolute;
    bottom:0;
    left:10%;
    z-index:99;
    width:50%;
    height:40%;
    color:#fefefe;
}
.cycloneslider-template-controls .cycloneslider-caption-title{
    display:inline-block;
    margin-bottom:5px;
    padding:10px 5px;
    background: url($tpl/images/bg-caption.png);
    text-transform:uppercase;
    font-size:20px;
    line-height:1;
}
.cycloneslider-template-controls .cycloneslider-caption-description{
    padding: 5px;
    background: url($tpl/images/bg-caption.png);
    font-size:12px;
    line-height:1.5;
}

I know that position:absolute is the wrong way to solve this problem but I don't have another solution. Anyone has an idea?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 7 hours 31 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

HTML?

We need to see the html as seen by the browser. PHP source does us no good as we don't know the variables, nor do we have the environment to process your php. Post a link or view source in your browser and paste to the thread.

Keep in mind that WP theme and plugin issues are application specific. We may not be able to give an appropriate solution.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Moritz83
Moritz83's picture
Offline
newbie
Last seen: 7 years 34 weeks ago
Timezone: GMT+1
Joined: 2013-02-08
Posts: 5
Points: 9

ah yeah, sorry here is the

ah yeah, sorry Smile

here is the link
Click me

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 7 hours 31 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

.cycloneslider-template-contr

.cycloneslider-template-controls .cycloneslider-controls {
    bottom: -27px;
    height: 16px;
    position: absolute relative;
    right: 43%;
    width: 100%;  /*Don't remember whether I added this or not*/
    z-index: 102;
    }

.cycloneslider-template-controls .cycloneslider-controls-inner {
    display: table;
    margin: 0 auto;
    padding: 0 20px;
    }

I think that's the changes I ended up with. It works for me. :shrug:

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Moritz83
Moritz83's picture
Offline
newbie
Last seen: 7 years 34 weeks ago
Timezone: GMT+1
Joined: 2013-02-08
Posts: 5
Points: 9

you made my day, thank you

you made my day, thank you very much Smile Smile