Community Forums › Forums › Archived Forums › General Discussion › Removing Opaque Bar from Innov8tive Slider
Tagged: innov8tive slider
- This topic has 4 replies, 4 voices, and was last updated 10 years, 9 months ago by educationpossible.
-
AuthorPosts
-
June 10, 2013 at 6:16 pm #45142FuriousKerryMember
I'm working on my first Genesis/Wordpress based site and I'm using the Innov8tive child theme (http://www.innov8tive.eightcrazydesigns.com/)
Everything is going pretty well so far but I would like to remove the opaque white bar and burst from each of the images on the slider. Could someone point me in the right direction? I've looked at the code but so far the solution is eluding me.
Thanks so much.
June 10, 2013 at 8:08 pm #45156AnitaKeymasterHi, I provide support for Eight Crazy Designs. Are you wanting to keep the words or just remove the opaque white bar and burst? To just remove it look for this in the Style.css:
.innov8tive #genesis-responsive-slider h2 { background: url("images/sliderH2.png") no-repeat scroll center center transparent;
Remove the background image.
Love coffee, chocolate and my Bella!
July 25, 2013 at 12:52 am #52420educationpossibleMemberI also have the responsive slider on the innov8tive child theme and I was having the same issue. Thank you for your post - I was able to change the font and remove the burst. Is there a way to add the white bar back in to the slider, but without the burst? The titles aren't showing up as well on some of our featured images and would benefit from a bar to sit on.
I'm not sure what css to put back in to not bring back the burst.
Thank you.
July 25, 2013 at 8:08 am #52441frapsterMemberEducationPossible - the following should achieve what you want....
.innov8tive #genesis-responsive-slider h2 {
background: none repeat scroll 0 0 #FFFFFF;
height: 53px;
margin: 0 0 35px -10px;
padding: 25px 0 0;
}You are 1) removing the background image since the burst is part of the 'white bar' 2) making the DIV white (#FFFFFF) which retains the assigned transparency by default and restores the white bar effect without the burst 3) adjusts the height of the DIV which affects the bottom spacing to something close to what it was originally. The key values that you will want to change in the event you'd like to tweak what I've done are:
Background - #FFFFFF to change the color
These two items affect the vertical size of the white bar:
- height: 53px to adjust the bottom half of the white bar
- padding: 25px to adjust the top of the white barThis item adjusts the space below the white bar:
- margin: 35px to adjust the space below the white barAnother option would be to not do what I did above but but edit the original graphic with the burst by deleting the burst, adding it to the media and then adjusting the original CSS like so:
.innov8tive #genesis-responsive-slider h2 {
background: url("wp-content/uploads/2013/07/sliderH2.png") no-repeat scroll center center transparent;
}NOTE: the URL is what you can get from the Media section of your admin panel once you upload the edited file.
There are lots of other ways to do any part of this but my first suggestion is how I'd solve what you're trying to do.
July 25, 2013 at 11:51 am #52460educationpossibleMemberFrapster - Thank you so much! That worked like a charm!!
-
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.