Use in the Image Show module own graphic as scroll button!

Hello friends,
have again a question!

How can I in the intro, to use your own graphics as scroll button?

button.jpg

Thanks in advance for your help!

regards
Sakari

You would need to override this declarations:

Code: Select all

.gkIsWrapper-gk_creativity .figcaption > a {
background: transparent;
border: 2px solid #fff;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
bottom: -10%;
color: #fff;
display: inline-block;
font-size: 15px;
font-weight: 600;
left: 50%;
line-height: 1.0;
opacity: 0;
filter: alpha(opacity=0);
padding: 20px 36px;
position: absolute;
text-transform: uppercase;
-webkit-transition: bottom .3s ease-out, opacity .3s ease-out;
-moz-transition: bottom .3s ease-out, opacity .3s ease-out;
-ms-transition: bottom .3s ease-out, opacity .3s ease-out;
-o-transition: bottom .3s ease-out, opacity .3s ease-out;
transition: bottom .3s ease-out, opacity .3s ease-out;
}
.gkIsWrapper-gk_creativity .figcaption > a:hover {
   background: #fff;
   color: #7484ff;
}


Whats need to be done is to reset or change all those values, push text with text-indent outside the screen and use either background image or :before/:after pseudo class to create font-awesome icon.

The easiest is to use override.css, just remember to enable it in template settings - advanced section.

Yes, and how can I get this picture (button) to insert?

Code: Select all


<img src="images/intro/scroll-down.gif" width="155" height="100" />



Best regards and thank you!

Sorry, but css background doesn't work this way, and customisation that you are searching for is beyond our support .
You need to override a lot of css settings (mentioned above) and use background-image in the end.

When I insert it in the content so (see picture) then my little picture button appears stretched, he does not remain in its original size!
I do not understand why he does it!

button1.jpg

Is this change on your site so I can check it?

Yes, now I have changed it in the demo!
You can watch it for you there!

Thank you again!

Title and Content area of ImageShow are not designed to contain images inside. But you can use this override.css code to fix the problem:

Code: Select all

.gkIsWrapper-gk_creativity .figcaption h1 img {width: auto; display: inline-block}


It should fix the problem.

Great, it works!
Thank you very much!