PHPBoost

Support

Téléchargements

Développement

Communauté

Annonces
Question aléatoire

Que choisir comme éditeur : BBCode ou Tinymce ?
Livre d'or

Par Visiteur

Como puedeo instalar

Livre d'or

Mini sondage
Etes-vous satisfait du support PHPBoost ?










Résultats

 
content.css
 
Table des matières



Nous allons décortiquer ce fichier ensemble c'est partit j'explique class par class pour être plus claire et je met des images pour expliquer. ( Comme on part sur un thème sombre on va mettre du noir , gris et blanc quelque chose de très simple pour apprendre )

Code CSS :
 
/* Entête des tableaux */
th{
	padding:5px 6px;
	color:#FFFFFF;
	background:#1C618C;
	border:1px solid #0A2D43;
	border-bottom:1px solid #000000;
	text-align:left;
	font-size:0.75em;
	text-transform:uppercase;
}


Caché:


Code CSS :
input, textarea, optgroup, select, .xmlhttprequest_preview{
	font-family:Verdana,Helvetica,Arial,sans-serif;
	font-size:11px;
	vertical-align:middle;
	border-left:1px solid #FFFFFF;
	border-top:1px solid #FFFFFF;
	border-right:1px solid #FFFFFF;
	border-bottom:1px solid #FFFFFF;
	background-color: #CCCCCC;	
	color:#2E3B5F;
	padding:1px 2px;
}


Caché:



Code CSS :
input:hover, textarea:hover{
	border:1px solid  #000000;
	background-color:#FFFFFF; 
}


c'est lorsque l'on passe la souris dessus

Caché:



Code CSS :
input:focus, textarea:focus{
	border:1px solid #CCCCCC;
	background-color:#EFEFEF;
}


c'est lorsque l'on clique dessus
Caché:



Code CSS :
input.submit{
	border:1px solid #5B5A5A;	
	color: #000000;	
	padding:2px;
	font-weight:bold;
	background:#FFFFFF url('images/form/form.gif') repeat-x;
}


Ceci est pour les boutons envoyer, prévisualiser....etc

Caché:


Code CSS :
input.reset{
	border:1px solid #5B5A5A;	
	color:#E10000;
	font-family:Verdana,Arial,Helvetica,sans-serif;
	font-weight:bold;
	padding:2px;
	background:#FFFFFF url('images/form/form.gif') repeat-x;
}


Ceci est pour les boutons défaut je n'y touche pas donc je fait pas de screen il se trouve par exemple dans le forum , article , wiki ...

Code CSS :
input.reset:hover, input.submit:hover{
	border:1px solid #22435F;
	cursor:pointer;
	color:#507CA2;
}


Cela fait partit aussi du bouton défaut lorsque l'on passe la souris dessus , parel pas de screen je modifie pas

Code CSS :
legend{
	padding:1px 0;
	font-family:Tahoma,arial,Verdana,Sans-serif;
	font-size:0.75em;
	font-weight:bold;
	color:#FFFFFF;
	background-color: #000000;
	border:1px solid #666666;
	padding:2px 8px;
	margin-top:-0.4em;
	position:relative;
	text-transform:none;
	line-height:1.2em;
	top:0;
	vertical-align:middle;
	text-transform:uppercase;
}


Caché:


Code CSS :
fieldset{
	font-family:Verdana,Helvetica,Arial,sans-serif;
	margin:20px 0;
	padding:6px;
	border:1px solid #000000;
	background-color: #EFEFEF;
	position:relative;
}


Caché:


Code CSS :
fieldset label{
	font-size:11px;
	text-align:left;
	font-weight:bold;
	color: #000000;
}

Caché:




Code CSS :
dd label{
	white-space:nowrap;
	margin:0 10px 0 0;
	font-weight:normal;
	color:#333333;
}
dt span{
	font-size:10px;
	color:#666666;
}


dd label est la couleur d'écriture d'information comme sur l'image

Caché:


Code CSS :
fieldset dl dd label:hover{
	color:#666666;
}


Ceci est lorsque l'on passe la souris sur dd label ( voir juste au dessus ) ça change la couleur.

Code CSS :
/* Messages postés par les membres (messages privés, commentaires, etc...) 
--------------------------------------*/
/* Classe du lien du pseudo des messages */
a.msg_link_pseudo{
	color:#e8eaeb; 
	font-weight:bold;
}
a.msg_link_pseudo:hover { 
	color:#f2fbff; 
	font-weight:bold;
}
/* Conteneur des messages */
.msg_position{
	width:96%;
	margin:auto;
	background:#000000 url(images/border.gif) repeat-y left;
}
/* Case contenant l'ensemble du message */
.msg_container{
	background:#EFEFEF url(images/border.gif) repeat-y right;
	margin-left:2px;
	overflow:hidden !important;
	height:auto !important;
	overflow:visible;
	height:1%;
	clear:both;
}


poster un commentaire dans livre d'or puis regarder les changements
Pour modifier la ccouleur des bordures il suffit de prendre un éditeur d'image ( paint , gimp , photoshop ... ) puis ouvrir border.gif ( qui se trouve dans template/nom_du_thème/image/ ) puis de mettre la couleur que vous voulez .

Caché:


Code CSS :
/* Barre supérieur des messages */
.msg_top_l{
	margin-right:0px !important;
	margin-right:-3px;
	width:8px;
	height:29px;
	background:url(images/msg_top_l.gif) no-repeat left;
	float:left;
}
.msg_top_r{
	margin-left:0px !important;
	margin-left:-3px;
	width:8px;
	height:29px;
	background:url(images/msg_top_r.gif) no-repeat right;
	float:right;
}
.msg_top{
	height:23px;
	background:#AFD2E8 url(images/msg_top.gif) repeat-x;
	padding-top:6px;
	padding-left:6px;
}


Il suffit de modifier msg_top.gif , msg_top.gif_l et msg_top_r.gif ( qui se trouve dans template/nom_du_thème/image/ )
Caché:




Code CSS :
 
/* Pseudo du membre */
.msg_pseudo_mbr{
	width:127px;
	background:#CCCCCC;
	padding:2px 4px;
	float:left;
	margin-right:0px !important;
	margin-right:-3px;
	margin-left:-127px !important;
	margin-left:-64px;
	margin-top:-4px;
}
/* Case au dessus du message, indique la date et les boutons d'administration */
.msg_top_row{
	height:16px;
	background:#CCCCCC;
	font-size:10px;
	color:#000000;
	margin-right:2px;
	border-top:1px solid #FFFFFF;
	border-bottom:1px solid #FFFFFF;
	padding-top:4px;
	padding-left:127px;
	overflow:hidden !important;
	height:auto !important;
	overflow:visible;
	height:1%;
}
/* Case des informations du membre */
.msg_info_mbr{	
	color:#FFFFFF;
	background:#000000;
	width:127px;
	padding:4px;
	float:left;
	border-right:1px solid #092139;
	font-size:10px;
}
/* Case contenant l'ensemble du message, infos membre + contenu */
.msg_contents_container{
	margin-right:2px;
	background:#000000;
}
/* Case du message */
.msg_contents{
	background:#EFEFEF;
	margin-left:135px;
	padding:5px;
	border-left:1px solid #FFFFFF;
}
/* Case du contents du message, évite que les images trop grandes déforme */
.msg_contents_overflow{	
	width:99%;
	height:auto;
	min-height:80px;
	overflow:auto;
	padding:10px 0px;
}
/* Signature du membre */
.msg_sign{
	background:#EFEFEF url(images/border.gif) repeat-y right;
	max-height:130px;
	overflow:hidden;
	padding:4px;
	font-size:11px;
	margin-left:138px;
	border-left:1px solid #FFFFFF;
}
/* Signature du membre, fixe la hauteur maximale */
.msg_sign_overflow{
	height:auto !important;
	height:80px;
	width:99%;
	max-height:80px;
	max-width:99%;
	overflow:hidden;
}


Caché:


Code CSS :
/* Barre inférieure des messages */
.msg_bottom_l{
	margin-right:0px !important;
	margin-right:-3px;
	width:8px;
	height:29px;
	background:url(images/msg_bottom_l.gif) no-repeat left;
	float:left;
	border-top:1px solid #FFFFFF;
}
.msg_bottom_r{
	margin-left:0px !important;
	margin-left:-3px;
	width:8px;
	height:29px;
	background:url(images/msg_bottom_r.gif) no-repeat right;
	float:right;
	border-top:1px solid #FFFFFF;
}
.msg_bottom{
	height:23px;
	background:#AFD2E8 url(images/msg_bottom.gif) repeat-x bottom;
	padding-top:6px;
	padding-left:6px;
	border-top:1px solid #FFFFFF;
}


Vou devez modifier msg_bottom.gif , msg_bottom_l.gif et msg_bottom_r.gif
Caché:



Code CSS :
/* Modules
--------------------------------------*/
/* Conteneur des modules */
.module_position{
	width:96%;
	margin:auto;
	background:url(images/border.gif) repeat-y left;
}
/* Barre supérieur des modules */
.module_top_l{
	margin-right:0px !important;
	margin-right:-3px;
	width:8px;
	height:29px;
	background:url(images/msg_top_l.gif) no-repeat left;
	float:left;
}
.module_top_r{
	margin-left:0px !important;
	margin-left:-3px;
	width:8px;
	height:29px;
	background:url(images/msg_top_r.gif) no-repeat right;
	float:right;
}
.module_top{
	height:23px;
	background:url(images/msg_top.gif) repeat-x;
	padding-top:6px;
	padding-left:6px;
	font-size:12px;
	font-weight:bold;
}


Rendez-vous par exemple dans article pour voir les changements

Caché:


J'ai repris la même image qui est plus haut car c'est pareil mais dans article....


Code CSS :
/* Contenu des modules */
.module_contents{
	background:#EFEFEF url(images/border.gif) repeat-y right;
	padding:10px;
	margin-left:2px;	
	overflow:hidden !important;
	height:auto !important;
	overflow:visible;
	height:1%;
	clear:both;
}
/* Barre inférieure des modules */
.module_bottom_l{
	margin-right:0px !important;
	margin-right:-3px;
	width:8px;
	height:29px;
	background:url(images/msg_bottom_l.gif) no-repeat left;
	float:left;
}
.module_bottom_r{
	margin-left:0px !important;
	margin-left:-3px;
	width:8px;
	height:29px;
	background:url(images/msg_bottom_r.gif) no-repeat right;
	float:right;
}
.module_bottom{
	height:23px;
	background:url(images/msg_bottom.gif) repeat-x bottom;
	padding-top:6px;
	padding-left:6px;
	font-size:12px;
}


Toujours pareil ces modification sont à faire dans article pour voir les changements

Caché:


Code CSS :
/* Tableau global, utilisé dans les différents modules */
.module_table{
	width:96%;
	margin:auto;
	border-spacing:0px;
	border-collapse:collapse;
	background-color:#FFFFFF;	
}


On peut le trouver dans gallery il détermine la couleur de fond des miniatures par exemple

Code CSS :
/* Modules minis
--------------------------------------*/
/*Placement des mini modules */
.module_mini_container{
	margin-bottom:20px;
}
.module_mini_table{
	width:148px;
	background:#000000 url("images/mini_block.gif") repeat-y;
	border-bottom:1px solid #FFFFFF;
	text-align:center; 
	padding:4px;
	padding-top:5px;
}
.module_mini_top{
	width:156px;
	height:25px;
	background:url("images/row1.png") no-repeat;
	font-weight:bold;
	color:#FFFFFF;	
	padding-left:5px;
	padding-top:6px;
	list-style-type:none;
}
/* Bordure inférieur des modules minis */
.module_mini_bottom{
	margin-top:-1px;
	height:18px;
	width:156px;
	background:url("images/module_bottom.jpg") no-repeat;
}


Il vous faudra modifier row1.png et mini_block.gif pour effectuer ces changements , il seront appliqué à tous les blocs du site comme connexion , newsletters , stats , vos bloc creer

Caché:


Voila on a fait le plus gros dans la création d'un thème , maintenant nous allons attaquer les autres fichier ( qui seront beaucoup moins long à faire )



 
Cette page a été vue 7852 fois
Annonces