Viewing 21 posts - 1 through 21 (of 21 total)
  • Author
    Posts
  • July 5, 2018 at 5:14 am #981405
    navindesigns

    How do I create a slider block like this?
    https://serving.photos.photobox.com/04824165fb760823ad000b7aa95becaed587f67267d9559ab5f8bb145fda4cbeca05f279.jpg

    Each photo will be clickable to a bio page

    Should this be a team member block? Portfolio block? Please help

    current site

    Home

    July 6, 2018 at 5:54 am #981823
    Rikard

    Hey navindesigns,

    Maybe you could try the content slider element? You have the option to set 4 columns with that element.

    Best regards,
    Rikard

    July 7, 2018 at 6:02 am #982321
    navindesigns

    I got it to work but need help with the following:

    1- How do I change the hover overlay color to dark gray?see mockup
    2- How do I move the left and right arrow to the far left and far right? see mockup

    Screenshot/Mockup – https://imgur.com/a/u2yaTo0

    3- On mobile they are stacking 2 and 2. Can I just have them stack 2 alone ? screenshot – https://imgur.com/a/ln8ic6c

    Thanks

    Home

    July 7, 2018 at 7:17 pm #982524
    Mike

    Hi,
    To change the overlay to dark gray, Try this code in the General Styling > Quick CSS field:

    #top.home .avia-content-slider-element-slider .image-overlay {
background: darkgrey !important; 
}

    To move the arrows, Try this code in the General Styling > Quick CSS field:

    
#top.home .avia-smallarrow-slider .avia-slideshow-arrows {
    width: 100% !important; 
    top: 150px !important; 
}
#top.home .avia-content-slider-inner {
    margin: 0px 50px;
}
#top .avia-smallarrow-slider .avia-slideshow-arrows a {
    width: 30px !important; 
    height: 30px !important; 
    line-height: 30px !important; 
    font-size: 30px !important; 
}

    To have the slides only 2 high in mobile, Try this code in the General Styling > Quick CSS field:

    @media only screen and (max-width: 767px) { 
#top.home .slide-entry.slide-loop-3,#top.home .slide-entry.slide-loop-4,#top.home .slide-entry.slide-loop-7,#top.home .slide-entry.slide-loop-8 {
display: none !important;
}
}

    Best regards,
    Mike

    July 12, 2018 at 5:26 am #984479
    navindesigns

    Thanks

    One last thing, can I change the last one from 2 to 1 on mobile, so basically only 1 image with the slider arrows instead of 2.

    On mobile they are stacking 2 with the arrows, I would like just 1 with the arrows.

    Thanks

    Home

    July 12, 2018 at 12:37 pm #984668
    Victoria

    Hi navindesigns,

    Best regards,
    Victoria

    July 12, 2018 at 4:29 pm #984815
    navindesigns

    Yes correct

    July 13, 2018 at 4:46 am #984942
    Mike

    Hi,
    Can you please include a admin login in the private content area so we can take a closer look.

    Best regards,
    Mike

    July 13, 2018 at 5:17 am #984948
    navindesigns

    Here you go

    July 14, 2018 at 4:14 am #985378
    Mike

    Hi,
    I cloned your content slider and set the screen options to only show on mobile, then set the number of columns to show to one.
    Then I set your other content slider to hide on mobile. This way only one content slider will show at a time, but the mobile one will only show one image at a time.

    Best regards,
    Mike

    July 15, 2018 at 4:07 am #985558
    navindesigns

    Perfect!

    Thanks

    July 15, 2018 at 4:08 am #985559
    navindesigns

    any update on this ticket?

    Stack columns next to each other instead on top of each other on mobile

    July 15, 2018 at 7:43 am #985604
    Rikard

    Hi navindesigns,

    Mike has replied to your other topic, please try out the solution he provided. Are we done with this thread?

    Best regards,
    Rikard

    July 15, 2018 at 4:44 pm #985675
    navindesigns

    quick question

    I have changed my site to a coming soon page and the homepage is now hidden unless you go straight to http://tridentsportsltd.com/home/

    how do I apply the styles to the coming soon page as well?
    here is the new homepage aka http://tridentsportsltd.com/pages/blank-pages/coming-soon-page/

    I basically need to add the styles so it will show up on here as well

    Home

    #top.home .avia-content-slider-element-slider .image-overlay {
    background: darkgrey !important;
    }

    July 15, 2018 at 7:50 pm #985725
    Mike

    Hi,
    Please search your css and change all “#top.home” to “#top.page-id-206”

    Best regards,
    Mike

    July 22, 2018 at 2:39 am #988265
    navindesigns

    Thanks. One final thing

    I would like to duplicate that same block on another page which I have done successfully here at http://tridentsportsltd.com/about/ (bottom of page)

    How do I apply the same styling to this page as well?

    Here are the CSS again that was applied to the homepage:

    #top.page-id-206 .avia-content-slider-element-slider .image-overlay {
    background: #000000 !important;
    }

    #top.page-id-206 .avia-smallarrow-slider .avia-slideshow-arrows {
    width: 100% !important;
    top: 150px !important;
    }
    #top.page-id-206 .avia-content-slider-inner {
    margin: 0px 50px;

    The page ID for this new page is 591

    Thanks

    July 22, 2018 at 3:08 am #988266
    Mike

    Hi,
    You would replace the 206 with 591:

    #top.page-id-591 .avia-content-slider-element-slider .image-overlay {
background: #000000 !important;
}

#top.page-id-591 .avia-smallarrow-slider .avia-slideshow-arrows {
width: 100% !important;
top: 150px !important;
}
#top.page-id-591 .avia-content-slider-inner {
margin: 0px 50px;
}

    Best regards,
    Mike

    July 22, 2018 at 3:17 am #988267
    navindesigns

    I tried that but it dit not work

    About

    July 22, 2018 at 2:07 pm #988382
    Mike

    Hi,
    I checked your Quick CSS and found you had a few errors in it, such as missing } I fixed it, but the site didn’t update with the new code, seems to be a server caching issue. For now I added the rule to your WordPress > Customize > Additional CSS and the code is working, I’m sure your server cache will update in the next few hours and it won’t cause any issues to have the same code in two places for now.
    Please clear your browser cache and check.

    Best regards,
    Mike

    July 24, 2018 at 2:17 am #988994
    navindesigns

    Working now. Thanks as always. You rock man!

    July 24, 2018 at 2:46 am #989000
    Mike

    Hi,
    Thanks, Glad we were able to help, we will close this now. Thank you for using Enfold.

    For your information, you can take a look at Enfold documentation here
    For any other questions or issues, feel free to start new threads under Enfold sub forum and we will gladly try to help you :)

    Best regards,
    Mike

  • Author
    Posts
Viewing 21 posts - 1 through 21 (of 21 total)
  • The topic ‘Help creating a section’ is closed to new replies.