Tagged: , , ,

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • July 13, 2019 at 8:23 pm #1118387
    Sclark91

    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

    July 14, 2019 at 3:41 am #1118428
    Mike

    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

    July 14, 2019 at 10:33 pm #1118596
    Sclark91

    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

    July 14, 2019 at 11:01 pm #1118609
    Jordan Shannon

    Hi,

    We will keep the topic open for further help.

    Best regards,
    Jordan Shannon

    April 23, 2020 at 6:47 am #1206441
    Sclark91

    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

    April 25, 2020 at 8:15 pm #1207092
    Mike

    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

    April 28, 2020 at 5:08 pm #1207859
    Sclark91

    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;
    }

    April 28, 2020 at 11:08 pm #1208025
    Jordan Shannon

    Hi,

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

    Best regards,
    Jordan Shannon

    April 28, 2020 at 11:23 pm #1208031
    Sclark91

    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!

    April 28, 2020 at 11:37 pm #1208034
    Jordan Shannon

    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

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.