Finding best CSS control for Genesis Responsive Slider excerpt

Community Forums Forums Design Tips and Tricks Finding best CSS control for Genesis Responsive Slider excerpt

This topic is: resolved

This topic contains 3 replies, has 2 voices, and was last updated by  Steve 1 year, 4 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #51230

    Steve
    Participant
    Post count: 2

    Hello all

    I am using the latest Executive Theme on the latest WordPress (3.5.2) with Genesis Framework 1.9.2 and am having a nightmare trying to isolate the best CSS controls for slider excerpt placement.

    The link to the test site is pimpnprotect.com.au

    What I want to achieve is for the excerpt from a Page to appear in the bottom, left of each slide about 30px up from the bottom and in from the left.

    The slider’s top/bottom setting seems to not be responding.

    By playing with
    padding: 220px 0 0 0;
    in the #content #genesis-responsive-slider .slide-excerpt { area, I can almost achieve what I am after but the positioning varies wildly between Chrome and FF, and IE.

    So that is why some relative positioning based on the bottom, left of the slide would be much better. However, using border-box is throwing me.

    Any ideas or snippets greatly welcomed!

    BACKGROUND

    I don’t like the large, grey area for post content for most of my sites, so, in the Legacy Theme, I have been able to make the excerpt post area have no background and just display a Page excerpt in the bottom, left of the slide. In each excerpt field in WordPress, I can add some text styling to enhance the readability of the caption/excerpt – this gives me a perfect outcome.

    However, I am not getting the same success in Executive.

    http://pimpnprotect.com.au
    #51232

    AC
    Blocked
    Post count: 7712

    Travis Smith wrote a tutorial on changing the slider CSS – http://wpsmith.net/2011/genesis/how-to-customize-the-genesis-slider-with-your-child-theme-without-using-important/. See if this helps you.

    #51267

    Steve
    Participant
    Post count: 2

    Thanks, @Anitac

    I have now moved the slider CSS into the main CSS file and updated the functions.php but have landed in square one because I cannot seem to find the controls for removing the white caption background and getting excerpt to appear in the same place across IE, Ch and FF.

    It has been a step forward, though. Now I just need a few more.

    Thank you.

    Steve

    #51273

    Steve
    Participant
    Post count: 2

    UPDATE

    This is how I solved it.

    The tutorial before about copying the slider’s CSS into the child theme’s CSS did not quite work for me. The code inside functions.php was NOT getting the site to ignore the plugin’s CSS.

    So, I DELETED the content of style.css in the genesis responsive slider plugin file and just worked with its pasted version in the Executive child theme’s style.css. I had to also DELETE the slider CSS that was already in the child theme’s style.css to focus control on the code I brought across from the plugin.

    With that done, I could now change the excerpt background and take control of the caption placement.

    I’ll attempt to paste the code I have settled with in my child theme’s style.css, if you are interested.

    /* Genesis Slider The custom stuff by Steve 
    ------------------------------------------------------------ */
    
    #genesis-responsive-slider {
    	background-color: #fff;
    	border: 0 solid #eee;
    	margin: 0 auto;
    	padding: 0;
    	position: relative;
    }
    
    .genesis-responsive-slider-wrap {
    	clear: both;
    	display: block;
    	float: left;
    	margin: 0;
    	padding: 0;
    	position: relative;
    	z-index: 1;
    }
    
    #slides {
    	float: left;
    	margin: 0;
    	overflow: hidden;
    	padding: 0;
    	position: absolute;
    	z-index: 1;
    }
    
    .slide-excerpt {
    	background-color: none;
    	color: #ff0000;
    	filter: alpha(opacity=80);
    	display: block;
    	margin: 10px;
    	opacity: 0.8;
    	padding: 0;
    	position: absolute;
    	z-index: 8;
    }
    
    html > body .slide-excerpt-border {
    	background: none;
    	border: 0px solid #ddd;
    	display: inline;
    	float: left;
    	margin: 10px;
    	padding: 14px;
    	position: relative;
    	z-index: 8;
    }
Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.