Slideshow width

Where do I edit width of theRealdesign's slideshow (Image Show GK4)? Module's interface options only have "Module height", which is 605 by default, but there's no width parameter.

i believe it is using 100% width in "Real Design" , what width are you trying to use ?

i believe it is using 100% width in "Real Design" , what width are you trying to use ?

You didn't answer my question - where (if not in module settings, then in which file/parameter exactly) do I edit slideshow's width? I'd like it to be 1000px instead of 100%, for example.

To answer your question properly i have asked what width you wanted to use so there was nothing else to answer.

Slide uses 100% of what ever setting you have for template width in template setting. So if you want them different width then you have to make following changes so it uses its own class.

Find File: \modules\mod_image_show_gk4\styles\gk_the_real_design\view.php
Find Line: 20 which is

Code: Select all

      <div class="gkWrap">   


Replace or change it to below

Code: Select all

      <div class="gkWrapSlide">


Find File: "\templates\gk_the_real_design\css\override.css" and add below css.

Code: Select all

.gkWrapSlide { width: 1000px; margin: 0 auto;}
.gkIsWrapper-gk_the_real_design .gkWrapSlide { position:relative; overflow:hidden; }


Enable css override from template settings > advanced settings > css override "on".

See you around...

Hi,

This was very helpfull.

I want the slideshow to be aligned on the left side of the template and not in the middle.

How do I do that?

Thanks,
Daniel

Change 20% as required. that is how far from left side, calculated based on full width.

Replace your override css as below;

Code: Select all

.gkWrapSlide { width: 1000px; margin: 0 0 0 20%;}
.gkIsWrapper-gk_the_real_design .gkWrapSlide { position:relative; overflow:hidden; }


See you around...

Hello,

It worked, but not as I would have liked.

The slideshow is now completely on the left side of the browser and what I wanted was the slideshow alligned on the left side in the template.

Any other suggestions?

Thanks,
Daniel

What is your website link, thank you...

I sent you a PM with the link.

I am sorry i haven't received any private messages, once you select a moderator click on add button to add that person to list then resend your message.

Thank you, see you around...

You have set 10% from left. Try changing that to 24% or 25% or in pixels 460px so your code would be as below.

Code: Select all

.gkWrapSlide { width: 600px; margin: 0 0 0 460px; }
.gkIsWrapper-gk_the_real_design .gkWrapSlide { position:relative; overflow:hidden; }


See you around...

Hello,

Also not exactly what I'm looking for, because when you try another browser or a smaller screen it will not align properly to the left side of the template.

I ask for the alignment because I want to place another item to the right of the slideshow. Just like the Boutique template.

Regards,
Daniel

To have such style in this template you also need to edit "gkHeader" position and create 2 different positions. As this goes into customization which i am limited with time and cannot offer further help.

To give you an idea here is what you need to do.

First wrapper class to wrap around gkheader1 and gkheader2 class which is width of the template. Currently it is 100% width of the browser space.
Then adjust gkheader1 to 70% of template space and gkheader2 30%
inside gkheader1 have your slideshow as it is now, in gkheader2 set your second module.

See you around...

Hi,

I have a simular issue on my site. I have set the template width to 980px but image show is 100% browser width. When I use the override.css code suggested It's still 100% width.

When I set .gkIsWrapper-gk_the_real_design to 980px the width is good but it's still alligned left in the browser and not centered like the rest of the template.
http://j25.xiphias.net/

Any help is welcome.

Found it, image show (+ background) now centered in template.

override.css:

Code: Select all

/* gk.stuff.css */
.gkWrapSlide { width: 980px; margin: auto;}
.gkIsWrapper-gk_the_real_design .gkHeaderBg { width: 980px; margin: auto;}
.gkIsWrapper-gk_the_real_design .gkWrapSlide { position:relative; overflow:hidden;}


Thanks.

-XiP