Joomla Templates Club 406,261 posts

[creativedesigns Friend creativedesignsJoin date: April 2012Posts: 100Downloads:0Uploads:7 Thanks: 18]

#175922

Hi,
i’ve just loaded the Travel site to my server: http://www.creative-designs.co.za/2012-travel/
i am not wanting to use the slideshow module as a slideshow. Instead I am wanting to put one different banner on each page (as you can see from the homepage on the URL above).. The problem is – i really need the image (where the slideshow would usually go) to fit exactly on the background.
I have tried making the image smaller, but this didn’t help, it only stretched the image downward.

Please let me know how to rectify this.

Thanks!

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#447794

I’m looking at your site, but I’m not entirely certain as to the size dimensions you are wanting with regard to resizing of your slideshow. Can you, perhaps, be a bit more specific and/or provide a mock-up screenshot of what you are visualizing for this element?

By the way …. I really like the visual direction you’re going (so far) with your site – looking good.

😎

[creativedesigns Friend creativedesignsJoin date: April 2012Posts: 100Downloads:0Uploads:7 Thanks: 18]

#447832

haha! thanks Tom! Glad you like it 🙂

Initially, I started a psd mockup of the site – that was until i figured out how difficult it was to create my own template, so now i’m just substituting your images for mine haha!

I’ve attached a mockup of the site, so that you can see where i’m going with the whole slideshow module thing. the width is great. I think I need to shorted the height by about 15px or so..

Hope you can help 🙂

---

Attachments:

1. 

[creativedesigns Friend creativedesignsJoin date: April 2012Posts: 100Downloads:0Uploads:7 Thanks: 18]

#447833

oh, and one other question I have.. The menu bar.. I want it single width, not double – I won’t be using descriptions for the menu items. I tried shortening the images for the hover, backgrounds etc. The images changed size – no problem, but the actual bar still kept the same height. lol – rather confusing haha! COuld you tell me where to look to change the height of this?

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#447891

<em>@creativedesigns 312986 wrote:</em><blockquote>haha! thanks Tom! Glad you like it 🙂

Initially, I started a psd mockup of the site – that was until i figured out how difficult it was to create my own template, so now i’m just substituting your images for mine haha! </blockquote>
Certainly not an impractical way to go . . . especially when you also do some additional customizations (as you have).

<em>@creativedesigns 312986 wrote:</em><blockquote>
I’ve attached a mockup of the site, so that you can see where i’m going with the whole slideshow module thing. the width is great. I think I need to shorted the height by about 15px or so..

Hope you can help :)</blockquote>
I believe I can . . . . However, I will need you to set “Optimize CSS” to “No” within your Template Manager–General Settings

[creativedesigns Friend creativedesignsJoin date: April 2012Posts: 100Downloads:0Uploads:7 Thanks: 18]

#447896

whoops – sorry about that.. Ive set it to “no” now..
Can I ask (for interest sake) what setting the optimize to “no” changes? 🙂

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#447904

<em>@creativedesigns 313085 wrote:</em><blockquote>whoops – sorry about that.. Ive set it to “no” now..
Can I ask (for interest sake) what setting the optimize to “no” changes? :)</blockquote>
It allows us to better pinpoint various design code elements (especially CSS) when using a web inspector (such as FireBug or Chrome’s “Inspector”) to view your site online and play around with the CSS in a virtual live setting (though it doesn’t permanently change anything until you make the official changes within your file and save).

When CSS is set to “Join and Minify,” it is very difficult to pinpoint and advise you exactly which CSS rule within your particular site structure to modify – especially if you have already made modifications.

make sense? 🙂

For more info on some of the FREE web development tools you can use – including FireBug – see the link within my signature block below entitled WEB DEVELOPMENT TOOL ESSENTIALS – Design Like A Pro

[creativedesigns Friend creativedesignsJoin date: April 2012Posts: 100Downloads:0Uploads:7 Thanks: 18]

#447906

thanks tom 🙂 i use firebug frequently, just didn’t know how the compression affected it 🙂
Hope you can help with making the slideshow smaller 🙂

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#447907

<em>@creativedesigns 312986 wrote:</em><blockquote>haha! thanks Tom! Glad you like it 🙂

I’ve attached a mockup of the site, so that you can see where i’m going with the whole slideshow module thing. the width is great. I think I need to shorted the height by about 15px or so..

Hope you can help 🙂

</blockquote>

Okay, here is a suggestion . . . .

As I suspect that you do not want to squash your slideshow/banner image any further, perhaps increasing the background container color might be a better – more aesthetically pleasing – idea. (Mind you, this is only my thought/recommendation . . . if you aren’t happy with the result, no worries – we’ll continue to work on it to reach the result you want).

Okay, so within the following file path –> /templates/ja_travel/themes/dark_blue/css/template.css

Open the template.css file and, at line 174, you will see the following:

#ja-slideshow {
background: url("../images/slideshow-bg.png") repeat-y scroll left bottom #1A4C63;
}


add a “height“property to this rule – as follows (as my suggestion) . . .

#ja-slideshow {
background: url("../images/slideshow-bg.png") repeat-y scroll left bottom #1A4C63;
height: 323px;
}


SAVE CHANGES – CLEAR CACHE – REFRESH PAGE

Let me know if the result is something along the lines of what you were hoping to accomplish.

😎

[creativedesigns Friend creativedesignsJoin date: April 2012Posts: 100Downloads:0Uploads:7 Thanks: 18]

#447909

Hi Tom,
Thanks for the suggestion. The problem is, that if the slideshow area is too big, it pushes the rest of the copy below the fold – this is something i’m trying to avoid 🙁
So really do need to know how to decrease the size of the actual area where the image is placed. Sorry to be causing such a hassle 🙁

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#447914

<em>@creativedesigns 313104 wrote:</em><blockquote>Hi Tom,
Thanks for the suggestion. The problem is, that if the slideshow area is too big, it pushes the rest of the copy below the fold – this is something i’m trying to avoid 🙁
So really do need to know how to decrease the size of the actual area where the image is placed. Sorry to be causing such a hassle :(</blockquote>
No hassle at all . . . . .

Have you tried reducing the size of your image – perhaps by about 40px in height?

(40px seems to be the pixel value of the space between where the background ends and your image bottom)

[creativedesigns Friend creativedesignsJoin date: April 2012Posts: 100Downloads:0Uploads:7 Thanks: 18]

#447957

yep.. that was the first thing I tried doing before contacting you on the forums. All it did was stretch the image downward 🙁

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#448031

<em>@creativedesigns 313177 wrote:</em><blockquote>yep.. that was the first thing I tried doing before contacting you on the forums. All it did was stretch the image downward :(</blockquote>
So reducing the image height by 40px stretched the image downward?

:confused:

[creativedesigns Friend creativedesignsJoin date: April 2012Posts: 100Downloads:0Uploads:7 Thanks: 18]

#448042

yep..
Do you want me to give you FTP access etc to check it out?

[creativedesigns Friend creativedesignsJoin date: April 2012Posts: 100Downloads:0Uploads:7 Thanks: 18]

#448072

Hey Tom,
Did you get my PM with he access details? Any luck figuring out what to do?

[Author]

Posts