Annonce

Important : WordPress 2.6 est disponible en français. À lire avant la migration !
Annonce 1 : Le Codex en français a besoin de vous pour avancer !
Annonce 2 : Avant de poster, n'oubliez pas de faire une petite Recherche et de lire les règles de ce forum.
Annonce 3 : Lisez notre blog, il regorge de bonnes informations.

Pages: 1

 

  • Index
  •  » Thèmes
  •  » Personalisation de couleur sur un thème

#1 15-05-2008 10:14:51

Pit
Membre WP
Date d'inscription: 15-05-2008
Messages: 3

Personalisation de couleur sur un thème

Bonjour,

Ma configuration WP actuelle
- Version de WordPress : 2.5
- Thème utilisé : CoffeeSpot
- Plugins en place : Trop...
- Nom de l'hebergeur : Free
- Adresse du site : aquitaine.eeudf.free.fr

Problème(s) rencontré(s) :

Je voudrais savoir s'il est possible (je suis sur que oui) de changer la couleur d'un seul des fonds du titre de mes rubriques dans la slidebar. Allez voir sur mon site, j'aimerais passer en rouge la rubrique qui s'appelle camp 2008 et uniquement celle là... J'ai bien tenté en ajoutant un "h7" dans la feuille de style dont le background est dirigé vers un slideh7.gif, mais je perds mes marges et le menu se retrouve collé à celui du dessus... je ne sais pas qu'es ce que je dois modifier d'autre et je cherche désepérément...Avez vous une idée ? Un miracle ?
Evidemment c'est assez urgent ..

Merci d'avance
Pit

Hors ligne

 

#2 15-05-2008 11:33:00

zep3
Connaisseur WP
Date d'inscription: 17-11-2007
Messages: 18
Site web

Re: Personalisation de couleur sur un thème

Tout ce fait sur ton fichier css et ton fichier sidebar

Tu indique un div dans ton fichier sidebar différente pour chaques couleurs et ensuite dans ton fichier css, tu indique la couleur de fond.

Sinon tu peux trouver de l'aide ici: http://www.wordpress-fr.net/support/suj … re-sidebar

Hors ligne

 

#3 15-05-2008 11:42:38

Pit
Membre WP
Date d'inscription: 15-05-2008
Messages: 3

Re: Personalisation de couleur sur un thème

Je comprends rien, je suis nul moi ... un div je sais pas ce que c'est... 
Pour ce qui est du lien je l'ai vu tout à l'heure mais je vois pas non plus ce que je dois faire ..

Pour info je te colle mon CCS et la Sidebar ... Si tu peux m'aiguiller.

Et si je peux me permettre, c'est une image .gif que j'ai en fond ::

Code: CSS

  1. /*
  2. Theme Name: CoffeeSpot
  3. Version: 1.3
  4. Description: CoffeeSpot is yet another wordpress theme by <a  href="http://wpthemepark.com" title="WP ThemePark">WP ThemePark</a>.
  5. Author: Sadish Bala
  6. Author URI: http://wpthemepark.com
  7. */
  8. /* Header image courtesy of http://www.sxc.hu/photo/712538 */
  9.  
  10. /* Section: Body --------- */
  11.  
  12. body {
  13.   margin: 0;
  14.   padding: 0;
  15.   font-family: Verdana,Tahoma, Arial, Serif; 
  16.   line-height: 1.5em;
  17.   font-size: 10px; /* IE5 Win */
  18.     voice-family: "\"}\"";
  19.     voice-family: inherit;
  20.     font-size: 10px; /* easy scaling */
  21.     font-size: 0.76em;
  22.     background:#f4f4f4 url(img/bg.gif) repeat-y center;
  23.   color:#333;      
  24. }
  25. /* Sub-Section: Body Paragraph and Links --------- */
  26. p, li {
  27.   margin: 0.5em 0 0.7em;
  28.   line-height:1.8em;
  29. }
  30. a {
  31.   text-decoration: none; 
  32. }
  33. a:link
  34. {
  35.   color: #374d67;   
  36.   border-bottom:1px dashed;
  37.   background:none;
  38. }
  39. a:visited {
  40.   color: #8f0000; 
  41.   border-bottom:1px dashed;
  42.   background:none; 
  43. }
  44. a:hover, a:active { 
  45.   border-bottom:#aba195 1px solid;
  46.   background:none;
  47.   color: #8f0000;
  48. }
  49. abbr, acronym {
  50.   font-style: normal;
  51.   border-bottom: 1px dotted;
  52. }
  53. abbr[title]
  54. {
  55.   cursor:help;
  56. }
  57. blockquote{
  58.   margin: 1em;
  59.   padding: 1em;
  60.   border-left: 2px solid #ccc;
  61.   color:#666;
  62. }
  63. dl dt
  64. {
  65.   font-weight:bold;
  66.   margin:5px 0; 
  67. }
  68. dl dd
  69. {
  70.   padding-left:20px;
  71.   display:inline;
  72. }
  73. fieldset
  74. {
  75.   border:none;
  76. }
  77. img
  78. {
  79.   border:#e5e5e5 0px solid;
  80. }
  81. img.wp-smiley, img.noborder
  82. {
  83.   border:none;
  84. }
  85. img.right
  86. {
  87.   float:right;
  88.   padding:5px;
  89.   margin:0 1em 1em;
  90. }
  91. img.left
  92. {
  93.   float:left;
  94.   padding:5px;
  95.   margin:0 1em 1em;
  96. }
  97. #rap {
  98.   margin: 0 auto;
  99.   padding:0;   
  100.   background:#fff url(img/sidebarbg.gif) repeat-y right;
  101.   /* box model hack */
  102.   width: 780px;
  103.   voice-family: "\"}\"";
  104.     voice-family: inherit;
  105.   width: 780px; 
  106. }
  107.  
  108. html>body #rap { /* be nice to Opera */
  109.   width: 780px;
  110. }
  111. /* Sub-Section:  FONTS --------- */
  112. h1,h2,h3,h4,h5,h6
  113. {
  114.   margin: 0;
  115.   padding:0;
  116.   font-family: 'Frutiger Linotype', 'Lucida Grande', 'Trebuchet MS', sans-serif; 
  117.   font-weight:normal;
  118.   color: #567;     
  119. }
  120. h2,h3
  121. {
  122.   line-height:1.4em; 
  123.   font-size: 1.6em; 
  124.   border-bottom:#eaeaea 1px solid;
  125. }
  126.  
  127. /* Section: Positioning --------- */
  128.  
  129. #header {
  130.   height: 165px;
  131.   background:#fff url(img/header.jpg) no-repeat right top;
  132.   margin:0 auto;
  133.   padding:0;   
  134. }
  135. #header h1
  136. {
  137.   font-size:2em;
  138.   margin:10px 0 0 10px; 
  139. }
  140. #header h1 a:link,#header h1 a:visited
  141. {
  142.   border-bottom:none; 
  143.   background:none;
  144. }
  145. #header h1 a:hover,#header h1 a:active
  146. {
  147.   border-bottom:#fff 1px solid; 
  148.   background:none;
  149. }
  150. #header h4
  151. {
  152.   font-size: 1.1em;
  153.   font-style:italic;
  154.   margin: 5px 0 0 10px; 
  155.   padding:0; 
  156. }
  157. #header *
  158. {
  159.   color:#eee;
  160. }
  161. #main {
  162.   float: left;
  163.   width: 568px;
  164.   padding: 0; 
  165.   margin: 0;   
  166. }
  167. #main ul
  168. {
  169.   margin:1em;
  170.   padding:0;
  171.   list-style:none;
  172. }
  173. #main ul li
  174. {
  175.   list-style-image:url(img/coffee-icon.jpg);
  176.   padding:3px 0; 
  177.   margin:0 1em;
  178. }
  179. .post
  180. {
  181.   margin:0 0 20px 0; 
  182.   padding:10px 10px 0;   
  183.   background:url(img/cup2.jpg) no-repeat top left; 
  184. }
  185.  
  186. .post-title
  187. {
  188.   margin-left:75px;   
  189. }
  190. .post-title a:link, .post-title a:hover, .post-title a:visited, .post-title a:active
  191. {
  192.   border-bottom:none;
  193. }
  194. .day-date {
  195.   font-size: 0.9em;
  196.   color: #999;
  197.   padding: 3px 0;
  198.   margin: 0 0 0 75px;   
  199. }
  200. .day-date em
  201. {
  202.   font-style:normal;
  203.   color:#666;
  204. }
  205. .day-date a
  206. {
  207.   border-bottom:none;
  208. }
  209. .post-content h4
  210. {
  211.   font-size:1em;
  212.   font-weight:normal;
  213.   margin:0;
  214.   padding:0;
  215.   font-family:Verdana, Arial, Serif;
  216. }
  217. .post-content h4 em
  218. {
  219.   font-style:normal;
  220.   float:right;
  221.   font-weight:normal;
  222. }
  223. .post-info {
  224.   font-size : 0.9em;
  225.   color : #666;
  226.   margin : 0;
  227.   background:url(img/comments-small.gif) no-repeat left center;
  228.   padding-left:12px;
  229.   border-bottom:#eaeaea 1px solid;
  230.   clear:both;
  231. }
  232. .post-info a
  233. {
  234.   border-bottom:none;
  235. }
  236. .post-content {
  237.   padding:10px; 
  238. }
  239. #sidebar {
  240.   float: left;
  241.   width: 190px;
  242.   padding:10px;
  243.   line-height:1.3em;       
  244. }
  245. #sidebar ul
  246. {
  247.   list-style: none; 
  248. }
  249. #sidebar form, #sidebar .block, #sidebar ul
  250. {
  251.   margin:0;
  252.   padding: 1em;  
  253.   font-size: 0.9em;  
  254.   background:#fff;
  255. }
  256. #sidebar ul ul
  257. {
  258.   margin:0;
  259.   padding:0; 
  260. }
  261. #sidebar ul li
  262. {
  263.   list-style-image:none;
  264.   margin:0 10px;
  265.   padding:3px 0;
  266.  
  267. }
  268. #sidebar ul li ul li
  269. {
  270.   list-style-image:url(img/arrow.gif);
  271.   margin:0 10px;
  272.   padding:3px 0;
  273.  
  274. }
  275. #sidebar a {
  276.   color: #6d6d6d; 
  277.   text-decoration: none; 
  278.   border:none;
  279. }
  280. #sidebar a:visited
  281. {
  282.   color: #6d6d6d;
  283. }
  284. #sidebar a:hover
  285. {
  286.   color: #8f0000; 
  287.   border-bottom:0px solid;
  288. }
  289.  
  290. #sidebar ul img {
  291.   border:#459 1px solid;
  292. }
  293. #sidebar ul ul
  294. {
  295.   margin:5px;
  296.   font-size:1em;
  297. }
  298. #sidebar h2
  299. {
  300.   margin:20px 0 0 0;
  301.   font-size: 1.3em; 
  302.   color: #fff; 
  303.   height:20px;
  304.   border:none; 
  305.   font-variant:small-caps;   
  306.   font-weight:bold;
  307.   padding:3px 10px;
  308.   background:url(img/sideh2.gif) no-repeat top center;
  309. }
  310. #sidebar li h2
  311. {
  312.   background:none;
  313.   color:#996666;
  314.   border-bottom:#996666 1px solid;
  315.   padding:0;
  316.   margin:0;
  317. }
  318. #sidebar ul li.feed
  319. {
  320.   list-style:none;
  321.   background:url(img/feed.png) no-repeat left center;
  322.   padding-left:18px;
  323.   margin:0;
  324. }
  325. #footer {
  326.   clear: both;
  327.   margin:0 auto;
  328.   background:#435e7e;
  329.   border:#ffffff 2px solid; 
  330.   color: #ddd;
  331.   font-size: 0.9em;  
  332.   padding:5px;   
  333. }
  334. #footer strong
  335. {
  336.   color:#fff;
  337.   font-size:1.4em;
  338. }
  339. #footer ul
  340. {
  341.   margin:0;
  342.   padding:0;   
  343. }
  344. #footer ul li
  345. {
  346.   list-style:none;
  347.   padding-left:15px;
  348.   background:url(img/arrow.gif) no-repeat left center; 
  349. }
  350. #footer div
  351. {
  352.   float:right;
  353.   width:25%; 
  354. }
  355. #footer a
  356. {
  357.   color:#ddd;  
  358.   text-decoration:none;
  359.   border:none;
  360. }
  361. #footer a:hover
  362. {
  363.   color:#fff; 
  364.   border-bottom:#fff 1px solid;
  365.   background:none; 
  366. }
  367. #comments, #respond{
  368.   margin: 2em 0 0 5px;
  369. }
  370. #commentform
  371. {
  372.   margin:10px;
  373.   padding:10px;
  374. }
  375. #rap .commentlist {
  376.   margin: 0 1em;
  377.   padding: 0;
  378. }
  379. .commentlist li
  380. {
  381.   list-style:none;
  382.   padding: 1em;
  383.   margin:0.5em 0; 
  384.   background:#eeeee9;
  385. }
  386. .commentlist li.alt
  387. {
  388.     background:#f4f4f4;
  389. }
  390. .commentlist li .cmtinfo
  391. {
  392.   font-size:1em; 
  393. }
  394. .commentlist li cite
  395. {
  396.   font-style:normal;
  397.   font-weight:bold;
  398. }
  399. .commentlist li .cmtinfo em
  400. {
  401.   float:right;
  402.   margin:0;
  403.   padding:0;
  404.   font-style:normal;
  405.   font-size:0.9em;
  406.   color:#999;
  407. }
  408. .nocomments
  409. {
  410.   padding-left:10px;
  411. }
  412.  
  413. fieldset{
  414.   border: none;
  415. }
  416.  
  417. .field label{
  418.   display: block;
  419. }
  420.  
  421. textarea{
  422.   width: 90%;
  423.   height: 20em;
  424.   border: 1px solid #ccc; 
  425.   background:#f4f4f4;
  426. }
  427.  
  428. input.textbox{
  429.   border: 1px solid #ccc; 
  430.   background:#f4f4f4;
  431. }
  432. input.textbox:focus, textarea:focus
  433. {
  434.   background:#f9f9f9;
  435.   border:#aaa 1px solid;
  436. }
  437.  
  438. /* Navigation */
  439. #gnav
  440. {
  441.   list-style:none; 
  442.   margin:0 auto;
  443.   padding:0 0 3px 0; 
  444.   background:#435e7e;
  445.   border-bottom:#ffffff 2px solid;
  446.   font-variant:small-caps;
  447.   font-family:'Frutiger Linotype', 'Lucida Grande', 'Trebuchet MS', sans-serif; 
  448.   font-weight:bold;
  449.   text-align:right; 
  450.   font-size:1.2em;     
  451. }
  452. #gnav li
  453. {
  454.   list-style:none;
  455.   display:inline;
  456.   margin:0;
  457.   padding:0 10px;  
  458. }
  459. #gnav li a:link, #gnav li a:visited
  460. {
  461.   color:#ccc;
  462.   text-decoration:none;
  463.   padding:4px 0; 
  464.   border-bottom:none;
  465.   background:none;
  466. }
  467. #gnav li a:hover, #gnav li a:active
  468. {
  469.   border-bottom:#eee 2px solid;
  470.   color:#fff;
  471.   background:none;
  472. }
  473. #gnav li.current_page_item a:link, #gnav li.current_page_item a:visited, #gnav li.current_page_item a:hover, #gnav li.current_page_item a:active
  474. {
  475.   border-bottom:#eee 2px solid;
  476.   color:#fff;
  477. }
  478.  
  479. /* Section: Misc --------- */
  480.  
  481. #header, #main,#content, #sidebar, #footer, .widget {
  482.     overflow: hidden;
  483. }



sidebar.php

Code: php

  1. <div id="sidebar">
  2.   <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar() ) : else : ?>
  3.  
  4.  
  5.     <h2>Les news</h2>
  6.   <ul><?php wp_list_cats ($args); ?></ul>
  7.  
  8.  
  9. <h2>Actions Régionales</h2>
  10. <ul><?php wp_list_pages(fold_page_menus('exclude= 9,13,19,21,22,26,28,30,31,32,33,77,78').'sort_column=menu_order&title_li='); ?></ul>
  11.  
  12. <h2>Animation</h2>
  13. <ul><?php wp_list_pages(fold_page_menus('exclude= 9,13,19,22,30,31,32,33,48,52,77,78').'sort_column=menu_order&title_li='); ?></ul>
  14.  
  15. <h2>Camp 2008</h2>
  16. <ul><?php wp_list_pages(fold_page_menus('exclude= 9,13,19,21,22,26,28,30,31,32,33,52,48').'sort_column=menu_order&title_li='); ?></ul>
  17.  
  18. <h2>Postes d'équipe</h2>
  19. <ul><?php wp_list_pages(fold_page_menus('exclude= 9,13,19,21,22,26,28,33,48,52,77,78').'sort_column=menu_order&title_li='); ?></ul>
  20.  
  21. <h2>Les revues</h2>
  22. <ul><?php wp_list_pages(fold_page_menus('exclude= 9,19,21,22,26,28,30,31,32,33,48,52,77,78').'sort_column=menu_order&title_li='); ?></ul>
  23.  
  24. <h2>Annuaire</h2>
  25. <ul><?php wp_list_pages(fold_page_menus('exclude= 9,13,21,22,26,28,30,31,32,33,48,52,77,78').'sort_column=menu_order&title_li='); ?></ul>
  26.  
  27. <h2>Liens</h2>
  28.     <ul><?php get_links_list('name'); ?> </ul>
  29.  
  30.  
  31.  
  32. <h2>Flux RSS</h2>
  33.  
  34.     <ul>
  35.  
  36.       <li class="feed"><a href="<?php bloginfo('rss2_url'); ?>">Posts RSS</a></li>
  37.  
  38.       <li class="feed"><a href="<?php bloginfo('comments_rss2_url'); ?>">Comments RSS</a></li>     
  39.  
  40.     </ul> 
  41.  
  42.  
  43.  
  44.     <h2>Meta</h2>
  45.  
  46.     <ul>
  47.  
  48.       <?php wp_register(); ?>
  49.       <li><?php wp_loginout(); ?></li>
  50.       <?php wp_meta(); ?>
  51.     </ul>   
  52.  
  53.   <?php endif; ?>
  54.  
  55. </div>


Merci

Hors ligne

 

#4 16-05-2008 17:41:55

zep3
Connaisseur WP
Date d'inscription: 17-11-2007
Messages: 18
Site web

Re: Personalisation de couleur sur un thème

Je viens d'aller voir sur ton site et camp 2008, tu as réussi a le faire en un autre couleur, donc c'est bon?

Hors ligne

 

#5 16-05-2008 20:19:36

Pit
Membre WP
Date d'inscription: 15-05-2008
Messages: 3

Re: Personalisation de couleur sur un thème

Ben pas tout à fait comme je veux ...

Code: php

  1. <img src="http://aquitaine.eeudf.free.fr/2008/wp-content/themes/coffeespot/img/sideh7.gif" />
  2. <ul><?php wp_list_pages(fold_page_menus('exclude= 9,13,19,21,22,26,28,30,31,32,33,52,48').'sort_column=menu_order&title_li='); ?></ul>



voilà ce que j'ai fait... en fait j'ai été obligé de créer un image .gif avec une marge transparente de 20px au dessus(voir lien ci-dessus) , sinon les deux menus restaient collés l'un avec l'autre... c'est temporaire.
Si tu as mieux je suis preneur..
C'que je me sens nul !!!

Merci
Pit

Hors ligne

 

 

Pages: 1

  • Index
  •  » Thèmes
  •  » Personalisation de couleur sur un thème

Pied de page des forums

Propulsé par PunBB 1.2.20
© Copyright 2005-2006 WordPress France