Frontpage Design

Hi,

I would like to make several (easy) questions.

1. How can I add the slide bar that you can change the colors of the website as you have in the demo?

2. How can I change or remove the background color of the first slide in the image show GK4?
I try to change the following code located in the style1.css from #7484ff to transparent but nothing change

Code: Select all

/* Image Show CSS */
.gkIsWrapperFixed {
   background: #transparent!important;
}

.gkIsWrapper-gk_creativity .figcaption > a:hover {
   color: #transparent!important;
}


3. I place an image in the first slide but I cannot handle the desired size. What is the size I have to place or where can I change the dimensions in order to see the hole image?

Thank you.

Hi,

1. The sidebar from our demo is prepared only for the demo purpose and isn't and won't be available in our templates.

2. You can change the slide color by putting in the image show instead of the image path the color value.

3. All images displayed in the image show are displayed with the background-size: cover effect so most probably in most of dimensions you won't see the whole image. I suggest you to select a image which have the same proportions as the most popular screen resolution on your page. Then most of the people will see your whole or almost whole image.

Hi and thank you for your reply.

1. ok
2. yes, I know that but when I place an image with transparent color it appears the default blue background. This background I would like to change.
3. Could you tell me exactly what is the optimum size? I found after several tests that 800width*400height is the optimum, isn't it?

Also I would like to ask you something more. How can I change the menu, the main, the bottom and the footer background? I have attached to you an image for this issue.

backgrounds.jpg

However, I have found that I can change it from the style1.css in line 27, 47 and 33. Is there any other way?

Thank you.

2. So please place the light backround image like #fff or #f5f5f5

3. There is no optimum size, because this element is fully responsive - it depends from your visitors resolutions - you have to select a most popular resolution on your page (from Google Analytics or other service like this) and adjust your image to the same proportions

4. There is no other easy way than changing these values in the styleX.css files.

Hi and thank you for your reply.

2. Where can I find the light background image setting?
3. ok
4. ok

Also I would like to ask something more.

5. How can I change the fonts in the image show GK4, the color and how can I write lowercase and uppercase in the slides?
6. I would like to tell me how can I change the first background that loads when the website starts (I have attached to you an image).

frontpage.jpg

2. Where can I find the light background image setting?

You have to set the light color like #fff or #f5f5f5 as an image in the image show settings

5. How can I change the fonts in the image show GK4, the color and how can I write lowercase and uppercase in the slides?

You can change all styles in the /modules/mod_image_show_gk4/styles/gk_creativity/style.css

6. I would like to tell me how can I change the first background that loads when the website starts (I have attached to you an image).

You have to change an image property for the first slide.

Where can I change an image property for the first slide?

I would like to change the color of the blue screen that loads in the beginning. I have attached to you an image.

frontpage.jpg

Thank you.

You can change this color in the style1.css file in the following fragment:

Code: Select all

/* template.css */
html {
   background: #5a69de;
}

Hi,

no, this change that you send me, change the color below the footer. It is part of the problem that I mention to the ticket "sticky footer".

I would like to change the first background that appears for few seconds before begin the slideshow as you can see in the attach image frontpage.jpg (22.4 KiB) that I had sent you.

Thank you.

Please try to change the following lines in the same file:

Code: Select all

.gkIsWrapperFixed {
background: #7484ff!important;
}

perfect!

Hi,

I would like to ask where is located the 4 icons you have in demo creativity template in the image show gk4 module slideshow? Also, I would like to tell me how to add other icons/images with some effects (rotate x,y etc)

Thank you.

Please read: http://demo.gavick.com/joomla25/creativ ... he-content

Hi,

yes, I have read it. But my question is where the icons [icon-ICON_NAME] are located?

Also, is it possible to have different animation for each letter?

Thank you.

Your questions mean that you didn't read it carefully

Please look at this text example:

Code: Select all

[anim-opacity][icon-mobile-phone,66,wibrateanim2] [icon-heart,66,pulseanim] [icon-bell,66,flickeranim] [icon-spinner,66,spin]


as you an see you can specify the icon, size and animation type.

The full list of available animations is here: http://demo.gavick.com/joomla25/creativ ... umentation

You can use these icons in the slide title and as a slide text in the Image Show module.

I understand these ones. But the problem is that I don't know the path of the icons or how to place my own icon. That exactly I am asking you.

Thank you.

You are limited to use icons from this list: http://fontawesome.io/icons/ - you have to use the [icon-*] syntax according to the mentioned list.

ok!

great!

Hi,

I have a problem with the image show GK4 module. Any image if I place in the slide, it has the same width and height even if some images are smaller or bigger.

Let me explain it better. I have an icon and I place it in a transparent canvas and I upload to the slide image. Then I decrease the icon in the same canvas and I upload it again. The width of the icon is the same in the slide image even if the dimensions of the icon is different. So the icon cover all the screen. How can I decrease the size?

Thank you.

It is connected with fact that all images are displayed with using:

Code: Select all

background-size: cover;

You have to open this file: modules/mod_image_show_gk4/styles/gk_creativity/style.css and change:

Code: Select all

.gkIsWrapper-gk_creativity .figure {
   background-position: center center;
   background-repeat: no-repeat;
   background-size: cover;
   left: 0;
   top: 0;
   opacity: 0;
   filter: alpha(opacity=0);
   height: 100%;
   position: absolute;
   overflow: hidden;
   width: 100%;
   z-index: 1;
}

to:

Code: Select all

.gkIsWrapper-gk_creativity .figure {
   background-position: center center;
   background-repeat: no-repeat;
   left: 0;
   top: 0;
   opacity: 0;
   filter: alpha(opacity=0);
   height: 100%;
   position: absolute;
   overflow: hidden;
   width: 100%;
   z-index: 1;
}

perfect!!!

Thank you!!!