Viewing 30 posts - 1 through 30 (of 31 total)
1 2
  • Author
    Posts
  • January 25, 2015 at 11:32 pm #385210
    David Verburg

    Hi there,

    Will it be possible to add 4 buttons in the full width easy slider? I have 2 now, but need 4.

    http://www.redlinegolf.nl/home2/

    Regards,
    David

    January 26, 2015 at 9:56 pm #385863
    Elliott

    Hey David!

    We could edit the theme files and include some more but in this case it would be easier to just add the buttons to the caption text option.

    You can switch to the default editor and then use the magic wand icon to insert a button and then copy the shortcode and paste that into the caption text option when you edit the slider.

    It would look something like this.

    [av_button label='Click me' link='' link_target='' size='small' position='center' icon_select='yes' icon_hover='' icon='' color='theme-color' custom_bg='#444444' custom_font='#ffffff']

    Cheers!
    Elliott

    January 26, 2015 at 11:19 pm #385919
    David Verburg

    It works. However it puts the icon behind the text. </p> Doesn’t give it a line break. Will it be possible the position them below the text? Another thing. I like to link it sliding down to #golfballen (color section). That doesn’t work either:

    [av_button label='GOLFBALLEN' link="http://www.redlinegolf.nl/#golfballen'' link_target="blank'' size='big' position='left' icon_select='yes' icon_hover='' icon='' color='theme-color' custom_bg='#444444' custom_font='#ffffff']

    Regards,

    David

    January 26, 2015 at 11:42 pm #385932
    David Verburg

    When I alter ‘position’ to ‘center’ it works though… strange. I would like to only show the underline in the button when hover. Would that be possible?

    January 27, 2015 at 12:20 am #385945
    David Verburg

    I removed one of the line breaks I had in the text. That helped to get the buttons positioned below the text. It shows a grey part now behind the buttons. Like an empty text block. I am almost there hope you can help me:

    1. how to active a link to a color section on the same page (#)
    2. how to remove the underlines
    3. how to remove the empty text block behind the last button

    If possible. How to set the title not in upper case but in normal case. PLAY REDLINE. IMPROVE YOUR GAME. must become ‘Play Redline. Improve your game.’

    Regards,
    David

    January 27, 2015 at 9:08 pm #386581
    Elliott

    Hey!

    1. If you add an ID to the color section then you can link to it like so.

    <a href = "#yourID">Click me</a>

    2. + 3. Add this to your custom CSS.

    .avia-button {
  text-decoration: none !important;
}
.avia-caption-content > *:last-child {
  display: none !important;
}

    You already have CSS in there to remove the capitalized text but it looks like you typed it out in the editor as all caps.

    Cheers!
    Elliott

    January 27, 2015 at 9:22 pm #386590
    David Verburg

    Hi Elliot,

    As you noticed I found a code on the forum to set the title on ‘none’ in a full width layer slider. Worked well. Now I can decide how to set it per page. The #link I have solved too, by simply removing a ‘ (instead of ”). As you notice I am not a coder. So I am almost there with your css code to remove underlining (that worked, thanks!). As you will see it still shows a black block after the buttons. Like it says: ‘the buttons are part of the text block too’. Hope you have a code to remove that one too: http://www.redinegolf.nl/home2/.

    Regards,
    David

    January 27, 2015 at 11:20 pm #386684
    David Verburg

    Another thing I face now. I added a code block with an anchor between full width layer sliders. This creates a white space. Don’t need that. How can I remove it? Hope you can give me a custom css code for this too.

    Regards,
    David

    January 28, 2015 at 10:12 pm #387420
    Elliott

    Hey!

    The code I posted before should be removing that.

    .avia-caption-content > *:last-child {
  display: none !important;
}

    Maybe you have a typo somewhere in your CSS. Paste all of your custom CSS here.

    And you can use this CSS to remove the gap in between the sliders.

    #after_full_slider_0 {
  display: none !important;
}

    Best regards,
    Elliott

    January 28, 2015 at 10:37 pm #387432
    David Verburg

    First one was my mistake (copy pasted it from your e-mail with wrong character). Background caption text issue is solved now. However, it doesn’t show title text on the other sliders I have on the page below.

    Your code to remove the cap between sliders only removes the gap between the first slider. I have more on this page. 2 more to be precise.

    http://www.redlinegolf.nl/home2/

    Regards,
    David

    January 28, 2015 at 10:46 pm #387441
    David Verburg

    Beside that: the first anchor doesn’t work:

    http://www.redlinegolf.nl/home2/#golfballen

    code block:
    <div id=”golfballen”></div>

    slider:
    [av_button label='GOLFBALLEN' link='http://www.redlinegolf.nl/home2/#golfballen' size='' position='left' icon_select='yes' icon_hover='' icon='' color='theme-color' custom_bg='#444444' custom_font='#ffffff']

    Regards,
    David

    January 30, 2015 at 9:24 pm #388513
    Elliott

    Hi!

    Change it to this instead.

    .avia-caption-content > p:last-child {
  display: none !important;
}

    Best regards,
    Elliott

    January 30, 2015 at 9:56 pm #388536
    David Verburg

    This removes the caption text of all full width sliders on all pages…

    Regards,
    David

    January 30, 2015 at 9:59 pm #388538
    David Verburg

    }
    .page-id-8577 .avia-caption-content > p:last-child {
    display: none !important;
    }

    This one narrows it down to the specific page. Is it possible to embed it in the text itself? Like I did with the buttons and links?

    Regards,
    David

    February 1, 2015 at 9:42 am #388978
    Ismael

    Hi!

    Try to add it on the caption formatted like this:

    <style type="text/css">.avia-caption-content > p:last-child {
display: none !important;
}
</style>
This is a caption

    Or use a code block element.

    <style type="text/css">.avia-caption-content > p:last-child {
display: none !important;
}
</style>

    Cheers!
    Ismael

    February 1, 2015 at 12:19 pm #389000
    David Verburg

    Still removes the caption text of the other sliders, both code merged above caption text as well as in a block.

    February 2, 2015 at 9:13 pm #389647
    Elliott

    Hey!

    You could try targeting each slider like so.

    .avia-builder-el-0  .avia-caption-content > p:last-child { display: none !important; }

    You would need to view your source code to see which number is assigned to the slideshows though. The code above targets the first one.

    Cheers!
    Elliott

    February 3, 2015 at 6:35 pm #390288
    David Verburg

    Where should I add this code? I use a caption button in a fullscreen slider.

    Regards,
    David

    February 4, 2015 at 2:18 pm #390731
    Ismael

    Hey!

    You can try the code on the Quick CSS field. Note that you can also assign custom css for every avia elements: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

    Best regards,
    Ismael

    February 4, 2015 at 2:55 pm #390749
    David Verburg

    I can add a custom css now in a slider. Thanks. The white gap however is still there. I use this one in the slider before the white gap:

    #after_full_slider_0 {
    display: none !important;
    }

    Or should I use this in the code block (which creates the gap)?

    Regards,
    David

    February 5, 2015 at 5:45 pm #391472
    Elliott

    Hi!

    Yes, add it to a codeblock element in the page.

    <style type = "text/css">
#after_full_slider_0 {
display: none !important;
}
</style>

    Best regards,
    Elliott

    February 5, 2015 at 6:38 pm #391533
    David Verburg

    it works, but the anchor doesn’t work anymore. :-(

    </style><div id=golfballen></div><style type = “text/css”>
    #after_full_slider_0 {
    display: none !important;
    }

    Regards,
    David

    February 6, 2015 at 6:14 pm #392180
    Elliott

    Hey!

    Do this instead then.

    <style type = "text/css">
#after_full_slider_0 {
height: 0px !important;
}
</style>

    Cheers!
    Elliott

    February 6, 2015 at 7:19 pm #392218
    David Verburg

    nope, still a white gap. I am starting to get a white bar syndrom. Why does a code block create a white bar anyway?

    Regards,

    David

    February 8, 2015 at 8:59 am #392655
    Ismael

    Hey!

    Add this on Quick CSS:

    .page-id-8577 div#after_full_slider_0 .content {
padding: 0 !important;
min-height: 0;
border: none;
}

.page-id-8577 div#after_full_slider_0 {
border: none;
}

    Best regards,
    Ismael

    February 8, 2015 at 12:08 pm #392697
    David Verburg

    Thanks Ismael, that worked!

    Regards,

    David

    February 8, 2015 at 12:27 pm #392699
    David Verburg
    This reply has been marked as private.
    February 10, 2015 at 10:16 pm #394029
    Andy

    Hi!

    for mobile you cad add the mobile queries: 

    @media only screen and (max-width: 989px) {
.page-id-8577 div#after_full_slider_0 .content {
padding: 0 !important;
min-height: 0;
border: none;
}}
@media only screen and (max-width: 989px) {
.page-id-8577 div#after_full_slider_0 {
border: none;
}}

    Best regards,
    Andy

    February 10, 2015 at 10:49 pm #394055
    David Verburg

    That works. But the position of the bottom caption and buttons move to the right. Must have something to do with the first line of this code which I added to my custom css file:

    .caption_bottom .slideshow_caption .slideshow_inner_caption .slideshow_align_caption { text-align: center;padding-right: 200px;padding-left: 200px;}
    .page-id-3027 div#after_full_slider_0 .content {
    padding: 0 !important;
    min-height: 0;
    border: none;
    }

    .page-id-3027 div#after_full_slider_0 {
    border: none;
    }

    Any ideas?

    Regards,
    David

    February 12, 2015 at 12:34 pm #394940
    Ismael

    Hey!

    Move the codes on above this line: 

    @media only screen and (min-width: 768px) {

    Regards,
    Ismael

  • Author
    Posts
Viewing 30 posts - 1 through 30 (of 31 total)
1 2
  • The topic ‘3 or more buttons possible in full width easy slider?’ is closed to new replies.