Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • August 11, 2014 at 3:43 am #302385
    ShortieD

    Hey Guys – am using the Layered Slider to this page http://27.131.66.7/~lmecentr/mango-languages/ and I’ve added this shortcode as a text layer

    [av_button label='Public Libraries' link='manually,http://www.mangolanguages.com/libraries/' link_target='' color='green' custom_bg='#444444' custom_font='#ffffff' size='small' position='left' icon_select='no' icon='ue800' font='entypo-fontello']

    But no button appears – is there a way to add buttons to the layered slider?
    Cheers

    August 12, 2014 at 2:29 am #302932
    Devin

    Hey ShortieD!

    It should automatically parse shortcodes though it might need to be in the html field instead of plain text.

    Best regards,
    Devin

    August 12, 2014 at 8:48 am #303020
    ShortieD

    okay – yes that worked – it’s bit of work to get them to line up but using the HTML section in the slider worked.
    I thought I had done that but clearly I didn’t!

    Thanks

    August 12, 2014 at 8:50 am #303022
    ShortieD

    aha – but for my next question – How do I make these buttons responsive?

    Check this page on smartphone responsive view http://27.131.66.7/~lmecentr/mango-languages/

    any clues here??
    thanks

    August 13, 2014 at 3:07 am #303545
    Devin

    Unfortunately the only way to do that is to write custom css for their responsiveness.

    You could try copying out the html that is generated by the buttons and see if LayerSlider is able to grab and modify it then. Ex:

    
<div class="avia-button-wrap avia-button-right "><a href="http://www.mangolanguages.com/libraries/" class="avia-button avia-icon_select-no avia-color-custom avia-size-large avia-position-right " target="_blank" style="background-color:#ffc425; border-color:#ffc425; color:#ffffff; "><span class="avia_button_icon" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span><span class="avia_iconbox_title">FOR PUBLIC LIBRARIES</span></a></div>

    and the next button:

    
<div class="avia-button-wrap avia-button-right "><a href="http://www.mangolanguages.com/academic/" class="avia-button avia-icon_select-no avia-color-custom avia-size-large avia-position-right " target="_blank" style="background-color:#8dbe3a; border-color:#8dbe3a; color:#ffffff; "><span class="avia_button_icon" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span><span class="avia_iconbox_title">FOR ACADEMIC LIBRARIES</span></a></div>
    August 28, 2014 at 2:46 am #310164
    ShortieD

    hi Guys – I”m happy to write custom css for this – but I just need to know what classes to target.

    Sorry i have to ask you guys as I can’t ask on the Layered slider forum. Layered slider came bundled with the theme so I can’t sign up as I don’t have a liscence for it.

    I need to the following

    tablet
    – ensure that the text and buttons aren’t cut off in tablet portrait see screenshot http://awesomescreenshot.com/0aa3dxld98
    – ensure the text and buttons are better lined up in tablet landscape see screenshot http://awesomescreenshot.com/0ea3dxlg8b

    smartphone (iphone)
    – how do I hide the slider all together? I’m going to include a hidden div to make the content look better

    Cheers

    August 28, 2014 at 3:59 am #310173
    Devin

    You would give the button a class of your own and modify it or them. If you are adding in the shortcodes but not the html you could still wrap them in your own div and target the buttons inside of them with the classes shown in the comment above.

    For the other content you can either set the options for LayerSlider to better adapt for responsive in that specific slideshows slideshow options or inspect the code with dev tools to pick out the class/ID of the container to then modify it or in the mobile case completely hide it with display: none.

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