1
skyangelo
CSS issue with Modern Blue theme
  • 2010/8/29 18:03

  • skyangelo

  • Just popping in

  • Posts: 79

  • Since: 2005/4/9 1


I'm using Modern Blue theme made by TSBMusic.
In my News module, the text color (font color =" xxx")and bold style (<strong>) change can not be displayed.
It's in itemText class and I can not find why it's not OK.
Please advise.
Thanks!

The style.css of the Modern Blue theme:
* {
    
border: 0;
    
padding: 0;
    
margin: 0;
    
vertical-align: baseline;
    
font: 13px Verdana, serif, sans-serif;
    
color: #555;
}

body {
    
background: #EBEBEB;
}
a {
    
color: #23497C;
    
text-decoration: none;
}
a:hover {
    
color: #2288DD;
    
text-decoration: underline;
}
#page {
    
width: 1030px;
    
background: url(../images/bg.png) repeat-y;
    
margin: auto;
}
#wrapper {
    
width: 1020px;
    
margin: auto;
    
background: url(../images/bg-pageWrapper.png);
    
padding-bottom: 10px;
}

#header {
    
width: 100%;
    
height: 150px;
    
background: url(../images/header.png);
}
.
sitename b {
    
font-size: 26px;
    
color: #FFF;
    
margin: 10px;
    
font-weight: bold;
}
a:hover.sitename  {
    
text-decoration: none;
}

.
contenthead {
    
background: url(../images/bg-contenthead.png);
    
width: 1000px;
    
margin-left: 10px;
    
height: 15px;
    
margin-top: 10px;
}

#contentWrapper, #contentWrapper1, #contentWrapper2, #contentWrapper3 {
    
margin-left: 10px;
    
width: 990px; 
    
padding: 5px;
    
background: #FFF;
}

/* ContentWrapper1 */
#contentWrapper1 {
    
background: url(../images/bg-contentWrapper1.png);
}

#contentWrapper1 #left {
    
float: left;
    
width: 190px;
    
margin-right: 5px;
    
padding: 5px;
}
#contentWrapper1 #content {
    
float: left;
    
width: 570px;
    
padding: 5px;
}
#contentWrapper1 #right {
    
float: right;
    
width: 190px;
    
margin-left: 5px;
    
padding: 5px;
}
/* ContentWrapper2 */
#contentWrapper2 {
    
background: url(../images/bg-contentWrapper2.png);
}

#contentWrapper2 #left {
    
display: none;
}
#contentWrapper2 #content {
    
float: left;
    
width: 770px;
    
padding: 5px;
}
#contentWrapper2 #right {
    
float: right;
    
width: 190px;
    
margin-left: 5px;
    
padding: 5px;
}
/* ContentWrapper3 */
#contentWrapper3 {
    
background: url(../images/bg-contentWrapper3.png);
}

#contentWrapper3 #left {
    
float: left;
    
width: 190px;
    
margin-right: 5px;
    
padding: 5px;
}
#contentWrapper3 #content {
    
float: right;
    
width: 770px;
    
padding: 5px;
}
#contentWrapper3 #right {
    
display: none;
}

/* Centerblocks */
#contentWrapper1 #centerblocks .centerblocks-center {
    
width: 570px;
    
margin-bottom: 10px;
}
#contentWrapper1 #centerblocks .centerblocks-left {
    
width: 280px;
    
float: left;
    
margin-right: 10px;
}
#contentWrapper1 #centerblocks .centerblocks-right {
    
width: 280px;
    
float: right;
}
#contentWrapper2 #centerblocks .centerblocks-center {
    
width: 770px;
    
margin-bottom: 10px;
}
#contentWrapper2 #centerblocks .centerblocks-left {
    
width: 380px;
    
float: left;
    
margin-right: 10px;
}
#contentWrapper2 #centerblocks .centerblocks-right {
    
width: 380px;
    
float: right;
}
#contentWrapper3 #centerblocks .centerblocks-center {
    
width: 770px;
    
margin-bottom: 10px;
}
#contentWrapper3 #centerblocks .centerblocks-left {
    
width: 380px;
    
float: left;
    
margin-right: 10px;
}
#contentWrapper3 #centerblocks .centerblocks-right {
    
width: 380px;
    
float: right;
}
#centerblocks .centerblocks-center .block-title, .centerblocks-left .block-title, .centerblocks-right .block-title {
    
font-weight: bold;
    
padding: 3px;
    
border-bottom: 1px solid #EBEBEB;
}
#centerblocks .centerblocks-center .block-content, .centerblocks-left .block-content, .centerblocks-right .block-content {
    
padding: 3px;
    
border: 1px solid #EBEBEB;
    
background: #FFF url(../images/bg-centerblock.png) repeat-x;
    
margin-bottom: 10px;
}


.
errorMsg,.confirmMsg, .resultMsg, .successMsg {
    
text-align: center;
    
margin: 10px;
    
padding: 20px; 
}

.
errorMsg {
    
background-color: #FBE3E4;
    
color: #D12F19;
    
border: 1px solid #FBC2C4;
}

.
confirmMsg {
    
background-color: #FFF6BF;
    
color: #817134;
    
border: 1px solid #FFD324;
}

.
resultMsg, .successMsg {
    
background-color: #E6EFC2;
    
color: #529214;
    
border: 1px solid #C6D880;
}


.
block {
    
width: 180px;
    
height: auto;
    
margin-bottom: 10px;
}
.
block .blocktitle {
    
background: url(../images/bg-blocktitle.png) no-repeat;
    
text-align: center;
    
font-weight: bold;
    
color: #FAFAFA;
    
height: 20px;
    
padding-top: 5px;
}
.
block .blockcontent {
    
padding: 5px;
    
border: 1px solid #CCC;               
}
.
block .blockcontent ul {
    list-
style: none;
}
.
block .blockcontent table {
    
border: 0;
}
.
block .blockcontent table.outer {
    
border: 1px solid #CCC;
}

#mainmenu a, #usermenu a {
    
display: block;
    
margin-bottom: 3px;
}
#mainmenu a.menuSub, #usermenu a.menuSub {
    
display: block;
    
margin: 2px 2px 2px 8px;
    
font-style: italic;
}

table {
    
width: 100%;
    
clear: both;
    
border: 1px solid #CCC;
    
padding: 1px;
    
margin-bottom: 3px;
}
table td, th {
    
padding: 3px;
}
thead, th {
    
background: url(../images/bg-th.png) center;
    
color: #FFF;
    
font-weight: bold;
}
thead, th a {
    
color: #FFF;
    
font-weight: bold;
}
.
head, .footer {
    
background: #F1F1F1;
}
.
even {
    
background: #FAFAFA;
}
.
odd {
    
background: #FFF;
}

.
usermenu, .login {
    
margin: 10px;
    
float: right;
    
border: 1px solid #EBEBEB;
    
-moz-border-radius: 5px;
    
color: #F9F9F9;
}
.
usermenu {
    
padding: 5px;
}
.
usermenu span {
    
padding: 5px 0 3px 27px;
}
.
usermenu a {
    
text-decoration: none;
    
font-size: 17px;
    
color: #F9F9F9;
}
.
usermenu span.profile {
    
background: url(../images/profile.png) no-repeat left center;
}
.
usermenu span.pm {
    
background: url(../images/pm.png) no-repeat left center;
}
.
usermenu span.logout {
    
background: url(../images/logout.png) no-repeat left center;
}

ul {
    list-
style-type: none;
}

input[type=text], input[type=select], input[type=password], input[type=checkbox], select {
    
padding: 3px;
    
color: #111;
    
border: 1px solid #CCC;
    
margin: 3px;
}
input[type=submit], input[type=reset], input[type=button], button {
    
padding: 3px;
    
color: #111;
    
border: 1px solid #CCC;
    
margin: 3px;
    
height: 25px;
    
background: url(../images/bg-button.png);
}
input[type=submit]:hover, input[type=reset]:hover, input[type=button]:hover, button:hover {
    
background: url(../images/bg-button-over.png);
}
/* dock */
#navigation {
    
margin-top: 40px;
    
background: url(../images/bg-nav.png) center no-repeat;
    
height: 75px;
}
.
dock {
    
position: relative;
    
height: 70px;
    
text-align: center;
}
.
dock-container {
    
position: absolute;
}
a.dock-item {
    
display: block;
    
width: 40px;
    
color: #000;
    
position: absolute;
    
top: 0px;
    
text-align: center;
    
text-decoration: none;
    
font: bold 12px Arial, Helvetica, sans-serif;
}
.
dock-item img {
    
border: none;
    
width: 100%;
}
.
dock-item span {
    
display: none;
    
text-align: center;
    
color: #FFCD05;
    
font-weight: bold;
}

.
item {
    
border: 0;
}
.
item table {
    
border: 0;
}
.
item .itemHead {
    
border-bottom: 1px solid #CCC;
    
padding: 3px;
}
.
item .itemTitle, .itemTitle a {
    
font-size: 18px;
    
font-weight: bold;
}
.
item .itemInfo {
    
font-style: italic;
    
color: #CCC;
}
.
item .itemInfo .itemPoster, .itemPoster a {
    
font-style: italic;                                                    
    
color: #CCC;
}
.
item .itemInfo .itemPoster a:hover {
    
color: #23497C;
}
.
item .itemInfo .itemPostDate {
    
font-style: italic;
    
color: #CCC;
}
.
item .itemInfo .itemStats {
    
font-style: italic;
    
color: #CCC;
}
.
item .itemBody .itemText {
    
padding: 5px;
}
.
item .itemFoot {
    
border-top: 1px solid #F4F4F4;
    
padding: 5px;
    
text-align: right;
    
border-bottom: 1px solid #CCC;
}
#footer {
    
background: #EBEBEB;
    
padding: 5px;
    
text-align: center;
    
width: 990px;
    
margin-left: 10px;
}
#xo-logger-output {
    
width: 1010px;
    
margin: auto;
}

2
ghia
Re: CSS issue with Modern Blue theme
  • 2010/8/29 20:25

  • ghia

  • Community Support Member

  • Posts: 4953

  • Since: 2008/7/3 1


I think you have to remove
* {
    
border: 0;
    
padding: 0;
    
margin: 0;
    
vertical-align: baseline;
    
font: 13px Verdana, serif, sans-serif;
    
color: #555;
}
because it superseeds all other rules in the module News CSS files.

3
skyangelo
Re: CSS issue with Modern Blue theme
  • 2010/9/1 18:15

  • skyangelo

  • Just popping in

  • Posts: 79

  • Since: 2005/4/9 1


thanks Ghia
I changed to
font-family: "Verdana", sans-serif;
    
font-size: 13px;
Instead of
font: 13px Verdana, serif, sans-serif;
    
color: #555;
And it's OK.
Could you please help me on another issue?
Thanks a lot!