Okay
  Public Ticket #1740877
Portfolio Lightbox
Closed

Comments

  •  1
    tenaciousB started the conversation
    October 9, 2018 at 3:16pm

    I would like to style the 'View Larger' button the same as the contact button in the header. Is there a Salient setting for this, or will this require custom CSS? I'd also like to customize the button text.

    Lastly, I'm trying to customize the color of the hamburger button on mobile.

    Thanks in advance! You've been super helpful. Def recommending this theme to everyone!

  •  1
    tenaciousB replied
    October 9, 2018 at 3:19pm

    Sorry! Forgot to mention...I'd also like to style the left and right arrows on the lightbox if possible.


    Thanks again!

  •  8,998
    Tahir replied
    October 9, 2018 at 5:15pm

    Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):

    .portfolio-items .col .work-item .work-info a.default-link {
    border: 2px solid #7f725e;
    color: #7f725e !important;
}
header#top nav ul .slide-out-widget-area-toggle a i.lines, header#top nav ul .slide-out-widget-area-toggle a i.lines:after, #header-outer .slide-out-widget-area-toggle[data-icon-animation="simple-transform"]:not(.mobile-icon) .lines-button:after, header#top nav ul .slide-out-widget-area-toggle a i.lines:before, header#top .slide-out-widget-area-toggle.mobile-icon .lines-button.x2 .lines:before, header#top .slide-out-widget-area-toggle.mobile-icon .lines-button.x2 .lines:after, header#top .slide-out-widget-area-toggle[data-icon-animation="simple-transform"].mobile-icon .lines-button:after, header#top .slide-out-widget-area-toggle[data-icon-animation="spin-and-transform"].mobile-icon .lines-button.x2 .lines, body.material.mobile #header-outer.transparent:not(.directional-nav-effect):not([data-permanent-transparent="1"]) header .slide-out-widget-area-toggle a .close-line, body.material.mobile #header-outer:not(.directional-nav-effect):not([data-permanent-transparent="1"]) header .slide-out-widget-area-toggle a .close-line, #search-outer .close-wrap .close-line {
    background-color: #bb784e !important;
}
body.original .mfp-arrow-left:after, body.original .mfp-arrow-left .mfp-a {
    border-right: 17px solid #706453 !important;
}
body.original .mfp-arrow-right:after, body.original .mfp-arrow-right .mfp-a {
    border-left: 17px solid #7f725e;
}

    Thanks

    ThemeNectar Support Team 

  •  1
    tenaciousB replied
    October 9, 2018 at 8:15pm

    Beautiful. Thank you sir.

  •  1
    tenaciousB replied
    October 15, 2018 at 8:00pm

    Hello Tahir, 

    header#top nav ul .slide-out-widget-area-toggle a i.lines, header#top nav ul .slide-out-widget-area-toggle a i.lines:after, #header-outer .slide-out-widget-area-toggle[data-icon-animation="simple-transform"]:not(.mobile-icon) .lines-button:after, header#top nav ul .slide-out-widget-area-toggle a i.lines:before, header#top .slide-out-widget-area-toggle.mobile-icon .lines-button.x2 .lines:before, header#top .slide-out-widget-area-toggle.mobile-icon .lines-button.x2 .lines:after, header#top .slide-out-widget-area-toggle[data-icon-animation="simple-transform"].mobile-icon .lines-button:after, header#top .slide-out-widget-area-toggle[data-icon-animation="spin-and-transform"].mobile-icon .lines-button.x2 .lines, body.material.mobile #header-outer.transparent:not(.directional-nav-effect):not([data-permanent-transparent="1"]) header .slide-out-widget-area-toggle a .close-line, body.material.mobile #header-outer:not(.directional-nav-effect):not([data-permanent-transparent="1"]) header .slide-out-widget-area-toggle a .close-line, #search-outer .close-wrap .close-line {    background-color: #bb784e !important;

    Worked for changing the color of the hamburger icon on mobile header, but the transparent header is still showing a white icon. How can I change that one?



    Thanks

  •  8,998
    Tahir replied
    October 16, 2018 at 12:02pm

    Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):

    body #header-outer[data-permanent-transparent="1"].transparent:not(.dark-slide) > header#top .span_9 > .slide-out-widget-area-toggle i.lines-button:after, body #header-outer[data-permanent-transparent="1"].transparent:not(.dark-slide) > header#top .span_9 > .slide-out-widget-area-toggle i.lines:before, body #header-outer[data-permanent-transparent="1"].transparent:not(.dark-slide) > header#top .span_9 > .slide-out-widget-area-toggle i.lines:after {
    background-color: #7f725e !important;
}

    Thanks

    ThemeNectar Support Team