Joomla Templates Club 406,261 posts

[oddyeti Friend oddyetiJoin date: February 2007Posts: 22Downloads:0Uploads:0]

#121555

I wanted to put a background colour from the white so that the template stands out more… like in the joomart website…

how do I go about changing the css for this… also can I change the background for the different colour schemes, and also will it still work when the size is expanded or made smaller

Cheers

[oddyeti Friend oddyetiJoin date: February 2007Posts: 22Downloads:0Uploads:0]

#224813

anyone, please I really need an answer the the above…. forget the poll, but help me with the background color

[instantinlaw Friend instantinlawJoin date: February 2007Posts: 1646Downloads:6Uploads:28 Thanks: 68 Thanked: 210 times in 62 posts]

#224833

This is really basic stuff here, I suggest you check out some free tutorials on css on the internet before going any further with your customization.
Search in template_css.css for:


body {
color: #5A5A5A;
background: #FFFFFF;
font-family: Tahoma, Arial, Helvetica, sans-serif;
line-height: 1.5;
}

and change the #FFFFFF to the hex color you want.

[oddyeti Friend oddyetiJoin date: February 2007Posts: 22Downloads:0Uploads:0]

#224835

I tried that already, but it does not create a box around the body…. and the color change comes all over the place… my questions is whether I can have a box around the body that changes with the controls available to make it bigger or smaller..

Cheers

[instantinlaw Friend instantinlawJoin date: February 2007Posts: 1646Downloads:6Uploads:28 Thanks: 68 Thanked: 210 times in 62 posts]

#224837

I am not going to do all your work for you, but I will get you started.
in template_css.css change


#ja-container {
padding: 0 0 10px;
}

to


#ja-container {
padding: 0 0 10px;
background-color: #FFFFFF;
}

change


#ja-header {
text-align: left;
line-height: normal;
background-image: url(../images/header-bg.gif);
background-repeat: no-repeat;
background-position: left top;
}

to


#ja-header {
text-align: left;
line-height: normal;
background-color: #FFFFFF;
background-image: url(../images/header-bg.gif);
background-repeat: no-repeat;
background-position: left top;
}

change


#ja-footer {
clear: both;
border-top: 5px solid #D8D9DB;
}

to


#ja-footer {
clear: both;
border-top: 5px solid #D8D9DB;
background-color: #FFFFFF;
}

Now here is the hard part.
You have to figure out which line of code changes the part just below the main menu, and you have to post your results here.
Good luck, and welcome to the world of template customization.

[oddyeti Friend oddyetiJoin date: February 2007Posts: 22Downloads:0Uploads:0]

#224840

thanks man, you have just saved my life…. I wil do just that… and get horribly confused for sure… but I will get back…

and thank again for the quick response!!!! I owe you one! if ever we meet, the beer is on me for sure!!!!

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

#224841

oddyeti;21744thanks man, you have just saved my life…. I wil do just that… and get horribly confused for sure… but I will get back…

and thank again for the quick response!!!! I owe you one! if ever we meet, the beer is on me for sure!!!!

If Bill (instantinlaw)has been helpful and you wish to repay his kindness vote for him as Member OF The Month the link is in my signature

[oddyeti Friend oddyetiJoin date: February 2007Posts: 22Downloads:0Uploads:0]

#224842

I tried man….. real hard… but in still the same boat… cannot understand where the codes are…

any ideas?

[oddyeti Friend oddyetiJoin date: February 2007Posts: 22Downloads:0Uploads:0]

#224843

also just voted for you…. You ROCK!!!

[instantinlaw Friend instantinlawJoin date: February 2007Posts: 1646Downloads:6Uploads:28 Thanks: 68 Thanked: 210 times in 62 posts]

#224845

oddyeti;21746I tried man….. real hard… but in still the same boat… cannot understand where the codes are…

any ideas?

Which codes are we talking about? all of them? or just the one you are supposed to change on your own?
& thanks for the vote.

[instantinlaw Friend instantinlawJoin date: February 2007Posts: 1646Downloads:6Uploads:28 Thanks: 68 Thanked: 210 times in 62 posts]

#224847

Thanks for the plug Shannon. 😀

[oddyeti Friend oddyetiJoin date: February 2007Posts: 22Downloads:0Uploads:0]

#224889

nah, could not find out which codes changes the part just below the top menu…. you know where the JA_hearder goes and where the main menu is ….

[instantinlaw Friend instantinlawJoin date: February 2007Posts: 1646Downloads:6Uploads:28 Thanks: 68 Thanked: 210 times in 62 posts]

#224952

oddyeti;21801nah, could not find out which codes changes the part just below the top menu…. you know where the JA_hearder goes and where the main menu is ….

You really did’nt try very hard now, did you. Just kidding, The reason you couldn’t find it is because it is an extra div in the index.php, but before we get to that, I missed a couple of things.
Ok do this.
In template_css.css
change


#ja-header,
#ja-topstory,
#ja-spotlight,
#ja-container,
#ja-footer {
margin: 0 auto;
width: 750px;
text-align: left;
}

to


#ja-header,
#ja-topstory,
#ja-spotlight,
#ja-container,
#ja-footer {
margin: 0 auto;
width: 750px;
text-align: left;
background-color: #FFFFFF;
}

and change


.wide #ja-header,
.wide #ja-topstory,
.wide #ja-spotlight,
.wide #ja-container,
.wide #ja-footer {
width: 950px;
}

to


.wide #ja-header,
.wide #ja-topstory,
.wide #ja-spotlight,
.wide #ja-container,
.wide #ja-footer {
width: 950px;
background-color: #FFFFFF;
}

and change


.auto #ja-header,
.auto #ja-topstory,
.auto #ja-spotlight,
.auto #ja-container,
.auto #ja-footer {
width: 90%;
}

to


.auto #ja-header,
.auto #ja-topstory,
.auto #ja-spotlight,
.auto #ja-container,
.auto #ja-footer {
width: 90%;
background-color: #FFFFFF;
}

Now open index.php in your templates > ja_antares folder.
search for


<!-- BEGIN: TOP NAVIGATION -->
<?php if( mosCountModules('user3') ) { ?>
<div id="ja-topnav-wrap" class="clearfix">
<div id="ja-topnav">
<?php mosLoadModules('user3',-1); ?>
</div>
</div>
<?php } ?>
<!-- END: TOP NAVIGATION -->
</div>

and change it to


<!-- BEGIN: TOP NAVIGATION -->
<?php if( mosCountModules('user3') ) { ?>
<div id="ja-topnav-wrap" class="clearfix">
<div id="ja-topnav">
<?php mosLoadModules('user3',-1); ?>
</div>
</div>
<?php } ?>
<!-- END: TOP NAVIGATION -->

Now it displays properly in both FF & IE. Hope this helps.

[oddyeti Friend oddyetiJoin date: February 2007Posts: 22Downloads:0Uploads:0]

#224961

Thanks for this… I did try several variants, and this time around, i did try real hard….. 😀 and I think I might have hit on something… though you are right, getting the thing to work on both IE and FF is another thing of course… I will have to do these things too I bet…

but check it out… it definitely looks better, though it is still sloppy around the edges, needs more work… I will be in touch….

http://www.socialtreks.com

comments welcome

cheers man,

[instantinlaw Friend instantinlawJoin date: February 2007Posts: 1646Downloads:6Uploads:28 Thanks: 68 Thanked: 210 times in 62 posts]

#224962

It looks good, and I know you are trying to make it look cool with the black header, but personally I think you should go with either white, or possibly something graphical.
Keep at it, you’ll get it.

[Author]

Posts