Welcome to the Koken CMS community!

Here at KCS, you will find a friendly bunch of photographers who like to share their love for the Koken CMS. We hope that you will enjoy your time here and thrive in our community!

You asked for it: Donations!
You asked for it, and it's here: The possibility to "buy me a beer (or more)"!

Seriously: By giving a small paypal donation you will help with keeping this site afloat and also give me more incentive to develop OxyGen further... ;)

// Bjarne Varöystrand and the KCS Team
Koken Development

Customised Lightbox and Splash-page [Madison 2]

Questions or issues regarding Koken themes.
Forum rules
As of late, we have been seeing cases where some of you have been posting multiple types of questions within a singular type of topic...

This makes searching here a nightmare for people whom are attempting to find out whether or not their question has already been asked, or possibly even answered. Therefore, I would like to implement some very basic rules, which I think everybody will be happy with, given that they will lead to better search results.

  1. All public communication is done in English
  2. ONE question per topic
  3. Make the title descriptive
  4. If it's regarding a theme: make sure you mention the theme name.
  5. Leave a URL to your site, since sometimes, custom "hacks" and CSS will be uniqe to your site.

I believe that these simple rules will not only make our lives easier, but also the lives of our visitors :D

I am of the opinion that ignoring these requests will make it harder for us all.
Plus, we won't be able to actually mark an issue/topic as solved, since it would be more difficult to determine what we're actually trying to solve! For example: Are we addressing the first, second or third question?
udnews
User
User
Posts: 6
Joined: Sat 09 Feb 2019, 12:54
Your name: Henrik

Customised Lightbox and Splash-page [Madison 2]

Postby udnews » Sat 09 Feb 2019, 14:26

Morning everyone.

I'm trying out Koken for the first time, and I've found that Madison 2 delivers something close to what I'm looking for, but I've run into a few things that I would like to mod.

Visit me here: https://henrik.udnesseter.no

Intro to my site
I'm using the "Splash" page layout as Home/Start-page/Splash for visitors to be welcomed to a no BS slideshow, and I'm loving the look of it. In order to give an overview of the content, I'm utilising the "Home" page layout in grid mode (both the "Splash" and "Home" layouts draw content from "Featured").
So there is currently only three pages on my site Home/Slideshow, Grid and Contact


Problems and wishes

Lightbox
From the "Grid" ("Home" page layout) the pictures open in Lightbox as I want them to, but heres what I'd like to change:
    Now Lightbox is displaying a caption: "Henrik Udnesseter/ Features / xx of xx" - I want to remove this
    I'd like to remove the Play slideshow button
    I'd like to remove the navigation arrows

To sum up, I'd like the pictures to open individually in Lightbox, with only the options for full screen and close, and no navigation of slideshow.

Splash
    I'd like to add small navigation buttons(backwards arrow and forwards arrow) in the bottom of the site, preferably only on the desktop version
    I'd like to add just a bit of padding top, right, and bottom
    I'd like the slideshow to display two photos at a time (book style)

I'm not very savvy with code, but I'm learning as I go. Any help with these issues/wishes are welcomed with smiles and gratitude.

Have a good day,
Henrik.
User avatar
Bjarne Varöystrand
Webbplatsadministratör
Webbplatsadministratör
Posts: 1063
Joined: Sun 29 Mar 2015, 21:02
Your name: Bjarne Varöystrand
Location: Lysekil, Sweden
Contact:

Re: Customised Lightbox and Splash-page [Madison 2]  Topic is solved

Postby Bjarne Varöystrand » Tue 12 Feb 2019, 13:49

udnews wrote:Source of the post I'd like to remove the Play slideshow button

This might help

Code: Select all

body#k-lightbox #lbox-bttn-pause, body#k-lightbox #lbox-bttn-play {
   display:none;
}

udnews wrote:Source of the post I'd like to remove the navigation arrows

Thy this custom CSS

Code: Select all

body#k-lightbox div.tnav {
   display: none !important;
}

To combine the both you have

Code: Select all

body#k-lightbox #lbox-bttn-pause,
body#k-lightbox #lbox-bttn-play,
body#k-lightbox div.tnav {
   display: none !important;
}

If the above wont work from the custom CSS box, you will need to add a custom lightbox-settings.css.lens file to you're themes CSS directory with the above CSS. :roll:

The splash is different beast to tackle....

The padding is easy to achieve:

Code: Select all

body.k-lens-splash #splash,
body.k-lens-splash_featured_albums #splash {
   padding-top: 1em;
   padding-right: 1em;
   padding-bottom: 1em;
}

or shortening the whole thing to:

Code: Select all

body.k-lens-splash #splash,
body.k-lens-splash_featured_albums #splash {
   padding: 1em 1em 1em 0;
}


The "book style" changes is "worse" since this would require a complete rewrite of the slideshow plugin code! :o
Regards
Bjarne Varöystrand - Image || Reddit || Twitter|| Facebook

Image
udnews
User
User
Posts: 6
Joined: Sat 09 Feb 2019, 12:54
Your name: Henrik

Re: Customised Lightbox and Splash-page [Madison 2]

Postby udnews » Wed 13 Feb 2019, 14:32

Thank you for your rapid response, and good solutions.

Bjarne Varöystrand wrote:Source of the post
udnews wrote:Source of the post I'd like to remove the Play slideshow button

This might help

Code: Select all

body#k-lightbox #lbox-bttn-pause, body#k-lightbox #lbox-bttn-play {
   display:none;
}

udnews wrote:Source of the post I'd like to remove the navigation arrows

Thy this custom CSS

Code: Select all

body#k-lightbox div.tnav {
   display: none !important;
}

To combine the both you have

Code: Select all

body#k-lightbox #lbox-bttn-pause,
body#k-lightbox #lbox-bttn-play,
body#k-lightbox div.tnav {
   display: none !important;
}

If the above wont work from the custom CSS box, you will need to add a custom lightbox-settings.css.lens file to you're themes CSS directory with the above CSS. :roll:


I had already tackled the navigation and play/pause button for the Lightbox, by simply removing the code from the sheet. So this will not be carried on whenever the theme gets updated, am I right? If I revert all the changes I've made to the theme and rather go about changing it using your suggested method, this will be carried on through to future updates?

Bjarne Varöystrand wrote:The splash is different beast to tackle....

The padding is easy to achieve:

Code: Select all

body.k-lens-splash #splash,
body.k-lens-splash_featured_albums #splash {
   padding-top: 1em;
   padding-right: 1em;
   padding-bottom: 1em;
}

or shortening the whole thing to:

Code: Select all

body.k-lens-splash #splash,
body.k-lens-splash_featured_albums #splash {
   padding: 1em 1em 1em 0;
}


The "book style" changes is "worse" since this would require a complete rewrite of the slideshow plugin code! :o


Getting the padding was a huge point for me, so thank you very much. Now my website looks the part. I figured the 2-up/book style layout would be a tough nut to crack. I guess for now I'll leave it like this..

Hat tip to you Mr. Varöystrand, thanks a million.

  • Similar Topics
    Replies
    Views
    Last post

Return to “Themes”



Who is online

Users browsing this forum: No registered users and 1 guest