image show gk4 - how to reduce blur efect?

Rate this topic: Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.1.00 out of 6 based on 1 vote(s)
GK User
Fri Sep 20, 2013 10:48 am
Reply with quote
Report this post
Hi,

1. How can I reduce blur effect in slideshow? Problem is with to small place to good composition with photos. We are selling t-shirts and for us very important is to have visible model face and tshirt.

I would like to have this blur effect higher, above my models head and have still visible main menu. Can You give me some advice how to move blur effect higher?

2. Second question is how to safetly move module with my t-shirts lover, to make my slideshow more visible? I think it will be good if I move it down about 100 - 120 px.

I tried to do it in firebug with margins but the margin beetwen tshirts module and pictures module also was bigger. I wish to avid this effect.

my testing website: www.climbe.cal.pl

Thanks for help and good work :)

best wishes
User avatar
Expert Boarder

GK User
Sat Sep 21, 2013 9:41 am
Reply with quote
Report this post
1. Please edit: /templates/gk_storebox/css/override.css and add at its end:
Code: Select all
.gkIsWrapper-gk_storebox .gkIsOverlay {
background-position: 0 -90px; }

Adjust -90px to your taste.
Remember to enable "CSS override" in template settings - advanced section.
User avatar
Moderator

GK User
Sat Sep 21, 2013 9:43 am
Reply with quote
Report this post
2.
Code: Select all
#gkHeader {height: 600px;}

Adjust the value to move everything down.
User avatar
Moderator

GK User
Mon Sep 23, 2013 4:39 pm
Reply with quote
Report this post
Hi Cyberek,

all options warking good, but I see one problem.

ad. 2. Now I understand how it works. There is a file header_gradient.png wich is responsible for layer replaced on original slideshow. It is important because main menu is not good visible when the picture is dark. So this file is png transparent and it makes a blur effect. When I moved it up, main menu wasnt good visible. So :) The best way for everyone who wants to make a modification of blur effect is just edit png file. This file should be lover and with stronger blur. I mean, ex. 200 px (not original 406 px) high and with stronger tonal transition :) from nothing to white. Am I wright?

3. Another question:

I noticed problems with css/override. Tell me please, I put there some modification, different css modification to different problems. How this different codes should be seperate beetween. Is there any code I need to use? If i dont use any sign ex. } can be there any problems with no working modification?

Look please: 1 code didnt work when he was at it ends, but start work when I put it at it begining?

My css overide:

/*
#------------------------------------------------------------------------
# Store Box - March Joomla! template (for Joomla 2.5)
#
# Copyright (C) 2007-2013 Gavick.com. All Rights Reserved.
# License: Copyrighted Commercial Software
# Website: http://www.gavick.com
# Support: [email protected]
*/

/* Here you can include your override CSS styles */


#gkHeader {height: 600px;}

.gkNspPM-ProductGallery .gkAddToCart {display:none;}

b, strong {
font-weight: bold;
}

.img-fulltext-none img,
.img-fulltext-left img,
.img-fulltext-right img {
display: block;
height: auto !important;
max-width: auto !important;
width: auto !important;
User avatar
Expert Boarder

GK User
Mon Sep 23, 2013 4:44 pm
Reply with quote
Report this post
Code: Select all
.img-fulltext-right img {
display: block;
height: auto !important;
max-width: auto !important;
width: auto !important;

is missing closing "}", so it should look:
Code: Select all
.img-fulltext-none img,
.img-fulltext-left img,
.img-fulltext-right img {
display: block;
height: auto !important;
max-width: auto !important;
width: auto !important;}
User avatar
Moderator

GK User
Mon Sep 23, 2013 4:48 pm
Reply with quote
Report this post
Yes, I see :) there is missing }

I tried to use this code: #gkHeader {height: 600px;}

but this made a big hole header in simple artice. So it is good for slideshow but wrong for anothers pages on web site.
User avatar
Expert Boarder

GK User
Mon Sep 23, 2013 4:53 pm
Reply with quote
Report this post
The better way is for some kind people like me who cant programming is make a slideshow bigger, ex. not 733 px but 800 px and move up transparent fille. Reduce his height to ex. 300 px and make a stronger tonal transition.

Do You know the better way? If my slideshow will be higher I lost on site (without scrolling the most important thing in trade - first look for goods in shop. :)
User avatar
Expert Boarder

GK User
Fri Sep 27, 2013 9:14 am
Reply with quote
Report this post
You could use page suffixes (if You are using one of our templates) to create body class only for homepage - and then make header different size on homepage, and different size on all the others.
User avatar
Moderator

GK User
Fri Sep 27, 2013 6:57 pm
Reply with quote
Report this post
Well, I think it is to dificult for me... I am not sure how to do that...but i did what i said last post. Edit this tnasparent file in photoshop and slideshow pictures edit also on the top with bluring white and this is good enoug.

But if you can show me how to do it, I will try.

Thanks Cyberek
User avatar
Expert Boarder

GK User
Tue Oct 01, 2013 12:11 pm
Reply with quote
Report this post
How to use suffix for page option you will find here >> How to Disable Content on selected Joomla Pages ?
User avatar
Platinum Boarder


cron