Joomla Templates Club 406,261 posts

[jasonre Friend jasonreJoin date: July 2006Posts: 56Downloads:0Uploads:0 Thanked: 1 times in 1 posts]

#120440

Just need to know how I can modify the entire white space directly behind the logo and date. I’d like to put a background image in there somehow (full width of page).

Any solutions?

Thank You!
Jason

[ShannonN Friend ShannonNJoin date: July 2006Posts: 1947Downloads:0Uploads:9 Thanks: 16 Thanked: 172 times in 49 posts]

#220781

jasonre;16397Just need to know how I can modify the entire white space directly behind the logo and date. I’d like to put a background image in there somehow (full width of page).

Any solutions?

Thank You!
Jason

I haven’t had a look but usually the bkg image is just a very small image 1 or 2px wide and the height you need tiled across the page using css,( repeat x ) find that sliver of image change it and save as the same file name as original name and you have the full width colour change, the logo and text of course are an image and just require modification and export using whatever art package you have , know etc

Cheers ShannonN

[bigrk Friend bigrkJoin date: February 2007Posts: 1425Downloads:0Uploads:2 Thanks: 39 Thanked: 45 times in 15 posts]

#220785

<em>@ShannonN 16402 wrote:</em><blockquote>I haven’t had a look but usually the bkg image is just a very small image 1 or 2px wide and the height you need tiled across the page using css,( repeat x ) find that sliver of image change it and save as the same file name as original name and you have the full width colour change, the logo and text of course are an image and just require modification and export using whatever art package you have , know etc

Cheers ShannonN</blockquote>

All those details begin at line 1032 of the template_css.css file.

[jasonre Friend jasonreJoin date: July 2006Posts: 56Downloads:0Uploads:0 Thanked: 1 times in 1 posts]

#220786

Thanks guys. I just assumed that for this template there weren’t any image files for that part of the design. I just thought it might be a solid white color coded into the template, instead of a tiled image background. I’ll look at the line you mentioned and see if I can handle it from there.
Thanks!
Jason

[jasonre Friend jasonreJoin date: July 2006Posts: 56Downloads:0Uploads:0 Thanked: 1 times in 1 posts]

#220789

We’ll it didn’t quite work out correctly. I changed the header-bg.gif file and it only changes the lower 1/3 of the entire header. The rest still shows up white behind and above the logo and behind the date module. Any ideas beyond this on how get the entire header area to look like the header-bg.gif image?

Here’s the current code for the header:

/* HEADER
——————————————————— */
#ja-headerwrap {
border-bottom: 1px solid #999999;
background: url(../images/header-bg.gif) repeat-x bottom #FFFFFF;
}

#ja-header {
padding: 15px 0;
line-height: normal;
text-align: left;
position: relative;

[bigrk Friend bigrkJoin date: February 2007Posts: 1425Downloads:0Uploads:2 Thanks: 39 Thanked: 45 times in 15 posts]

#220791

As I said the details started at that line but there is more code below what you have shown here. I haven’t looked at the all images yet so if you can’t figure it out post your url so I can see what you have done so far.

[jasonre Friend jasonreJoin date: July 2006Posts: 56Downloads:0Uploads:0 Thanked: 1 times in 1 posts]

#220793

I figured it out!
Simple solution. Just need to make the header-bg.gif bigger so it fills the entire height of the box. 200px should work great.

[bigrk Friend bigrkJoin date: February 2007Posts: 1425Downloads:0Uploads:2 Thanks: 39 Thanked: 45 times in 15 posts]

#220794

<em>@jasonre 16418 wrote:</em><blockquote>I figured it out!
Simple solution. Just need to make the header-bg.gif bigger so it fills the entire height of the box. 200px should work great.</blockquote>

That’s good news! Have fun with the template…I know I am. Don’t forget to mark this thread as solved. 🙂

[jasonre Friend jasonreJoin date: July 2006Posts: 56Downloads:0Uploads:0 Thanked: 1 times in 1 posts]

#220799

Here’s my guide to changing the header section of JA Teline. It took me a little while to get everything figured out, so hopefully this will help you out.

Here’s what I wanted to accomplish:
1) Replace the logo
2) Change the white background to a tiled image
3) Reduce the height of the header
4) Reduce the size and change the color of the day and date

Here’s what to do for each item above:
(Copy all original files into a folder first, just in case you want to restore the original files)

1) Changing the logo is easy. Just make a copy of the original logo.gif file and save it in a folder. Then open it in Photoshop (recommended). You can just delete everything out of the box and replace it with whatever you want. You can even make it bigger by increasing the canvas size of the original image.

2) To replace the background just look for the header-bg.gif file. When you open it it will be very small. I changed mine from 1 x 40px to 235 x 250px and then made sure it tiled ok when put together. Save new file as the original and it’s good to go.

3) In template.css file just go to this line:
/* HEADER
——————————————————— */
#ja-headerwrap {
border-bottom: 1px solid #999999;
background: url(../images/header-bg.gif) repeat-x bottom #FFFFFF;
}

#ja-header {
padding: 5px 0; just change the 15 to 5
line-height: normal;
text-align: left;
position: relative;

4) Same thing, just go into template.css file within admin side of Joomla.
div.ja-day span {
float: left;
color: #FFFFFF; (change the hex color to whatever you want
font-size: 125%; (change the percentage to however big you want it
text-transform: uppercase;
letter-spacing: 2px;
padding-top: 4px;

And there you have it! Here’s what the changes look like on my site I’m building:
http://www.tueig.com/joomla_site/index.php

1 user says Thank You to jasonre for this useful post

1. walterandreed

[bigrk Friend bigrkJoin date: February 2007Posts: 1425Downloads:0Uploads:2 Thanks: 39 Thanked: 45 times in 15 posts]

#220825

Nice job and thanks for the tutorial. I noticed that in IE7 that in the row of user6-10 modules that user10 is dropping down below the row. It was okay in FF2.0. I like the golf theme for Teline as that is what I am going to use it for also.

[jasonre Friend jasonreJoin date: July 2006Posts: 56Downloads:0Uploads:0 Thanked: 1 times in 1 posts]

#220834

Thanks for pointing that IE7 glitch out. I use a mac now and don’t have to use IE7 (thank god!) so I wouldn’t have noticed it. I’ll do my final testing in IE7 as well. I switched to Apple a few years ago and things just work so much better, especially with Safari and Camino. What kind of golf theme are you creating?

[bigrk Friend bigrkJoin date: February 2007Posts: 1425Downloads:0Uploads:2 Thanks: 39 Thanked: 45 times in 15 posts]

#220836

It’s about golf in Oregon and the Pacific NW. I am just getting started and now heading on vacation later today so not much will be done for a couple of weeks yet but you can see it here if you like: http://www.oregonsgolf.com. Good luck on your site! 😎

[Author]

Posts