Support Forum

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

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

16 years 4 months 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's Avatar
  • Will Keyworth
  • 12 Month basic
  • Affordable Web and Graphic Design
  • 283 posts
  • 1 Thanks
  • Karma: 0
The administrator has disabled public write access.
16 years 4 months 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's Avatar
  • Tom de Kok
  • 12 Month basic
  • 316 posts
  • Karma: 7
The administrator has disabled public write access.
16 years 4 months 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:
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
  • Will Keyworth's Avatar
  • Will Keyworth
  • 12 Month basic
  • Affordable Web and Graphic Design
  • 283 posts
  • 1 Thanks
  • Karma: 0
The administrator has disabled public write access.
16 years 4 months 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's Avatar
  • Tom de Kok
  • 12 Month basic
  • 316 posts
  • Karma: 7
The administrator has disabled public write access.
16 years 4 months 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's Avatar
  • Will Keyworth
  • 12 Month basic
  • Affordable Web and Graphic Design
  • 283 posts
  • 1 Thanks
  • Karma: 0
The administrator has disabled public write access.
16 years 4 months 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's Avatar
  • Tom de Kok
  • 12 Month basic
  • 316 posts
  • Karma: 7
The administrator has disabled public write access.
16 years 4 months 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:
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
  • Will Keyworth's Avatar
  • Will Keyworth
  • 12 Month basic
  • Affordable Web and Graphic Design
  • 283 posts
  • 1 Thanks
  • Karma: 0
The administrator has disabled public write access.
16 years 4 months 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's Avatar
  • Tom de Kok
  • 12 Month basic
  • 316 posts
  • Karma: 7
The administrator has disabled public write access.

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

Happy Campers

Close