Annonce

Important : WordPress 2.5.1 est disponible.
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.

Pages: 1

 

  • Index
  •  » Thèmes
  •  » Thème avec JavaScript, comment modifier la largeur des articles ?

#1 02-05-2008 11:14:54

( Tchey )
Habitué WP
Lieu: Nantes
Date d'inscription: 16-07-2006
Messages: 50
Site web

Thème avec JavaScript, comment modifier la largeur des articles ?

Bonjour,

Ma configuration WP actuelle
- Version de WordPress : 2.5
- Thème utilisé : Isolated : http://www.niss.fr/themes-wordpress-en- … -isolated/
- Plugins en place : aucun
- Nom de l'hebergeur : 1and1
- Adresse du site : http://dolorhant.org/

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

Voici une capture de mon site : http://www.dolorhant.org/betablog/betablog01.jpg
C'est pour un clan sur le jeu en ligne Age of Conan : Hyborian Adventures.

Je bidouille actuellement le thème Isolated, et je suis devant un problème. Comme vous pouvez le voir sur l'image, les "livres" ne prennent pas toute la place disponible. Au départ le thème est plus étroit, et je l'ai agrandit en modifiant les largeur du Header, Footer etc, mais je ne trouve pas comment faire pour que l'espace alloué à un article soit également agrandit. Je suis un peu nul, et je modifie les choses ligne par ligne pour voir à quoi ça correspond, et ce faisant, je ne suis pas tombé sur ce que je cherche.

Merci !

(édition)

Si ça intéresse quelqu'un, je me suis rendu aveugle à fouiller le code, et j'ai trouvé. C'était dans le Header.php, fixedWidth: 447

Code:

  1. <script type="text/javascript">
  2.     function initscrollpostsor(){divs=document.getElementsByTagName('div');i=divs.length-1;togglers=new Array();stretchers=new Array();do {if(divs[i].className=="toggle") togglers[i]=divs[i];if(divs[i].className=="toggled") stretchers[i]=divs[i];}while(--i)a=new Accordion(togglers,stretchers,{show:false,height: false,width: true,display: 0,alwaysHide: false,duration: 200,fixedWidth: 605,fps: 60,opacity: false,transition: Fx.Transitions.sineInOut,onActive:function(toggler,i){toggler.addClass('active');i.addClass('active');},
  3.     onBackground:function(toggler,i){toggler.removeClass('active');i.removeClass('active');}});}window.onload = initscrollpostsor;function fixed(){document.getElementById("fixed").scrollIntoView(true);return false;}
  4.   </script>

Dernière modification par ( Tchey ) (04-05-2008 11:51:43)

Hors ligne

 

#2 04-05-2008 11:50:43

( Tchey )
Habitué WP
Lieu: Nantes
Date d'inscription: 16-07-2006
Messages: 50
Site web

Re: Thème avec JavaScript, comment modifier la largeur des articles ?

J'ai un autre problème qui se résumé en deux mots : vert fluo.

- Adresse du site : http://dolorhant.org/

Version longue : sur le site, vous pouvez voir que les dates qui s'affichent sur les livres sont en vert fluo. Les titres sont en blancs. Hors il me semble pourtant que j'ai défini ces deux couleurs comme étant "black" (j'ai essayé avec #000000 mais ça ne change rien).

Je me suis crevé les yeux, et je n'ai pas trouvé pourquoi. Je mets le CSS ici. Je cherche depuis deux jours, j'suis pas très doué mais quand-même. J'ai du passer à côté de quelque chose de simple, au secours, pitié, aidez moi, à vot' bon coeur, faites une bonne action, soyez généreux...

Merci !


Le bout de CSS que je crois être le bon :

Code:

  1. /*---------------------------------------->>>>MooTools Horizontal Scrollers<<<<-----------------------------------------*/
  2. .scrollposts {
  3. height: 500px;
  4. font-size: 1em;
  5. background: #000000 url('images/fondbg.gif');
  6.  
  7. border: 2px solid black;
  8. border-width: 2px 2px 2px 2px;
  9. overflow: hidden;
  10. }
  11. .scrollposts .toggle {
  12. background: #000000 url('images/base.gif');
  13. color: #000000;
  14. font-weight: bold;
  15. text-align:center;
  16. cursor: default;
  17. height:100%;
  18. float: left;
  19. width: 58px;
  20. cursor: pointer;
  21. }
  22.  
  23. .scrollposts .toggle:hover {
  24. color: #000000;
  25. }
  26.  
  27. .scrollposts .toggle.active span.num, .scrollposts .toggle.active:hover span.num {
  28. color: #000000;
  29. }
  30.  
  31. .scrollposts .toggle.active {
  32. background-color: #000000;
  33. background-position: -112px 0;
  34. }
  35.  
  36. .scrollposts .toggled {
  37. float: left;
  38. width: 100px;
  39. height: 100%;
  40. overflow: hidden;
  41. background: #000000 url('images/fondbg.gif');
  42.  
  43. }
  44.  
  45. .scrollposts .toggle span.num {
  46. display: block;
  47. font-size: 24px;
  48. color: black;
  49. margin-bottom: 20px;
  50. }
  51.  
  52.  
  53. .scrollposts .toggle span.month{
  54. display: block;
  55. font-size: 11px;
  56. color: black;
  57. text-transform: uppercase;
  58. margin-top: 20px;
  59. padding: 0px;
  60. }
  61.  
  62. .scrollposts .toggle span.day{
  63. display: block;
  64. font-size: 18px;
  65. color: black;
  66. margin: 0px;
  67. padding: 0px;
  68. }
  69.  
  70. .scrollposts .toggle span.year{
  71. display: block;
  72. color: black;
  73. margin: 0px;
  74. padding: 0px;
  75. }

Le CSS en entier, au cas où je suis pire que je ne le pensais :

Code:

  1. /* 
  2. Theme Name: Isolated
  3. Theme URI: http://www.ensellitis.com/
  4. Description: Isolation, a dark yet semi colorful theme utilizing MooTool's accordian.  Utilizes GD Image for horizonal titles, which can be disables with option page.  Licensed under the <a href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0 License</a>. Traduction <a href="http://www.niss.fr">(niss.fr)</a>.
  5. Version: Build 0.8
  6. Author: Chris "Ensellitis" Ensell
  7. Author URI: http://www.ensellitis.com/
  8. */
  9.  
  10.  
  11. /*---------------------------------------->>>>Main Styles<<<<-----------------------------------------*/
  12. html, body {
  13. margin:0;
  14. padding:0;
  15. background: #000000 url('images/fondbg.gif');
  16.  
  17. font-family: verdana,arial,helvetica,sans-serif;
  18. font-size: 11px;
  19. }
  20.  
  21. a {
  22. color: #993333;
  23. font-weight: 900;
  24. text-decoration: none;
  25. }
  26.  
  27. a img {
  28. color: #993333;
  29. border: 2px solid #330000;
  30. }
  31.  
  32. a:hover {
  33. color: #FF0000;
  34. text-decoration: none;
  35. }
  36.  
  37. /*---------------------------------------->>>>Annonce de haut de page<<<<-----------------------------------------*/
  38.  
  39. .haut_de_page
  40. {
  41.   font-family:Trebuchet MS,Verdana, Geneva, Arial, Helvetica, sans-serif;
  42.   padding: 2px;
  43.   text-align: center;
  44.   font-size: 0.9em;
  45.   color: silver;
  46. }
  47.  
  48. /*---------------------------------------->>>>Header<<<<-----------------------------------------*/
  49. #wrapper {
  50. width:960px;
  51. margin: 0 auto;
  52. padding: 0px;
  53. }
  54.  
  55. #header {
  56. height: 195px;
  57. background: url('images/dolorhant.gif') top center no-repeat;
  58. margin: 5px;
  59. padding: 5px;
  60. position: relative;
  61. }
  62.  
  63. #header h1 {
  64. font-size: 50px;
  65. margin: 0px;
  66. padding: 0px;
  67. position: absolute;
  68. bottom: 1px;
  69. left: 10px;
  70. z-index: 850;
  71. }
  72.  
  73. #header h1 a {
  74. text-decoration: none;
  75. color:black;
  76. }
  77.  
  78. #header p {
  79. font-weight: 960;
  80. position: absolute;
  81. bottom: 0px;
  82. color: #FFFFCC;
  83. left: 15px;
  84. z-index: 960;
  85. margin: 0px;
  86. padding: 0px;
  87. }
  88.  
  89. /*---------------------------------------->>>>MooTools Horizontal Scrollers<<<<-----------------------------------------*/
  90. .scrollposts {
  91. height: 500px;
  92. font-size: 1em;
  93. background: #000000 url('images/fondbg.gif');
  94.  
  95. border: 2px solid black;
  96. border-width: 2px 2px 2px 2px;
  97. overflow: hidden;
  98. }
  99. .scrollposts .toggle {
  100. background: #000000 url('images/base.gif');
  101. color: #000000;
  102. font-weight: bold;
  103. text-align:center;
  104. cursor: default;
  105. height:100%;
  106. float: left;
  107. width: 58px;
  108. cursor: pointer;
  109. }
  110.  
  111. .scrollposts .toggle:hover {
  112. color: #000000;
  113. }
  114.  
  115. .scrollposts .toggle.active span.num, .scrollposts .toggle.active:hover span.num {
  116. color: #000000;
  117. }
  118.  
  119. .scrollposts .toggle.active {
  120. background-color: #000000;
  121. background-position: -112px 0;
  122. }
  123.  
  124. .scrollposts .toggled {
  125. float: left;
  126. width: 100px;
  127. height: 100%;
  128. overflow: hidden;
  129. background: #000000 url('images/fondbg.gif');
  130.  
  131. }
  132.  
  133. .scrollposts .toggle span.num {
  134. display: block;
  135. font-size: 24px;
  136. color: black;
  137. margin-bottom: 20px;
  138. }
  139.  
  140.  
  141. .scrollposts .toggle span.month{
  142. display: block;
  143. font-size: 11px;
  144. color: black;
  145. text-transform: uppercase;
  146. margin-top: 20px;
  147. padding: 0px;
  148. }
  149.  
  150. .scrollposts .toggle span.day{
  151. display: block;
  152. font-size: 18px;
  153. color: black;
  154. margin: 0px;
  155. padding: 0px;
  156. }
  157.  
  158. .scrollposts .toggle span.year{
  159. display: block;
  160. color: black;
  161. margin: 0px;
  162. padding: 0px;
  163. }
  164.  
  165.  
  166. /*---------------------------------------->>>>Holders<<<<-----------------------------------------*/
  167. #single {
  168. background: #000000 url('images/fondbg.gif');
  169. border: 2px solid black;
  170. position: relative;
  171. }
  172.  
  173. .single {
  174. background: #000000 url('images/fondbg.gif');
  175. padding: 0px;
  176. padding-left: 65px;
  177. color: #FFFFCC;
  178. position: relative;
  179. min-height: 500px;
  180. height:auto;
  181. }
  182.  
  183. /* for the retarded Internet Explorer 6 */
  184. /*\*/
  185. * html .single {
  186. height: 500px;
  187. }
  188. /**/
  189.  
  190. .content {
  191. background: #000000 url('images/parchemin.gif');
  192. background-attachement: fixed;
  193. color: #000000;
  194. padding: 10px;
  195. overflow: auto;
  196. height: 500px;
  197. }
  198.  
  199. .postcontent {
  200. padding: 20px;
  201. color: #000000;
  202. }
  203.  
  204. /*---------------------------------------->>>>Comments<<<<-----------------------------------------*/
  205.  
  206.  
  207.  
  208.  
  209.  
  210. #commentlist {
  211. list-style-type: none;
  212. padding: 0px;
  213. margin: 0px;
  214. }
  215.  
  216. div.bubble {
  217. width: auto;
  218. margin: 12px 0 24px 0;
  219. }
  220.  
  221. div.bubble blockquote {
  222.  
  223.  
  224. margin: 0px;
  225. padding: 0px;
  226. border: 1px solid #FFFFCC;
  227. background-color: #FFFFCC;
  228.  
  229. }
  230.  
  231. div.bubble blockquote p {
  232. margin: 10px;
  233. padding: 0px;
  234. }
  235.  
  236. div.bubble cite {
  237. position: relative;
  238. margin: 0px;
  239. padding: 1px 0px 0px 38px;
  240. top: 0px;
  241. background: transparent url('images/tip.gif') no-repeat 15px 0;
  242. font-style: normal;
  243. }
  244.  
  245. div.bubble cite strong {
  246. color: #FFFFCC;
  247.  
  248. }
  249.  
  250. /*---------------------------------------->>>>Post header<<<<-----------------------------------------*/
  251.  
  252. .singleposttitle {
  253. position: absolute;
  254. left: 0px;
  255. top: 0px;
  256. height: 450px;
  257. width: 56px;
  258. margin: 0px;
  259. padding:0px;
  260. }
  261.  
  262. .postmeta h2 {
  263. font-size: 22px;
  264. color: #000000;
  265. margin:0;
  266. padding:0;
  267. }
  268.  
  269. .postmeta h2 a {
  270. text-decoration: none;
  271. color: #000000;
  272. }
  273.  
  274. .postmeta {
  275. border-bottom: 1px solid #1e1e1e;
  276. padding: 5px;
  277. clear: both;
  278. }
  279.  
  280. .postmeta ul {
  281. margin: 0px;
  282. padding: 0px;
  283. list-style-type: none;
  284. }
  285.  
  286. .postmeta ul li {
  287. display: block;
  288. width: 88%;
  289. float: left;
  290. list-style-type: none;
  291. color: #000000;
  292. }
  293.  
  294. /*---------------------------------------->>>>Post content<<<<-----------------------------------------*/
  295. .postcontent h1,.postcontent h2,.postcontent h3, .postcontent h4 {
  296. color: #FFFFCC;
  297. border-bottom: 1px dotted #FFFFCC;
  298. margin: 2px 0;
  299. padding: 2px 0;
  300. }
  301.  
  302. .postcontent blockquote {
  303. border-left: 4px solid #FFFFCC;
  304. padding: 0 10px;
  305. }
  306.  
  307. /*---------------------------------------->>>>Links Page<<<<-----------------------------------------*/
  308. .links ul {
  309. list-style-type: none;
  310. margin: 0px;
  311. padding: 0px;
  312. }
  313.  
  314. .links ul li li {
  315. padding-left: 5px;
  316. }
  317.  
  318.  
  319.  
  320.  
  321.  
  322.  
  323.  
  324.  
  325.  
  326.  
  327.  
  328.  
  329.  
  330.  
  331. /*---------------------------------------->>>>Post footer<<<<-----------------------------------------*/
  332. .postmetadata {
  333. border-top: 1px solid #1e1e1e;
  334. text-align: center;
  335. }
  336.  
  337.  
  338.  
  339.  
  340. /*---------------------------------------->>>>Forms<<<<-----------------------------------------*/
  341. input {
  342. border: 0px;
  343. margin: 2px;
  344. padding: 3px;
  345. }
  346.  
  347. input#author,input#email,input#url,textarea#comment  {
  348. background: url('images/combg.gif') repeat-x top;
  349. border: 1px solid #FFFFCC;
  350. padding: 3px;
  351. color: black;
  352. }
  353.  
  354. textarea#comment {
  355. width: 99%;
  356. }
  357.  
  358. #commentform label {
  359. font-size: 13px;
  360. font-weight: 900;
  361. color: #FFFFCC;
  362. }
  363.  
  364. /*---------------------------------------->>>>Next/prev<<<<-----------------------------------------*/
  365.  
  366. .navigation {
  367. width: 100%;
  368. background: #000000 url('images/fondbg.gif');
  369. clear: both;
  370. font-size:12px;
  371. font-weight: 960;
  372. color: #FFFFCC;
  373. line-height: 21px;
  374. height: 25px;
  375. }
  376.  
  377. .navigation  a {
  378. text-decoration: none;
  379. font-weight: 900;
  380. color: #FF0000;
  381. }
  382.  
  383. .alignleft {
  384. float: left;
  385. text-align: right;
  386. margin: 2px 10px;
  387. }
  388.  
  389. .alignright {
  390. float: right;
  391. margin: 2px 10px;
  392. }
  393.  
  394. .navigation img {
  395. border: 0px;
  396. }
  397.  
  398. /*---------------------------------------->>>>Sidebar<<<<-----------------------------------------*/
  399. #sidebar {
  400. background: url('images/fondbg.gif') bottom no-repeat;
  401. clear: both;
  402. font-size: 10px;
  403. }
  404.  
  405. #sidebar a, #sidebar a:hover {
  406. color:FF0000;
  407. }
  408.  
  409. #sidebar .section {
  410. width: 254px;
  411. margin: 10px 0px;
  412. float: left;
  413. background: black;
  414. }
  415.  
  416. #sidebar .section h2 {
  417. color: #FFFFCC;
  418. border-bottom: 1px solid #993333;
  419. font-size: 14px;
  420. margin: 0px;
  421. padding: 5px 0px;
  422. text-align: center;
  423. background: black;
  424. }
  425.  
  426. #sidebar .section ul {
  427. width: 220px;
  428. margin: 5px 15px;
  429. padding: 0px;
  430. list-style-type: none;
  431. }
  432.  
  433. #sidebar .section ul ul {
  434. width: 100%;
  435. margin: 0px;
  436. padding: 0px;
  437. list-style-type: none;
  438. background: black;margin-bottom: 15px;
  439. }
  440.  
  441. #sidebar .section ul li {
  442. /*Sidebar section*/
  443. margin-bottom: 15px;
  444. }
  445.  
  446.  
  447. #sidebar .section ul ul li {
  448. /*Sidebar section item*/
  449. margin-bottom: 0px;
  450. border-bottom: 1px solid #993333;
  451. padding: 5px;
  452. background: black;
  453. }
  454.  
  455. /*---------------------------------------->>>>Footer<<<<-----------------------------------------*/
  456. #footer {
  457. width:960px;
  458. background: url('images/fondbg.gif') bottom no-repeat;
  459. text-align: center;
  460. color: #FFFFCC;
  461. margin-bottom: 10px;
  462. }
  463.  
  464. #footer p {
  465. margin: 0px 10px;
  466. padding: 10px;
  467. }
  468.  
  469. #footer a {
  470. color: #993333;
  471. font-weight: 960;
  472. text-decoration: none;
  473. }
  474.  
  475. #footer a:hover {
  476. color: #FF0000;
  477. }

Dernière modification par ( Tchey ) (04-05-2008 11:52:01)

Hors ligne

 

#3 12-05-2008 19:43:01

Comme une image
Expert WP
Lieu: Paris
Date d'inscription: 30-01-2008
Messages: 243
Site web

Re: Thème avec JavaScript, comment modifier la largeur des articles ?

Hello.
Pour ton 1er problème, la capture d'écran est introuvable.

Pour le deuxième, tu peux  regarder ça avec Firefox+Firebug. Ça te permet de trouver ton problème en deux coups de cuillère à pot, et tu peux même tester tes modifications de CSS en live. Trop bien !

Je n'ai pas trouvé ton vert fluo. Peut-être que j'arrive après la bataille et que tu as su corriger tes problèmes toi-même ? hmm

Hors ligne

 

 

Pages: 1

  • Index
  •  » Thèmes
  •  » Thème avec JavaScript, comment modifier la largeur des articles ?

Pied de page des forums

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

Tous droits réservés - wordpress-fr.net © 2005-2006

  • RSS
WPfr ValidatorXhtml ValidatorCSS mysql Php GetFirefox
Design par AmO - Crédits - Equipe WordPress France

Réseau International : Hongrie - Allemagne - Grèce - Italie - Japon - Corée - Suisse - Turquie - USA