Joomlabamboo Support Forum :: Topic: Vision 2.0 page background (1/1)

Please note that this forum is only available to you in read only mode. In order to contribute to this conversation you will need to renew your subscription.

Vision 2.0 page background

If you use Zentools please post a review at the Joomla! Extensions Directory.

15 years 1 month ago

Hello,

I was hoping to find some help creating a background image like the one seen in the graphic below. I tried messing with the template.css file to no avail. I would like to have an image on the left and a hex color on the right if that's do-able

Please accept my apologies for not spending more time scouring the boards if there is an answer out there for this query already!

Will Keyworth
12 Month basic
Affordable Web and Graphic Design
283 posts
1 Thanks
Karma: 0

The administrator has disabled public write access.

15 years 1 month ago

Hi Will,

That's done by changing the correct background color in the body {} in template_css.css.
Next you need to add another DIV just below the first DIV in index.php. That new layer - which is what it is - will allow you to add a background on the left through adding that to template_css.css.

For example, if you add a DIV named "leftbackground", then in template_css.css you would add:

#leftbackground { background(.... }

Let me know if this helps you,
Tom

Tom de Kok
12 Month basic
316 posts
Karma: 7

The administrator has disabled public write access.

15 years 1 month ago

Hey Tom,

You definitely got me started on the right path. I didn't add a new div to the index.php file, though. I simply amended the template_css.css file. See the below code comparisions:

Before

html, body {height: 100%;}
body{margin: 0;padding: 0;font: 11px Century Gothic,Arial,FreeSans,sans-serif;background: #dc5214;color: #444; line-height: 1.8;font-size: 82.5%;text-align: justify;}

After

html, body {height: 100%;}
body{margin: 0;padding: 0;font: 11px Century Gothic,Arial,FreeSans,sans-serif;background: #dc5214;background-image: url(http://journeyswp.org/beta/templates/jb_vision/images/journey_orange.jpg); background-position: left top;background-repeat: repeat-y;color: #444; line-height: 1.8;font-size: 82.5%;text-align: justify;}

THANK YOU SO MUCH. I just needed a kick in the pants to make me think harder!

How do you think it looks? This is a client's request. Be honest!

Journeys With Purpose

Regards,
Will

Tom de Kok wrote:

Will Keyworth
12 Month basic
Affordable Web and Graphic Design
283 posts
1 Thanks
Karma: 0

The administrator has disabled public write access.

15 years 1 month ago

Hi Will,

Great it got you where you wanted to be. I just realize that it could have been done easier, as you have done. Good job!

The site looks great!

A suggestion: Perhaps you might add a smaller image, less height, as a subheader for pages where there is no slideshow? That way you keep the colors alive. Know what I mean?

Tom

Tom de Kok
12 Month basic
316 posts
Karma: 7

The administrator has disabled public write access.

15 years 1 month ago

Not really. You mean make the logo smaller on pages other than the frontpage?

Tom de Kok wrote:

A suggestion: Perhaps you might add a smaller image, less height, as a subheader for pages where there is no slideshow? That way you keep the colors alive. Know what I mean?

Tom

Will Keyworth
12 Month basic
Affordable Web and Graphic Design
283 posts
1 Thanks
Karma: 0

The administrator has disabled public write access.

15 years 1 month ago

What I mean is that the colors of the images in the slideshow are contributing to the design. Even though you can do without on other pages, it might be nice to have those colors continue there also.

Just picture a slideshow image shrink to perhaps 100px on other pages. Doesn't have to be a slideshow, just an image. But it was just a suggestion, nothing wrong, just a possible nice addition. That way you might even consider adding a different pub page image per section or topic.

Tom

Tom de Kok
12 Month basic
316 posts
Karma: 7

The administrator has disabled public write access.

15 years 1 month ago

OK, I think I am understanding now. You mean, I should keep the slideshow happening on other pages, just smaller? would I have to duplicate the module?

Also, bear in mind, this site is in it's very beginning stages!!! It's far from being even 1/2 way done. More images are going to be added, for sure. I do agree with you about the lack of COLOR on the other pages...

Thanks again for helping out so much. You are a valuable asset to this community!

Tom de Kok wrote:

Will Keyworth
12 Month basic
Affordable Web and Graphic Design
283 posts
1 Thanks
Karma: 0

The administrator has disabled public write access.

15 years 1 month ago

Hi Will,

Thanks, that's nice to hear.

You would not need to use the slideshow, I think that would make it too much perhaps. Just publish modules with different images for certain parts of the menu. Small ones.

Let me know how you progress!

Tom

Tom de Kok
12 Month basic
316 posts
Karma: 7

The administrator has disabled public write access.

If you use Zentools please post a review at the Joomla! Extensions Directory.

Vision 2.0 page background

Happy Campers