Modifier un CSS

[louisnicolas]

Bonjour à vous,

j'aimerais pouvoir profiter de vos lumières sur une question, simple certainement - mais pour vous - et très/trop complexe pour moi.
J'aimerai que lorsque je poste un article ou une info flash, le fond/background soit de couleur lisible avec le thème utilisé.
Je m'explique : j'avais le thème par défaut, et j'ai installé : fjoomla_red_shop

Mes news avaient donc pour arrière-plan : du blanc, le texte étant en noir.
Maintenant, si je modifie le tout : la police refuse de rester dans la couleur choisie, et j'obtiens un magnifique texte illisible. Donc j'ai laissé les rares messages postés...

La question, donc le problème est : comment obtenir un arrière-plan stable ou une police stable ?

J'en profite pour souligner : est-il normal que mes infos flashs ne défilent pas ? C'est une pure invention de mon esprit ?

Ci-dessous le CSS de mon template :

@charset "utf-8";
#container
      {
	width: 100%;
	text-align: left;
	height: 100%;
	background-image: url(../images/left_border.jpg);
	background-repeat: repeat-y;
	background-color: #FFFFFF;
    }  
#container2 {
	background-image: url(../images/right_border.jpg);
	background-repeat: repeat-y;
	background-position: right;
}

#header  {
	background: #000000;
	height: 24px;
	border-bottom: 2px solid #cccccc;
	padding: 8px 30px;
	line-height: 24px;
    } 
#date {
	font-size: 10px;
	width: 200px;
	float: left;
	color: #fff;
}
#pathway {
	float: left;
	color: #fff;
}
#search {
	width: 140px;
	float: right;
}
#banner_out {
	background-image: url(../images/banner_out_bg.jpg);
	padding: 10px 13px;
	background-repeat: repeat-x;
	background-color: #660000;
	height: 123px;
}
#banner {
	border: 2px solid #333333;
	background-color: #FFFFFF;
	float: right;
}
#sitetitle {
	float: left;
	color: #fff;
	height: 123px;
	line-height: 123px;
	font-size: 18px;
	font-weight: bold;
	padding-left: 100px;
	background-image: url(../images/logo.png);
	background-repeat: no-repeat;
	background-position: left;
}
#topmenu_out {
	height: 38px;
	background-image: url(../images/topmenu_bg.png);
	background-repeat: repeat-x;
}
#topmenu_left {
	width: 27px;
	height: 38px;
	background-image: url(../images/topmenu_left.jpg);
	background-repeat: no-repeat;
	float: left;
}
#topmenu_right {
	width: 27px;
	height: 38px;
	background-image: url(../images/topmenu_right.jpg);
	float: right;
	background-repeat: no-repeat;
}
#topmenu {
	float: left;
	width: 90%;
	height: 38px;
	color: #fff;
}
#topmenu ul, #topmenu li {
	display: inline;
	padding: 0px;
	margin: 0px;
	list-style-type: none;
}
#topmenu a:link, #topmenu a:visited {
	margin-right: 20px;
	color: #fff;
	float: left;
	height: 38px;
	line-height: 38px;
	border: none;
	background: none;
}
#topmenu a:hover {
	text-decoration: underline;
}
#maincontent {


}

#left_out {
	width: 182px;
	float: left;
	padding: 5px 5px 0px 16px;
}
#right_out {
	width: 182px;
	float: right;
	padding: 5px 16px 0px 5px;
}
#content_out {
	margin: 0px 203px;
	padding: 5px 0px 0px 0px;
    } 
#user_out {
	height: 140px;
}
#user_out .topmodule_user {
	width: 48%;
	height: 140px;
	padding-top: 0px;
	margin: 0px;
	background-image: url(../images/user_bg.jpg);
	background-repeat: repeat-x;
	border: 2px solid #D07C76;
	background-color: #F9E7DE;
	float: left;
}
#user_out  .topmodule ul, .topmodule li {
	margin: 0px;
	padding: 0px;
}
#user_out        .topmodule_user th     {
	height: 32px;
	line-height: 32px;
	font-size: 14px;
	color: #FFFFFF;
	padding: 0px 5px;
	background-image: url(../images/user_moduletable.jpg);
	background-repeat: repeat-x;
}
#user_out .topmodule_inside {
	margin: 2px;
	height: 136px;
	background-image: url(../images/user_moduletable.jpg);
	background-repeat: repeat-x;
	overflow: hidden;
}
#separator {
	width: 2%;
	height: 140px;
	float: left;
}
#content {
	margin: 10px 0px 0px 0px;
}

#bottom {
	height: 20px;
	background-image: url(../images/bottom.gif);
	background-repeat: repeat-x;
}
#bottom_left {
	background-image: url(../images/bottom_left.jpg);
	width: 30px;
	height: 20px;
	float: left;
	background-repeat: no-repeat;
}
#bottom_right {
	background-image: url(../images/bottom_right.jpg);
	background-repeat: no-repeat;
	width: 30px;
	height: 20px;
	float: right;
}


#footer {
	height: 40px;
	background-color: #000000;
	border-top: 2px solid #cccccc;
	color: #fff;
	text-align: center;
	padding: 5px 30px;
}
    .clearfloat { 
    	clear:both;
        height:0;
        font-size: 1px;
        line-height: 0px;
}
    body  {
	font: 12px Verdana, Arial, Helvetica, sans-serif;
	background: #660000;
	margin: 0px; 
	padding: 0px;
	text-align: center; 
	color: #660000;
}
p {
	padding: 0px;
	margin: 0px;
} /*formatting all <div> (division) items.  This is a catch-all that only applies when no other 
style has been defined.*/
td {} /*formatting all 
<td> items. This default setting is used when no other style has been defined.*/

tr {} /*formatting all 
<tr> items.  This default setting is used when no other style has been defined.*/
ul {
	margin: 0px;
	padding: 0px 0px 0px 18px;
} /*formatting all UL (unordered list) items. This default setting is used when no other style
has been defined.*/
a:link, a:visited {
	color: #006699;
	text-decoration: none;
} /* general links style*/
a:hover {
	text-decoration: underline;
}
hr {} /* horizontal line in your template*/
hr.separator {}
 
/* FORMS SETTINGS */ 
.button {
	height: 25px;
	line-height: 25px;
	font-size: 12px;
	color: #FFFFFF;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #D0CCCC;
	border-right-color: #A2574D;
	border-bottom-color: #983C2D;
	border-left-color: #A2574D;
	padding: 0px;
	background-image: url(../images/user_moduletable.jpg);
	background-repeat: repeat-x;
	background-color: #D93D26;
}
.inputbox {}
.search {} /*formatting the <div> which holds search items: inputbox, search button...*/
 
 
/* NAVIGATION/MENU SETTINGS */
#mainlevel ul, #mainlevel li{
} 
a.mainlevel:link, a.mainlevel:visited {
	border-bottom: 1px solid #CC7B77;
	display: block;
	height: 25px;
	line-height: 25px;
	color: #990000;
	padding-left: 20px;
	background-image: url(../images/mainlevel_bg.gif);
	background-repeat: no-repeat;
	background-position: left;
}
a.mainlevel:hover, #active_menu {
	background-image: url(../images/mainlevel_over.gif);
	text-decoration: none;
	background-repeat: no-repeat;
	background-position: left;
}
a.sublevel:link, a.sublevel:visited   {
	background-image: url(../images/sublevel.gif);
	color: #C42210;
	background-repeat: no-repeat;
	padding-left: 20px;
	height: 20px;
	line-height: 20px;
	background-position: left;
}
a.sublevel:hover {}
 
.pagenavbar {} /*Sets the style for the footer navigation ("<< Start < Prev Next > End >>") 
when they do not appear as hyperlinks (when only a few articles exist).*/
.pagenavbar:link {} /*Style for the footer navigation ("<< Start < Prev Next > End >>") when 
they become hyper links*/
.pagenavbar:visited {}
 
.pagenav {} /* as the name implies, this is for formatting texts for those 
"<< Start < Previous 1 Next > End >>" links */
a.pagenav:visited {}
a.pagenav:hover {}
 
a.readon:link {} /*Style for the "Read More" link that is displayed for large content items*/
a.readon:hover {}
a.readon:visited {}
 
.back_button {
} /*Style for the "BACK" button*/
.pagenav_prev {} /*Style for the PRE button*/
.pagenav_next {} /*Style for the NEXT button*/
.latestnews  ul, .latestnews li {} /*Style for latest news list - by default, latest news is user1 module*/
 
/* CONTENT PAGE SETTINGS */
a.category:link {}
a.category:hover {}
a.category:visited {}
 
.blogsection {} /* Formatting the links in Blog section */
.blog_more {} /*The "More" text in blog section*/
a.blogsection:link {} /* set the link format */
a.blogsection:visited {} /* same as above, but to set the visited link format */
a.blogsection:hover {} /* same as above, but for links with mouse pointer over it */
 
.componentheading {
	background-image: url(../images/user_moduletable.jpg);
	height: 32px;
	line-height: 32px;
	padding: 0px 10px;
	color: #ffffff;
	font-weight: bold;
}/* Title of the component being used to display the content.*/
.contentheading {
	font-weight: bold;
	border-bottom: 1px solid #660000;
} /* Title of the content, article, etc. being displayed.*/
.contentpane {} /* Table that holds all non-article information (components, 
category lists, contact forms, etc).*/
.contentpaneopen {} /* Table that holds the actual text for an article.*/
.contentpagetitle {} /*Title of articles*/
 
a.contentpagetitle:hover {} /*Title of articles when appeare as links */
a.contentpagetitle:link {}
a.contentpagetitle:visited {}
 
.contentdescription {
	padding: 10px;
} /* Formating the "DESCRIPTION" of sections, categories 
(News/Weblinks/Latest news...) */

[louisnicolas]

Suite et fin du template :

/* JOOMLA - MAMBO SECTIONS LISTINGS */
.sectiontableheader {
	background-color: #A50600;
	color: #fff;
	padding: 5px;
} /* This is for styling the section table headers on a 
SECTION's page. Example: table header of "Date", "Item Title", "Author" and "Hits"? */
.sectiontableentry1 {} 
.sectiontableentry2 {
	background-color: #F8E5DD;
}
#left_out .moduletable, #right_out .moduletable {
	background-image: url(../images/moduletable_bg.png);
	background-position: bottom;
	background-repeat: no-repeat;
	margin-bottom: 10px;
	padding-bottom: 10px;
} 
#left_out .moduletable th, #right_out .moduletable th {
	background-image: url(../images/moduletable.png);
	height: 38px;
	width: 182px;
	background-repeat: no-repeat;
	color: #FFFFFF;
	line-height: 38px;
	padding: 0px 0px 0px 10px;
} 
#left_out .moduletable td, #right_out .moduletable td {
	padding: 2px 5px;
} /* Formatting the table cells of the module table */
.createdate, .small/* MISCELLANEOUS */
 
/* Dates , Authors*/
 {
	font-size: 10px;
	color: #E35342;
} /* For styling the date the content/articles are created under contents title */
.modifydate {} /* Formating "Last updated on" text at the end of articles/contents */
.smalldark {}/*Found in poll result page, for " Number of Voters".. text */
 
/* Polls */
.poll {} /* format the td of poll table */
.pollstableborder {} /* set the border properties of the polls voting table */
 
 
/* Weblinks */
.weblinks{} /* well.. to format the link's titles under the "Weblinks" 
  section on the frontend */
a.weblinks:hover {} /* same as above, but for link with mouseover */
 
/* Newsfeeds */
.newsfeedheading {} /* The newsfeed title. NOTE: This will not affect the newsfeed's
news title! */
.newsfeeddate {} /* yeah.. the date on the newsfeed */
.fase4rdf {} /* this is the body text of the newsfeed */
 
/* Search page */
table.searchintro {} /* This is for formatting the box with "Search Keyword: test
returned 4 matches" box that appears after you have entered a search value.
It appears on the mainbody with the search results */
 
 
/* JOOMLA - MAMBO TABBED FRONTEND ADMIN INTERFACE */
/* The CSS below efines how the frontend admin interface when logged in */

Mille merci à vous !!