Add a bordered background to template

Viewing 14 posts - 1 through 14 (of 14 total)

Author

Posts
magtaf Friend

magtaf
Join date:
April 2006
Posts:
78
Downloads:
27
Uploads:
29

Thanks:

16

Thanked:

1 times in 1 posts
May 10, 2011 at 3:39 pm #163821
I have the JA SOCIAL template and I would like to add the site in a framed bordered background so It can stand out a bit more. Like the picture attached. If anyone can tell me how to do this I appreciate it.
Attachments:
himangi Friend

himangi
Join date:
April 2011
Posts:
1406
Downloads:
1
Uploads:
86

Thanks:

21

Thanked:

345 times in 332 posts

May 11, 2011 at 7:12 am #390729

Hi,

Can you please provide site url, so that I can give you correct solution?

magtaf Friend

magtaf
Join date:
April 2006
Posts:
78
Downloads:
27
Uploads:
29

Thanks:

16

Thanked:

1 times in 1 posts

May 11, 2011 at 4:34 pm #390817

problemsolveddaily dot com

himangi Friend

himangi
Join date:
April 2011
Posts:
1406
Downloads:
1
Uploads:
86

Thanks:

21

Thanked:

345 times in 332 posts

May 12, 2011 at 7:51 am #390913

Your tempalte has a full width, so will need to make it little less wider than it is right now and then giving background:#000; to body#bd in template.css should make it look like as you want. If this is not clear to you, please PM me your admin details and I will take a look.

magtaf Friend

magtaf
Join date:
April 2006
Posts:
78
Downloads:
27
Uploads:
29

Thanks:

16

Thanked:

1 times in 1 posts

May 12, 2011 at 2:20 pm #390974

Hi Himagi,

I am not clear about the bordered backgrounf, I tried it but the background 000 just makes the header background black.

Here is the CSS, if you can tell me whow to change it?

[PHP]/*
# ————————————————————————
# JA Social Template
# ————————————————————————
# Copyright (C) 2004-2010 JoomlArt.com. All Rights Reserved.
# @license – PHP files are GNU/GPL V2. CSS / JS are Copyrighted Commercial,
# bound by Proprietary License of JoomlArt. For details on licensing,
# Please Read Terms of Use at http://www.joomlart.com/terms_of_use.html.
# Author: JoomlArt.com
# Websites: http://www.joomlart.com – http://www.joomlancers.com
# Redistribution, Modification or Re-licensing of this file in part of full,
# is bound by the License applied.
# ————————————————————————
*/
/* COMMON STYLE
——————————————————— */
body {
color: #333;
font-family: Arial, Helvetica, sans-serif;
line-height: 1.7;
}
body#bd {
background: url(“../images/header-bg2.gif”) repeat-x scroll 0 0 #333333;
color: #333333;
}
/* Normal links —*/
a { color: #0088FC; text-decoration: none; }
a:hover, a:active, a:focus { color: #333; }
.ja-module dd,
.ja-content-main dd,
.ja-content-main dd { margin-left: 0px; }
/* Readon links —*/
p.readmore {
background: url(../images/readon-bg.gif) repeat-x left bottom;
border: 1px solid #ddd;
font-weight: bold;
float: left;
padding: 2px 6px;
}
p.readmore a {
color: #666;
text-shadow: 0 1px 1px #fff;
}
p.readmore a:hover,
p.readmore a:focus,
p.readmore a:active {
color: #0088FC;
text-decoration: none;
}
.contentheading, .componentheading, h1, h2, h3, h4, h5 {
font-family: “Segoe UI”, Arial, Hevetica, sans-serif;
}
h1.componentheading, .componentheading {
background: url(../images/heading-bg.gif) repeat-x left top #f0f0f0;
border-bottom: 1px solid #E4E4E4;
color: #4A4A4A;
font-weight: bold;
font-size: 110%;
margin: 0 -15px;
padding: 0 15px 10px;
text-transform: uppercase;
text-shadow: 0 1px 2px #fff;
}
h2.contentheading, .contentheading {
font-weight: bold;
}
.contentheading { font-size: 250%; }
.contentpaneopen_edit {
position: absolute;
left: 0;
top: 0;
}
.blog-featured .contentheading { color: #0088FC; font-size: 170%; }
.jitem-title { font-size: 110%; font-weight: bold; }
/* Others —*/
hr { border-top: 1px solid #ccc; }
/* FORM
——————————————————— */
input, select, textarea, .inputbox {
padding: 4px 5px;
font-family: Arial, Helvetica, sans-serif;
}
input {
vertical-align: middle;
padding: 0;
margin: 0;
}
.inputbox { border: 1px solid #d6e4ec; background: #fff; }
.inputbox:hover, .inputbox:focus { background: #ffffcc; }
.login_form .remember .inputbox,
.ja-weblinks .checkbox .inputbox {
border: none;
}
.josForm .inputbox {
margin-right: 5px;
}
.button, button {
background: url(../images/readon-bg.gif) repeat-x left bottom;
border: 1px solid #ddd;
font-weight: bold;
padding: 2px 5px;
text-shadow: 0 1px 1px #fff;
}
/* Search —*/
form#searchForm { }
.searchintro { border-bottom: 1px solid #ccc; }
.results h4 { text-transform: none; font-size: 110%; }
/* Contact —*/
#component-contact #emailForm {}
.contentpane form p { margin-bottom: 10px; }
/* JOOMLA STYLE
——————————————————— */
/* Layout Deco —*/
.items-leading { border-bottom: 1px solid #ccc; }
.items-row { border-bottom: 1px solid #E8EDF0; }
/* Meta —*/
.article-tools {
border: 1px solid #e1ebf1;
background: #f6f6f6;
margin-top: 3px;
padding: 5px 5px 3px;
}
dl.article-info { color: #999; margin: 0; }
dd.create,
dd.createdby,
dd.category {
background: url(../images/icon-date.png) no-repeat 0px 0px;
margin-right: 8px;
padding: 2px 0 0 20px !important;
text-transform: capitalize;
}
dd.createdby { background: url(../images/icon-user.png) no-repeat 0px 0px; }
dd.category { background: url(../images/icon-folder.png) no-repeat 0px 0px; }
.contentdescription { border-bottom: 1px solid #ccc; margin-bottom: 10px; }
.modifydate { color: #666; font-size: 92%; }
/*Inline images —*/
div.img_caption { margin-top: 20px; }
.img_caption.left { margin-right: 20px; }
div.img_caption img {
background: #d6e4ec;
border: 1px solid #90CAE0;
padding: 4px;
}
p.img_caption { color: #999; padding-top: 2px; text-transform: uppercase; }
.article-image {
float: left;
width: 130px;
}
.article-image img {
background: #d6e4ec;
border: 1px solid #90CAE0;
clear: both;
display: block;
padding: 4px;
margin: 20px 0 0;
}
.article-image .img_caption { margin: 0; }
.article-image .ja-retweet-normal-home { margin-right: 15px; }
.article-image .ja-facebookshare-box_count-home { margin-right: 0; margin-bottom: 0; }
/* Tables —*/
thead tr th {
background: #333;
color: #fff;
padding: 5px;
}
thead tr th a,
thead tr th a:hover,
thead tr th a:focus,
thead tr th a:active { color: #fff; }
.cat-list-row1,
.cat-list-row12,
tr.cat-list-row1 td,
tr.cat-list-row2 td { border-bottom: 1px solid #ccc; padding: 5px; }
.cat-list-row1:hover,
.cat-list-row2:hover { background: #ffffcc; }
.cat-list-row2,
tr.cat-list-row2 td { background-color: #f6f6f6; }
/* Content Toc */
table.contenttoc { border: 1px solid #ccc; }
table.contenttoc td { border-bottom: 1px dotted #ccc; }
table.contenttoc th {
background: #f6f6f6;
border-bottom: 1px solid #ccc;
text-transform: uppercase;
}
/* Poll */
form#poll {
border-bottom: 1px dotted #ccc;
font-weight: bold;
}
dl.poll { border-bottom: 1px dotted #ccc; }
table.pollstableborder td {
background: #f6f6f6;
border-bottom: 1px solid #ccc;
font-weight: bold;
padding: 5px !important;
}
table.pollstableborder tr.sectiontableentry0 td,
table.pollstableborder tr.sectiontableentry1 td { background: #fff; font-weight: normal; }
/* Pagination —*/
.pagination li span,
.pagination li strong { line-height: 20px; }
.items-more { border-bottom: 1px solid #ccc; }
.items-more h3 { font-size: 125%; }
/* Tool Tip —*/
.tool-title {
padding-top: 15px;
}
/* MODULE STYLES
——————————————————— */
div.ja-moduletable h3, div.moduletable h3 {
background: url(../images/grad-d1.gif) repeat-x left top #0088FC;
color: #fff;
font-size: 110%;
font-family: “Segoe UI”, Helvetica, sans-serif;
font-weight: bold;
margin: 0;
padding: 10px 15px;
text-transform: uppercase;
}
div.ja-moduletable, div.moduletable {
background: #fff;
margin-top: 0;
margin-bottom: 15px;
padding: 0;
}
div.ja-moduletable .ja-box-ct, div.moduletable .ja-box-ct {
padding: 10px 15px;
}

/* Advertisement —*/
div.bannergroup_text div.banneritem_text { border-bottom: 1px dotted #ccc; }
/* MAIN LAYOUT DIVS
——————————————————— */
#ja-wrapper { }
#ja-container {
background: url(../images/container-bg.gif) repeat-x left top #d6e4ec;
padding-bottom: 20px;
}
#ja-container .main { padding: 20px 0 0; }
.main .main-inner1 { margin-left: 0; margin-right: 0; }
.article-content { overflow: visible; }
.fp-article-content {
padding-left: 145px;
}
/* Content Main —*/
.ja-content-main {
background: #fff;
margin-bottom: 20px;
padding: 10px 15px 20px;
}
.ja-social .ja-content-main,
.ja-agora .ja-content-main {
background: none;
padding-top: 0;
padding-left: 0;
padding-right: 0;
}
/* HEADER
——————————————————— */
#ja-header { border-top: 1px solid #0088FC; margin-top: 29px; z-index: 13; }
#ja-header .main { padding: 15px 0; }
h1.logo, div.logo-text h1 { font-size: 250%; line-height: 1; margin-left: 15px;}
/* Logo Image —*/
h1.logo { width: 220px; height: 80px; }
h1.logo a {
background: url(../images/logo2.png) no-repeat left;
display: block;
width: 350px;
height: 85px;
}
/* Logo Text —*/
div.logo-text h1 {
font-size: 280%;
font-family: Arial, sans-serif;
font-weight: bold;
margin: 0;
padding: 0 0 0 15px;
}
div.logo-text h1 a {
color: #fff;
text-decoration: none;
text-shadow: 0 1px 1px #0367A6;
}
p.site-slogan {
color: #d6e4ec;
display: block;
font-size: 85%;
margin: 3px 0 0;
padding: 0 15px;
}
#ja-top-header {
margin-top:-5px;
position:absolute;
right:180px;
text-align:right;
width:50%;
}
/* Search —*/
#ja-search {
background: url(../images/search-bg.png) no-repeat left top;
bottom: 50px;
height: 29px;
right: 10px;
width: 215px;
}
#ja-search .inputbox {
background: none;
border: none;
color: #fff;
height: 29px;
line-height: 29px;
padding: 0 10px;
width: 125px;
text-transform: capitalize;
}
#ja-search .button {
background: none;
border: 0;
color: #666;
height: 29px;
line-height: 29px;
text-transform: uppercase;
text-shadow: 0 1px 1px #fff;
}
/* Top bar —*/
#ja-topbar {
border-bottom: 1px solid #2985A8;
color: #0088FC;
font-size: 11px;
position: absolute;
top: 0;
z-index: 16;
background: url(../images/header-bg2.gif);
}
#ja-topbar .main {
height: 28px;
line-height: 28px;
}
#ja-topbar .ja-day {
background: url(../images/sep-w.gif) no-repeat right center;
display: block;
float: left;
margin-left: 15px;
padding-right: 10px;
}
#ja-topbar .ja-updatetime {
float: left;
padding: 0 10px;
}
#ja-topbar .ja-updatetime em {
margin-left: 5px;
font-style: normal;
color: #fff;
}
/* Headtools —*/
#ja-headtools {
position: absolute;
right: 15px;
top: 5px;
}
#ja-headtools ul {
float: left;
margin: 0;
padding: 0;
white-space: nowrap;
}
#ja-headtools li {
background: none;
display: inline;
line-height: normal;
margin: 0;
padding: 0;
}
#ja-headtools li a {
display: block;
float: left;
color: #fff;
margin-left: 5px;
padding-bottom: 4px;
}
#ja-headtools li a span { display: block; padding: 2px 5px 2px 24px; }
#ja-headtools li a.login-switch span { background: url(../images/icons/icon-user.png) no-repeat 5px 2px; }
#ja-headtools li a.register-switch span { background: url(../images/icons/icon-register.png) no-repeat 5px 2px; }
#ja-headtools li a.login-switch.show span { background-image: url(../images/icons/icon-user-show.png); }
#ja-headtools li a.register-switch.show span { background-image: url(../images/icons/icon-register-show.png); }
#ja-headtools li a:hover {
background: url(../images/arrow-hover-90cw.png) no-repeat 10px center;
text-decoration: none;
}
#ja-headtools li a.show {
background: url(../images/arrow-up.gif) no-repeat center bottom;
color: #FFFFFF;
position: relative;
z-index: 1000;
}
#ja-headtools li a.show span {}
#ja-headtools li a.show span { display: block; }
#ja-user-register, #ja-user-login {
background: url(../images/ja-login-bg.gif) repeat-x left bottom #fff;
border: 1px solid #A1D5E9;
color: #333;
display: none;
height: auto;
overflow: hidden;
padding: 10px 15px;
position: absolute;
right: -15px;
text-align: left;
top: 21px;
z-index: 999;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 0 3px 5px rgba(0,0,0,.4);
-moz-box-shadow: 0 3px 5px rgba(0,0,0,.4);
-webkit-box-shadow: 0 3px 5px rgba(0,0,0,.4);
}
#ja-user-login .ja-login-user,
#ja-user-login .ja-login-password,
#ja-user-login .mod_login_remember {
float: left;
width: 145px;
display: block;
}
#ja-user-login .button,
#ja-user-register .button {
color: #fff;
background: url(../images/button_bg.png) 0 50% repeat-x #0088FC;
border: 1px solid #0088FC;
text-shadow: 0 1px 1px #4a4a4a;
}
#ja-user-login .button:hover,
#ja-user-register .button:hover {
border: 1px outset #fff;
}
.ja-login-links {
margin-top: 10px;
}
#ja-headtools .ja-login-links a {
color: #0088FC;
padding: 0;
}
#ja-headtools li a.logout-switch {
display: inline;
float: none;
margin-left: 3px;
}
/* NAVIGATION
——————————————————— */
/* Main Nav —*/
#ja-mainnav { background: url(“../images/trans-bg.png”) repeat scroll 0 0 transparent;
border-top: 1px solid #0088FC; }
#ja-mainnav .main-inner1 { padding: 0 10px 0 }
/* Breadcrumbs —*/
#ja-navhelper { background: url(“../images/trans-bg.png”) repeat scroll 0 0 transparent; border-top:
1px solid #0088FC; }
#ja-navhelper .main { color: #fff; text-transform: uppercase; padding: 8px 0px; }
.ja-breadcrums { text-indent: 10px; }
#ja-navhelper a {
color: #000;
}
/* Extras —*/
.ja-links { padding-right: 10px; }
.ja-links li { padding: 0 10px; }
/* Default Joomla! Menu —*/
#ja-container .moduletable_menu ul.menu {
margin: -5px -15px -5px;
}
#ja-container ul.menu li { border-bottom: 1px dotted #e8edf0; padding-left: 0; }
#ja-container ul.menu li a {
background: url(../images/bullet-grey.png) no-repeat 15px 12px;
color: #666;
text-indent: 27px;
width: 100%;
}
#ja-container ul.menu li a:hover,
#ja-container ul.menu li a:active,
#ja-container ul.menu li a:focus {
background-image: url(../images/bullet-blue.png);
color: #0088FC;
text-decoration: none;
}
#ja-container ul.menu li li { background: none; border-bottom: 0; border-top: 1px solid #E1EBF1; }
#ja-container ul.menu li li a,
#ja-container ul.menu li.active li a { text-indent: 27px; color: #666; }
#ja-container ul.menu li li a:hover,
#ja-container ul.menu li li a:active,
#ja-container ul.menu li li a:focus {
background: url(../images/bullet-blue.png) no-repeat 15px 12px;
color: #0088FC;
}
#ja-container ul.menu li.active a { color: #0088FC; }
/* MASS TOP
——————————————————— */
#ja-content-mass-top { margin-bottom: 15px; }
#ja-content-top { position: relative; }
/* JA Content top —*/
#ja-content-top .ja-moduletable {
background: #fff !important;
margin-left: 10px;
margin-right: 10px;
}
#ja-content-top .ja-box-left .ja-moduletable { margin-left: 0; }
#ja-content-top .ja-box-right .ja-moduletable { margin-right: 0; }
/* SPOTLIGHT
——————————————————— */
#ja-topsl .ja-box, #ja-botsl .ja-box { }
#ja-topsl .ja-box-right, #ja-botsl .ja-box-right {
background: 0;
}
#ja-topsl .ja-moduletable, #ja-botsl .ja-moduletable {
background: none;
border: 0;
margin-top: 0;
margin-bottom: 10px;
}
#ja-topsl div.ja-moduletable h3,
#ja-botsl div.ja-moduletable h3 {
background: none;
border-bottom: 0;
padding-bottom: 0;
}
/* Top spotlight —*/
#ja-topsl .main { padding: 0; }
#ja-topsl .main-inner1 { padding: 10px 0; }
/* Bot spotlight —*/
#ja-botsl { border-top: 1px solid #fff; background-color:#333333} }
#ja-botsl .main { padding: 0; color: #fff; font-size: 92%; }
#ja-botsl .main-inner1 { padding: 10px 0 20px; }
#ja-botsl div.ja-moduletable h3 {
text-transform: none;
font-size: 150%;
padding: 10px 0 0 0;
}
#ja-botsl .ja-box-ct { padding: 0; }
#ja-botsl a {
color: #B9E0EE;
border-bottom: 1px dotted #B9E0EE;
}
#ja-botsl a:hover,
#ja-botsl a:focus,
#ja-botsl a:active {
border-bottom: 1px dotted #fff;
color: #fff;
text-decoration: none;
}
#ja-botsl ul li {
background: none;
border-bottom: 1px dotted #85c4dc;
padding: 0;
margin: 0;
}
#ja-botsl ul li a {
color: #fff;
display: block;
padding: 5px 5px 5px 17px;
background: url(../images/bullet-arrow.gif) no-repeat 5px 10px;
border: 0;
}
#ja-botsl ul li a:hover,
#ja-botsl ul li a:hover,
#ja-botsl ul li a:focus {
color: #fff;
border: 0;
background-color: #0088FC;
}
#ja-botsl .img-border {
background: #fff;
border: 3px solid #0088FC;
margin: 0 0 5px 10px;
}
/* FOOTER
——————————————————— */
#ja-footer {
padding: 10px 0 30px;
color: #0088FC;
}
#ja-footer .main {
text-align: left;
}
#ja-footer a {
color: #fff;
}
#ja-footer .ja-footnav {
margin: 10px 0 5px 0;
padding: 0;
}
#ja-footer .ja-footnav ul li {
padding: 0 10px;
}
#ja-footer .ja-footnav a { color: #fff; font-weight: bold; }
#ja-footer .ja-footnav a:hover,
#ja-footer .ja-footnav a:focus,
#ja-footer .ja-footnav a:active {
color: #fff;
}
#ja-footer .ja-copyright {
padding: 0 10px;
}
#ja-poweredby {
position: absolute;
top: 0px;
right: 0px;
}

/* MISCELLANOUS
———————————————————– */
/* Others —*/
#ja-banner { border-top: 1px solid #ccc; }
div.ja-innerdiv { border-bottom: 1px dotted #ccc; }
div.ja-innerdiv h4 {
font-family: Arial, Helvetica, sans-serif;
font-size: 92%;
font-weight: normal;
text-transform: uppercase;
}
/* Custom gallery —*/
.small-gallery {
float: left;
margin-bottom: 5px;
margin-right: 5px;
}
.last-item { margin-right: 0; }
.small-gallery .img-border {
border: 1px solid #d6e4ec;
padding: 1px;
width: 45px;
}
/* JA Twitter —*/
.ja-twitter {
padding-left: 0;
padding-right: 0;
}
/* Social list —*/
#ja-wrapper ul.social-list li { }
#ja-wrapper ul.social-list li a {
background-position: 5px 5px;
background-repeat: no-repeat;
padding-left: 28px;
}
#ja-wrapper ul.social-list li.ja-facebook a { background-image: url(../images/icons/icon-facebook.png); }
#ja-wrapper ul.social-list li.ja-twitter a { background-image: url(../images/icons/icon-twitter.png); }
#ja-wrapper ul.social-list li.ja-linkedin a { background-image: url(../images/icons/icon-linkedin.png); }
#ja-wrapper ul.social-list li.ja-rss a { background-image: url(../images/icons/icon-rss.png); }
/* Contact list —*/
#ja-wrapper ul.contact-list li {
background-position: 5px 4px;
background-repeat: no-repeat;
padding: 5px 5px 5px 28px;
}
#ja-wrapper ul.contact-list li.add { background-image: url(../images/icons/icon-home.png); }
#ja-wrapper ul.contact-list li.tel { background-image: url(../images/icons/icon-phone.png); }
#ja-wrapper ul.contact-list li.email { background-image: url(../images/icons/icon-email.png); }
/* Facebook button —*/
.fb-button {
background: #e8f1fa;
border: 1px solid #d6e5ec;
margin: 10px 0 !important;
padding: 5px 10px;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
div.ja-facebookshare-box_count-home,
div.ja-facebookshare-box_count {
float: left;
margin-right: 10px;
}
.fb_share_no_count { display: block !important; }
.fb_share_no_count .fb_share_count_inner {
background: url(../images/zero-bg.png) no-repeat center center #E8EBF2 !important;
}
.jacomment-count {
background: url(../images/readon-bg.gif) repeat-x left bottom #fff;
border: 1px solid #ddd;
float: left;
font-weight: bold;
margin: 0 10px 0 0;
padding: 2px 6px;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.jacomment-count a { color: #666; }
.jacomment-count a:hover,
.jacomment-count a:focus,
.jacomment-count a:active { color: #238DB4; text-decoration: none; text-shadow: 0 1px 1px #fff; }
/* JOMSOCIAL’S MODULES STYLE
———————————————————– */
/* Top users —*/
ul#modTopMembers {
margin: 0 -15px !important;
padding: 0;
list-style: none;
}
ul#modTopMembers li {
background: none;
border-bottom: 1px solid #e7edf1;
margin: 0;
padding: 5px 15px;
}
ul#modTopMembers li img.avatar {
margin-right: 8px;
padding: 3px;
}
ul#modTopMembers li a:hover img.avatar {
background: #0088FC;
}
/* Latest Discussion —*/
.modLatestDiscussion {
margin: 0 -15px;
}
.modLatestDiscussion ul {
margin: 0;
padding: 0;
list-style: none;
}
.modLatestDiscussion ul li {
border-bottom: 1px solid #e7edf1;
margin: 0;
padding: 10px 15px !important;
}
.modLatestDiscussion ul li img.avatar {
margin: 2px 10px 0 0;
padding: 1px;
width: 40px;
}
.modLatestDiscussion ul li small,
.modLatestDiscussion ul li small a {
color: #999;
}
.modLatestDiscussion ul li small {
padding: 5px 0 0 12px;
display: block;
}
/* Active group —*/
ul#modActiveGorups {
padding: 0;
margin: 0 -15px;
list-style: none;
}

ul#modActiveGorups li {
background: none;
border-bottom: solid 1px #e7edf1;
padding: 5px 15px;
}

ul#modActiveGorups li img {
width: 40px;
float: left;
display: inline;
margin: 0 8px 0 0;
padding: 1px;
}

ul#modActiveGorups li span {
line-height: normal;
padding: 0;
margin: 0;
}
ul#modActiveGorups a small {
color: #999;
}

ul#modActiveGorups li div { clear: left; height: 1px; }
/* Who’s online —*/
div.js-user-online ul {
margin: 0 0 10px;
padding: 0;
list-style: none;
}
div.js-user-online ul li {
display: block;
float: left;
margin: 0;
padding: 0 5px 5px 0;
}
div.js-user-online ul li a {
display: block;
margin: 0;
padding: 0;
}
div.js-user-online ul li img {
border: 1px solid #ccc;
padding: 2px;
}
/* Override Disqus comment —*/
#dsq-global-toolbar { position: relative; z-index: 12; }
.dsq-post-area { position: relative; z-index: 9; }
#dsq-content .dsq-trackback-url {
width: 80%;
}
.dsq-popup .dsq-subscribe-submit button {
margin-left: 10px;
}
#dsq-content .dsq-comment-footer-left {
visibility: visible !important;
float: none !important;
}
#dsq-content .dsq-comment-footer-right {
float: none;
}
/* Override Online Module —*/
.agorians_online_hor {
width: 45% !important;
}
.agorians_online_avatar {
float: none;
text-align: center;
}
.agorians_online_username {
clear: both;
}
#community-wrap #community-banlists-news-items {
width: 98% !important;
} [/PHP]
himangi Friend

himangi
Join date:
April 2011
Posts:
1406
Downloads:
1
Uploads:
86

Thanks:

21

Thanked:

345 times in 332 posts
May 13, 2011 at 6:36 am #391046
Make the following changes in above css file to achieve what you are saying
1. Replace background: url(“../images/header-bg2.gif”) repeat-x scroll 0 0 #333333; with background: #000; in <blockquote>body#bd {
2. Remove border-top:1px solid #0088FC; from<blockquote> #ja-header { border-top: 1px solid #0088FC; margin-top: 29px; z-index: 13; }</blockquote>
3. Add background: url(“../images/header-bg2.gif”) repeat-x scroll 0 -30px #333333; border-top: 1px solid #0088FC;in <blockquote>#ja-header .main { padding: 15px 0; }</blockquote>
4. Remove background:url(“../images/header-bg2.gif”); border-bottom: 1px solid #2985A8; from <blockquote>#ja-topbar {
5. Add background:url(“../images/header-bg2.gif”); border-bottom: 1px solid #2985A8; in <blockquote>#ja-topbar .main {
6. Remove background: url(“../images/trans-bg.png”) repeat scroll 0 0 transparent; border-top: 1px solid #0088FC;from <blockquote>#ja-mainnav { background: url(“../images/trans-bg.png”) repeat scroll 0 0 transparent;
7. Add background: url(“../images/trans-bg.png”) repeat scroll 0 0 #0088FC; border-top: 1px solid #0088FC; in <blockquote>#ja-mainnav .main { }</blockquote>
8. Remove background: url(../images/container-bg.gif) repeat-x left top #d6e4ec; padding-bottom: 20px; from<blockquote> #ja-container {
9. Add background: url(../images/container-bg.gif) repeat-x left top #d6e4ec; in <blockquote>#ja-container .main { padding: 20px 0 0; }</blockquote>
10. Remove background: url(“../images/trans-bg.png”) repeat scroll 0 0 transparent; border-top: 1px solid #0088FC; from <blockquote>#ja-navhelper { background: url(“../images/trans-bg.png”) repeat scroll 0 0 transparent; border-top:1px solid #0088FC; }</blockquote>
11. Add background: url(“../images/trans-bg.png”) repeat scroll 0 0 transparent; border-top: 1px solid #0088FC; in <blockquote>#ja-navhelper .main { color: #fff; text-transform: uppercase; padding: 8px 0px; }</blockquote>
magtaf Friend

magtaf
Join date:
April 2006
Posts:
78
Downloads:
27
Uploads:
29

Thanks:

16

Thanked:

1 times in 1 posts

May 13, 2011 at 5:07 pm #391109

Thanks Himangi,

One small problem. In the header and footer, the menu extends to 100% width, how can I fix it?

Here is the modified css.

[PHP]/*
# ————————————————————————
# JA Social Template
# ————————————————————————
# Copyright (C) 2004-2010 JoomlArt.com. All Rights Reserved.
# @license – PHP files are GNU/GPL V2. CSS / JS are Copyrighted Commercial,
# bound by Proprietary License of JoomlArt. For details on licensing,
# Please Read Terms of Use at http://www.joomlart.com/terms_of_use.html.
# Author: JoomlArt.com
# Websites: http://www.joomlart.com – http://www.joomlancers.com
# Redistribution, Modification or Re-licensing of this file in part of full,
# is bound by the License applied.
# ————————————————————————
*/
/* COMMON STYLE
——————————————————— */
body {
color: #333;
font-family: Arial, Helvetica, sans-serif;
line-height: 1.7;
}
body#bd {
background: #000;
}
/* Normal links —*/
a { color: #0088FC; text-decoration: none; }
a:hover, a:active, a:focus { color: #333; }
.ja-module dd,
.ja-content-main dd,
.ja-content-main dd { margin-left: 0px; }
/* Readon links —*/
p.readmore {
background: url(../images/readon-bg.gif) repeat-x left bottom;
border: 1px solid #ddd;
font-weight: bold;
float: left;
padding: 2px 6px;
}
p.readmore a {
color: #666;
text-shadow: 0 1px 1px #fff;
}
p.readmore a:hover,
p.readmore a:focus,
p.readmore a:active {
color: #0088FC;
text-decoration: none;
}
.contentheading, .componentheading, h1, h2, h3, h4, h5 {
font-family: “Segoe UI”, Arial, Hevetica, sans-serif;
color:#0088FC;
}

h1.componentheading, .componentheading {
background: url(../images/heading-bg.gif) repeat-x left top #f0f0f0;
border-bottom: 1px solid #E4E4E4;
color: #4A4A4A;
font-weight: bold;
font-size: 110%;
margin: 0 -15px;
padding: 0 15px 10px;
text-transform: uppercase;
text-shadow: 0 1px 2px #fff;
}
h2.contentheading, .contentheading {
font-weight: bold;
}
.contentheading { font-size: 250%; }
.contentpaneopen_edit {
position: absolute;
left: 0;
top: 0;
}
.blog-featured .contentheading { color: #0088FC; font-size: 170%; }
.jitem-title { font-size: 110%; font-weight: bold; }
/* Others —*/
hr { border-top: 1px solid #ccc; }
/* FORM
——————————————————— */
input, select, textarea, .inputbox {
padding: 4px 5px;
font-family: Arial, Helvetica, sans-serif;
}
input {
vertical-align: middle;
padding: 0;
margin: 0;
}
.inputbox { border: 1px solid #d6e4ec; background: #fff; }
.inputbox:hover, .inputbox:focus { background: #ffffcc; }
.login_form .remember .inputbox,
.ja-weblinks .checkbox .inputbox {
border: none;
}
.josForm .inputbox {
margin-right: 5px;
}
.button, button {
background: url(../images/readon-bg.gif) repeat-x left bottom;
border: 1px solid #ddd;
font-weight: bold;
padding: 2px 5px;
text-shadow: 0 1px 1px #fff;
}
/* Search —*/
form#searchForm { }
.searchintro { border-bottom: 1px solid #ccc; }
.results h4 { text-transform: none; font-size: 110%; }
/* Contact —*/
#component-contact #emailForm {}
.contentpane form p { margin-bottom: 10px; }
/* JOOMLA STYLE
——————————————————— */
/* Layout Deco —*/
.items-leading { border-bottom: 1px solid #ccc; }
.items-row { border-bottom: 1px solid #E8EDF0; }
/* Meta —*/
.article-tools {
border: 1px solid #e1ebf1;
background: #f6f6f6;
margin-top: 3px;
padding: 5px 5px 3px;
}
dl.article-info { color: #999; margin: 0; }
dd.create,
dd.createdby,
dd.category {
background: url(../images/icon-date.png) no-repeat 0px 0px;
margin-right: 8px;
padding: 2px 0 0 20px !important;
text-transform: capitalize;
}
dd.createdby { background: url(../images/icon-user.png) no-repeat 0px 0px; }
dd.category { background: url(../images/icon-folder.png) no-repeat 0px 0px; }
.contentdescription { border-bottom: 1px solid #ccc; margin-bottom: 10px; }
.modifydate { color: #666; font-size: 92%; }
/*Inline images —*/
div.img_caption { margin-top: 20px; }
.img_caption.left { margin-right: 20px; }
div.img_caption img {
background: #d6e4ec;
border: 1px solid #90CAE0;
padding: 4px;
}
p.img_caption { color: #999; padding-top: 2px; text-transform: uppercase; }
.article-image {
float: left;
width: 130px;
}
.article-image img {
background: #d6e4ec;
border: 1px solid #90CAE0;
clear: both;
display: block;
padding: 4px;
margin: 20px 0 0;
}
.article-image .img_caption { margin: 0; }
.article-image .ja-retweet-normal-home { margin-right: 15px; }
.article-image .ja-facebookshare-box_count-home { margin-right: 0; margin-bottom: 0; }
/* Tables —*/
thead tr th {
background: #333;
color: #fff;
padding: 5px;
}
thead tr th a,
thead tr th a:hover,
thead tr th a:focus,
thead tr th a:active { color: #fff; }
.cat-list-row1,
.cat-list-row12,
tr.cat-list-row1 td,
tr.cat-list-row2 td { border-bottom: 1px solid #ccc; padding: 5px; }
.cat-list-row1:hover,
.cat-list-row2:hover { background: #ffffcc; }
.cat-list-row2,
tr.cat-list-row2 td { background-color: #f6f6f6; }
/* Content Toc */
table.contenttoc { border: 1px solid #ccc; }
table.contenttoc td { border-bottom: 1px dotted #ccc; }
table.contenttoc th {
background: #f6f6f6;
border-bottom: 1px solid #ccc;
text-transform: uppercase;
}
/* Poll */
form#poll {
border-bottom: 1px dotted #ccc;
font-weight: bold;
}
dl.poll { border-bottom: 1px dotted #ccc; }
table.pollstableborder td {
background: #f6f6f6;
border-bottom: 1px solid #ccc;
font-weight: bold;
padding: 5px !important;
}
table.pollstableborder tr.sectiontableentry0 td,
table.pollstableborder tr.sectiontableentry1 td { background: #fff; font-weight: normal; }
/* Pagination —*/
.pagination li span,
.pagination li strong { line-height: 20px; }
.items-more { border-bottom: 1px solid #ccc; }
.items-more h3 { font-size: 125%; }
/* Tool Tip —*/
.tool-title {
padding-top: 15px;
}
/* MODULE STYLES
——————————————————— */
div.ja-moduletable h3, div.moduletable h3 {
background: url(../images/grad-d1.gif) repeat-x left top #0088FC;
color: #fff;
font-size: 110%;
font-family: “Segoe UI”, Helvetica, sans-serif;
font-weight: bold;
margin: 0;
padding: 10px 15px;
text-transform: uppercase;
}
div.ja-moduletable, div.moduletable {
background: #fff;
margin-top: 0;
margin-bottom: 15px;
padding: 0;
}
div.ja-moduletable .ja-box-ct, div.moduletable .ja-box-ct {
padding: 10px 15px;
}

/* Advertisement —*/
div.bannergroup_text div.banneritem_text { border-bottom: 1px dotted #ccc; }
/* MAIN LAYOUT DIVS
——————————————————— */
#ja-wrapper { }
#ja-container {

}
#ja-container .main { background: url(../images/container-bg.gif) repeat-x left top #d6e4ec; padding: 20px 0 0; }
.main .main-inner1 { margin-left: 0; margin-right: 0; }
.article-content { overflow: visible; }
.fp-article-content {
padding-left: 145px;
}
/* Content Main —*/
.ja-content-main {
background: #fff;
margin-bottom: 20px;
padding: 10px 15px 20px;
}
.ja-social .ja-content-main,
.ja-agora .ja-content-main {
background: none;
padding-top: 0;
padding-left: 0;
padding-right: 0;
}
/* HEADER
——————————————————— */
#ja-header { margin-top: 29px; z-index: 13; }
#ja-header .main { padding: 15px 0; background: url(“../images/header-bg2.gif”) repeat-x scroll 0 -30px #333333; border-top: 1px solid #0088FC; }
h1.logo, div.logo-text h1 { font-size: 250%; line-height: 1; margin-left: 15px;}
/* Logo Image —*/
h1.logo { width: 220px; height: 80px; }
h1.logo a {
background: url(../images/logo2.png) no-repeat left;
display: block;
width: 350px;
height: 85px;
}
/* Logo Text —*/
div.logo-text h1 {
font-size: 280%;
font-family: Arial, sans-serif;
font-weight: bold;
margin: 0;
padding: 0 0 0 15px;
}
div.logo-text h1 a {
color: #fff;
text-decoration: none;
text-shadow: 0 1px 1px #0367A6;
}
p.site-slogan {
color: #d6e4ec;
display: block;
font-size: 85%;
margin: 3px 0 0;
padding: 0 15px;
}
#ja-top-header {
margin-top:-5px;
position:absolute;
right:180px;
text-align:right;
width:50%;
}
/* Search —*/
#ja-search {
background: url(../images/search-bg.png) no-repeat left top;
bottom: 50px;
height: 29px;
right: 10px;
width: 215px;
}
#ja-search .inputbox {
background: none;
border: none;
color: #fff;
height: 29px;
line-height: 29px;
padding: 0 10px;
width: 125px;
text-transform: capitalize;
}
#ja-search .button {
background: none;
border: 0;
color: #666;
height: 29px;
line-height: 29px;
text-transform: uppercase;
text-shadow: 0 1px 1px #fff;
}
/* Top bar —*/
#ja-topbar {
color: #0088FC;
font-size: 11px;
position: absolute;
top: 0;
z-index: 16;
}
#ja-topbar .main {
background:url(“../images/header-bg2.gif”);
border-bottom: 1px solid #2985A8;
height: 28px;
line-height: 28px;
}
#ja-topbar .ja-day {
background: url(../images/sep-w.gif) no-repeat right center;
display: block;
float: left;
margin-left: 15px;
padding-right: 10px;
}
#ja-topbar .ja-updatetime {
float: left;
padding: 0 10px;
}
#ja-topbar .ja-updatetime em {
margin-left: 5px;
font-style: normal;
color: #fff;
}
/* Headtools —*/
#ja-headtools {
position: absolute;
right: 15px;
top: 5px;
}
#ja-headtools ul {
float: left;
margin: 0;
padding: 0;
white-space: nowrap;
}
#ja-headtools li {
background: none;
display: inline;
line-height: normal;
margin: 0;
padding: 0;
}
#ja-headtools li a {
display: block;
float: left;
color: #000;
margin-left: 5px;
padding-bottom: 4px;
}
#ja-headtools li a span { display: block; padding: 2px 5px 2px 24px; }
#ja-headtools li a.login-switch span { background: url(../images/icons/icon-user.png) no-repeat 5px 2px; }
#ja-headtools li a.register-switch span { background: url(../images/icons/icon-register.gif) no-repeat 5px 2px; }
#ja-headtools li a.login-switch.show span { background-image: url(../images/icons/icon-user-show.png); }
#ja-headtools li a.register-switch.show span { background-image: url(../images/icons/icon-register-show.png); }
#ja-headtools li a:hover {
background: url(../images/arrow-hover-90cw.png) no-repeat 10px center;
text-decoration: none;
}
#ja-headtools li a.show {
background: url(../images/arrow-up.gif) no-repeat center bottom;
color: #000;
position: relative;
z-index: 1000;
}
#ja-headtools li a.show span {}
#ja-headtools li a.show span { display: block; }
#ja-user-register, #ja-user-login {
background: url(../images/ja-login-bg.gif) repeat-x left bottom #fff;
border: 1px solid #A1D5E9;
color: #333;
display: none;
height: auto;
overflow: hidden;
padding: 10px 15px;
position: absolute;
right: -15px;
text-align: left;
top: 21px;
z-index: 999;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 0 3px 5px rgba(0,0,0,.4);
-moz-box-shadow: 0 3px 5px rgba(0,0,0,.4);
-webkit-box-shadow: 0 3px 5px rgba(0,0,0,.4);
}
#ja-user-login .ja-login-user,
#ja-user-login .ja-login-password,
#ja-user-login .mod_login_remember {
float: left;
width: 145px;
display: block;
}
#ja-user-login .button,
#ja-user-register .button {
color: #fff;
background: url(../images/button_bg.png) 0 50% repeat-x #0088FC;
border: 1px solid #0088FC;
text-shadow: 0 1px 1px #4a4a4a;
}
#ja-user-login .button:hover,
#ja-user-register .button:hover {
border: 1px outset #fff;
}
.ja-login-links {
margin-top: 10px;
}
#ja-headtools .ja-login-links a {
color: #0088FC;
padding: 0;
}
#ja-headtools li a.logout-switch {
display: inline;
float: none;
margin-left: 3px;
}
/* NAVIGATION
——————————————————— */
/* Main Nav —*/
#ja-mainnav { background: url(“../images/trans-bg.png”) repeat scroll 0 0 #0088FC; border-top: 1px solid #0088FC; }
#ja-mainnav .main-inner1 { padding: 0 10px 0 }
/* Breadcrumbs —*/
#ja-navhelper { }
#ja-navhelper .main { background: url(“../images/trans-bg.png”) repeat scroll 0 0 transparent; border-top: 1px solid #0088FC; color: #fff; text-transform: uppercase; padding: 8px 0px; }
.ja-breadcrums { text-indent: 10px; }
#ja-navhelper a {
color: #000;
}
/* Extras —*/
.ja-links { padding-right: 10px; }
.ja-links li { padding: 0 10px; }
/* Default Joomla! Menu —*/
#ja-container .moduletable_menu ul.menu {
margin: -5px -15px -5px;
}
#ja-container ul.menu li { border-bottom: 1px dotted #e8edf0; padding-left: 0; }
#ja-container ul.menu li a {
background: url(../images/bullet-grey.png) no-repeat 15px 12px;
color: #666;
text-indent: 27px;
width: 100%;
}
#ja-container ul.menu li a:hover,
#ja-container ul.menu li a:active,
#ja-container ul.menu li a:focus {
background-image: url(../images/bullet-blue.png);
color: #0088FC;
text-decoration: none;
}
#ja-container ul.menu li li { background: none; border-bottom: 0; border-top: 1px solid #E1EBF1; }
#ja-container ul.menu li li a,
#ja-container ul.menu li.active li a { text-indent: 27px; color: #666; }
#ja-container ul.menu li li a:hover,
#ja-container ul.menu li li a:active,
#ja-container ul.menu li li a:focus {
background: url(../images/bullet-blue.png) no-repeat 15px 12px;
color: #0088FC;
}
#ja-container ul.menu li.active a { color: #0088FC; }
/* MASS TOP
——————————————————— */
#ja-content-mass-top { margin-bottom: 15px; }
#ja-content-top { position: relative; }
/* JA Content top —*/
#ja-content-top .ja-moduletable {
background: #fff !important;
margin-left: 10px;
margin-right: 10px;
}
#ja-content-top .ja-box-left .ja-moduletable { margin-left: 0; }
#ja-content-top .ja-box-right .ja-moduletable { margin-right: 0; }
/* SPOTLIGHT
——————————————————— */
#ja-topsl .ja-box, #ja-botsl .ja-box { }
#ja-topsl .ja-box-right, #ja-botsl .ja-box-right {
background: 0;
}
#ja-topsl .ja-moduletable, #ja-botsl .ja-moduletable {
background: none;
border: 0;
margin-top: 0;
margin-bottom: 10px;
}
#ja-topsl div.ja-moduletable h3,
#ja-botsl div.ja-moduletable h3 {
background: none;
border-bottom: 0;
padding-bottom: 0;
}
/* Top spotlight —*/
#ja-topsl .main { padding: 0; }
#ja-topsl .main-inner1 { padding: 10px 0; }
/* Bot spotlight —*/
#ja-botsl { border-top: 1px solid #fff; background-color:#333333} }
#ja-botsl .main { padding: 0; color: #fff; font-size: 92%; }
#ja-botsl .main-inner1 { padding: 10px 0 20px; }
#ja-botsl div.ja-moduletable h3 {
text-transform: none;
font-size: 150%;
padding: 10px 0 0 0;
}
#ja-botsl .ja-box-ct { padding: 0; }
#ja-botsl a {
color: #B9E0EE;
border-bottom: 1px dotted #B9E0EE;
}
#ja-botsl a:hover,
#ja-botsl a:focus,
#ja-botsl a:active {
border-bottom: 1px dotted #fff;
color: #fff;
text-decoration: none;
}
#ja-botsl ul li {
background: none;
border-bottom: 1px dotted #85c4dc;
padding: 0;
margin: 0;
}
#ja-botsl ul li a {
color: #fff;
display: block;
padding: 5px 5px 5px 17px;
background: url(../images/bullet-arrow.gif) no-repeat 5px 10px;
border: 0;
}
#ja-botsl ul li a:hover,
#ja-botsl ul li a:hover,
#ja-botsl ul li a:focus {
color: #fff;
border: 0;
background-color: #0088FC;
}
#ja-botsl .img-border {
background: #fff;
border: 3px solid #0088FC;
margin: 0 0 5px 10px;
}
/* FOOTER
——————————————————— */
#ja-footer {
padding: 10px 0 30px;
color: #0088FC;
}
#ja-footer .main {
text-align: left;
}
#ja-footer a {
color: #fff;
}
#ja-footer .ja-footnav {
margin: 10px 0 5px 0;
padding: 0;
}
#ja-footer .ja-footnav ul li {
padding: 0 10px;
}
#ja-footer .ja-footnav a { color: #fff; font-weight: bold; }
#ja-footer .ja-footnav a:hover,
#ja-footer .ja-footnav a:focus,
#ja-footer .ja-footnav a:active {
color: #fff;
}
#ja-footer .ja-copyright {
padding: 0 10px;
}
#ja-poweredby {
position: absolute;
top: 0px;
right: 0px;
}

/* MISCELLANOUS
———————————————————– */
/* Others —*/
#ja-banner { border-top: 1px solid #ccc; }
div.ja-innerdiv { border-bottom: 1px dotted #ccc; }
div.ja-innerdiv h4 {
font-family: Arial, Helvetica, sans-serif;
font-size: 92%;
font-weight: normal;
text-transform: uppercase;
}
/* Custom gallery —*/
.small-gallery {
float: left;
margin-bottom: 5px;
margin-right: 5px;
}
.last-item { margin-right: 0; }
.small-gallery .img-border {
border: 1px solid #d6e4ec;
padding: 1px;
width: 45px;
}
/* JA Twitter —*/
.ja-twitter {
padding-left: 0;
padding-right: 0;
}
/* Social list —*/
#ja-wrapper ul.social-list li { }
#ja-wrapper ul.social-list li a {
background-position: 5px 5px;
background-repeat: no-repeat;
padding-left: 28px;
}
#ja-wrapper ul.social-list li.ja-facebook a { background-image: url(../images/icons/icon-facebook.png); }
#ja-wrapper ul.social-list li.ja-twitter a { background-image: url(../images/icons/icon-twitter.png); }
#ja-wrapper ul.social-list li.ja-linkedin a { background-image: url(../images/icons/icon-linkedin.png); }
#ja-wrapper ul.social-list li.ja-rss a { background-image: url(../images/icons/icon-rss.png); }
/* Contact list —*/
#ja-wrapper ul.contact-list li {
background-position: 5px 4px;
background-repeat: no-repeat;
padding: 5px 5px 5px 28px;
}
#ja-wrapper ul.contact-list li.add { background-image: url(../images/icons/icon-home.png); }
#ja-wrapper ul.contact-list li.tel { background-image: url(../images/icons/icon-phone.png); }
#ja-wrapper ul.contact-list li.email { background-image: url(../images/icons/icon-email.png); }
/* Facebook button —*/
.fb-button {
background: #e8f1fa;
border: 1px solid #d6e5ec;
margin: 10px 0 !important;
padding: 5px 10px;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
div.ja-facebookshare-box_count-home,
div.ja-facebookshare-box_count {
float: left;
margin-right: 10px;
}
.fb_share_no_count { display: block !important; }
.fb_share_no_count .fb_share_count_inner {
background: url(../images/zero-bg.png) no-repeat center center #E8EBF2 !important;
}
.jacomment-count {
background: url(../images/readon-bg.gif) repeat-x left bottom #fff;
border: 1px solid #ddd;
float: left;
font-weight: bold;
margin: 0 10px 0 0;
padding: 2px 6px;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.jacomment-count a { color: #666; }
.jacomment-count a:hover,
.jacomment-count a:focus,
.jacomment-count a:active { color: #238DB4; text-decoration: none; text-shadow: 0 1px 1px #fff; }
/* JOMSOCIAL’S MODULES STYLE
———————————————————– */
/* Top users —*/
ul#modTopMembers {
margin: 0 -15px !important;
padding: 0;
list-style: none;
}
ul#modTopMembers li {
background: none;
border-bottom: 1px solid #e7edf1;
margin: 0;
padding: 5px 15px;
}
ul#modTopMembers li img.avatar {
margin-right: 8px;
padding: 3px;
}
ul#modTopMembers li a:hover img.avatar {
background: #0088FC;
}
/* Latest Discussion —*/
.modLatestDiscussion {
margin: 0 -15px;
}
.modLatestDiscussion ul {
margin: 0;
padding: 0;
list-style: none;
}
.modLatestDiscussion ul li {
border-bottom: 1px solid #e7edf1;
margin: 0;
padding: 10px 15px !important;
}
.modLatestDiscussion ul li img.avatar {
margin: 2px 10px 0 0;
padding: 1px;
width: 40px;
}
.modLatestDiscussion ul li small,
.modLatestDiscussion ul li small a {
color: #999;
}
.modLatestDiscussion ul li small {
padding: 5px 0 0 12px;
display: block;
}
/* Active group —*/
ul#modActiveGorups {
padding: 0;
margin: 0 -15px;
list-style: none;
}

ul#modActiveGorups li {
background: none;
border-bottom: solid 1px #e7edf1;
padding: 5px 15px;
}

ul#modActiveGorups li img {
width: 40px;
float: left;
display: inline;
margin: 0 8px 0 0;
padding: 1px;
}

ul#modActiveGorups li span {
line-height: normal;
padding: 0;
margin: 0;
}
ul#modActiveGorups a small {
color: #999;
}

ul#modActiveGorups li div { clear: left; height: 1px; }
/* Who’s online —*/
div.js-user-online ul {
margin: 0 0 10px;
padding: 0;
list-style: none;
}
div.js-user-online ul li {
display: block;
float: left;
margin: 0;
padding: 0 5px 5px 0;
}
div.js-user-online ul li a {
display: block;
margin: 0;
padding: 0;
}
div.js-user-online ul li img {
border: 1px solid #ccc;
padding: 2px;
}
/* Override Disqus comment —*/
#dsq-global-toolbar { position: relative; z-index: 12; }
.dsq-post-area { position: relative; z-index: 9; }
#dsq-content .dsq-trackback-url {
width: 80%;
}
.dsq-popup .dsq-subscribe-submit button {
margin-left: 10px;
}
#dsq-content .dsq-comment-footer-left {
visibility: visible !important;
float: none !important;
}
#dsq-content .dsq-comment-footer-right {
float: none;
}
/* Override Online Module —*/
.agorians_online_hor {
width: 45% !important;
}
.agorians_online_avatar {
float: none;
text-align: center;
}
.agorians_online_username {
clear: both;
}
#community-wrap #community-banlists-news-items {
width: 98% !important;
} [/PHP]

himangi Friend

himangi
Join date:
April 2011
Posts:
1406
Downloads:
1
Uploads:
86

Thanks:

21

Thanked:

345 times in 332 posts

May 16, 2011 at 5:44 am #391345

Hi,

To fix the top menu width, you need to apply point 6 & 7 in my previous post. I dont see them applied currently.

To reduce the footer width apply following changes.
Add margin:0px auto; width:95%; in the following styling in template.css on line 718 <blockquote> #ja-footer {
color: #0088FC;
padding: 10px 0 30px;
}</blockquote>

And add width:100%; in template.css line 723 in following styling <blockquote>#ja-footer .main {
text-align: left;
}</blockquote>

magtaf Friend

magtaf
Join date:
April 2006
Posts:
78
Downloads:
27
Uploads:
29

Thanks:

16

Thanked:

1 times in 1 posts

May 18, 2011 at 3:15 am #391711

Hi Himangi,

I tried the solution the remove the blue line of the header and footer menu blus to not extend 100% width but I was unsuccessfule with points 6 and 7.

I have loaded some of the ja_community plus styling to ja_social becasue I like some styling from that template. But I am still having the header and footer menu to extend 100%, any ideas what I can do?

Here is the current CSS.

I would like to remove the footer and memu blue to extemd 100%, just to extend the template witdth.

Also, I would like the styling from JA social on the module boces to have the bluse header. Please tell me where to modify.

[php]/*
body { color: #333; font-family: Arial, Helvetica, sans-serif; }
body#bd { background: #0c0304; color: #8b8077; }
/* Normal links —*/
a { color: #5A9C14; text-decoration: none; }
a:hover, a:active, a:focus { color: #5A9C14; text-decoration: underline; }
/* Readon links —*/
p.readmore { float: left; width: 100px; }
p.readmore a {
background: url(../images/icons/icon-arrow.png) no-repeat 0px 3px;
color: #97C16B;
padding-left: 12px;
text-decoration: none;
}
p.readmore a:hover, p.readmore a:focus, p.readmore a:active {
text-decoration: underline;
}
.contentheading, .componentheading, h1, h2, h3, h4, h5 {
font-family: “Segoe UI”, Tahoma, Verdana, sans-serif;
font-weight: bold;
text-transform: none;
}
h4 { font-size: 110%; }
h1.componentheading, .componentheading {
border-bottom: 1px solid #D4CCC5;
font-weight: normal;
}
h2.contentheading, .contentheading { font-weight: normal; }
h2.contentheading a, .contentheading a { color: #5A9C14; }
.contentheading { font-size: 200%; }
.blog-featured .contentheading { font-size: 220%; color: #5a9c14; }
.blog-featured .contentheading a { color: #5a9c14; }
.jitem-title { font-size: 110%; font-weight: bold; }
.contentpaneopen_edit { margin-left: 10px; }
/* Others —*/
hr { border-top: 1px solid #ccc; }
br.clearfix {
height: 0px;
line-height: 0px;
overflow: hidden;
}
/* FORM
——————————————————— */
input, select, textarea, .inputbox {
padding: 2px;
font-family: Arial, Helvetica, sans-serif;
}
.inputbox { border: 1px solid #dfddd9; background-color: #ebe9e5; padding: 5px; color: #8B8077; }
.inputbox:hover, .inputbox:focus { background-color: #ffffcc; }
/* Search —*/
form#searchForm { border-top: 1px solid #ccc; }
.searchintro { border-bottom: 1px solid #ccc; }
/* Contact —*/
.ja-contact #ja-mainbody { padding-top: 0; }
.ja-contact-form { padding: 40px 40px 40px 0px; }
.ja-contact-form .left-side { float: left; }
.ja-contact-form .right-side { float: right; }
.ja-contact-form input.inputbox {
width: 170px;
}
.ja-contact-form textarea.inputbox {
width: 230px;
margin-top: 3px;
}
#contact_name {
padding-left: 25px;
background-image: url(../images/icon-yourname.png);
background-position: 5px center;
background-repeat: no-repeat;
}
#contact_email {
padding-left: 25px;
background-image: url(../images/icon-yourmail.png) ;
background-position: 5px center;
background-repeat: no-repeat;
}
#contact_subject {
padding-left: 25px;
background-image: url(../images/icon-yourname.png);
background-position: 5px center;
background-repeat: no-repeat;
}
.jcontact-info { padding: 40px 0px 40px 40px; }
.jcontact-info .right {
width: 214px;
margin: 0;
}
.contact_email div { padding: 5px 0; }
.contact_email div.left { padding: 0; }
.contact_email label { display: inline; }
.jcontact-info .left img { margin-top: 30px; }
.jcontact-info .jicons-icons {
padding-left: 20px;
background-repeat: no-repeat;
background-position: left center;
}
.jcontact-address, .jcontact-email, .jcontact-phone { margin: 10px 0; }
.jcontact-address .jicons-icons { background-image: url(../images/icon-addr.png); }
.jcontact-phone .jicons-icons { background-image: url(../images/icon-phone.png); }
.jcontact-email .jicons-icons { background-image: url(../images/icon-mail.png); }
.jcontact-street, .jcontact-emailto, .jcontact-telephone { display: block; color: #547D29; }
.jcontact-state,
.jcontact-country { color: #547D29; }
.jcontact-state { clear: both; }
/* JOOMLA STYLE
——————————————————— */
/* Layout Deco —*/
.items-leading { border-bottom: 1px solid #ccc; }
.items-row { }
/* Meta —*/
.blog-article-tools {
background: url(../images/gline.gif) no-repeat left top;
font-size: 92%;
margin-top: 20px;
padding: 15px 0 0 0;
}
.article-tools {
background: url(../images/gline.gif) no-repeat left top;
padding: 10px 0 0 0;
}
dl.article-info { color: #d4ccc5; width: auto; }
dl.article-info span { color: #97c16b; text-decoration: underline; }
dd.createdby {
color: #97C16B;
text-transform: capitalize;
}
.contentdescription { border-bottom: 1px solid #ccc; }
/*Inline images —*/
p.img_caption { color: #999; text-transform: uppercase; }
div.article-image {
float: left;
margin: 10px 20px 0 0;
width: 105px;
}
div.article-image img {
background: #fff;
border: 4px solid #eeece8;
margin: 0;
padding: 1px;
width: 95px;
}
div.article-content-wrap p { margin: 10px 0 0; }
.img-border {
background: #fff;
border: 4px solid #eeece8;
margin-top: 15px;
padding: 1px;
}
.left { margin-right: 15px; }
.right { margin-left: 15px; }
/* Tables —*/
thead tr th {
background: #333;
color: #fff;
padding: 5px;
}
thead tr th a,
thead tr th a:hover,
thead tr th a:focus,
thead tr th a:active { color: #fff; }
.cat-list-row1,
.cat-list-row12,
tr.cat-list-row1 td,
tr.cat-list-row2 td { border-bottom: 1px solid #ccc; padding: 5px; }
.cat-list-row1:hover,
.cat-list-row2:hover { background: #ffffcc; }
.cat-list-row2,
tr.cat-list-row2 td { background-color: #f6f6f6; }
/* Content Toc */
table.contenttoc { border: 1px solid #ccc; }
table.contenttoc td { border-bottom: 1px dotted #ccc; }
table.contenttoc th {
background: #f6f6f6;
border-bottom: 1px solid #ccc;
text-transform: uppercase;
}
/* Poll */
form#poll {
border-bottom: 1px dotted #ccc;
font-weight: bold;
}
dl.poll { border-bottom: 1px dotted #ccc; }
table.pollstableborder td {
background: #f6f6f6;
border-bottom: 1px solid #ccc;
font-weight: bold;
padding: 5px !important;
}
table.pollstableborder tr.sectiontableentry0 td,
table.pollstableborder tr.sectiontableentry1 td { background: #fff; font-weight: normal; }
/* Pagination —*/
.pagination ul li {
display: block;
float: left;
font-size: 10px;
line-height: 1;
font-weight: bold;
height: 19px;
line-height: 15px;
margin: 0 6px;
overflow: hidden;
}
.pagination ul li.pagination-start,
.pagination ul li.pagination-next {
background: url(../images/pagnav-bg.gif) no-repeat left center;
border-right: 1px solid #ddd;
margin: 0;
padding: 0 5px 0 15px;
}
.pagination ul li.pagination-prev,
.pagination ul li.pagination-end {
background: url(../images/pagnav-bg.gif) no-repeat right center;
border-left: 1px solid #fff;
margin: 0 10px 0 0;
padding: 0 15px 0 5px;
}
.pagination ul li.pagination-next { margin-left: 10px; }
.pagination ul li.pagination-prev strong,
.pagination ul li.pagination-end strong,
.pagination ul li.pagination-start strong,
.pagination ul li.pagination-next strong { border: 0; }
.pagination ul li.pagination-prev span,
.pagination ul li.pagination-end span,
.pagination ul li.pagination-start span,
.pagination ul li.pagination-next span {
background: none;
display: inline;
float: none;
color: #5A9C14 !important;
}
.pagination ul li span.pagenav, .pagination ul li a.pagenav { padding: 0; }
.pagination li span {
background: url(../images/circle-green2.png) no-repeat center center;
display: block;
float: left;
width: 20px;
height: 19px;
padding: 0 !important;
text-align: center;
color: #fff;
}
.pagination li strong a { padding-right: 5px; }
.items-more { border-bottom: 1px solid #ccc; }
.items-more h3 { font-size: 125%; }
p.counter {
font-size: 92%;
font-weight: bold;
}
/* MODULE STYLES
——————————————————— */
div.ja-moduletable h3, div.moduletable h3 {
font-size: 115%;
text-transform: uppercase;
font-family: Tahoma, Helvetica, Arial, sans-serif;
}
.sidebar div.ja-moduletable,
.sidebar div.moduletable {
color: #8b8077;
background: url(../images/modt-bg.gif) repeat-x left top #F7F6F2;
border: 1px solid #e3ded5;
padding: 15px;
}
/* Moduletable blue —*/
div.moduletable_menu {
background: url(../images/blue-bg.gif) repeat-x left bottom #14b8d2 !important;
border: 1px solid #12a6c3 !important;
color: #fff;
padding: 15px 0 40px;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
}
#ja-container div.moduletable_menu h3 { color: #cef2fc; margin-bottom: 10px; padding: 0 10px; }
#ja-container div.moduletable_menu ul li {
background: url(../images/menu-sep.png) no-repeat center bottom;
border: 0;
padding: 2px 10px;
}
#ja-container div.moduletable_menu a { color: #ABDDE9; font-weight: bold; }
#ja-container div.moduletable_menu a:hover,
#ja-container div.moduletable_menu a:focus,
#ja-container div.moduletable_menu a:active { color: #fff; }
#ja-container div.moduletable_menu li.active a { color: #fff; }
#ja-container div.moduletable_menu ul ul li {
background: none;
border-top: 1px dotted #ABDDE9;
margin: 0;
padding: 0;
}
#ja-container div.moduletable_menu ul ul li a { text-indent: 0; color: #ABDDE9 !important; }
#ja-container div.moduletable_menu ul ul li a:hover,
#ja-container div.moduletable_menu ul ul li.active a { text-indent: 0; color: #fff !important; }
/* Moduletable blank —*/
.sidebar div.moduletable_blank {
background: none;
border: 0;
margin-bottom: 10px;
padding: 0;
}
/* Moduletable no border —*/
div.moduletable_noborder {
background: none !important;
border: 0 !important;
}
/* Advertisement —*/
div.bannergroup_text div.banneritem_text { border-bottom: 1px dotted #ccc; }
/* MAIN COLUMN
——————————————————— */
/* Content Top —*/
.ja-content-top .moduletable_tabswrap h3 {
background: #E8E5DF;
border: 1px solid #EFECE7;
border-bottom: 0;
margin-bottom: 0px;
padding: 10px 10px 10px;
text-shadow: 1px 1px 1px #fff;
}
.ja-content-top .moduletable_tabswrap {
margin-bottom: 20px;
padding-bottom: 0;
}

/* MAIN LAYOUT DIVS
——————————————————— */
#ja-container .main { background: #fff; padding: 0 0 20px; }
.main .main-inner1 { margin-left: 0; margin-right: 0; }
#ja-mainbody { padding-top: 20px; }
#ja-left, #ja-right { padding-top: 20px; }
.sidebar { background: url(../images/topsl1-bg.png) no-repeat 0px 0px; }
.ja-frontpage .sidebar { background: none; }
/* One column layout —*/
body.ja-body-r1 #ja-right div.ja-moduletable {
margin-left: 40px;
margin-right: 40px;
}
/* Tabs content layout —*/
body.ja-tabs-content #ja-mainbody { padding-top: 0; }
body.ja-tabs-content #ja-mainbody .inner { padding: 0 40px 0 0; }
/* Float column —*/
#ja-main .inner {
padding: 0 40px;
}
/* HEADER
——————————————————— */
#ja-header .main { padding: 25px 0 20px; }
h1.logo, div.logo-text h1 { font-size: 250%; line-height: 1; margin-left: 10px;}
/* Logo Image —*/
h1.logo { width: 266px; height: 46px; }
h1.logo a {
background: url(../images/logo.png) no-repeat left;
display: block;
width: 266px;
height: 46px;
}
/* Logo Text —*/
div.logo-text h1 {
font-size: 200%;
font-family: Arial, sans-serif;
font-weight: bold;
}
div.logo-text h1 a {
text-decoration: none;
}
p.site-slogan {
color: #ccc;
display: block;
font-size: 85%;
margin: 3px 0 0;
padding: 0 10px;
text-transform: uppercase;
}
/* JA Search —*/
#ja-search { bottom: 30px; }
#ja-search .inputbox {
background: url(../images/search-bg.gif) no-repeat 0px 0px;
border: 0;
color: #6e6865;
height: 29px;
padding: 0 25px 0 15px;
text-transform: capitalize;
width: 190px;
}
/* JA Topnav —*/
#ja-topnav {
font-family: “Segoe UI”, Tahome, Verdana, sans-serif;
position: absolute;
right: 250px;
bottom: 35px;
}
#ja-topnav ul {
margin: 0;
padding: 0;
list-style: none;
}
#ja-topnav ul li {
background: url(../images/topnav-sep.gif) no-repeat right center;
display: inline;
padding: 0 10px;
}
#ja-topnav ul li a { }
#ja-topnav ul li a:hover,
#ja-topnav ul li a:focus,
#ja-topnav ul li a:active { text-decoration: underline; }
/* NAVIGATION
——————————————————— */
/* Main Nav —*/
#ja-mainnav { }
#ja-mainnav .main { background: url(../images/topsl-bg.gif) repeat-x left top; }
/* Breadcrumbs —*/
#ja-navhelper .main {
text-transform: uppercase;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
#ja-breadcrums .main {
background: url(../images/headline-bg.gif) no-repeat center top #fff;
border-top: 1px solid #ebe9e5;
}
#ja-breadcrums .main-inner1 {
padding: 0 15px;
}
#ja-breadcrums strong {
display: block;
color: #066783;
float: left;
font-size: 100%;
font-style: normal;
font-weight: 600;
line-height: 30px;
letter-spacing: 1px;
text-transform: none;
}
#ja-breadcrums { height: 30px; line-height: 30px; }
#ja-breadcrums a { color: #97c16b; font-size: 92%; border-bottom: 1px solid #CBE0B5; }
#ja-breadcrums a:hover, #ja-breadcrums a:focus, #ja-breadcrums a:active { text-decoration: none; }
.ja-breadcrums {
text-indent: 10px;
}
/* Extras —*/
.ja-links { padding-right: 10px; }
.ja-links li { padding: 0 10px; }
/* Default Joomla! Menu —*/
#ja-container ul.menu li { border-bottom: 1px dotted #ccc; }
#ja-container ul.menu li li { border-bottom: 0; border-top: 1px dotted #ccc; }
/* HEADLINE
——————————————————— */
#ja-headline .main {
background: url(../images/headline-bg.gif) no-repeat center top #fff;
border-top: 1px solid #ebe9e5;
}
#ja-headline .main-inner1 {
padding: 0 15px;
}
#ja-headline .ja-healineswrap em {
display: block;
color: #066783;
float: left;
font-size: 120%;
font-style: normal;
font-weight: 600;
line-height: 34px;
letter-spacing: 1px;
text-transform: uppercase;
}
.ja-headelines-buttons { margin-top: 10px; }
.ja-headlines { height: 34px; line-height: 34px; }
.ja-headlines span.date { color: #d4ccc5; font-size: 92%; padding-right: 10px; }
.ja-headlines a { color: #97c16b; font-size: 92%; border-bottom: 1px solid #CBE0B5; }
.ja-headlines a:hover, .ja-headlines a:focus, .ja-headlines a:active { text-decoration: none; }
.ja-headelines-pre { background: url(../images/btn-pre.png) no-repeat scroll left top; }
.ja-headelines-next { background: url(../images/btn-next.png) no-repeat scroll left top; margin-right: 5px; }
/* MAP
——————————————————— */
#ja-map .main {
background: url(../images/map-bg.gif) repeat-x center bottom #f7f6f1;
}
#ja-map .main-inner1 { padding: 20px; }
#ja-map .map-container { margin: 0; padding: 0; border: 5px solid #fff; }
/* CUSTOME MODULES
——————————————————— */
#ja-content-bot1 .main { background: url(../images/gsep.gif) no-repeat center top #fff; padding: 20px 0; text-align: center; }
#ja-content-bot1 .ja-moduletable, #ja-tags .moduletable {
margin: 0;
padding: 0;
}
span.ctag { color: ; padding-right: 5px; line-height: 1.2; cursor: pointer; }
span.ctag:hover { background: none; text-decoration: underline; }
.size0 { font-size: 80%; font-weight: bold; color: #ae7f64; }
.size1 { font-size: 92%; font-weight: bold; color: #ae7f64;}
.size2 { font-size: 100%; font-weight: bold; color: #5a9c14;}
.size3 { font-size: 110%; font-weight: bold; color: #ae7f64;}
.size4 { font-size: 125%; font-weight: bold; color: #a02016;}
.size5 { font-size: 140%; font-weight: bold; color: #5a9c14;}
.size6 { font-size: 180%; font-weight: bold; color: #5a9c14;}
#ja-content-bot2 .main {
background: url(../images/content-bot-bg.gif) repeat-x left top #cac7bd;
border-top: 1px solid #b0aea5;
padding: 20px 0;
color: #157e9c;
font-size: 150%;
text-align: center;
}
/* SPOTLIGHT
——————————————————— */
#ja-topsl .ja-box, #ja-botsl .ja-box { }
#ja-topsl .ja-box-right, #ja-botsl .ja-box-right {
background: 0;
}
#ja-topsl .ja-moduletable, #ja-botsl .ja-moduletable {
margin-top: 10px;
margin-bottom: 10px;
}
#ja-topsl div.ja-moduletable h3,
#ja-botsl div.ja-moduletable h3 { border-bottom: 0; padding-bottom: 0; }

/* Top spotlight —*/
#ja-topsl { }
#ja-topsl .main {
background: url(../images/topsl-bg1.gif) repeat-x left bottom #e7e6e1;
border-bottom: 1px solid #928f85;
color: #70635b;
padding: 10px 0 20px;
}
#ja-topsl .main-inner1 { padding: 0 30px; }
#ja-topsl .ja-box-right { right: 30px; }
#ja-topsl div.ja-moduletable h3 {
color: #066884;
padding-left: 60px;
font-size: 110%;
margin-bottom: 12px;
letter-spacing: 1px;
text-transform: uppercase;
text-shadow: 0 1px 1px #fff;
}
#ja-topsl div.ja-moduletable img { margin: 5px 20px 0 0; }
/* Top spotlight 1 —*/
#ja-topsl1 { }
#ja-topsl1 .main { background: #fff; }
#ja-topsl1 div.moduletable_full { margin-bottom: 10px; padding-bottom: 0; }
#ja-topsl1 .ja-box-full h3 {
color: #0f86a8;
font-size: 180%;
font-weight: normal;
padding: 0;
text-transform: none;
}
.ja-box-full img { margin-right: 15px; }
.ja-box-full p { margin-top: 10px; text-align: left; }
.ja-box-full p.readmore { width: 100%; }
.ja-box-full p.readmore a {
background: url(../images/arrow.gif) no-repeat left center;
color: #5b9d14;
font-weight: bold;
padding-left: 10px;
text-decoration: underline;
}
#ja-topsl1 div.moduletable-float-left { float: left; width: 168px; }
#ja-topsl1 div.moduletable-float-right { width: 187px; float: right; margin: 0; }
#ja-topsl1 div.moduletable-float-right .ja-box-ct { padding: 10px; }
#ja-topsl1 div.border-wrap h3 { padding: 12px 15px; }
#ja-topsl1 div.border-wrap {
background: url(../images/grad-l1.gif) repeat-x left top !important;
border: 1px solid #DCDBD9 !important;
box-shadow: 0 2px 3px rgba(110, 94, 69, .14);
-moz-box-shadow: 0 2px 3px rgba(110, 94, 69, .14);
-webkit-box-shadow: 0 2px 3px rgba(110, 94, 69, .14);
}
.ja-headsp-left { float: left; }
.ja-headsp-left .ja-moduletable { margin: 0 40px; }
.ja-headsp-right {
background: url(../images/topsl1-bg.png) no-repeat 0px 0px;
float: right;
}
.ja-headsp-right .ja-box-inner { padding: 20px 10px 0 30px; }

/* Top spotlight 2—*/
#ja-topsl2 .main {
background: url(../images/grad-l2.gif) repeat-x left top #eae7e1;
border-bottom: 1px solid #c3bbb8;
padding: 20px 0 0;
}
#ja-topsl2 .ja-box-left .ja-box-ct { padding: 0 30px; }
#ja-topsl2 .ja-box-left .moduletable h3 { padding-left: 30px; }
/* Bot spotlight —*/
#ja-botsl .main { background: url(../images/botsl-bg.gif) repeat-x left bottom #282421; color: #958678; padding: 0; }
#ja-botsl .main-inner1 { padding: 10px 30px; border-top: 1px solid #edebe3; }
#ja-botsl .ja-moduletable h3 {
color: #a49d8c;
margin-bottom: 15px;
text-transform: uppercase;
}
/* JA FOOTER
———————————————————– */
#ja-footer { }
#ja-footer .main { text-align: left; }
#ja-footer .main .main-inner1 {
padding: 0 30px;
}
#ja-footer .ja-footnav {
position: absolute;
margin: 0;
right: 40px;
top: 0px;
}
.ja-footnav a { border-bottom: 1px solid #486027 !important; color: #5a9c14; }
.ja-footnav a:hover { text-decoration: none; }

/* MISCELLANOUS
———————————————————– */
/* Others —*/
#ja-top-panel .main-inner1 {
border: 2px dotted #e2e2b5;
padding: 5px 10px;
text-align: center;
margin-top: 15px;
background: #ffffcc;
position: relative;
}
#ja-banner { border-top: 1px solid #ccc; }
div.ja-innerdiv { }
div.ja-innerdiv h4 {
color: #9a8d85;
font-weight: bold;
margin: 0 0 15px 0;
text-shadow: 0 1px 1px rgba(0, 0, 0, 1);
}
div.ja-innerdiv .ja-bottom-links {
float: left;
margin-right: 45px;
}
#ja-botsl div.ja-innerdiv .ja-bottom-links ul li { background: none; padding-left: 0; }
#ja-botsl div.ja-innerdiv .ja-bottom-links ul li a { color: #699e30; border-bottom: 1px solid #486027; text-shadow: 0 1px 1px rgba(0, 0, 0, 1); }
#ja-botsl div.ja-innerdiv .ja-bottom-links ul li a:hover,
#ja-botsl div.ja-innerdiv .ja-bottom-links ul li a:focus,
#ja-botsl div.ja-innerdiv .ja-bottom-links ul li a:active { text-decoration: none; }
/* Youtube button —*/
a.ja-icon-video {
background: url(../images/icon-youtube.gif) no-repeat 5px 8px #fff;
border: 1px solid #ccc;
color: #666;
display: block;
font-weight: bold;
position: absolute;
padding: 5px 5px 5px 43px;
right: 10px;
top: 8px;
text-decoration: none;
width: 35px;
}
a.ja-icon-video span { color: #666; }
a.ja-icon-video:hover,
a.ja-icon-video:focus,
a.ja-icon-video:active { border-color: #ddd; text-decoration: none; }
a.ja-icon-video:hover span { color: #0F85D8; }
#ja-absolute .main {
position: fixed;
width: auto;
height: auto;
z-index: 99999;
top: 1px;
left: 1px;
}
#ja-absolute .main a {
width: 91px;
height: 99px;
overflow: hidden;
display: block;
background: url(../images/joomla16.png) no-repeat left top;
text-indent: -9999px;
}
#ja-absolute .main a:hover,
#ja-absolute .main a:focus {
background-position: left bottom;
}
/* JA Twitter —*/
div.ja-twitter { margin: 0; padding: 0; }
div.ja-twitter div.ja-twitter-item {
background: url(../images/line-l1.gif) no-repeat center bottom;
border: 0;
}
div.ja-twitter center { overflow: hidden; }
a.btn-green {
background: url(../images/btn-green.png) no-repeat 0px 0px;
color: #333;
display: inline-block;
font-size: 13px;
height: 31px;
line-height: 31px;
width: 121px;
}
a.btn-green:hover,
a.btn-green:focus,
a.btn-green:active {
text-decoration: none;
}
a.ja-share-this {
background: url(../images/btn-sharethis.png) no-repeat top left;
color: #fff;
display: block;
font-weight: bold;
margin: 5px 0 10px 0;
width: 80px;
height: 29px;
padding-left: 37px;
line-height: 29px;
}
p.ja-social img { margin-right: 8px; }
/* Event style —*/
.event .date {
color: #e36805;
display: block;
font-size: 125%;
font-weight: bold;
margin-bottom: 10px;
}
.event .author { color: #56859d; display: block; margin-bottom: 3px; }
.event .author span {
border: 1px solid #dfddd9;
display: block;
float: left;
font-size: 92%;
padding: 0 10px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
.event .topic { display: block; margin-bottom: 20px; }
.event a { color: #5b9d14; text-decoration: underline; }
.event a.readon {
background: url(../images/arrow.gif) no-repeat 5px 5px;
padding-left: 15px;
}
.event img { vertical-align: middle; }
/* Form Subscribe —*/
#form-subscribe p { margin: 10px 0; }
.inputbox { border: 1px solid #dfddd9; background-color: #ebe9e5; padding: 5px; color: #8B8077; }
#form-subscribe input.subscribe-name,
#form-subscribe input.subscribe-email {
background: url(../images/icons/icon-pen.png) no-repeat 10px 8px #ebe9e5;
border: 1px solid #dfddd9;
padding: 5px 5px 5px 30px;
color: #8B8077;
width: 130px;
}
#form-subscribe input.subscribe-email { background: url(../images/icons/icon-email.png) no-repeat 10px 8px #ECEBE9; }
#form-subscribe .button,
.ja-contact-form .button {
background: url(../images/btn-green2.png) no-repeat 0px 0px;
border: 0;
color: #333333;
display: block;
font-size: 92%;
font-weight: bold;
height: 23px;
line-height: 20px;
width: 68px;
text-shadow: 1px 1px 1px #97c16b;
}
.ja-contact-form .button:hover {
cursor: pointer;
}
/* Hall of Fame —*/
ul.hall-fame {
margin: 0 !important;
padding: 0;
list-style: none;
}
ul.hall-fame li {
background: none;
margin: 0;
padding: 5px 0 !important;
}
ul.hall-fame li img {
border: 1px solid #fff;
float: left;
margin-right: 10px;
}
ul.hall-fame li span.username {
color: #5A9C14;
border-bottom: 1px solid #5A9C14;
font-weight: bold;
}
ul.hall-fame li span.rate {
color: #ae9e91;
font-size: 92%;
text-transform: uppercase;
}
/* Feature post —*/
.feature-post img { border: 1px solid #fff; }
.feature-post span.post-date {
display: block;
font-size: 92%;
font-weight: bold;
margin: 10px 0 5px;
}
.feature-post span.title a {
color: #5A9C14;
border-bottom: 1px solid #5A9C14;
font-weight: bold;
}
.feature-post p {
margin: 10px 0 0;
}
/* Quickaccess —*/
#ja-quickaccess {
position: absolute;
right: 15px;
top: 10px;
}
#ja-quickaccess ul {
float: left;
margin: 0;
padding: 0;
white-space: nowrap;
}
#ja-quickaccess li {
background: none;
display: inline;
line-height: normal;
margin: 0;
padding: 0;
color: #ddd;
}
#ja-quickaccess li a {
display: block;
line-height: 17px;
color: #fff;
font-weight: bold;
}
#ja-quickaccess li a.login-switch,
#ja-quickaccess li a.register-switch {
background: url(../images/btn-round-green.png) left top no-repeat;
padding: 0 15px;
float: left;
height: 27px;
line-height: 25px;
color: #233d04;
}
#ja-quickaccess li a.register-switch {
background-position: right top;
border-left: 1px solid #89CC0F;
}
#ja-quickaccess li a.login-switch.show,
#ja-quickaccess li a.register-switch.show {
background-position: left bottom;
position: relative;
z-index: 1000;
}
#ja-quickaccess li a.login-switch:hover,
#ja-quickaccess li a.register-switch:hover {
background-position: left bottom;
text-decoration: none;
}
#ja-quickaccess li a.register-switch:hover,
#ja-quickaccess li a.register-switch.show {
background-position: right bottom;
}
#ja-quickaccess li a.show span {}
#ja-quickaccess li a.show span { display: block; }
#ja-quickaccess #ja-user-register, #ja-quickaccess #ja-user-login {
display: none;
position: absolute;
right: 0;
top: 30px;
text-align: left;
z-index: 999;
padding-top: 12px;
background: url(../images/arrow-05.png) 50px top no-repeat;
}
#ja-quickaccess #ja-user-register {
background-position: 80% top;
}
#ja-quickaccess #ja-user-register .main-inner1,
#ja-quickaccess #ja-user-login .main-inner1 {
background: #47770e url(../images/grad-01.gif) left top repeat-x;
color: #b8e184;
width: 165px;
height: auto;
overflow: hidden;
padding: 25px;
padding-bottom: 0;
border-radius: 5px 5px 6px 6px;
-moz-border-radius: 5px 5px 6px 6px;
-webkit-border-radius: 5px 5px 6px 6px;
box-shadow: 0 3px 3px rgba(0,0,0,.4);
-moz-box-shadow: 0 3px 3px rgba(0,0,0,.4);
-webkit-box-shadow: 0 3px 3px rgba(0,0,0,.4);
}
#ja-quickaccess #ja-user-register .main-inner1 {
width: 370px;
}
#ja-quickaccess #ja-user-login .ja-login-user,
#ja-quickaccess #ja-user-login .ja-login-password,
#ja-quickaccess #ja-user-login .mod_login_remember {
width: 145px;
display: block;
}
#ja-quickaccess #ja-user-login .button,
#ja-quickaccess #ja-user-register .button {
background: url(../images/btn-round-grey.png) right top no-repeat;
color: #51900f;
padding: 0 15px 0 0;
line-height: 28px;
height: 28px;
overflow: visible;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border: 0;
text-shadow: 0 1px 2px rgba(0,0,0,.2);
}
#ja-quickaccess #ja-user-login .button span,
#ja-quickaccess #ja-user-register .button span {
line-height: 18px;
}
#ja-quickaccess #ja-user-login .button:hover,
#ja-quickaccess #ja-user-register .button:hover {
cursor: pointer;
color: #2F5008;
}
#ja-quickaccess label.invalid, #ja-quickaccess .invalid { color: #960303; }
#ja-quickaccess .button-round {
background: #fd8b00 url(../images/grad-02.gif) left top repeat-x;
padding: 10px 25px;
margin: 20px -25px 0;
overflow: hidden;
border-radius: 0 5px;
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
}
#ja-quickaccess .button-round span {
background: url(../images/btn-round-grey.png) left -30px no-repeat;
display: block;
float: left;
padding-left: 15px;
width: 67px;
}
#ja-quickaccess label.ja-login-user span,
#ja-quickaccess label.ja-login-password span {
display: none;
}
#ja-quickaccess #mod_login_username {
background: url(../images/icon-user.png) 10px center no-repeat;
}
#ja-quickaccess #mod_login_password {
background: url(../images/icon-pass.png) 10px center no-repeat;
}
#ja-quickaccess #mod_login_username,
#ja-quickaccess #mod_login_password {
padding-left: 30px;
background-color: #2F5008;
}
#ja-quickaccess input.inputbox {
background-color: #2f5008;
border: 1px solid #2c4b07;
color: #81a84e;
}
#ja-quickaccess #ja-user-login input.inputbox { margin-bottom: 10px; }
#ja-quickaccess .ja-login-links a {
background: url(../images/icon-02.png) 5px 8px no-repeat;
color: #9cd95a;
padding: 0;
padding-left: 15px;
font-size: 92%;
}
#ja-quickaccess li a.logout-switch {
display: inline;
float: none;
margin-left: 3px;
}
/* Custom video layout —*/
#ja-video { position: relative; z-index: 10; }
#ja-video .main { background: #202020; }
#ja-video .inner { padding: 40px 40px 20px; }
div.video-heading .ja-left-side { background: url(../images/grad-d2.gif) repeat-x left top; float: left; width: 720px; }
div.video-heading .ja-left-side .inner { background: url(../images/grad-d1.gif) no-repeat right bottom; }
div.video-heading .video-info { margin-top: 15px; font-size: 92%; }
div.video-heading .video-info p { display: block; float: left; }
div.video-heading ul.tags { float: right; margin: 0; padding: 0; list-style: none; }
div.video-heading ul.tags li {
background: #1F282D;
border: 1px solid #1C2C35;
display: inline;
margin-right: 3px;
padding: 2px 6px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
div.video-heading ul.tags li a { border: 0; color: #92B9CF; }
div.video-heading .ja-right-side { float: right; width: 240px; }
div.video-heading .ja-right-side h3 {
font-size: 180%;
font-weight: normal;
margin-bottom: 20px;
}
div.video-heading .ja-right-side p { margin: 0 0 15px; }
/* Custom gallery layout —*/
div.simple-gallery { position: relative; }
div.simple-gallery h3 {
font-size: 125%;
margin-bottom: 20px;
text-transform: uppercase;
}
div.simple-gallery .ja-box-left,
div.simple-gallery .ja-box-center,
div.simple-gallery .ja-box-right {
float: left;
margin: 0 19px;
width: 195px;
}
div.simple-gallery .ja-box-left { margin-left: 0; }
div.simple-gallery .ja-box-right { margin-right: 0; }
div.simple-gallery .simple-gallery-center a.title {
display: block;
font-size: 140%;
padding: 10px 0 0;
text-decoration: underline;
}
div.simple-gallery .simple-gallery-center p {
margin-top: 10px;
}[/php]

himangi Friend

himangi
Join date:
April 2011
Posts:
1406
Downloads:
1
Uploads:
86

Thanks:

21

Thanked:

345 times in 332 posts

May 18, 2011 at 8:35 am #391776

Hi,

Do you want to have blue module header background in th black theme? Have you tried the Blue colored profile for the whole template?

magtaf Friend

magtaf
Join date:
April 2006
Posts:
78
Downloads:
27
Uploads:
29

Thanks:

16

Thanked:

1 times in 1 posts

May 18, 2011 at 11:09 am #391809

Yes. It’s the ja social module boxes that we like the most. So the ja community does not have it so we like to have the module boxes like ja social.

himangi Friend

himangi
Join date:
April 2011
Posts:
1406
Downloads:
1
Uploads:
86

Thanks:

21

Thanked:

345 times in 332 posts

May 19, 2011 at 6:46 am #391904

in your css find
div.ja-moduletable h3, div.moduletable h3 {
font-size: 115%;
text-transform: uppercase;
font-family: Tahoma, Helvetica, Arial, sans-serif;
}
and add color: #colorcode; to change text color of the module title.

Previously there was a black background to the module title, which you must have removed now. But you will need to change the respective images and colors to have a different color background for the module titles..

magtaf Friend

magtaf
Join date:
April 2006
Posts:
78
Downloads:
27
Uploads:
29

Thanks:

16

Thanked:

1 times in 1 posts

May 19, 2011 at 11:07 am #391959

Thank you. I wilk try the solution.

And go get the header and footer menu to be the width of the site and not 100%?

himangi Friend

himangi
Join date:
April 2011
Posts:
1406
Downloads:
1
Uploads:
86

Thanks:

21

Thanked:

345 times in 332 posts

May 20, 2011 at 9:04 am #392085

I am not sure about your footer header problem with the current JA social styling you have applied..
Author

Posts

Viewing 14 posts - 1 through 14 (of 14 total)

This topic contains 14 replies, has 2 voices, and was last updated by himangi 13 years, 7 months ago.

We moved to new unified forum. Please post all new support queries in our New Forum

Quick Navigation

Site navigation

Add a bordered background to template

magtaf

himangi

magtaf

himangi

magtaf

himangi

magtaf

himangi

magtaf

himangi

magtaf

himangi

magtaf

himangi

Important Notice :

Jump to forum

Categories