Joomla Templates Club 406,261 posts

[rajinja Friend rajinjaJoin date: December 2009Posts: 2Downloads:0Uploads:1 Thanks: 2]

#151689

hi ,

how can I have a background image for the top box of telineIII. That is the top box which has the logo and search.

which file, css and elements should i edit.

requesting your help
thanks
rajesh

---

Attachments:

1. 

[uniquebiz Friend uniquebizJoin date: February 2010Posts: 596Downloads:0Uploads:40 Thanks: 33 Thanked: 156 times in 119 posts]

#346548

rajinja;182172hi ,

how can I have a background image for the top box of telineIII. That is the top box which has the logo and search.

which file, css and elements should i edit.

requesting your help
thanks
rajesh

There are several parts to this header block you will need to edit two places

Firstly, to fill most of the header go to /templates/ja teline iii/css and open template.css – look for the code at line 856

#ja-header .main { padding: 30px 0 10px; background-color: black }

add the code in red to get a black background or replace black with the name of hex code of the colour you want

To make the toolbar with date and time to match, to to line 913
.ja-day, .ja-updatetime {
float: left;
background: #fff;
color: #999;
border-right: 1px solid #ddd;
padding: 2px 10px 0;
}
Change the code in red to match the rest

You will of course have to make sure your logo has a background to match the rest

Blessings Shannon

1 user says Thank You to uniquebiz for this useful post

1. rajinja

[rajinja Friend rajinjaJoin date: December 2009Posts: 2Downloads:0Uploads:1 Thanks: 2]

#346616

thank you shannon,

What I actually wanted was a background image for the box which has search and logo and not the entire header. Was able to do with the following :

in layout css

/* HEADER
——————————————————— */
#ja-header {}
#ja-header .main .inner {
/* We use liquid layout, so we need to insert a div which will create margin if need */

background-image:url(../images/myimage.gif) ;
background-repeat:no-repeat;
background-position:right;
height: 80px;

}
—————————
I am getting the result, but theres a small top and bottom gap or padding. Hope this is the correct way.

thanks

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#346857

Dear rajinja!

1) open the file /templates/ja_teline_iii/css/template.css
a) find the following code:


#ja-header .main { padding: 30px 0 10px; }

you adjust the value 30 to redure the top-blank

GOod luck

[Author]

Posts