Customised Lightbox and Splash-page [Madison 2]

[udnews]

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.

[Bjarne Varöystrand]

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;
}

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.

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!

[udnews]

Thank you for your rapid response, and good solutions.

Source of the post

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;
}

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.

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?

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!

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.