Close

Account

Documentation

Forum

Menu

Portfolio Color

  • Post count: 2
    oteimages
    July 29, 2014 at 7:50 pm #2286

    Hey,
    Thanks for such an awesome theme!
    We love it,
    however. . . .

    In my portfolios, they come up beautifully, in the squares for a preview, but when I click one, it shows up with a white background in the preview. . . .

    How can I change this to black?

    Thankyou!

    Post count: 15
    evenweb
    July 29, 2014 at 8:57 pm #2288

    I would like to know the same. How to change PhotoSwipe background to black?

    Post count: 15
    evenweb
    July 29, 2014 at 9:17 pm #2289

    I found to change Photoswipe background to black – add this to the custom css. It changes the white background to black.

    /*
    * photoswipe.css
    */
    body.ps-active,body.ps-building,div.ps-active,div.ps-building{background:#000;overflow:hidden}body.ps-active *,div.ps-active *{-webkit-tap-highlight-color:rgba(255,255,255,0)}body.ps-active :focus,div.ps-active :focus{outline:0}div.ps-document-overlay{background:#000;position:fixed!important}div.ps-uilayer{background:#000;cursor:pointer}div.ps-zoom-pan-rotate{background:#000}div.ps-zoom-pan-rotate *{display:block}div.ps-carousel-item-loading{background-image:url(../img/loading.gif);background-repeat:no-repeat;background-position:center center;background-color:transparent;background-size:40px auto}div.ps-carousel-item-error{background-color:#000;background-image:url(../img/error.png);background-position:center center;background-repeat:no-repeat}div.ps-caption{background:#000;border-bottom:1px solid #eee;color:#666;font-size:13px;font-family:”Lucida Grande”,Helvetica,Arial,Verdana,sans-serif;text-align:center}div.ps-caption *{display:inline}div.ps-caption-bottom{border-top:1px solid #ddd;border-bottom:none;min-height:44px}div.ps-caption-content{color:#333;display:block;font-family:georgia;font-style:italic;padding:13px}div.ps-toolbar{background:#000;border-top:1px solid #ddd;color:#666;font-size:13px;font-family:”Lucida Grande”,Helvetica,Arial,Verdana,sans-serif;text-align:center;height:44px;display:table;table-layout:fixed}div.ps-toolbar *{display:block}div.ps-toolbar-top{border-bottom:1px solid #ddd;border-top:none}div.ps-toolbar-close,div.ps-toolbar-next,div.ps-toolbar-play,div.ps-toolbar-previous{color:#000;cursor:pointer;display:block;float:right;width:44px;border-left:1px solid #ddd}div.ps-toolbar div.ps-toolbar-content{font-family:FontAwesome}div.ps-toolbar-close div.ps-toolbar-content:before{content:”\f00d”}div.ps-toolbar-previous div.ps-toolbar-content:before{content:”\f104″}div.ps-toolbar-next div.ps-toolbar-content:before,div.ps-toolbar-next-disabled div.ps-toolbar-content:before,div.ps-toolbar-previous-disabled div.ps-toolbar-content:before{content:”\f105″}div.ps-toolbar-play div.ps-toolbar-content:before{content:”\f04b”}div.ps-toolbar div div.ps-toolbar-content{width:44px;height:44px;margin:0 auto}div.ps-toolbar div div.ps-toolbar-content:before{color:#666;font-family:FontAwesome;height:44px;line-height:44px;margin:0 auto;font-size:21px} div.ps-toolbar div.ps-toolbar-play div.ps-toolbar-content:before { font-size: 16px; }

    Post count: 2
    oteimages
    July 30, 2014 at 5:10 pm #2336

    Thank you!
    Where is the custom CSS option?

    Again, thank you!

    -OTE

    Post count: 15
    evenweb
    July 30, 2014 at 7:01 pm #2337

    Press the Jkreativ menu, it’s in the Jkreativ Dashboard options.

    Post count: 2
    oteimages
    July 30, 2014 at 7:20 pm #2338

    Thank you, friend.

    I entered the code you allotted.
    Yet it’s still white . . . .
    Am I missing something?

    Thank you for the help!

    Post count: 15
    evenweb
    July 30, 2014 at 8:28 pm #2339

    The css code I sent you is the ‘background colour adjusted to black’ css code I have used myself to change the following PhotoSwipe background to black – see here (the gallery slideshow – when you view the individual images – was white by default):

    http://stevencragg.com/event-photography-party-portraits/

    Possibly I am mistaken in that you are using one of the other gallery/portfolio options also available in theme? If so, simply view that slideshow page in your browser and then view the css for that page. In the revealed code you will be able to identify what css code is for the slideshow and then reverse engineer it – i.e. by changing white “fff” to “000”. It took me a couple of attempts to identify what css class was the for the slideshow page background.

    Just trying to help another user. Otherwise wait for official support.

    Post count: 2684
    Rai
    July 31, 2014 at 11:19 am #2360

    Hi guys,

    Actually, you can use this simple CSS to make Photoswipe background change to black:

    Thank you

    Post count: 15
    evenweb
    July 31, 2014 at 2:10 pm #2369

    No, that does not work for me. Wish it did – simple, but no.

    Post count: 2684
    Rai
    August 1, 2014 at 6:53 am #2391

    Hi @evenweb,

    Can you give me your portfolio page url which is have those Photoswipe script.

    Thank you

    Post count: 15
    evenweb
    August 1, 2014 at 7:52 am #2399

    This portfolio page uses the PhotoSwipe css code that I changed to black with the extensive code I offered above. The single css class you offered does not change it to black – it just reverts back to light grey/white. I’m happy so long as it works:

    http://stevencragg.com/event-photography-party-portraits/

    Post count: 15
    evenweb
    August 1, 2014 at 7:53 am #2400

    ps: I mean the slider page(s) when you click on any of the images.

    Post count: 2684
    Rai
    August 2, 2014 at 1:30 am #2419

    Sorry, CSS that I gave above was for Magnific expand. Please try this for lightweight CSS:

    Thank you

    Post count: 15
    evenweb
    August 2, 2014 at 6:27 pm #2438

    Yes, now that css works – nice and elegant. Thank you.

    Post count: 2684
    Rai
    August 3, 2014 at 12:25 pm #2466

    Bravo! 🙂

You must be logged in to reply to this topic.