Changing text-position & look Image Show GK4 @ Storefront

Hey guys!

I would like to change the following settings for IMAGE SHOW GK4 using STOREFRONT template:

- Deleting ALL animations and lines that are in the standard-version that comes with the STOREFRONT-package
- Changing the position of the text from centered to bottom left (see screenshot)
- Changing the font styles for header and content from white to black (header) and white bold with shadow (content)

Thank you very much for your support in advance!

Greetings
Ingo

Hi

Please add this code to override.css file and make sure override is enabled in template settings:

Code: Select all

.gkIsWrapper-gk_storefront figcaption h2:before,
.gkIsWrapper-gk_storefront figcaption h2:after {
    border-top: medium none;
{

.gkIsWrapper-gk_storefront figcaption {
    left: 75%;
    top: 75%;
}

.gkIsWrapper-gk_storefront figcaption h2 {
    color: #000;
}

.gkIsWrapper-gk_storefront figcaption h3 {
    border: medium none !important;
    color: #000000;
}

.gkIsWrapper-gk_storefront figcaption p {
    font-weight: bold;
    text-shadow: 2px 2px 2px #000000;
}


Hm - that kills the whole slideshows - the height of the slides collapses so that there is only a small part of the image visible.
But all lines & animations stay visible.

Check: http://www.cool-o-mat.com/zentrum/cms/

OKay - figured the collapsing-issue out:

It is That code that kills the page:

.gkIsWrapper-gk_storefront figcaption h2:before,
.gkIsWrapper-gk_storefront figcaption h2:after {
border-top: medium none;
{


So actually nearly everything is fine - I just need to remove the lines before and after the headline.

Hi

But the code You said is breaking it is to hide this lines. It does not do anything else. It cannot breake slideshow, because there is nothing height related here. Maybe You have broke the code while copying it. Please try one more time, but this time with a little different code:

Code: Select all

.gkIsWrapper-gk_storefront figcaption h2:before,
.gkIsWrapper-gk_storefront figcaption h2:after {
display: none;
}


Worked really cool so far - but there's still another line visible

Bildschirmfoto 2014-07-03 um 10.31.07.png

Hi

Please try this code:

Code: Select all

.gkIsWrapper-gk_storefront figcaption p:after {
    border-top: medium none;
}


Works brillant!

Thank you very much!

Only one thing is still missing:
the text alignment should be left - actually the texts are centered.

I have tried this:

Code: Select all

text-align: left;

But then the texts were floating out of the screen and were not visible anymore.

Hi

Than this will require a different code. Plese stop slider so I'll be able to work on it.

I have stopped the slideshow on the mainpage:
http://www.cool-o-mat.com/zentrum/cms

Hi

Add this code:

Code: Select all

.gkIsWrapper-gk_storefront .activated figcaption h2,
.gkIsWrapper-gk_storefront .activated figcaption h3,
.gkIsWrapper-gk_storefront .activated figcaption p {
    text-align: left;
}

.gkIsWrapper-gk_storefront figcaption {
    left: 55%;
}


Problem solved!
Thank you very much!

cheers guys...just what we needed