Removing Opaque Bar from Innov8tive Slider

Community Forums Forums General Discussion Removing Opaque Bar from Innov8tive Slider

This topic is: not resolved

This topic contains 4 replies, has 4 voices, and was last updated by  educationpossible 9 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #45142

    FuriousKerry
    Participant

    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.

    #45156

    anitac
    Participant
    Post count: 6489

    Hi, 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.


    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me! | Plus Me!
    When asking for help, please provide a link or screen shot showing your problem!

    #52420

    educationpossible
    Participant
    Post count: 2

    I 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.

    #52441

    frapster
    Participant
    Post count: 2

    EducationPossible – 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 bar

    This item adjusts the space below the white bar:
    - margin: 35px to adjust the space below the white bar

    Another 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.

    #52460

    educationpossible
    Participant
    Post count: 2

    Frapster – Thank you so much! That worked like a charm!!

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.