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

    How can I style the Previous and Next arrows and slide-out overlays that appear on single posts? For example, I want to change the black background behind the circular image to a blue and toggle the opacity. I also want to increase the image, text, and entire container size.

    • This topic was modified 5 years, 9 months ago by  codemode.
    #368727

    Hey!

    Try adding this code to the Quick CSS:

    /* Dimensions */
    #top .avia-post-nav{
        height: 150px;
    }
    #top .avia-post-nav .entry-image, #top .avia-post-nav .entry-image img{
        width: 120px;
        height: 120px;
    }
    #top .avia-post-nav .entry-info{
        width: 320px;
    }
    #top .avia-post-nav:hover .entry-info-wrap{
        width:340px;
    }
    
    /* Font Size */
    #top .avia-post-nav .entry-title{
        font-size: 18px;
    }
    
    /* Background Color & Opacity */
    #top .avia-post-nav:hover{
        background: rgba(0,120,215,0.5);
    }

    Change as needed.

    Cheers! 
    Josue

    #368754

    Very helpful. Thanks Josue!

    And what about changing the default color behind the arrows?

    • This reply was modified 5 years, 9 months ago by  codemode.
    #369032

    Hi!

    Please add following code to Quick CSS and adjust as needed

    #top .avia-post-nav {
    background: rgba(255,0,255,0.1);
    }

    255,0,255 is the RGB value of the color and 0.1 is opacity level

    Regards,
    Yigit

    #369174

    Thank you!

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

The topic ‘Styling the Previous and Next Arrows’ is closed to new replies.