WordPress.org

Ready to get started?Download WordPress

Forums

HG Slider
FlexSlider CSS for 2012 Theme (2 posts)

  1. jeryj
    Member
    Posted 1 year ago #

    FlexSlider was getting some unfortunate stylings from the 2012 theme CSS, and this made it look nicer. I assume other themes would affect it too, as a lot of them had to with ul and .entry-content stylings that a lot of the default wordpress themes use.

    You can add this to your theme file, or maybe Hal would want to add it to the end of the Plugin's flexslider.css file?

    Either way, here it is:

    /* FlexSlider Plugin */
    .flexslider ul,
    .flexslider ul li,
    .entry-content ul.slides,
    .entry-content ul.slides li {
    	margin: 0;
    	list-style: none;
    }
    
    .flexslider ol,
    .flexslider ol li {
    	margin: 0 7px 0 0;
    	list-style: none;
    }
    
    .flexslider .slide-data {
    	position: absolute;
    	bottom: 0;
    	width: 94%;
    	padding: 0 3%;
    	background: rgba(255,255,255,.65);
    
    }
    
    .flexslider a,
    .flexslider a:hover {
    	color: #444;
    }
    
    .flexslider h2.slide-title {
    	margin: .9rem 0 .3rem;
    }
    
    .flexslider p {
    	margin-bottom: 1rem;
    }

    http://wordpress.org/extend/plugins/flexslider-hg/

  2. jeryj
    Member
    Posted 1 year ago #

    Also, I edited the flexslider-hg.php code to link the entire li element so that everything was clickable, not just the image. Basically, the text frame I made was covering the image some, thus it wasn't clickable.

    So, starting at line 104, I replaced a little bit of code:

    <li><?php if($url) { ?><a>" title="<?php the_title_attribute(); ?>" ><?php } ?>
    					<div id="slide-<?php the_ID(); ?>" class="slide">
    						<?php if ( has_post_thumbnail() ) : ?>
    								<?php the_post_thumbnail( $image_size , array( 'class'	=> 'slide-thumbnail' ) ); ?>
    						<?php endif; ?>
    
    						<div class="slide-data">
    							<h2 class="slide-title"><?php the_title(); ?></h2>
    							<?php the_excerpt(); ?>
    						</div>
    					</div><!-- #slide-x -->
    					<?php if($url) { ?></a><?php } ?>
    				</li>

    Hope this saves someone some time later.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic