FlexSlider CSS for 2012 Theme

  • 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;
}

    https://www.ads-software.com/extend/plugins/flexslider-hg/

Viewing 1 replies (of 1 total)
  • Thread Starter jeryj

    (@jeryj)

    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.

Viewing 1 replies (of 1 total)
  • The topic ‘FlexSlider CSS for 2012 Theme’ is closed to new replies.