Joomla Templates Club 406,261 posts

[radesignprint Friend radesignprintJoin date: December 2008Posts: 21Downloads:0Uploads:0 Thanked: 1 times in 1 posts]

#146051

hi guys

how are you all? I hope well and fine. I want to add a row to the top and bottom of the page to match the top menu, i mean something like this: http://www.joomlashine.com/index.php?option=com_frontpage&Itemid=1

here they have the blue row on the top of the page and bottom of the page too.

can you guys please help me to do the same for this template too.

thanks so much.

regards

[prakash Friend prakashJoin date: October 2008Posts: 439Downloads:0Uploads:1 Thanks: 2 Thanked: 146 times in 115 posts]

#323654

Hi,

Its quite simple.

Open the template.css file located in template/jakay…ii/css/

Under that find these three div-


#ja-header
#ja-mainnav
#ja-footer


Add your background css code in all these three divs and you shall get the background similar to that found on JS.

[radesignprint Friend radesignprintJoin date: December 2008Posts: 21Downloads:0Uploads:0 Thanked: 1 times in 1 posts]

#323709

hi prbalge
thanks for your idea, i have done the changes and i get this: http://www.ariana.com.au/arianaprint265/

where the page at JS is not like that, what else can i do to make look very similar? i mean the top color goes right to the edge of the page with couple of borders, and the the same goes with the footer?

thank you so much for your help.

regards

[prakash Friend prakashJoin date: October 2008Posts: 439Downloads:0Uploads:1 Thanks: 2 Thanked: 146 times in 115 posts]

#323711

hi,

you have added background to the wrong places. I have stated the divs to which you need to add

the background must be in the parent … while you have like added background to #ja-footer .main
which would be a child of the #ja-footer.

Please fix and let me know if it works fine.

[radesignprint Friend radesignprintJoin date: December 2008Posts: 21Downloads:0Uploads:0 Thanked: 1 times in 1 posts]

#323719

hi prbalge
this is what i do find: and i have changed this: #ja-header .main { background: #f6f6f6; height: 80px; }
/* HEADER
——————————————————— */
#ja-header { position: relative; z-index: 10; }

#ja-header .main { background: #f6f6f6; height: 80px; }

h1.logo, div.logo-text h1 { font-size: 250%; line-height: 1; margin: 15px 0 0; }

h1.logo, div.logo-text { float: left; }

/* Logo Image —*/
h1.logo { height: 45px; width: 236px; }

h1.logo a {
background: url(../images/logo.gif) no-repeat left;
display: block;
height: 45px;
width: 236px;
}

h1.logo a span { position: absolute; top: -1000px; }

/* Logo Text —*/
div.logo-text h1 a {
color: #ccc;
font-weight: bold;
letter-spacing: 1px;
text-decoration: none;
}

p.site-slogan {
background: #444;
color: #999;
display: block;
font-size: 85%;
letter-spacing: 1px;
margin: 8px 0 0;
padding: 0 5px;
text-align: center;
text-transform: uppercase;
}

___________________________________

i am not sure if this is where i am meant to change? i do go to: Open the template.css file located in template/jakay…ii/css/

thanks so much.

regards,
Romal

[prakash Friend prakashJoin date: October 2008Posts: 439Downloads:0Uploads:1 Thanks: 2 Thanked: 146 times in 115 posts]

#323757

Him

what you are doing is adding background in the child part.

You need to add background in parent. In the above code.

#ja-header { position: relative; z-index: 10; }

in this you will have to write the color and not in .main
hence your code should look like


#ja-header { position: relative; z-index: 10; background-color: #f6f6f6;}


[Author]

Posts