Featured Content slider Design

  • Author
    Posts
  • #149582
    caressaluna9
    Member

    Hello!

    I love using your theme so much and I have access to my CSS editing, so I have a question if you could help me with that.

    Would it be possible to add code to my CSS to change theme Olsen’s Featured Slider design into looking like one on the Rosalie theme here https://rosaliedemo.wordpress.com/ ?

    I love the slider on Rosalie, but everything else on your theme Olsen, so I am going to stick to Olsen no matter what, but was just wondering if you could help me with this. I love on the Rosalie Theme how the slider has that slick elegant frame on each Featured Image on the Slider and the arrows to go to the next post or previous post are also slick and elegant (I especially love the way Rosalie slider looks on mobile devices, and I don’t like how the slider on the Olsen theme look on a mobile device, it has the arrows top corners, which I don’t like).

    Thanks for your help!
    Cheers!

    The blog I need help with is: (visible only to logged in users)

    #149598
    fotispapafotiou
    Theme Author

    Hi there,
    add this

    .featured-post-content {
        background: none;
    }
    .featured-post-content .entry-title a,
    .featured-post-content .entry-date {
        color: #fff!important;
    }
    .featured-post-content .entry-meta a {
        color: #fff
    }
    
    .featured-post-content .entry-title a:after {
    
        content: '';
        width: 100%;
        height: 1px;
        background: #fff;
        display: block;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .flexslider .slides > li:before {
        box-shadow: 0 0 0 1px #ffffff;
        padding: 20px;
        content: '';
        position: absolute;
        top: 10px;
        left: 10px;
        width: calc(100% - 20px);
        height: calc(100% - 20px);
    }
    .featured-post-content .more-link {
        display: none;
    }
    #page .flexslider .flex-direction-nav a {
        background: transparent;
        top: 50%;
        color: #fff;
    }
    .flex-direction-nav a:before {
        color: #fff;
    }
    .featured-post-content {
        position: absolute;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    in your custom CSS box.
    Let me know if this worked for you.

    #149601
    caressaluna9
    Member
    Original poster

    Thanks! I still had to change one-two things on the code you sent me, but it is very helpful. Thank you so much for sending it to me. I’m not yet where I want it to be, but your help is really appreciated. Thanks!

    #149617
    fotispapafotiou
    Theme Author

    Hi there,
    Let me know which other changes you need to make

  • The topic ‘Featured Content slider Design’ is closed to new replies.