Okay
  Public Ticket #557092
Full Screen Image Home Screen
Closed

Comments

  • Naveed started the conversation

    Hello ThemeNectar Staff!

    I am trying to make my homepage to show nothing more but full width images with no padding or anything nor do I want them to be clickable. I was first able to achieve this by creating a portfolio element for my homepage but they still ended up being clickable. I then removed the portfolio element and inserted the single image element with css animations. This element is giving me what I want but it is not displaying it full width and I'm having a hard time finding the option to achieve this. I have left my homepage the way it is now so you can see what I'm talking about, it shows a white color border on the sides.

    Could you kindly help me figure out how to achieve this? I just plan on having about 8 - 12 images that scroll down and are not clickable or I can enable lightbox if necessary which is fine. I want my visitors to be able to look at my pictures statically as soon as they get to the home page.

    Thanks In Advance.

  •  8,470
    Tahir replied

    Hey ,

    Please set up the portfolio so i can write up the custom css needed .

    Thanks


    ThemeNectar Support Team 

  • Naveed replied

    Hey Tahir, I\'m sorry for the delayed response. I forgot to check and I missed the notification on my email. I have created a portfolio with some pictures. What will you need from me in order to help with the custom css? Is there any limitations I should be aware of or will it be easy for me to tweak? I know that I would want to change the pictures on the home screen often. Thanks again for the help!!

  •  8,470
    Tahir replied

    The custom css would apply to all portfolio items that you add. I just need the url to give you 100% working css .

    Best.


    ThemeNectar Support Team 

  • Naveed replied

    Tahir,

    Portfolio URL: http://www.samrashty.com/portfolio/home

    Hopefully this is what you are asking for. I\'m kind of confused on how you are approaching this. Would I need to create a new portfolio for every new featured image that I want to display on my homepage in full width? Please let me know, I wouldn\'t want to waste your time on a custom CSS code that won\'t be right for me; I appreciate your kindness.

    Cheers.

  •  8,470
    Tahir replied

    Hey Again,

    I need you to add a Portfolio page element on the Home page so i can write up css to make those portfolio images unclickable with css.

    Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :
    .elastic-portfolio-item {
        pointer-events: none !important;
    }

    Thanks


    ThemeNectar Support Team 

  • Naveed replied

    Hey Tahir!

    Just completed what you asked for, could you check to see if I did it right please? If it helps, I can also give you a login with admin access if it makes anything easier for ya. Thanks again for your help!

  •  8,470
    Tahir replied

    Hey Again,

    The css you added has made the images not clickable on the homepage.

    Best.


    ThemeNectar Support Team 

  • Naveed replied

    Hey Tahir,

    Thanks for the CSS but I still want the images on the homepage to be full width and it will be replaced with another picture while scrolling down, kind of like a Parallax style, how can I achieve this since this what I wanted from the beginning.

    Thanks!

  •  8,470
    Tahir replied

    Hey Again,

    If i understand you correctly its not possible given Salient Theme Options. Please elaborate with a screenshot or provide a page url of the theme demo if you are trying to make it work like that.

    Best.


    ThemeNectar Support Team 

  • Naveed replied

    http://themeforest.net/item/salient-responsive-multipurpose-theme/full_screen_preview/4363266


    Notice how when you scroll down you get a Parallax effect. Each section has it\'s own content. Instead of having text and other content per section when scrolling down the Parallax homepage, i want it to be full width images so that my web visitors land on my homepage and all that they can do is scroll down to see images. This is a photography website, I want the visitors to only see photography pictures on the home page with the menu bar on top but scrolling down with no exposed edges. The pictures on the home page are to take the full width of the screen. I assume Salient should be able to do this if you can create that full screen preview link above, instead of words and other content being in each section for every scroll you make, I just want it full width images that are not clickable, they are just static.

    Hope this helps!

  •  8,470
    Tahir replied

    Hey Again,

    I believe you want to have a stack of images sort of option in which a new image shows as you scroll down with parallax .

    Sorry but as i mentioned again its not possible with Salient .

    Best.


    ThemeNectar Support Team 

  • Naveed replied

    Hey Tahir,

    First, happy thanks giving to you and the entire staff! I appreciate the theme you guys worked hard on and for the amazing support you are giving me.

    Okay, no problem. Then let me try something else then. I will go back to having a full screen slider. But what I would like to do is change the style/design of the arrow\'s to make them more noticeable because the built in arrow design blends into the picture too much so I want to replace it with something more noticeable so people know they can go to a different image.

    Thanks again!

  •  8,470
    Tahir replied

    Hey ,

    Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :
    body[data-button-style=\"rounded\"] .section-down-arrow i {
        width: 68px !important;
        height: 43px !important;
        line-height: 66px !important;
    }
    
    
    body[data-button-style=\"rounded\"] .section-down-arrow {
        width: 72px !important;
        height: 72px !important;
        /* line-height: 51px !important; */
        font-size: 50px !important;
    }


    BEst.


    ThemeNectar Support Team 

  • Naveed replied

    Happy Holidays Tahir,

    That CSS code for the arrows did not work for me but I have gotten pretty far with the final design for the home page. Here\'s what I did.

    I enabled the Nectar slider and the plan is to make the Nectar slider be the only element on the home page nothing more. When you visit my website homepage (www.samrashty.com), notice how the Nectar slider doesn\'t fill the entire screen as it should, it\'s black on the bottom. Also, from some reason, the page scrolls down a little bit causing the menu on the top to go black.

    How can I keep the nectar slider as the only element on the home page and remove the black crop on the bottom of the slider. Also, what is the CSS code for me to change the look of the left and right arrow images of the nectar slider. Hopefully I explained correctly.

    (please see attached screenshot)

    thanks in advance

  •  8,470
    Tahir replied

    Hey ,

    Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :
    .swiper-wrapper .slider-down-arrow i.icon-default-style[class^=\"icon-\"] {
        display: none !important;
    }
    .nectar-slider-wrap[data-overall_style=\"directional\"] .swiper-container .slider-prev i, .nectar-slider-wrap[data-overall_style=\"directional\"] .swiper-container .slider-next i {
        line-height: 44px!important;
        font-size: 80px !important;
    }

    Also you need to set the Nectar Slider to FullScreen Height in VC Options .

    Best.



    ThemeNectar Support Team