Joomla Templates Club 406,261 posts

[magtaf Friend magtafJoin date: April 2006Posts: 78Downloads:27Uploads:29 Thanks: 16 Thanked: 1 times in 1 posts]

#164131

I am using JA social and I want to change some formatting in the front page.

1- I would like to change the background of the K2 category, I am using the frontpage with k2 component.

2- Make the padding smaller from the tittle and the article content

3- Remove the comments from the front page only since they will have the comments in the article itself.

4- Move the readmore to where the comments are currently.

5- Make the fonts smaller from the K2 called tagged under.

Please take a look at the image attached

Here is the CSS I can using

[PHP]/* COMMON STYLE
——————————————————— */
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]

---

Attachments:

1. 

[khoand Friend khoandJoin date: February 2011Posts: 4500Downloads:0Uploads:179 Thanks: 169 Thanked: 1166 times in 1060 posts]

#391735

Hi,
Could you give me a link to your website?

[magtaf Friend magtafJoin date: April 2006Posts: 78Downloads:27Uploads:29 Thanks: 16 Thanked: 1 times in 1 posts]

#391808

problemsolveddaily dot com

[khoand Friend khoandJoin date: February 2011Posts: 4500Downloads:0Uploads:179 Thanks: 169 Thanked: 1166 times in 1060 posts]

#391884

1- I would like to change the background of the K2 category, I am using the frontpage with k2 component.

find this code from http://problemsolveddaily.com/templates/ja_social/css/k2.css file


div.latestItemsCategory {
background: url(../images/heading-bg.gif) repeat-x left bottom white; <-- change background
border: 1px solid #CCC;
color: white;
margin: 15px 10px 8px;
padding: 11px;
position: relative;
}


[khoand Friend khoandJoin date: February 2011Posts: 4500Downloads:0Uploads:179 Thanks: 169 Thanked: 1166 times in 1060 posts]

#391885

2- Make the padding smaller from the tittle and the article content

Add this code into http://problemsolveddaily.com/templates/ja_social/css/k2.css file

h2.latestItemTitle{margin-bottom:0px;

[khoand Friend khoandJoin date: February 2011Posts: 4500Downloads:0Uploads:179 Thanks: 169 Thanked: 1166 times in 1060 posts]

#391888

5- Make the fonts smaller from the K2 called tagged under.

Add this code into http://problemsolveddaily.com/templates/ja_social/css/k2.css file

ul.latestItemTags{font-size:10px;}

[khoand Friend khoandJoin date: February 2011Posts: 4500Downloads:0Uploads:179 Thanks: 169 Thanked: 1166 times in 1060 posts]

#391889

4- Move the readmore to where the comments are currently.

Cut this code from <joomla url>componentscom_k2templatesdefaultlatest_item.php file

<?php if ($this->item->params->get('latestItemReadMore')): ?>
<!-- Item "read more..." link -->
<div class="latestItemReadMore">
<a class="k2ReadMore" href="<?php echo $this->item->link; ?>">
<?php echo JText::_('Read more...'); ?>
</a>
</div>
<?php endif; ?>

and patse it after

<?php echo $this->item->introtext; ?>

[khoand Friend khoandJoin date: February 2011Posts: 4500Downloads:0Uploads:179 Thanks: 169 Thanked: 1166 times in 1060 posts]

#391892

3- Remove the comments from the front page only since they will have the comments in the article itself.

What type of comment do you use?

[magtaf Friend magtafJoin date: April 2006Posts: 78Downloads:27Uploads:29 Thanks: 16 Thanked: 1 times in 1 posts]

#391960

For question 3 I use kw i installed the quickstart template.

[magtaf Friend magtafJoin date: April 2006Posts: 78Downloads:27Uploads:29 Thanks: 16 Thanked: 1 times in 1 posts]

#391982

For Question 4,

4- Move the readmore to where the comments are currently

I have applied the change but nothing happens.

Hre is my lates_items.php, if you can point out the issue I will aprreciate it

[php]<?php
/**
* @version $Id: latest_item.php 494 2010-06-17 14:59:48Z joomlaworks $
* @package K2
* @author JoomlaWorks http://www.joomlaworks.gr
* @copyright Copyright (c) 2006 – 2010 JoomlaWorks, a business unit of Nuevvo Webware Ltd. All rights reserved.
* @license GNU/GPL license: http://www.gnu.org/copyleft/gpl.html
*/
// no direct access
defined(‘_JEXEC’) or die(‘Restricted access’);
?>
<!– Start K2 Item Layout –>
<div class=”latestItemView”>
<!– Plugins: BeforeDisplay –>
<?php echo $this->item->event->BeforeDisplay; ?>
<!– K2 Plugins: K2BeforeDisplay –>
<?php echo $this->item->event->K2BeforeDisplay; ?>
<div class=”latestItemHeader”>
<?php if($this->item->params->get(‘latestItemTitle’)): ?>
<!– Item title –>
<h2 class=”latestItemTitle”>
<?php if ($this->item->params->get(‘latestItemTitleLinked’)): ?>
<a href=”<?php echo $this->item->link; ?>”>
<?php echo $this->item->title; ?>
</a>
<?php else: ?>
<?php echo $this->item->title; ?>
<?php endif; ?>
</h2>
<?php endif; ?>
</div>

<?php if($this->item->params->get(‘latestItemDateCreated’)): ?>
<!– Date created –>
<span class=”latestItemDateCreated”>
<?php echo JHTML::_(‘date’, $this->item->created , JText::_(‘DATE_FORMAT_LC2’)); ?>
</span>
<?php endif; ?>
<!– Plugins: AfterDisplayTitle –>
<?php echo $this->item->event->AfterDisplayTitle; ?>
<!– K2 Plugins: K2AfterDisplayTitle –>
<?php echo $this->item->event->K2AfterDisplayTitle; ?>
<div class=”latestItemBody”>
<!– Plugins: BeforeDisplayContent –>
<?php echo $this->item->event->BeforeDisplayContent; ?>
<!– K2 Plugins: K2BeforeDisplayContent –>
<?php echo $this->item->event->K2BeforeDisplayContent; ?>
<?php if($this->item->params->get(‘latestItemImage’) && !empty($this->item->image)): ?>
<!– Item Image –>
<div class=”latestItemImageBlock”>
<span class=”latestItemImage”>
<a href=”<?php echo $this->item->link; ?>” title=”<?php if(!empty($this->item->image_caption)) echo $this->item->image_caption; else echo $this->item->title; ?>”>
<img src=”<?php echo $this->item->image; ?>” alt=”<?php if(!empty($this->item->image_caption)) echo $this->item->image_caption; else echo $this->item->title; ?>” style=”width:<?php echo $this->item->imageWidth; ?>px;height:auto;” />
</a>
</span>
<div class=”clr”></div>
</div>
<?php endif; ?>
<?php if($this->item->params->get(‘latestItemIntroText’)): ?>
<!– Item introtext –>
<div class=”latestItemIntroText”>
<?php echo $this->item->introtext; ?>
<?php if ($this->item->params->get(‘latestItemReadMore’)): ?>
<!– Item “read more…” link –>
<div class=”latestItemReadMore”>
<a class=”k2ReadMore” href=”<?php echo $this->item->link; ?>”>
<?php echo JText::_(‘Read more…’); ?>
</a>
</div>
<?php endif; ?>
</div>
<?php endif; ?>
<div class=”clr”></div>
<!– Plugins: AfterDisplayContent –>
<?php echo $this->item->event->AfterDisplayContent; ?>
<!– K2 Plugins: K2AfterDisplayContent –>
<?php echo $this->item->event->K2AfterDisplayContent; ?>
<div class=”clr”></div>
</div>
<?php if($this->item->params->get(‘latestItemCategory’) || $this->item->params->get(‘latestItemTags’)): ?>
<div class=”latestItemLinks”>
<?php if($this->item->params->get(‘latestItemCategory’)): ?>
<!– Item category name –>
<div class=”latestItemCategory”>
<span><?php echo JText::_(‘Published in’); ?></span>
<a href=”<?php echo $this->item->category->link; ?>”><?php echo $this->item->category->name; ?></a>
</div>
<?php endif; ?>
<?php if($this->item->params->get(‘latestItemTags’) && count($this->item->tags)): ?>
<!– Item tags –>
<div class=”latestItemTagsBlock”>
<span><?php echo JText::_(“Tagged under”); ?></span>
<ul class=”latestItemTags”>
<?php foreach ($this->item->tags as $tag): ?>
<li><a href=”<?php echo $tag->link; ?>”><?php echo $tag->name; ?></a></li>
<?php endforeach; ?>
</ul>
<div class=”clr”></div>
</div>
<?php endif; ?>
<div class=”clr”></div>
</div>
<?php endif; ?>
<div class=”clr”></div>
<?php if($this->params->get(‘latestItemVideo’) && !empty($this->item->video)): ?>
<!– Item video –>
<div class=”latestItemVideoBlock”>
<h3><?php echo JText::_(‘Related Video’); ?></h3>
<span class=”latestItemVideo<?php if($this->item->videoType==’embedded’): ?> embedded<?php endif; ?>”><?php echo $this->item->video; ?></span>
</div>
<?php endif; ?>
<?php if($this->item->params->get(‘latestItemCommentsAnchor’) && ( ($this->item->params->get(‘comments’) == ‘2’ && !$this->user->guest) || ($this->item->params->get(‘comments’) == ‘1’)) ): ?>
<!– Anchor link to comments below –>
<div class=”latestItemCommentsLink”>
<?php if(!empty($this->item->event->K2CommentsCounter)):?>
<!– K2 Plugins: K2CommentsCounter –>
<?php echo $this->item->event->K2CommentsCounter; ?>
<?php else: ?>
<?php if($this->item->numOfComments > 0): ?>
<a href=”<?php echo $this->item->link; ?>#itemCommentsAnchor”>
<?php echo $this->item->numOfComments; ?> <?php echo ($this->item->numOfComments>1) ? JText::_(‘comments’) : JText::_(‘comment’); ?>
</a>
<?php else: ?>
<a href=”<?php echo $this->item->link; ?>#itemCommentsAnchor”>
<?php echo JText::_(‘Be the first to comment!’); ?>
</a>
<?php endif; ?>
<?php endif; ?>
</div>
<?php endif; ?>

<div class=”clr”></div>
<!– Plugins: AfterDisplay –>
<?php echo $this->item->event->AfterDisplay; ?>
<!– K2 Plugins: K2AfterDisplay –>
<?php echo $this->item->event->K2AfterDisplay; ?>
<div class=”clr”></div>
</div>
<!– End K2 Item Layout –>
[/php]

[khoand Friend khoandJoin date: February 2011Posts: 4500Downloads:0Uploads:179 Thanks: 169 Thanked: 1166 times in 1060 posts]

#392144

You try do templatesja_socialhtmlcom_k2templatesdefaultlatest_item.php file

[Author]

Posts