Change style configuration in Image Show

Hy. I have updated the Image Show Module and I had to change the style of the slides I use. I chose fashion style, but i need to make a few changes:
1. I need to change the size of the module (the interface allows to change only the size of the picture)
2. I need to change the color for title block.
This is the site:

http://romanulfinanciar.ro/

Please Help!

Also i have noticed that some of the titles appear for like a fraction of a second and then they are gone....

Hello,

1. This is a responsive style so it will always fill the 100% of available width

2. You can change the background in the following fragment in the module style CSS file:

Code: Select all

.gkIsWrapper-gk_fashion figcaption {
background: #cf8080;
background: rgba(207, 128, 128, 0.65);

3. I'll investigate this issue and I'll provide a solution for you soon

1. Realised that myself, but did not want to bump the request from priority line.

2.Thx a lot. Looks great.

3. Becoming a major issue. The website is for a local newspaper, so not showing opening header is a MAJOR PROBLEM!!! Tested for a while and it happens from the 5th slide no matter what i put in the slideshow. Deleted slides, put them in diffrent order...from the 5th it's not working.

3. Please apply the following fix: https://github.com/GavickPro/Image-Show ... 713f6a4eff it should solve your problems.

Made all 5 changes and the problem is still there!!!

You have made wrong changes - you have removed the code but you didn't added new ones.

Please use the following code:

Code: Select all

/**
* GK Image Show - CSS style
* @package Joomla!
* @Copyright (C) 2009-2011 Gavick.com
* @ All rights reserved
* @ Joomla! is Free Software
* @ Released under GNU/GPL License : http://www.gnu.org/copyleft/gpl.html
* @ version $Revision: GK4 1.0 $
**/
 
.gkIsWrapper-gk_fashion {
   margin: 20px;
   overflow: hidden;
   position: relative;
}

.gkIsWrapper-gk_fashion .gkIsPreloader {
   background: #f1f1f1 url('images/loader.gif') no-repeat center center;
   height: 100%;
   position: absolute;
   width: 100%;
   z-index: 101;
}

.gkIsWrapper-gk_fashion figure {
   left: 0;
   opacity: 0;
   position: absolute;
   top: 0;
   width: 100%;
   z-index: 1;
}

.gkIsWrapper-gk_fashion figure.active {
   opacity: 1;
   position: relative;
   z-index: 2;
}

.gkIsWrapper-gk_fashion img {
   display: block;
   height: auto;
   position: relative;
   width: 100%;
   z-index: 98
}

.gkIsWrapper-gk_fashion figcaption {
   background: #4c0099;
   background: rgba(76, 0, 153, 0.65);
   bottom: -100%;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;
   left: 0;
   padding: 5px 20px;
   position: absolute;
   width: 100%;
   z-index: 2;
   -webkit-transition: bottom 0.5s ease-out, top 0.5s ease-out;
   -moz-transition: bottom 0.5s ease-out, top 0.5s ease-out;
   -ms-transition: bottom 0.5s ease-out, top 0.5s ease-out;
   -o-transition: bottom 0.5s ease-out, top 0.5s ease-out;
   transition: bottom 0.5s ease-out, top 0.5s ease-out;
}

.gkIsWrapper-gk_fashion figcaption.top {
   bottom: auto;
   top: -100%;
}

.gkIsWrapper-gk_fashion figure.active figcaption {
   bottom: 0%;
   z-index: 99;
}

.gkIsWrapper-gk_fashion figure.active figcaption.top {
   bottom: auto;
   top: 0%;
   z-index: 100;
}

.gkIsWrapper-gk_fashion figcaption h3 {
   color: #fff;
   font-size: 16px;
   font-weight: bold;
   margin: 0;
   text-align: center;
}

.gkIsWrapper-gk_fashion figcaption h3 a {
   color: #fff;
}

.gkIsWrapper-gk_fashion figcaption h3 a:active,
.gkIsWrapper-gk_fashion figcaption h3 a:focus,
.gkIsWrapper-gk_fashion figcaption h3 a:hover {
   text-decoration: underline;
}

.gkIsWrapper-gk_fashion ol {
   margin: 0;
   padding: 0;
   position: absolute;
   text-align: center;
   top: 10px;
   width: 100%;
   z-index: 10;
}

.gkIsWrapper-gk_fashion ol.bottom {
   top: auto;
   bottom: 10px;
}

.gkIsWrapper-gk_fashion ol li {
   background: #fff;
   border-radius: 50%;
   box-shadow: 0 0 3px #666;
   cursor: pointer;
   display: inline-block;
   height: 12px;
   text-indent: -999px;
   width: 12px;
}

.gkIsWrapper-gk_fashion ol li:hover,
.gkIsWrapper-gk_fashion ol li.active {
   background: #4c0099;
   -webkit-box-shadow: 0 0 3px #666;
   -moz-box-shadow: 0 0 3px #666;
   -ms-box-shadow: 0 0 3px #666;
   -o-box-shadow: 0 0 3px #666;
   box-shadow: 0 0 3px #666;
}

Please also remember to refresh your browser cache after these changes.

THANK YOU! PROBLEM SOLVED! YOU ARE THE BEST!!!!