Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1118387

    Hello,

    I hope you can help!

    I’d like to change the style of the control dot buttons in the content slider element to be centered and at the bottom and to not be so chunky and outlined and squished next to each other.

    Here’s a screenshot of how I’d like them to look.
    http://www.stylescc.com.au/wp-content/uploads/2019/07/Screen-Shot-2019-07-13-at-2.17.26-PM.png

    Dimension: 9×9 px
    Space between dots: 16 px
    Active color: #4B3E2D
    Deactivated color: #4B3E2D at 25% opacity (so light colored)]
    Padding Below Text: 40px

    Is there a section of code that I could add to my CSS to make these changes?

    Thanks so much for any help in advance :)

    S

    #1118428

    Hey Stephanie,
    This is the css I added to your Quick CSS, Please clear your browser cache and check, and feel free to make any adjustments needed:

    @media only screen and (min-width: 1101px) { 
    #top .avia-content-slider-element-container .avia-slideshow-dots {
        left: -3% !important; 
        text-align: center !important; 
        top: 300px !important; 
    }
    .avia-content-slider-element-container.avia-builder-el-33 {
    min-height: 280px !important; 
    }
    }
    
    @media only screen and (min-width: 767px) and (max-width: 1100px) { 
    #top .avia-content-slider-element-container .avia-slideshow-dots {
        left: -3% !important; 
        text-align: center !important; 
        top: 220px !important; 
    }
    .avia-content-slider-element-container.avia-builder-el-33 {
    min-height: 200px !important; 
    }
    }
    @media only screen and (max-width: 766px) { 
    #top .avia-content-slider-element-container .avia-slideshow-dots {
        left: -3% !important; 
        text-align: center !important; 
        top: 130px !important;
    }
    }
    .avia-slideshow-dots a.goto-slide.active {
    background-color: #4B3E2D !important; 
    }
    .avia-slideshow-dots a.goto-slide {
    background-color: #4B3E2D !important; 
    opacity: 25%;
    }
    #top .avia-smallarrow-slider .avia-slideshow-dots a {
        border-style: none !important; 
    }
    .avia-slideshow-dots a {
        height: 9px !important; 
        width: 9px !important; 
        border-radius: 9px !important; 
        margin: 0 8px !important; 
    }

    Best regards,
    Mike

    #1118596

    Thank you so much Mike!

    I see the buttons, and while it get’s cut off or disappears as the slide changes, I will see if I can fix with your code first before reaching out with any further assistance.

    Thank you SO much again :)

    Stephanie

    #1118609

    Hi,

    We will keep the topic open for further help.

    Best regards,
    Jordan Shannon

    #1206441

    Thank you both again!

    I have another same instance but I am not sure if the code needs to be different.
    If possible, I’d like to be able to have a code that I can use on all of my different client websites.

    Here is a screenshot of the default radio buttons from the content slider. They are pushed to the top right of the box with no space between each dot (making it hard to select individual dots on a phone) and the inactive dots are so faint you barely see them. I think the circles are a bit too large too making them look clunky.
    https://drive.google.com/file/d/1ZqqVApiDsMD9QciepI2HSokBnmgCGwsL/view?usp=sharing

    While I’d like to customize the style so the radio dots are instead centered in the block at the bottom (but not too close to the edge). Id like them to be half the size with maybe 5 px of space between and inactive dots be colored 20% grey and the active dot be my theme color (#085300).
    So something like this:
    https://drive.google.com/file/d/13Rlp–XXiDSvM035L9OJdxJEkJWeHr5O/view?usp=sharing

    These are mobile examples but hopefully, the code could work on desktop as well?

    I greatly appreciate your time, and I hope you’re all doing well!!

    –Steph

    #1207092

    Hi,
    Sorry for the late reply, to have the dots centered and at the bottom please try this css, which also makes your dots a little darker so you can see them better, your background was the same color.
    This css is active for your whole site, or any site.
    Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    #top .avia-content-slider-element-container .avia-slideshow-dots {
        text-align: center !important;
        position: absolute !important; 
        left: 40% !important; 
    }
    
    #top .avia-smallarrow-slider .avia-slideshow-dots a {
        background-color: #ddd;
    }

    Best regards,
    Mike

    #1207859

    Thank you! I adjusted it slightly based on your earlier code too. This seemed to do what I liked, but is there a way to code the selected dot to be #085300 instead of dark grey?

    #top .avia-content-slider-element-container .avia-slideshow-dots {
    text-align: center !important;
    position: absolute !important;
    left: 23% !important;
    }

    #top .avia-smallarrow-slider .avia-slideshow-dots a {
    background-color: #ddd;
    }

    #top .avia-smallarrow-slider .avia-slideshow-dots a {
    border-style: none !important;
    }

    #1208025

    Hi,

    I’m not seeing the dots at all. Can you direct me to where I should be looking?

    Best regards,
    Jordan Shannon

    #1208031

    I have them showing up on mobile in the content slider settings, but only for now :)
    So check the About and Contact pages on mobile!

    Thanks for checking!

    #1208034

    Hi,

    Thanks for clearing that up. Add this to quick css:

    #top .main_color .avia-smallarrow-slider .avia-slideshow-dots a.active{
    background-color: #085300!important;
    }

    Best regards,
    Jordan Shannon

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

You must be logged in to reply to this topic.