Viewing 20 posts - 1 through 20 (of 20 total)
  • Author
    Posts
  • January 12, 2017 at 6:05 am #732473
    bobo

    Hi.

    I’m using a fullscreen Slider for the home page And I would like it to display a social media icons on the center.
    Any ideas how this can be done many thanks.

    thanks

    January 13, 2017 at 4:14 am #732943
    Nikko

    Hey Hamadi,

    There’s no option or settings where you can put a social media icon inside the fullscreen slider, what I suggest is you put the social media icon below the slider instead.

    Best regards,
    Nikko

    January 13, 2017 at 9:43 am #733043
    bobo

    Hey Kikko.

    Thanks for the respond.

    I haven’t tried that although i have thought of it but I never give a try yet i was scared that my add the extra space creating the scrollbar height which i’m avoiding for any extra space scrolling up/down..

    I’m going to give a try and get back to you

    Thank you

    January 13, 2017 at 11:25 am #733069
    bobo

    Hey Kikko

    I went ahead and i created a Code Block below the fullscreen slider. my problem is I can’t seem to get the container go up only the social media icons are moving the extra white background is still display at the bottom, also is not center is staying on the left side only. here is my code

    HTML

    <div class="oshibobo">
<ul>
<a href="#"><i class="fa fa-facebook"  style="font-size:24px"></i></a>
<a href="#"><i class="fa fa-twitter"   style="font-size:24px"></i></a>
<a href="#"><i class="fa fa-linkedin"  style="font-size:24px"></i></a>
<a href="#"><i class="fa fa-youtube"   style="font-size:24px"></i></a>
</ul>
</div>

    CSS

    .oshibobo .container {
margin-top: -50px;
margin-left: 0px;
margin-right: 0px;
}
    • This reply was modified 7 years, 10 months ago by bobo.
    January 13, 2017 at 11:48 am #733075
    bobo

    I have decided to use the color section block and i give an ID class name and I manage to get the block container to move up but now the social media icons are not showing is overlapping the fullscreen slider I mean is behind the fullscreen slider so i have tried to use the z-index 9999 !important that didn’t work and still not center.

    January 13, 2017 at 12:19 pm #733082
    bobo

    Okay I have manage to Solve my Problem :)

    Thanks for been around and welling to save me.

    Feel free to close this topic.

    January 13, 2017 at 1:00 pm #733096
    Guenni007

    or you place a button on the slider and do the following code to it:
    i gave the fullscreen slider the class : socialbutton for better specified selection

    .socialbutton .avia-slideshow-button {
    background: rgba(0, 0, 0, 0) url("///wp-content/uploads/add-social-media-buttons.png") no-repeat scroll 0 0 / cover !important;
    border: 2px solid #fff !important;
    border-radius: 50% !important;
    height: 100px;
    text-indent: -5000px;
    width: 100px
}

    see here: https://webers-testseite.de/ikom/fullscreen-slider/

    or as two buttons ( with slider class: socialbuttons2 ):

    .socialbuttons2 .avia-slideshow-button:nth-child(odd)  {
    background: rgba(0, 0, 0, 0) url("/ikom/wp-content/uploads/add-social-media-buttons.png") no-repeat scroll center center / 100% 100% !important;
    border: 2px solid #fff !important;
    border-radius: 150% !important;
    font-size: 1px;
    height: 100px !important;
    text-indent: -5000px;
    width: 100px !important;
}

.socialbuttons2 .avia-slideshow-button:nth-child(even) {
    background: rgba(0, 0, 0, 0) url("/ikom/wp-content/uploads/twitter.png") no-repeat scroll center center / 100% 100% !important;
    border: 2px solid #fff !important;
    border-radius: 150% !important;
    font-size: 1px;
    height: 100px !important;
    text-indent: -5000px;
    width: 100px !important;
}

.avia-multi-slideshow-button {
    min-width: 100px;
}
    • This reply was modified 7 years, 10 months ago by Guenni007.
    January 13, 2017 at 11:17 pm #733354
    Nikko

    Hi bobo,

    Glad that you sorted it out :)


    @Guenni007    : Thanks for sharing your solution :)

    Regards,
    Nikko

    January 14, 2017 at 2:47 pm #733550
    bobo

    Hey Guenni007 Good timing I was runing into a problem with the social icons not displaying correctly on other devices I will give a try and see how it goes.

    Fullscreen slider dasn’t have an option to give a class name, how did you manage to give a class name?

    Thanks

    • This reply was modified 7 years, 10 months ago by bobo.
    January 14, 2017 at 4:00 pm #733568
    bobo

    Hi Nikko Please see the private Content

    January 14, 2017 at 4:43 pm #733577
    Vinay

    Hi,

    Please see the test page in private link.

    We have enabled the debug mode so you can copy the shortcode for ALB elements.

    Enable Avia Layout Builder Debug

    1. Create the social icons in an empty page and copy the shortcode.
    2. Paste the shortcode in the slider caption.

    Let us know if you have any questions, we are happy to help :)

    Best regards,
    Vinay

    January 14, 2017 at 5:14 pm #733584
    bobo

    Hi Vinay, Thanks great idea i never knew we can do this.
    but my problem still remain how can i have the 3 icon displaying horizontally on the center…

    1. Cant get the social media displaying on horizontally center WP keeps adding br html tag.
    2. Cant get the shortcode for two buttons displaying side by side.

    See the home page please

    Thanks this makes things much easier.

    • This reply was modified 7 years, 10 months ago by bobo.
    January 14, 2017 at 7:03 pm #733608
    Vinay

    Hi,

    Please add the icons, buttons you want we will help you center align them :)

    Best regards,
    Vinay

    January 15, 2017 at 6:30 am #733683
    bobo

    Vinay I thought you understood my problem? the debug mode dasn’t solve my problem just allows me to see the shortcode.
    Guenni007 < understood my request but i still don’t understand how he manage it

    • This reply was modified 7 years, 10 months ago by bobo.
    January 15, 2017 at 10:20 am #733704
    bobo

    Hey Guenni007 can you please be a little more specific how you manage to get the social icon displaying? did you use the HTML Ul listing can i see your html code please.

    January 15, 2017 at 10:48 am #733706
    Guenni007

    Custom Class on allmost all ALB Elements: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

    Yes i understand – but it is with enfold normal settings only a two button solution!
    this is only the normal two buttons which can be choosed at slider settings. !
    The text of those buttons was shifted out of viewport by text-indent (but this is nice because it can be red bei bots – seo advantage)

    you see on the bottom of the normal fullscreen slider that i set up a custom class:
    (klick on the image to enlarge)

    fullscreenslider

    than look to image/caption options of the sliderimage – you got the choice to have two buttons there !

    Caption of Slider Image

    the rest is css in quick css and to look for a nice Button

    • This reply was modified 7 years, 10 months ago by Guenni007.
    January 15, 2017 at 11:10 am #733711
    Guenni007

    by the way if you have more than these two buttons – i will do that too with a fullscreenslider on top.
    Underneath you put a color section – with the buttons.
    the trick is not to make the z-index higher to the buttons – but to lower it on the slider:

    see here : https://webers-testseite.de/ikom/full-slider-with-content/
    there might be a bit more css to solve – because you have to find a solution on small screens.

    The z-index for slider (i only set it for that page – or you give the fullscreen-slider a customclass to select it):

    .page-id-3220 #fullscreen_slider_0 {
    z-index: 0;
}

    i’m looking for you to a nice solution soon

    January 15, 2017 at 11:53 am #733720
    Guenni007

    so here is a solution for more than two buttons:

    ALB:
    Fullscreenslider with custom class (in my case: socialbuttons3)
    downunder a colorsection with a 1/1 container (with -400px on: “Custom top and bottom margin” ) and in it a text-block !
    You now can place one image (all floating left) and again and again in the text-block. Set up your link Options and target Option to the Images

    The Text-Block got a custom class: centerbutton

    #fullscreen_slider_0.socialbuttons3 {
    z-index: 0;
}

.avia_textblock.centerbutton p {
    display: inline-block !important;
    left: 50%;
    position: relative;
    transform: translateX(-50%);
}

.avia_textblock.centerbutton a {
    display: inline !important;
    margin: 15px !important;
    opacity: 0.9;
    width: 120px;
}

.avia_textblock.centerbutton a:hover {
    transform: scale(1.1);
    opacity: 1;
    transition: all 0.4s ease-in-out;
}

.avia_textblock.centerbutton .image-overlay {
    display: none !important;
}

    Result: https://webers-testseite.de/ikom/full-slider-with-content/

    • This reply was modified 7 years, 10 months ago by Guenni007.
    January 15, 2017 at 2:51 pm #733749
    Guenni007

    hm last solution does work on all browsers – but on Ipad the buttons are very big . And the last is a bit shifted – i will make a research for it.
    And hope to get a solution for it.

    January 16, 2017 at 11:19 pm #734384
    Nikko

    Hi bobo,

    Seems like you have already done it. You can center the 4 social icons center horizontally by adding this css in Quick CSS:

    #oshibobo ul {
    margin: 0;
    text-align: center;
}

.oshibobo ul .fa {
    margin-left: 15px;
    margin-right: 15px;
}

    Let us know if this helps.


    @Guenni007    : thanks for helping :)

    Regards,
    Nikko

    Regards,
    Nikko

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