Joomla Templates Club 406,261 posts

[atticus Friend atticusJoin date: April 2009Posts: 66Downloads:0Uploads:0 Thanks: 17 Thanked: 4 times in 1 posts]

#151266

Hello,
I want to add this image for the background

I’ve edit template.css and blue.css and can’t add the background.
Can someone please point me to the file that will change the background.

You help is much appreciate.

Thank you.

Tiffany

[toymaker Friend toymakerJoin date: April 2010Posts: 123Downloads:0Uploads:5 Thanks: 10 Thanked: 45 times in 32 posts]

#344379

It would really help if you could send us a link to check what you might be doing wrong.
Anyways… after going through the Seleni template, you might have a lot of wrap divs and so the background is probably hiding away behind them.

Your template should have a structure like this


<div id="ja-wrapper">
<div class="wrap" id="ja-header">
<div class="wrap" id="ja-mainnav">

<!-- // .. and so on.. -->


you can make a quick mod to this structure so that all main divs only span the contents width and not the whole screen by replacing the “wrap” class with a “main” class. Like this…


<div id="ja-wrapper">
<div class="main" id="ja-header">
<div class="main" id="ja-mainnav">

<!-- // .. and so on.. -->


you will have to do this for every main div… ja-header, ja-mainnav, ja-container, ja-botsl, and so on.
doing this, you should now be able to play with the background image and you should be able to see the changes.

Let me know if you need more details… I can setup the tempalte locally and give you all the line numbers to edit if you get lost.

Peace,
Gabriel

1 user says Thank You to toymaker for this useful post

1. atticus

[toymaker Friend toymakerJoin date: April 2010Posts: 123Downloads:0Uploads:5 Thanks: 10 Thanked: 45 times in 32 posts]

#344436

Ok… this is what I did to your site in case you or someone else needs the transcript of all changes made.
I wont explain them too much… if someone has a question, just drop me a line.

First we will change all main wraps to main class divs. There are many ways to skin a cat, but I’ve used small interdiv shadings and I like this method. There are more changes, but its better in the long run.

templates/ja_seleni/layouts/default.php line 65:

<div id="ja-container" class="wrap<?php echo $this->getColumnWidth('cls_w'); ?>">
<!-- //CHANGE TO-->
<div id="ja-container" class="main <?php echo $this->getColumnWidth('cls_w'); ?>">

templates/ja_seleni/layouts/blocks/header.php line 1:

<div id="ja-header" class="wrap">
<!-- //CHANGE TO-->
<div id="ja-header" class="main">

<!-- //NOW GO TO LINE 29 AND EDIT-->
<div id="ja-topbar" class="wrap">
<!-- //CHANGE TO-->
<div id="ja-topbar" class="main">

templates/ja_seleni/layouts/blocks/mainnav.php line 1:

<div id="ja-mainnav" class="wrap">
<!-- //CHANGE TO-->
<div id="ja-mainnav" class="main">

<!-- //NOW GO TO LINE 10 AND EDIT-->
<div id="ja-subnav" class="wrap">
<!-- //CHANGE TO-->
<div id="ja-subnav" class="main">

templates/ja_seleni/layouts/blocks/topsl.php line 2:

<div id="ja-breadcrumbs" class="wrap">
<!-- //CHANGE TO-->
<div id="ja-breadcrumbs" class="main">

<!-- //NOW GO TO LINE 17 AND EDIT-->
<div id="ja-topsl" class="wrap">
<!-- //CHANGE TO-->
<div id="ja-topsl" class="main">


templates/ja_seleni/layouts/blocks/botsl.php line 7:

<div id="ja-botsl" class="wrap">
<!-- //CHANGE TO-->
<div id="ja-botsl" class="main">

<!-- //NOW GO TO LINE 44 AND EDIT-->
<div id="ja-botsl2" class="wrap">
<!-- //CHANGE TO-->
<div id="ja-botsl2" class="main">

templates/ja_seleni/layouts/blocks/footer.php line 1:

<div id="ja-footer" class="wrap">
<!-- //CHANGE TO-->
<div id="ja-footer" class="main">

Now, we make your header match the height necessary to fit your background correctly
templates/ja_seleni/css/template.css line 1963: change the height from 100px to 200px

#ja-header .main { height: 200px; }

Now get rid of the headers background color.
templates/ja_seleni/css/template.css line 2065: delete the background property or set to none

background: none;

Now set an important rule to override any header background colors there may be in the future.
templates/ja_seleni/css/template.css line 1959: Change to transparent color.

#ja-header { background-color: transparent !important; margin-top: 0px; position: relative; z-index: 10; }

Now fix some logo and header image widths you probably played with while trying to place the actual banner. Also delete the banner asi this image is already in your background.
templates/ja_seleni/css/template.css line 1977: Change to

h1.logo { height: 150px; width: 300px; } /* I'll leave this here so you can add a logo later if you like */
templates/ja_seleni/css/template.css line 1981: Change to

h1.logo a {
background: none;
display: block;
height: 150px;
width: 300px;
}

Put the new background to the main wrapper
templates/ja_seleni/css/template.css line 1763: Change to

#ja-wrapper { background: url("../../../../images/bkgd.jpg") no-repeat center top transparent; }

Now… the background has some little flaws into it, and although I would have done things different (like placing the gradient in one place, the people in another and the main side/border shadings in yet another place…) I’ll stick to what you have and make it work 🙂

So… considering the background is displaced and the gradients make a hard stop… I modified your background, moved it to the left a little and made the shadings softer at the end.

Now… the last fix is that your page is 880px wide… and your background is 870px. So as I could not get to log into the admin side of your site, you can go ahead, into your template config and change the width to 870 or substract 10px to the number you have there. That will make it show perfect like this:

So.. there you go.. fixed 😎

Have a nice day.
Peace,

Gabriel

2 users say Thank You to toymaker for this useful post

1. atticus
2. Arvind Chauhan

[atticus Friend atticusJoin date: April 2009Posts: 66Downloads:0Uploads:0 Thanks: 17 Thanked: 4 times in 1 posts]

#344443

It’s perfect now. 😀

I couldn’t have done this without your help. Thank you so much.

Have yourself a wonderful day.

Tiffany

[toymaker Friend toymakerJoin date: April 2010Posts: 123Downloads:0Uploads:5 Thanks: 10 Thanked: 45 times in 32 posts]

#344444

Cool!
I see you made your background fixed. Looks great!
There’s only one more detail left… your breadcrumb module is in a transparent background and it looks weird when scrolling your page down.

Go to template.css line 4953 and replace the code with this, to make the background show up white like the rest of the page:

#ja-breadcrumbs {
background:none repeat scroll 0 0 #FFFFFF;
text-transform:uppercase;
}

Now its perfect :laugh:

Peace,
Gabriel

1 user says Thank You to toymaker for this useful post

1. atticus

[atticus Friend atticusJoin date: April 2009Posts: 66Downloads:0Uploads:0 Thanks: 17 Thanked: 4 times in 1 posts]

#344456

Perfect. Thank you; it looks much better. 🙂

Blessings.

Tiffany

[John Wesley Brett Moderator John Wesley BrettJoin date: July 2013Posts: 2142Downloads:17Uploads:26 Thanks: 175 Thanked: 645 times in 426 posts]

#344550

And if I might suggest one final bit of cleanup.

In your RIGHT module your top image – psalm119.jpg – is falling off the right edge.
Keeping it, and all other images you place in the RIGHT module to a 240 width will line it up perfectly with everything below it and give a subliminally clean line and balance to the page.

Great work by you and toymaker.
John.

2 users say Thank You to John Wesley Brett for this useful post

1. atticus
2. toymaker

[atticus Friend atticusJoin date: April 2009Posts: 66Downloads:0Uploads:0 Thanks: 17 Thanked: 4 times in 1 posts]

#344553

240px works great. The image lines up perfectly with everything below.

Kudos goes to toymaker 🙂
He was a great help.

Thanks John.

Blessings.
Tiffany

[Author]

Posts