Community Forums › Forums › Archived Forums › Design Tips and Tricks › Finding best CSS control for Genesis Responsive Slider excerpt
Tagged: genesis responsive slider, slide excerpt, slider
- This topic has 3 replies, 2 voices, and was last updated 10 years, 8 months ago by Steve.
-
AuthorPosts
-
July 17, 2013 at 4:27 pm #51230SteveMember
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.auJuly 17, 2013 at 4:46 pm #51232AnitaKeymasterTravis 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.
Love coffee, chocolate and my Bella!
July 17, 2013 at 10:18 pm #51267SteveMemberThanks, @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
July 17, 2013 at 10:51 pm #51273SteveMemberUPDATE
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; }
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.