Home Forums Theme support Overlay Button On top of Home page Slider

This topic contains 7 replies, has 2 voices, and was last updated by  7Theme Support 2 years, 4 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • Hi. Just getting started with the “Superdog” theme. I’d like to customize the text and link that’s on top of the Allslider on the home page. I see options to change the heading and link in the Allslider settings. When I add a URL for a link for an individual slide it just adds a plain text link. I’d rather have a formatted CSS button there, i.e. ([button size="large" style="round" color="custom" url="http://myurl.com"]Schedule Your Consult Now[/button]). I can’t figure out where I could set that custom HTML. I also tried adding it in the “Custom Content” field in the Page->Slideshow settings but it just adds the button below the slideshow itself.

    Hi,

    the best way to change the style of the button/link is to do it with CSS code. You can try to add this at the end of your style.css file:

    .cylce_element_content a {
    border-radius: 15px;
    background: #105050;
    color: #fff;
    padding: 4px 8px;
    margin-top: 20px;
    display: inline-block;
    box-shadow: 0px 3px 10px 0px #00000069;
    }

    This code should do the job (please delete the browser cache after adding the code in your style.css file).

    Great thank you. One more slider question. How do I edit that main header slider to look more like that first cycle-slider in the “Slider and Slideshows” Page? Basically I want to remove the arrows and the full image preview and instead have the “_ _ _” at the bottom.

    Ok, you can try this CSS code:

    #cycle-prev, #cycle-next {
    display: none !important;
    }

    .image_nav .flex-control-nav li a img {
    display: none !important;
    }

    .default_dots #cycle_nav, .image_nav #cycle_nav {
    bottom: 20px !important;
    opacity: 1 !important;
    }

    .image_nav .flex-control-nav li a {
    display: inline-block;
    width: 20px;
    height: 4px;
    background: #fff !important;
    }

    .image_nav .flex-control-nav li.activeSlide a {
    top: -4px !important;
    position: relative;

    Add it to the end of your style.css file, it should do the job.

    Perfect, thank you! Also, sorry for the duplicate post. I wasn’t sure if you still monitored responses to “resolved” issues.

    You are welcome!

    Okay, we are close to “officially” launching the site and noticed one problem. In mobile resolutions the link/button disappears. I traced through the css a bit and see some code in default.css that I think is causing this, but hoping you can provide an updated CSS to override and still display this button in the slider.

    Ok, do you want to show only the button or also the text? We removed the content of the slides (text, buttons) because it is very small on mobile devices and our clients always asked us to remove it on small screens.

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

You must be logged in to reply to this topic.