Title: FlexSlider CSS for 2012 Theme
Last modified: August 20, 2016

---

# FlexSlider CSS for 2012 Theme

 *  [jeryj](https://wordpress.org/support/users/jeryj/)
 * (@jeryj)
 * [13 years, 4 months ago](https://wordpress.org/support/topic/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;
       }
       ```
   
 * [http://wordpress.org/extend/plugins/flexslider-hg/](http://wordpress.org/extend/plugins/flexslider-hg/)

Viewing 1 replies (of 1 total)

 *  Thread Starter [jeryj](https://wordpress.org/support/users/jeryj/)
 * (@jeryj)
 * [13 years, 4 months ago](https://wordpress.org/support/topic/flexslider-css-for-2012-theme/#post-3374525)
 * 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.

 * ![](https://ps.w.org/flexslider-hg/assets/icon-256x256.png?rev=970026)
 * [Responsive WordPress Slider - HG Slider](https://wordpress.org/plugins/flexslider-hg/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/flexslider-hg/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/flexslider-hg/)
 * [Active Topics](https://wordpress.org/support/plugin/flexslider-hg/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/flexslider-hg/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/flexslider-hg/reviews/)

## Tags

 * [2012 theme](https://wordpress.org/support/topic-tag/2012-theme/)
 * [css](https://wordpress.org/support/topic-tag/css/)
 * [flexslider](https://wordpress.org/support/topic-tag/flexslider/)

 * 1 reply
 * 1 participant
 * Last reply from: [jeryj](https://wordpress.org/support/users/jeryj/)
 * Last activity: [13 years, 4 months ago](https://wordpress.org/support/topic/flexslider-css-for-2012-theme/#post-3374525)
 * Status: not resolved