Votre question

Modifier un code HTML d'un template

Tags :
  • Template
  • Programmation
Dernière réponse : dans Programmation
5 Mars 2010 17:21:11

Bonjour,

Je rencontre quelques petits soucis au niveau de la programmation de mon template sous Blogger. J'ai essayé de me débrouiller mais n'y connaissant rien en HTML, je me retrouve bloquée.

Voilà mon site web : http://cyzart.blogspot.com

Vous pouvez constater que j'ai tenté d'élargir la colonne du milieu pour les posts, je souhaiterais donc déplacer la deuxième sidebar rouge qui gêne désormais la lisibilité des articles.

De plus, je me suis rendu compte que le lien "messages plus anciens" ne fonctionnait plus.

Avant de tout réinstaller le template, ce qui me gênerait beaucoup, peut-être pourriez-vous m'aider ?

  1. <?xml version="1.0" encoding="UTF-8" ?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" rel="nofollow" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
  3. <html xmlns='<a href="http://www.w3.org/1999/xhtml" rel="nofollow" target="_blank">http://www.w3.org/1999/xhtml</a>' xmlns:b='<a href="http://www.google.com/2005/gml/b" rel="nofollow" target="_blank">http://www.google.com/2005/gml/b</a>' xmlns:data='<a href="http://www.google.com/2005/gml/data" rel="nofollow" target="_blank">http://www.google.com/2005/gml/data</a>' xmlns:expr='<a href="http://www.google.com/2005/gml/expr" rel="nofollow" target="_blank">http://www.google.com/2005/gml/expr</a>'>
  4. <head>
  5. <b:include data='blog' name='all-head-content'/>
  6. <title><data:blog.pageTitle/></title>
  7. <b:skin><![CDATA[/*
  8.  
  9. -----------------------------------------------
  10. Theme Name: Red Light
  11. Theme URI: <a href="http://www.templatelite.com/red-ligh-free-wordpress-theme/" rel="nofollow" target="_blank">http://www.templatelite.com/red-ligh-free-wordpress-the...</a>
  12. Description: An artistic Wordpress theme with galaxy-look header and nicely-designed 3-column sidebar. Brought to you free by <a href="<a href="http://www.templatelite.com/" rel="nofollow" target="_blank">http://www.templatelite.com/</a>">Templatelite.com</a>.
  13. Version: 1.00
  14. Author: TemplateLite.com
  15. Author URI: <a href="http://www.templatelite.com/" rel="nofollow" target="_blank">http://www.templatelite.com/</a>
  16. Tags: Red, Left Sidebar, Right Sidebar, Fixed Width, 3 columns, Widget Ready, Valid XHtml, Valid CSS
  17.  
  18. Converted to blogger template by BloggerStyles.com
  19. Version: 1.00
  20. Date: 17 April 2009
  21. Author URI: <a href="http://www.bloggerstyles.com" rel="nofollow" target="_blank">http://www.bloggerstyles.com</a>
  22. Theme URI: <a href="http://www.bloggerstyles.com/red-light-blogger-templatered-light-blogger-template/" rel="nofollow" target="_blank">http://www.bloggerstyles.com/red-light-blogger-template...</a>
  23. Reminder:
  24. Red Light Blogger Template comes under a Creative Common License.
  25. This means it is free to use on your blog, and you must keep the footer link intact, also as a respect to the designer and converter.
  26. We sincerely need your respect to continue our free Blogger template production, thank you.
  27. BloggerStyles.com
  28. ----------------------------------------------- */
  29.  
  30. #navbar-iframe {
  31. height:0px;
  32. visibility:hidden;
  33. display:none;
  34. }
  35.  
  36. /***** GENERAL *****/
  37. body{
  38. margin:0px auto;
  39. font-size: 12px;
  40. font-family: Verdana, Arial, Helvetica, Sans-Serif;
  41. color:#000000;
  42. background:#530000 url(<a href="http://1.bp.blogspot.com/_t47uhxwKFVM/SmapXXVjisI/AAAAAAAABJ0/tHaJXnQ2RT8/s1600/bg_top.jpg" rel="nofollow" target="_blank">http://1.bp.blogspot.com/_t47uhxwKFVM/SmapXXVjisI/AAAAA...</a>) no-repeat center top;
  43. text-align: center;
  44. border:0px yellow solid;
  45. }
  46.  
  47. img {
  48. border:0px;
  49. padding:5px;
  50. max-width: 100%; /* not working in IE6*/
  51. }
  52. a {color:#E56739;text-decoration: none;}
  53. a:hover {color: #E56739;text-decoration: underline;}
  54.  
  55. h1 {font-size:30px;}
  56. h2 {font-size:26px;}
  57. h3 {font-size:21px;}
  58. h4 {font-size:17px;}
  59. h5 {font-size:14px;}
  60. h6 {font-size:12px;}
  61.  
  62. p {margin: 0px 0px 12px 0px;}
  63. hr {height:1px;border:none;border-top:1px dashed #666666; width:95%;}
  64. del {color:red;}
  65. ins {color:green;}
  66.  
  67. blockquote {
  68. clear: left;
  69. text-align: justify;
  70. padding: 0px 0px 0px 22px;
  71. margin: 10px 10px 10px 10px;
  72. border-left: 2px solid #666666;
  73. }
  74. input,select,textarea {
  75. font-size:12px;
  76. font-family: Verdana, Arial, Helvetica, Sans-Serif;
  77. }
  78. code{
  79. font: 1.1em 'Courier New', Courier, Fixed;
  80. }
  81. .alignleft {float: left;}
  82. .alignright {float: right;}
  83. .aligncenter,div.aligncenter{
  84. display: block;
  85. margin-left: auto;
  86. margin-right: auto;
  87. }
  88. img.alignleft {
  89. padding: 5px;
  90. margin: 0 7px 2px 0;
  91. display: inline;
  92. }
  93.  
  94. img.alignright {
  95. padding: 5px;
  96. margin: 0 0 2px 7px;
  97. display: inline;
  98. }
  99. img.centered {
  100. display: block;
  101. margin-left: auto;
  102. margin-right: auto;
  103. }
  104. .clear {clear:both;}
  105. .spacer {height:30px;}
  106.  
  107. /********** LAYOUT **********/
  108. #base{
  109. position:relative;
  110. text-align: left;
  111. margin:0 auto;
  112. width:895px;
  113. background:url(<a href="http://1.bp.blogspot.com/_t47uhxwKFVM/SmapT6LFljI/AAAAAAAABIE/gy2JDSZ_cNk/s1600/bg_base_repeat.jpg" rel="nofollow" target="_blank">http://1.bp.blogspot.com/_t47uhxwKFVM/SmapT6LFljI/AAAAA...</a>) repeat-y 0 58px;
  114. }
  115. #menu{
  116. position:relative;
  117. overflow:hidden;
  118. background:url(<a href="http://3.bp.blogspot.com/_t47uhxwKFVM/SmapVAIOb3I/AAAAAAAABIs/fAh1OYoAm8A/s1600/bg_menu.jpg" rel="nofollow" target="_blank">http://3.bp.blogspot.com/_t47uhxwKFVM/SmapVAIOb3I/AAAAA...</a>) no-repeat center top;
  119. width:895px;
  120. height:60px;
  121. }
  122. #header{
  123. position:relative;
  124. background:url(<a href="http://3.bp.blogspot.com/_t47uhxwKFVM/SmapU9HH8MI/AAAAAAAABIk/3oUo8WulZRA/s1600/bg_header.jpg" rel="nofollow" target="_blank">http://3.bp.blogspot.com/_t47uhxwKFVM/SmapU9HH8MI/AAAAA...</a>) no-repeat center top;
  125. width:895px;
  126. height:200px;
  127. }
  128. #container_btm{
  129. position:relative;
  130. background:url(<a href="http://3.bp.blogspot.com/_t47uhxwKFVM/SmapUA7WjYI/AAAAAAAABIM/NYcVH1RLN3E/s1600/bg_container_btm.jpg" rel="nofollow" target="_blank">http://3.bp.blogspot.com/_t47uhxwKFVM/SmapUA7WjYI/AAAAA...</a>) no-repeat center bottom;
  131. }
  132. #container{
  133. position:relative;
  134. overflow:hidden;
  135. background:url(<a href="http://1.bp.blogspot.com/_t47uhxwKFVM/SmapUaRHZ9I/AAAAAAAABIU/b9uAiU6jIDI/s1600/bg_container_top.jpg" rel="nofollow" target="_blank">http://1.bp.blogspot.com/_t47uhxwKFVM/SmapUaRHZ9I/AAAAA...</a>) no-repeat center top;
  136. width:895px;
  137. border:0px yellow solid;
  138. }
  139. #content{
  140. float:left;
  141. top:0;
  142. left:200px;
  143. display:inline;
  144. width:480px;
  145. margin-top:50px;
  146. margin-left:218px;
  147. border:0px blue solid;
  148. }
  149. #sidebar1{
  150. float:left;
  151. display:inline;
  152. width:170px;
  153. overflow:hidden;
  154. margin: 100px 0 20px -686px;
  155. padding:0px 0 0px 0px;
  156. border:0px red solid;
  157. }
  158. #sidebar2{
  159. float:right;
  160. top:0;
  161. right:0;
  162. display:inline;
  163. width:183px;
  164. overflow:hidden;
  165. margin: 155px 2px 20px 0;
  166. padding:0px 0 0px 0px;
  167. border:0px red solid;
  168. }
  169. #rss_search{
  170. position:absolute;
  171. top:0;
  172. right:0;
  173. height:155px;
  174. width:180px;
  175. border:0px red solid;
  176. }
  177. #footer{
  178. position:relative;
  179. font-size:11px;
  180. background:#530000 url(<a href="http://1.bp.blogspot.com/_t47uhxwKFVM/SmapUj0KbyI/AAAAAAAABIc/BlEPxE5hsQY/s1600/bg_footer.jpg" rel="nofollow" target="_blank">http://1.bp.blogspot.com/_t47uhxwKFVM/SmapUj0KbyI/AAAAA...</a>) no-repeat center top;
  181. width:675px;/*895*/
  182. padding:40px 20px 20px 200px;
  183. color:#ffffff;
  184. }
  185. #footer a{
  186. color:#ffffff;
  187. }
  188.  
  189. /********** header *************/
  190. #blogtitle{
  191. position:relative;
  192. width:600px;
  193. overflow:hidden;
  194. font-family: Arial,Verdana;
  195. font-size:28px;
  196. font-weight:bold;
  197. text-align:right;
  198. color:#FEBE0E;
  199. padding:30px 0px 0px 0px;
  200. margin:0px 0 0 280px;
  201. border:0px black solid;
  202. }
  203. #blogtitle a, #blogtitle a:hover {
  204. font-family: Arial, Verdana;
  205. font-weight:bold;
  206. color:#FEBE0E;
  207. text-decoration:none;
  208. }
  209. #subtitle {
  210. position:relative;
  211. width:500px;
  212. font-family: Arial, Verdana;
  213. text-align:right;
  214. margin:0px 0px 0 380px;
  215. padding:0px 0 0 0;
  216. font-size:12px;
  217. color:#ffffff;
  218. border:0px red solid;
  219. }
  220. #header img.home {
  221. position: absolute;
  222. margin:0px;
  223. padding:0px;
  224. left: 0px;
  225. top: 0px;
  226. width:100%;
  227. height:100%;
  228. border:0px red solid;
  229. }
  230. /******************* MENU *****************/
  231. #menu ul {
  232. overflow:hidden;
  233. margin:0;
  234. padding:0;
  235. height: 30px;
  236. border:0px red solid;
  237. }
  238. #menu ul li {
  239. display: inline;
  240. font-size: 11px;
  241. font-family:Arial,Verdana;
  242. font-weight: bold;
  243. height:30px;
  244. margin:0px;
  245. }
  246.  
  247. #menu ul li a { /*145x70*/
  248. float: left;
  249. display: block;
  250. height:23px;
  251. width:128px;/*148*/
  252. line-height: 10px;
  253. color: #ffffff;
  254. text-align:center;
  255. padding: 7px 10px 0 10px;
  256. margin:0 0 0 0;
  257. text-decoration:none;
  258. background:url(<a href="http://2.bp.blogspot.com/_t47uhxwKFVM/SmapVUwobMI/AAAAAAAABI0/IFAfspxRi3A/s320/bg_menu_item.gif" rel="nofollow" target="_blank">http://2.bp.blogspot.com/_t47uhxwKFVM/SmapVUwobMI/AAAAA...</a>) no-repeat top center;
  259. }
  260. #menu ul li a:hover{
  261. color:#AD1E04;
  262. }
  263. #menu ul li.current_page_item a {
  264. color:#AD1E04;
  265. background:none;
  266. }
  267.  
  268. /*************** sidebar ***************/
  269. #sidebar1 {color:#ffffff; font-size:12px;}
  270. #sidebar1 a{color:#ffffff; text-decoration:none;}
  271. #sidebar1 a:hover {color:#ED1B23; text-decoration:none;}
  272. #sidebar1 ul {
  273. list-style-type: none;
  274. margin: 0px 0px 0px 0px;
  275. padding: 0px 0px 15px 0px;
  276. }
  277. #sidebar1 li {
  278. list-style-type: none;
  279. margin: 0px 0px 30px 0px;
  280. padding: 0px 0px 0px 0px;
  281. }
  282. #sidebar1 h2 {
  283. color: #FAA619;
  284. font-size: 13px;
  285. line-height:13px;
  286. font-weight: bold;
  287. letter-spacing: 0px;
  288. font-variant: normal;
  289. margin: 0px 5px 1px 0px;
  290. padding: 10px 10px 19px 20px;
  291. background: url('<a href="http://1.bp.blogspot.com/_t47uhxwKFVM/SmapXOcEfEI/AAAAAAAABJk/ckU4YQdUJXQ/s1600/bg_sb_title1.gif" rel="nofollow" target="_blank">http://1.bp.blogspot.com/_t47uhxwKFVM/SmapXOcEfEI/AAAAA...</a>') no-repeat -5px 0;
  292. }
  293. #sidebar1 ul ul li {
  294. line-height: 1.6em;
  295. list-style-type: none;
  296. margin: 0px 0px 0px 0px;
  297. padding: 2px 0px 0px 13px;
  298. background: url('<a href="http://2.bp.blogspot.com/_t47uhxwKFVM/SmapWkAvjaI/AAAAAAAABJU/SUyRiqaeRiU/s1600/bg_sb_arrow1.gif" rel="nofollow" target="_blank">http://2.bp.blogspot.com/_t47uhxwKFVM/SmapWkAvjaI/AAAAA...</a>') no-repeat 0px 5px;
  299.  
  300. }
  301. #sidebar1 select{
  302. margin:5px 0px 2px 10px;
  303. font-size:11px;
  304. width:140px;
  305. overflow:hidden;
  306. }
  307.  
  308. #sidebar2 {background:#B10101; color:#ffffff; font-size:12px;}
  309. #sidebar2 a{color:#ffffff; text-decoration:none;}
  310. #sidebar2 a:hover {color:; text-decoration:none;}
  311. #sidebar2 ul {
  312. list-style-type: none;
  313. margin: 0px 0px 0px 0px;
  314. padding: 0px 0px 15px 0px;
  315. }
  316. #sidebar2 li {
  317. list-style-type: none;
  318. margin: 0px 0px 20px 0px;
  319. padding: 10px 10px 0px 10px;
  320. border:0px red solid;
  321. }
  322. #sidebar2 h2 {
  323. color: #000000;
  324. font-size: 13px;
  325. line-height:13px;
  326. font-weight: bold;
  327. letter-spacing: 0px;
  328. font-variant: normal;
  329. margin: 0px 5px 10px 0px;
  330. padding: 0px 10px 10px 15px;
  331. }
  332. #sidebar2 ul li{
  333. min-height:75px;
  334. background: url('<a href="http://4.bp.blogspot.com/_t47uhxwKFVM/SmapXGbztLI/AAAAAAAABJs/FQwrAu2n32E/s1600/bg_sb_title2.gif" rel="nofollow" target="_blank">http://4.bp.blogspot.com/_t47uhxwKFVM/SmapXGbztLI/AAAAA...</a>') no-repeat 0 0;
  335. }
  336. #sidebar2 ul ul li {
  337. min-height:0;
  338. line-height: 1.6em;
  339. list-style-type: none;
  340. margin: 0px 0px 0px 0px;
  341. padding: 2px 0px 0px 15px;
  342. background: url('<a href="http://2.bp.blogspot.com/_t47uhxwKFVM/SmapW1Qyw-I/AAAAAAAABJc/8ICfO3AYkwg/s1600/bg_sb_arrow2.gif" rel="nofollow" target="_blank">http://2.bp.blogspot.com/_t47uhxwKFVM/SmapW1Qyw-I/AAAAA...</a>') no-repeat 0px 6px;
  343.  
  344. }
  345. #sidebar2 select{
  346. margin:5px 0px 2px 10px;
  347. font-size:11px;
  348. width:140px;
  349. overflow:hidden;
  350. }
  351.  
  352. /*************** RSS and Search ***************/
  353. #rss_search .input {
  354. position:absolute;
  355. top:105px;
  356. left:42px;
  357. height:15px;
  358. width:95px;
  359. padding:0;
  360. margin:0 0 0 0;
  361. font-size:11px;
  362. font-family: Arial, Verdana, Helvetica;
  363. color:#000000;
  364. border:none;
  365. background:transparent;
  366. }
  367. #rss_search .submit{
  368. cursor:pointer;
  369. border:none;
  370. background:transparent;
  371. position:absolute;
  372. top:100px;
  373. left:0px;
  374. height:30px;
  375. width:170px;
  376. }
  377. #rss_search a.rss{
  378. position:absolute;
  379. display:block;
  380. padding:0;margin:0;
  381. top:0px;
  382. right:0px;
  383. width:90px;
  384. height:90px;
  385. background:url('<a href="http://4.bp.blogspot.com/_t47uhxwKFVM/SmapWCYnikI/AAAAAAAABJM/wgGehOif16Q/s1600/bg_rss.jpg" rel="nofollow" target="_blank">http://4.bp.blogspot.com/_t47uhxwKFVM/SmapWCYnikI/AAAAA...</a>') no-repeat 100px 0;
  386. }
  387. #rss_search a.rss:hover{
  388. background:url('<a href="http://4.bp.blogspot.com/_t47uhxwKFVM/SmapWCYnikI/AAAAAAAABJM/wgGehOif16Q/s1600/bg_rss.jpg" rel="nofollow" target="_blank">http://4.bp.blogspot.com/_t47uhxwKFVM/SmapWCYnikI/AAAAA...</a>') no-repeat 0 0;
  389. }
  390.  
  391. /*************** content ***************/
  392. .archivetitle {
  393. color: #646464;
  394. text-align:left;
  395. font-size: 11px;
  396. font-weight:bold;
  397. height:25px;
  398. line-height:25px;
  399. padding: 0px 0px 0px 0px;
  400. margin: 0px 10px 5px 0px;
  401. }
  402.  
  403. .post{
  404. position:relative;
  405. margin:0 0px 30px 0px;
  406. width:500px;
  407. background:url('<a href="http://4.bp.blogspot.com/_t47uhxwKFVM/SmapVj8pC4I/AAAAAAAABI8/LL_a9PdEnJg/s1600/bg_post_title.gif" rel="nofollow" target="_blank">http://4.bp.blogspot.com/_t47uhxwKFVM/SmapVj8pC4I/AAAAA...</a>') no-repeat top left;
  408. }
  409. .sticky{
  410. background:url('<a href="http://1.bp.blogspot.com/_t47uhxwKFVM/SmapWG2oUyI/AAAAAAAABJE/gpvqxqB7gts/s1600/bg_post_title_sticky.gif" rel="nofollow" target="_blank">http://1.bp.blogspot.com/_t47uhxwKFVM/SmapWG2oUyI/AAAAA...</a>') no-repeat top left;
  411. }
  412.  
  413. .post_title{
  414. float:right;
  415. width:390px;
  416. font-size:18px;
  417. line-height:18px;
  418. font-weight:normal;
  419. padding:5px 0 0px 0;
  420. margin:10px 0 0 0;
  421. border-top:1px #A8A6A5 dashed;
  422. }
  423. .page_title{
  424. width:500px;
  425. font-size:18px;
  426. line-height:18px;
  427. font-weight:normal;
  428. padding:5px 0 5px 0;
  429. margin:10px 0 0 0;
  430. border-top:1px #A8A6A5 dashed;
  431. border-bottom:1px #A8A6A5 dashed;
  432. }
  433. .post_title a,.post_title a:hover,.page_title a,.page_title a:hover{
  434. text-decoration:none;
  435. color:#964E32;
  436. }
  437. .post_date{
  438. float:left;
  439. font-size:10px;
  440. width:90px;
  441. height:65px;
  442. line-height:18px;
  443. margin:0 0 0 0;
  444. }
  445. .post_date_d {
  446. font-size: 22px;
  447. font-family:Arial, Verdana;
  448. font-weight:bold;
  449. text-align:center;
  450. color:#ffffff;
  451. padding:8px 0 0 0;
  452. margin:0 0 0 -5px;
  453. }
  454. .post_date_m {
  455. font-size: 10px;
  456. font-weight:normal;
  457. text-align:center;
  458. color:#000000;
  459. padding:0 0 0 0;
  460. margin:0 0 0 -5px;
  461. }
  462. .post_author{
  463. text-align:right;
  464. font-style:italic;
  465. font-size:10px;
  466. padding:0 20px 5px 40px;
  467. margin:5px 0 0 0;
  468. border-top:1px #A8A6A5 dashed;
  469. }
  470. .post_author a{
  471. color: #646464;
  472. }
  473.  
  474. .entry{
  475. overflow:hidden;
  476. width:500px; /*571px*/
  477. line-height: 1.6em;
  478. text-align: justify;
  479. padding: 10px 10px 10px 10px;
  480. margin:0;
  481. }
  482.  
  483. .info {
  484. line-height: 1.6em;
  485. font-size: 10px;
  486. text-align: left;
  487. margin: 0px 20px 0px 20px;
  488. padding: 10px 0px 10px 0px;
  489. border:0px red solid;
  490.  
  491. }
  492. .category {
  493. font-size: 10px;
  494. margin: 0px 0px 0px 0px;
  495. padding: 0px 0px 4px 20px;
  496. background: url('<a href="http://1.bp.blogspot.com/_t47uhxwKFVM/SmapXu4q1AI/AAAAAAAABJ8/yXV6qpNYINA/s1600/icon_category.gif" rel="nofollow" target="_blank">http://1.bp.blogspot.com/_t47uhxwKFVM/SmapXu4q1AI/AAAAA...</a>') no-repeat top left transparent;
  497. }
  498.  
  499. .tags {
  500. font-size: 10px;
  501. margin: 0px 0px 0px 0px;
  502. padding: 0px 0px 4px 20px;
  503. background: url('<a href="http://2.bp.blogspot.com/_t47uhxwKFVM/SmapX3WGe0I/AAAAAAAABKM/BokP_ezZUf8/s1600/icon_tags.gif" rel="nofollow" target="_blank">http://2.bp.blogspot.com/_t47uhxwKFVM/SmapX3WGe0I/AAAAA...</a>') no-repeat top left transparent;
  504. }
  505.  
  506. .bubble {
  507. font-size: 10px;
  508. margin: 0px 0px 0px 0px;
  509. padding: 0px 0px 4px 20px;
  510. background: url('<a href="http://3.bp.blogspot.com/_t47uhxwKFVM/SmapX_OfRoI/AAAAAAAABKE/6VVvhuZRWB8/s1600/icon_comment.gif" rel="nofollow" target="_blank">http://3.bp.blogspot.com/_t47uhxwKFVM/SmapX_OfRoI/AAAAA...</a>') no-repeat top left transparent;
  511. }
  512. .navigation {
  513. border-top:1px white solid;
  514. font-size: 11px;
  515. margin: 20px 0px 20px 0px;
  516. padding: 10px 20px 10px 20px;
  517. }
  518. .navigation {
  519. border-top:1px black solid;
  520. font-size: 11px;
  521. margin: 20px 0px 20px 0px;
  522. padding: 10px 20px 10px 20px;
  523. }
  524.  
  525. .sorry {
  526. font-size: 12px;
  527. font-style: italic;
  528. margin: 8px 0px 0px 10px;
  529. padding: 3px 0px 3px 0px;
  530. }
  531.  
  532.  
  533. /*************** comment ***************/
  534. #postmetadata {
  535. font-size: 11px;
  536. margin: 0px 0px 20px 0px;
  537. padding: 5px 15px 5px 15px;
  538. color:#ffffff;
  539. background:#201B17;
  540. }
  541.  
  542. .nocomments {background: none;}
  543.  
  544.  
  545. #comments {
  546. color: #666666;
  547. font-size: 13px;
  548. text-align: left;
  549. font-weight: bold;
  550. margin: 0px 5px 0px 5px;
  551. padding: 0px 0px 0px 0px;
  552. font-variant: normal;
  553. border-bottom: 1px dotted #666666;
  554. }
  555.  
  556. .commentlist {
  557. list-style: none;
  558. margin:0px ;
  559. padding:0 5px 10px 5px;
  560. }
  561. .comment,.trackback,.pingback{
  562. clear:both;
  563. margin:10px 0px 0px 0;
  564. padding:0px 0px 0px 0px;
  565. }
  566. .comment .children{
  567. list-style: none;
  568. padding:0px 0 0 0;
  569. margin:0px 0 0px 15px;
  570. }
  571. .comment div, .trackback div, .pingback div{
  572. height:100%;
  573. background:#c8c8c8;
  574. border-top:2px #201B17 solid;
  575. border-bottom:0px #201B17 solid;
  576. border-left:0px #201B17 solid;
  577. border-right:0px #201B17 solid;
  578. padding:5px;
  579.  
  580. }
  581. .trackback div, .pingback div{
  582. border:1px #3F4544 dashed;
  583. }
  584. .comment div div,.trackback div div, .pingback div div{
  585. background:none;
  586. padding:0;
  587. border:0px;
  588. }
  589.  
  590. .comment .says, .trackback .says, .pingback .says{
  591. display:none;
  592. }
  593. .comment .avatar{
  594. position:relative;
  595. float: left;
  596. margin: 0px 5px 0px 0px;
  597. padding: 0px;
  598. }
  599. .comment .fn,.comment .fn a,.trackback .fn,.trackback .fn a,.pingback .fn,.pingback .fn a{
  600. margin-left:0px;
  601. color:#000000;
  602. text-decoration:none;
  603. font-size: 11px;
  604. }
  605. .byuser .fn a{
  606. font-weight:normal;
  607. text-decoration:underline;
  608. }
  609. .bypostauthor .fn a{
  610. font-weight:bold;
  611. text-decoration:underline;
  612. }
  613. .comment .comment-meta,.trackback .comment-meta, .pingback .comment-meta{
  614. border-bottom: 1px dashed #606261;
  615. margin:0 0 10px 0px;
  616. padding:6px 0 6px 0;
  617. font-size:10px;
  618. }
  619. .trackback .comment-meta{
  620. padding:3px 0 3px 0;
  621. }
  622. .comment .comment-meta a, .trackback .comment-meta a, .pingback .comment-meta a {
  623. color:#000000;
  624. text-decoration:none;
  625. }
  626.  
  627. .comment .reply{
  628. margin:5px 0 0px 0;
  629. padding:2px;
  630. font-size:10px;
  631. text-align:right;
  632. }
  633. .comment .reply a{
  634. color:#000000;
  635. text-decoration:none;
  636. }
  637. .trackback .reply, .pingback .reply{
  638. display:none;
  639. }
  640. /**comment paging WP2.7**/
  641. .commentnavi{
  642. padding-right:20px;
  643. }
  644. .commentpages{
  645. float:right;
  646. padding:5px 10px;
  647. }
  648. .page-numbers{
  649. padding-left:5px;
  650. }
  651. .current{
  652. font-weight:bold;
  653. }
  654. /*** comment form ***/
  655. #respond {
  656. clear:both;
  657. padding:5px 15px 5px 5px;
  658. margin:15px 0px 0px 20px;
  659. font-size:11px;
  660. }
  661. .cancel-comment-reply{
  662. }
  663.  
  664. #commentform {
  665. margin:0;
  666. padding:10px 0 0 0;
  667. }
  668. #email, #author, #url {
  669. color: #000000;
  670. font-size: 11px;
  671. padding-left: 2px;
  672. vertical-align: middle;
  673. border: 1px solid #201B17;
  674. font-family: Verdana, Arial, Helvetica, Sans-Serif;
  675. }
  676. #comment {
  677. width: 98%;
  678. color: #000000;
  679. font-size: 11px;
  680. font-family: Verdana, Arial, Helvetica, Sans-Serif;
  681. border: 1px solid #201B17;
  682. padding: 2px 2px 2px 2px;
  683. }
  684. #submit {
  685. cursor:pointer;
  686. height: 20px;
  687. color: #ffffff;
  688. font-size: 11px;
  689. margin: 0px 0px 0px 0px;
  690. padding: 0px 10px 2px 10px;
  691. border: 1px solid #201B17;
  692. background:#000000;
  693. font-family: Verdana, Arial, Helvetica, Sans-Serif;
  694. }
  695.  
  696. /********** WIDGET **********/
  697. #wp-calendar td {font-size:11px;color:#cccccc;}
  698. #wp-calendar td a {color:#fffffe;font-weight:bold;text-decoration:underline;}
  699. #wp-calendar {
  700. width: 160px;
  701. margin:0 0 0 5px;
  702. text-align: center;
  703. font-size:11px;
  704. color:#cccccc;
  705. }
  706.  
  707. .wp-caption {
  708. text-align: center;
  709. color:#cccccc;
  710. }
  711.  
  712. .textwidget {
  713. margin:2px 5px 0 5px;
  714. }
  715. #akismetwrap{
  716. margin:2px 0 2px 10px;
  717. }
  718. .rsswidget img {
  719. display:none;
  720. }
  721.  
  722. #sidebar h1 a.rsswidget{
  723. margin-left:0px;
  724. overflow:hidden;
  725. text-decoration:none;
  726. }
  727. .wp-smiley{
  728. vertical-align:middle;
  729. border:0px;
  730. padding:0px;
  731. }
  732.  
  733. #blog-pager-newer-link{padding-left:20px;float:left}
  734. #blog-pager-older-link{padding-right:20px;float:right}
  735. #blog-pager{text-align:center}
  736.  
  737. ]]></b:skin>
  738.  
  739. <script language='javascript'>
  740. function doClear(theText) {
  741. if (theText.value == theText.defaultValue) {
  742. theText.value = ''
  743. }
  744. }
  745. </script>
  746.  
  747. </head>
  748.  
  749. <body>
  750.  
  751. <!-- Base -->
  752. <div id='base'>
  753.  
  754. <!-- Menu -->
  755. <b:section class='menu' id='menu' preferred='yes' showaddelement='no'>
  756. <b:widget id='LinkList1' locked='true' title='Menu' type='LinkList'/>
  757. </b:section>
  758. <!-- /Menu -->
  759.  
  760. <!-- Header -->
  761. <div id='header'>
  762.  
  763. <!-- Title -->
  764. <b:section class='header1' id='header1' maxwidgets='1' showaddelement='no'>
  765. <b:widget id='Header1' locked='true' title='Cyzart (en-tête)' type='Header'/>
  766. </b:section>
  767. <!-- /Title -->
  768.  
  769. </div>
  770. <!-- /Header -->
  771.  
  772. <!-- Container -->
  773. <div id='container_btm'>
  774. <div id='container'>
  775.  
  776. <!-- Content -->
  777. <div id='content'>
  778.  
  779. <div class='spacer'/>
  780.  
  781. <b:section class='main' id='main' showaddelement='no'>
  782. <b:widget id='Blog1' locked='true' title='Messages du blog' type='Blog'/>
  783. </b:section>
  784.  
  785. <!-- Navigation -->
  786. <div class='pagination'>
  787. <div class='alignleft'/>
  788. <div class='alignright'/>
  789. </div>
  790. <!-- /Navigation -->
  791.  
  792. <div class='clear'/>
  793.  
  794. </div>
  795. <!-- /Content -->
  796.  
  797. <!-- Sidebar -->
  798. <div id='sidebar1'>
  799. <ul><li>
  800. <b:section class='sidebar11' id='sidebar11' preferred='yes'>
  801. <b:widget id='Text1' locked='false' title='Qui suis-je ?' type='Text'/>
  802. <b:widget id='HTML1' locked='false' title='Informations' type='HTML'/>
  803. <b:widget id='Label99' locked='false' title='Libellés' type='Label'/>
  804. </b:section>
  805. </li></ul>
  806. </div>
  807.  
  808. <div id='sidebar2'>
  809. <ul><li>
  810. <b:section class='sidebar22' id='sidebar22' preferred='yes'>
  811. <b:widget id='LinkList2' locked='false' title='Je suis aussi sur...' type='LinkList'/>
  812. <b:widget id='LinkList3' locked='false' title='Sur mon écran' type='LinkList'/>
  813. <b:widget id='LinkList5' locked='false' title='Mais je visite aussi...' type='LinkList'/>
  814. </b:section>
  815. </li></ul>
  816. </div>
  817. <!-- /Sidebar -->
  818.  
  819. <!-- Main Search -->
  820. <div id='rss_search'>
  821. <a class='rss' href='/feeds/posts/default' title='RSS Feed'/>
  822. <form action='/search' id='mainsearchform' method='get'>
  823. <input class='submit' type='submit' value=''/>
  824. <input class='input' id='s' name='q' onfocus='doClear(this)' type='text' value='Recherche...'/>
  825. </form>
  826. </div>
  827. <!-- /Main Search -->
  828.  
  829. <!-- Red Light Blogger Template comes under a Creative Commons License.
  830. This means it is free to use on your blog as long as the credit link in the footer is kept intact
  831. BloggerStyles.com
  832. -->
  833.  
  834. <div class='clear'/>
  835.  
  836. </div>
  837. </div>
  838. <!-- /Container -->
  839.  
  840. <!-- Footer -->
  841. <script>
  842. document.write(unescape("%3Cdiv%20id%3D%27footer%27%3E%0A%0A%26%23169%3B%20%3Ca%20expr%3Ahref%3D%27data%3Ablog.homepageUrl%27%3E%3Cdata%3Ablog.title/%3E%3C/a%3E%20%7C%20%0A%0A%3C%21--%20credit%20--%3E%0AAuthored%20by%20%3Ca%20href%3D%27http%3A//<a href="http://www.templatelite.com/%27%3EWordpress%20Templates%3C/a%3E%20%7C%20%3Ca%20href%3D%27http%3A//www.bloggerstyles.com%27%3EBlogger%20Styles%3C/a%3E%20%7C%20%3Ca%20href%3D%27http%3A//www.falconhive.com%27%20target%3D%27_blank%27%20title%3D%27Falcon%20Hive%27%3EFree%20Premium%20Blogger%20Templates%3C/a%3E%09%7C%20%3Ca%20href%3D%22http%3A//www.weakcampus.com%22%3EWeakcampus%3C/a%3E%0A%0A%3C/div%3E" rel="nofollow" target="_blank">www.templatelite.com/%27%3EWordpress%20Templates%3C/a%3...</a>"));
  843. </script>
  844. <!-- /Footer -->
  845.  
  846. </div>
  847. <!-- /Base -->
  848.  
  849. </body></html>


Autres pages sur : modifier code html template

5 Mars 2010 17:57:15

Une solution que tu peux faire c'est faire déborder le cadre rouge du menu de droite sur la droite.

Pour cela :

Cherche le passage :
  1. #sidebar2{
  2. float:right;
  3. top:0;
  4. right:0;
  5. display:inline;
  6. width:183px;
  7. overflow:hidden;
  8. margin: 155px 2px 20px 0;
  9. padding:0px 0 0px 0px;
  10. border:0px red solid;
  11. }

et remplace le "2px" par "-35px" (le mieux étant de mettre la valeur de laquelle tu as agrandi ta zone de contenu ex: si tu l'as augmenté de 50px, mettre -50px):
  1. #sidebar2{
  2. float:right;
  3. top:0;
  4. right:0;
  5. display:inline;
  6. width:183px;
  7. overflow:hidden;
  8. margin: 155px -35px 20px 0;
  9. padding:0px 0 0px 0px;
  10. border:0px red solid;
  11. }



La 2eme chose à modifier c'est :
  1. #container{
  2. position:relative;
  3. overflow:hidden;
  4. background:url(http://1.bp.blogspot.com/_t47uhxwKFVM/SmapUaRHZ9I/AAAAAAAABIU/b9uAiU6jIDI/s1600/bg_container_top.jpg) no-repeat center top;
  5. width:895px;
  6. border:0px yellow solid;
  7. }

remplacer hidden par visible :
  1. #container{
  2. position:relative;
  3. overflow:visible;
  4. background:url(http://1.bp.blogspot.com/_t47uhxwKFVM/SmapUaRHZ9I/AAAAAAAABIU/b9uAiU6jIDI/s1600/bg_container_top.jpg) no-repeat center top;
  5. width:895px;
  6. border:0px yellow solid;
  7. }


ça devrait donner quelque chose qui ressemble à ça :
http://seb33300.free.fr/blog.jpg
m
0
l
5 Mars 2010 21:46:41

Je te remercie beaucoup, c'est tout à fait ce que je voulais pour la sidebar.
Il reste juste le problème du "Messages plus anciens" en bas de la page, qui n'est plus "cliquable", on ne peut plus accéder aux précédentes pages...
m
0
l
Contenus similaires
a c 232 L Programmation
6 Mars 2010 00:45:35

Je suppose que tu as du résoudre ton problème vu que j'arrive à cliquer dessus ?!
m
0
l
6 Mars 2010 00:47:03

Tu utilises quel navigateur ?

Parce que j'ai essayé sous IE et FF, on peut cliquer dessus :/ 

(Pense à cliquer sur "Résolu" si le problème est réglé)
m
0
l
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS