Background image, menu colour, browser tab icon and website name :)

Hi there,

Sorry Im a bit new to this.

Was wondering if anyone could help me sort out the following changes i wish to make to the template.

1. Add / Change the background image for the site / template.
2. Change the top menu colour to a my own choice.
3. Set my own logo for browser tab.
4. And rename the title for my site.

I have attached a screen shot circling the items i wish to edit.

Thanks Very Much,
V.

I managed to work out how to do points 2 and 4. But still need help with 1. Background image & 3. Logo for browser tab.

Also would anyone know how to edit the colour of the header field like in the screenshot?

Hi
Can You give us url to your site ?

Yes sure. Sorry i did not put it earlier.

http://www.pokerchipindia.com/multi-coaching.com/

The color header is defined in file style3.css line 51

Code: Select all

.moduletable.color h3{background:#115bb2}

Standard header template.css line 168

Code: Select all

.moduletable>h3,
.moduletable_menu>h3,
.moduletable_text>h3 { height:8px; line-height:8px; text-transform:uppercase; color:#fff; background:#bbb6b1; font-weight:bold; font-size:11px; padding:4px; float:left; width:auto; margin-bottom:10px; }

Read more button file joomla.css line 23

Code: Select all

a.readon { display: inline-block; color: #fff; font-size: 90%; font-weight: bold; height:16px; line-height: 16px; width:auto; text-decoration: none; text-transform: uppercase; margin: 2px 0; padding:0 4px; background:#02D0FC; }


Read more hover button

Code: Select all

a.readon:hover, a.readon:active, a.readon:focus{background:#F803B0}

Pool button also style3.css line 63

Code: Select all

.moduletable.color .button{background:#115bb2; border:1px solid #57a8f0!important; border-top:none!important; border-left:none!important}

You can add all this codes to override.css and change colors to the new ones.

1. Go to template.css and find

Code: Select all

body {
background:none repeat scroll 0 0 #F4F2EF;
line-height:1.7;
}


and change it to

Code: Select all

body {
background:url(../images/your_bg) repeat scroll 0 0 #F4F2EF;
line-height:1.7;
}


of course upload bg image to images folder.

3. It is favicon. Just go to images folder and switch it to your own.

Thank you so much.

I will give them a go tonight and hopefully i can do it.

Hi, thanks for the tips - all worked except for the background image.

I inserted the code as follows;


body { background:url(../images/main_bg.png) repeat scroll 0 0 #F4F2EF; line-height:1.7; }
body#bd { color:#979189; }
body.fs1 { font-size:10px }
body.fs2 { font-size:11px }

The image is there as per url below;

http://www.pokerchipindia.com/multi-coa ... ain_bg.png

But on the website it doesn't load.

http://www.pokerchipindia.com/multi-coaching.com/

Yes but you should upload image to folder images in side your template folder.

Sorry and thank you. It worked.

Great I'm glad I helped.