Se connecter / S'enregistrer
Votre question

Problème rapide de marge CSS

Tags :
  • CSS
  • Wordpress
  • Programmation
Dernière réponse : dans Programmation
22 Mars 2012 11:14:35

Bonjour,

Je vous soumet mon interrogation car là, je cale.
J'utilise Wordpress + Buddypress + un thème Frisco.

J'ai modifié l'index pour avoir des thumbnails (vignette image) sous forme de tableau (4 colonnes).
mon problème est qu'à chaque thumbnail il y a une marche à gauche ce qui fait que je ne peux pas voir les 4 colonnes.

C'est visible à l'adresse http://kimpap.fr/ . J'ai plusieurs tests mais aucun concluant.

Voici le css du thème:

  1. /**
  2.  * Theme Name: Frisco for BuddyPress
  3.  * Theme URI: http://friscotheme.com
  4.  * Description: Derived almost entirely from the BuddyPress Default theme, Frisco for BuddyPress adds some minor HTML changes and a fresh coat of CSS. There is some responsivenss built-in to the theme, and this will be improved in future versions.
  5.  * Version: 1.5.04
  6.  * Author: David Carson
  7.  * Author URI: http://davidtcarson.com
  8.  * License: GNU General Public License v2.0
  9.  * License URI: http://www.gnu.org/licenses/gpl-2.0.html
  10.  * Template: bp-default
  11.  * Template Version: 1.5
  12.  * Tags: buddypress
  13. */
  14.  
  15.  
  16. /*----------------------------------------------------------------------------------------------------------------------------
  17. Frisco Styles - Overriding bp-default css.
  18. ----------------------------------------------------------------------------------------------------------------------------*/
  19. html {
  20. background: #3C3C3C;
  21. }
  22. body {
  23. font-size: 12px;
  24. max-width: 10000px;
  25. min-width: 960px;
  26. width: 100%;
  27. background-color: #EEE;
  28. background-image: none;
  29. }
  30. .fullwidth,
  31. body#bp-default #wp-admin-bar .padder {
  32. width: 100% !important;
  33. max-width: 10000px !important;
  34. min-width: 960px;
  35. margin: 0 auto;
  36. clear:both;
  37. float: left;
  38. }
  39. .fullwidth {
  40. background: #EAEAEA;
  41. }
  42. body,
  43. h1,
  44. h2,
  45. h3,
  46. h4,
  47. h5,
  48. h6,
  49. div.author-box,
  50. p.date span:first-child,
  51. p.date,
  52. p.postmetadata,
  53. div#item-header h2 a,
  54. a.button, button,
  55. input[type="submit"],
  56. input[type="reset"],
  57. input[type="button"],
  58. div.generic-button a,
  59. span.user-nicename,
  60. #item-header-content span.highlight,
  61. body .navigation a
  62. {
  63. font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  64. }
  65. #header #search-bar .padder,
  66. #header #navigation,
  67. #bp-before-activity-post-form,
  68. #bp-before-container .activity,
  69. #forums-search-form,
  70. #blogs-directory-form,
  71. div.item-list-tabs ul,
  72. #bp-before-member-header,
  73. body div#new-topic-post,
  74. #create-group-form h3,
  75. #group-create-body,
  76. #bp-before-group-header,
  77. #groups-directory-form,
  78. #members-directory-form,
  79. #footer-widget-area {
  80. max-width: 960px;
  81. overflow: hidden;
  82. width: auto;
  83. margin: 0 auto;
  84. }
  85. #whats-new-form,
  86. .my-account div#item-header,
  87. .my-activity div#item-header,
  88. .my-friends div#item-header,
  89. .my-groups div#item-header,
  90. .forums div#item-header,
  91. .my-profile div#item-header,
  92. .settings div#item-header,
  93. .groups div#item-header {
  94. background: #EAEAEA;
  95. margin: -19px -19px 0;
  96. padding: 19px 19px 0;
  97. }
  98. #whats-new-form,
  99. .home-page form#whats-new-form {
  100. padding-bottom: 19px;
  101. }
  102. form#whats-new-form #whats-new-submit {
  103. margin-top: 5px;
  104. }
  105. #forums-dir-list,
  106. #groups-dir-list,
  107. #members-dir-list,
  108. #blogs-dir-list {
  109. max-width: 960px;
  110. overflow: visible;
  111. position: relative;
  112. margin: 0 auto 18px;
  113. }
  114. body.page div#container,
  115. body.blog div#container,
  116. body.single div#container,
  117. body.archive div#container,
  118. body.error404 div#container,
  119. body.activation div#container,
  120. body.search-results div#container,
  121. body.search-no-results div#container {
  122. width: 960px;
  123. -webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 40px rgba(0,0,0,0.06) inset;
  124. -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 40px rgba(0,0,0,0.06) inset;
  125. box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 40px rgba(0,0,0,0.06) inset;
  126. margin: 20px auto;
  127. }
  128. body.page div#content .padder,
  129. body.blog div#content .padder,
  130. body.single div#content .padder,
  131. body.archive div#content .padder,
  132. body.activation div#content .padder,
  133. body.search-results div#content .padder,
  134. body.search-no-results div#content .padder {
  135. margin-right: 226px;
  136. background: #FFF;
  137. }
  138. body.page #content,
  139. body.blog div#content,
  140. body.single div#content,
  141. body.archive div#content {
  142. background: #EAEAEA;
  143. }
  144. div#sidebar {
  145. width: 226px;
  146. background: #EAEAEA;
  147. border: none;
  148. margin-top: 0;
  149. }
  150. div#sidebar h3.widgettitle {
  151. background: 0 0 rgba(0,0,0,0.1);
  152. }
  153. a {
  154. font-weight: bold;
  155. text-decoration: none;
  156. }
  157. a.button {
  158. letter-spacing: 0;
  159. }
  160. h1,
  161. h2,
  162. h3,
  163. h4,
  164. h5,
  165. h6 {
  166. letter-spacing: -.05em;
  167. line-height: 1em;
  168. color: #343B3E;
  169. }
  170. div.author-box,
  171. p.date span:first-child,
  172. p.date,
  173. p.postmetadata {
  174. font-style: normal;
  175. }
  176. h1 {
  177. font-size: 3.4em;
  178. }
  179. h2 {
  180. font-size: 2.8em;
  181. }
  182. h3 {
  183. font-size: 2.4em;
  184. }
  185. h4 {
  186. font-size: 1.6em;
  187. }
  188. h5 {
  189. font-size: 1.3em;
  190. }
  191. h6 {
  192. font-size: 1.1em;
  193. }
  194. div#container,
  195. div#content .padder,
  196. div#sidebar {
  197. border: none;
  198. }
  199. div#container,
  200. #header,
  201. div#content,
  202. div#content .padder,
  203. div#sidebar,
  204. div.item-list-tabs ul li.selected a,
  205. div.item-list-tabs ul li.current a,
  206. form#whats-new-form textarea,
  207. a.bp-primary-action,
  208. .comment-reply-link,
  209. #reply-title small a,
  210. div.activity-meta a.acomment-reply,
  211. #footer-widgets {
  212. -moz-border-radius: 0;
  213. -webkit-border-radius: 0;
  214. border-radius: 0;
  215. }
  216. div#content .padder {
  217. margin-right: 0;
  218. }
  219. #create-group-form h3,
  220. a.button {
  221. line-height: 26px;
  222. padding-bottom: 12px;
  223. margin-bottom: 5px;
  224. }
  225. body #group-create-tabs ul li span {
  226. color: #EEE;
  227. }
  228. .my-activity div#subnav.item-list-tabs,
  229. .group-home div#subnav.item-list-tabs {
  230. margin-bottom: 0;
  231. border-bottom: 1px solid #EEE;
  232. filter: none;
  233. }
  234. .my-activity #item-body form#whats-new-form,
  235. .group-home #whats-new-form {
  236. border-bottom: 1px solid #FFE475;
  237. }
  238. .my-activity #whats-new-form,
  239. .group-home #whats-new-form {
  240. background-color: #FEF7CB;
  241. }
  242. div.item-list-tabs {
  243. border-bottom: 1px solid #BBB;
  244. margin-top: 0;
  245. overflow: visible;
  246. }
  247. div.item-list-tabs ul {
  248. margin-bottom: -1px;
  249. overflow: hidden;
  250. position: relative;
  251. }
  252. div.item-list-tabs ul li {
  253. display: block;
  254. font-size: 11px;
  255. line-height: 28px !important;
  256. text-transform: uppercase;
  257. border-bottom: none;
  258. }
  259.  
  260. div.item-list-tabs ul li.selected,
  261. div.item-list-tabs ul li.current {
  262. border-color: #BBB;
  263. }
  264. div.item-list-tabs ul li a {
  265. color: #FFF;
  266. font-weight: bold;
  267. height: auto;
  268. }
  269. div.item-list-tabs ul li.selected a,
  270. div.item-list-tabs ul li.current a {
  271. color: #333;
  272. }
  273. div.item-list-tabs ul li a span {
  274. background: #1071D1;
  275. -moz-border-radius: 9px;
  276. -webkit-border-radius: 9px;
  277. border-radius: 9px;
  278. color: #FFF;
  279. margin: -3px 0 0 5px;
  280. padding: 2px 10px;
  281. }
  282. div#subnav.item-list-tabs {
  283. max-width: 960px;
  284. padding-bottom: 10px;
  285. margin: 0 auto 15px;
  286. }
  287. body #subnav ul li {
  288. background: transparent;
  289. border: none;
  290. }
  291. body #subnav ul li a {
  292. color: #999999;
  293. }
  294. #item-body form#whats-new-form {
  295. margin: 0 0 10px;
  296. }
  297. .acomment-options a {
  298. font-weight: normal;
  299. text-shadow: none;
  300. }
  301. .acomment-options a:hover {
  302. text-shadow: none;
  303. }
  304. a.bp-primary-action,
  305. .comment-reply-link,
  306. #reply-title small a,
  307. div.activity-meta a.acomment-reply {
  308. background: #fff9DB;
  309. border-bottom: none;
  310. color: #FFA200;
  311. border: none;
  312. }
  313. div.activity-meta a.acomment-reply:hover,
  314. .activity-comments a.acomment-reply:hover, {
  315. background: #FFA200;
  316. color: #FFF;
  317. }
  318. a.bp-primary-action span,
  319. .comment-reply-link span,
  320. #reply-title small a span,
  321. div.activity-meta a.acomment-reply span {
  322. background: #FFA200;
  323. }
  324. a.bp-primary-action:hover span,
  325. .comment-reply-link:hover span,
  326. #reply-title small a:hover span,
  327. div.activity-meta a.acomment-reply:hover span {
  328. background: #B77604;
  329. }
  330. a.bp-secondary-action,
  331. span.highlight,
  332. div.activity-meta a.fav,
  333. div.activity-meta a.unfav {
  334. background: #EBF7FF;
  335. border-bottom: 0;
  336. -moz-border-radius: 0;
  337. -webkit-border-radius: 0;
  338. border-radius: 0;
  339. color: #059AE7;
  340. border: none;
  341. }
  342. div.activity-meta a.fav:hover,
  343. div.activity-meta a.unfav:hover {
  344. background: #4183C4;
  345. color: #FFF;
  346. }
  347. body a.delete-activity,
  348. .bp-secondary-action.acomment-delete,
  349. body a.delete-activity-single {
  350. background: #FFD1D1;
  351. color: #F91616;
  352. border: none;
  353. -moz-border-radius: 0;
  354. -webkit-border-radius: 0;
  355. border-radius: 0;
  356. }
  357. body a.delete-activity:hover,
  358. .bp-secondary-action.acomment-delete:hover,
  359. body a.delete-activity-single:hover {
  360. background: #F91616;
  361. color: #FFF;
  362. border: none;
  363. }
  364. #header {
  365. background: #FFF;
  366. -moz-border-radius: 0;
  367. -webkit-border-radius: 0;
  368. color: #333;
  369. height: auto;
  370. margin-bottom: 0;
  371. filter: none;
  372. padding: 0;
  373. }
  374. #header #search-bar {
  375. min-height: 75px;
  376. margin-top: 0;
  377. }
  378. div.item-list-tabs {
  379. margin-bottom: 10px;
  380. background: #EAEAEA;
  381. background: -moz-linear-gradient(top, #EAEAEA 0%, #EAEAEA 15%, #D2D3D4 100%);
  382. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#EAEAEA), color-stop(15%,#EAEAEA), color-stop(100%,#D2D3D4));
  383. background: -webkit-linear-gradient(top, #EAEAEA 0%,#EAEAEA 15%,#D2D3D4 100%);
  384. background: -o-linear-gradient(top, #EAEAEA 0%,#EAEAEA 15%,#D2D3D4 100%);
  385. background: -ms-linear-gradient(top, #EAEAEA 0%,#EAEAEA 15%,#D2D3D4 100%);
  386. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#EAEAEA', endColorstr='#D2D3D4',GradientType=0 );
  387. background: linear-gradient(top, #EAEAEA 0%,#EAEAEA 15%,#D2D3D4 100%);
  388. }
  389. div#subnav.item-list-tabs {
  390. filter: none;
  391. }
  392. #header #search-bar .padder {
  393. padding: 10px 15px;
  394. min-height: 5em;
  395. height: auto;
  396. }
  397. #search-form {
  398. margin-top: 14px;
  399. }
  400. #header #search-bar input[type=text] {
  401. border: none;
  402. -moz-border-radius: 1em;
  403. -webkit-border-radius: 1em;
  404. border-radius: 1em;
  405. margin-right: 4px;
  406. padding: 5px;
  407. font-size: 1em;
  408. line-height: 1em;
  409. }
  410. #header #search-bar input[type=text]:focus {
  411. outline: 0;
  412. -moz-box-shadow: 0 0 10px #FFF;
  413. -webkit-box-shadow: 0 0 10px #FFF;
  414. box-shadow: 0 0 10px #FFF;
  415. }
  416. #header #search-bar input[type=submit] {
  417. font-size: 13px;
  418. padding: 1px 6px;
  419. margin-left: 4px;
  420. border-style: solid;
  421. border-width: 1px;
  422. color: #FFF;
  423. text-shadow: 0 1px 0 #000;
  424. }
  425. #header h1 {
  426. float: left;
  427. margin-bottom: 0;
  428. margin-top: -5px;
  429. text-align: left;
  430. max-width: 520px;
  431. }
  432. #header h1 a {
  433. color: #FFF;
  434. text-decoration: none;
  435. text-transform: lowercase;
  436. font-size: 1.2em;
  437. font-weight: 400;
  438. text-shadow: 0 -1px 0 #052343;
  439. line-height: 1.2em;
  440. letter-spacing: 0;
  441. text-align: left;
  442. max-width: 520px;
  443. }
  444. #nav {
  445. bottom: auto;
  446. float: right;
  447. left: auto;
  448. margin: 0 1em;
  449. position: relative;
  450. right: auto;
  451. top: auto;
  452. }
  453. #nav li {
  454. margin-left: 0;
  455. float: left;
  456. }
  457. #nav li a {
  458. display: inline-block;
  459. position: relative;
  460. text-shadow: 0 1px 0 #FFF;
  461. margin-right: 0 !important;
  462. background: #F5F5F5;
  463. background: -moz-linear-gradient(top, #F5F5F5 0%, #F5F5F5 15%, #EBEBEB 100%);
  464. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F5F5F5), color-stop(15%,#F5F5F5), color-stop(100%,#EBEBEB));
  465. background: -webkit-linear-gradient(top, #F5F5F5 0%,#F5F5F5 15%,#EBEBEB 100%);
  466. background: -o-linear-gradient(top, #F5F5F5 0%,#F5F5F5 15%,#EBEBEB 100%);
  467. background: -ms-linear-gradient(top, #F5F5F5 0%,#F5F5F5 15%,#EBEBEB 100%);
  468. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F5F5F5', endColorstr='#EBEBEB',GradientType=0 );
  469. background: linear-gradient(top, #F5F5F5 0%,#F5F5F5 15%,#EBEBEB 100%);
  470. border: 1px solid #bbb;
  471. border: 1px solid rgba(0, 0, 0, 0.1);
  472. border-left:0;
  473. color: #666;
  474. font: 100% arial,sans-serif;
  475. margin: 0 8px 0 0;
  476. outline: medium none;
  477. padding: 7px 12px;
  478. text-align: center;
  479. vertical-align: middle;
  480. white-space: nowrap;
  481. font-weight: bold;
  482. border-radius: 0;
  483. }
  484. #nav li:first-child a {
  485. -moz-border-radius:2px 0 0 2px;
  486. -webkit-border-radius: 2px 0 0 2px;
  487. border-radius:2px 0 0 2px;
  488. border-left:1px solid #BBB;
  489. border-left:1px solid rgba(0, 0, 0, 0.1);
  490. }
  491. #nav li:last-child a {
  492. -moz-border-radius:0 2px 2px 0;
  493. -webkit-border-radius: 0 2px 2px 0;
  494. border-radius:0 2px 2px 0;
  495. }
  496. #nav li a:hover,
  497. #nav li.sfhover a {
  498. box-shadow: 0 1px 1px #AAA;
  499. box-shadow: 0 1px 1px rgba(0,0,0,0.1);
  500. border: 1px solid #BBB;
  501. border: 1px solid rgba(0, 0, 0, 0.4);
  502. color: #333;
  503. border-left: 1px solid #BBB;
  504. border-left:1px solid rgba(0, 0, 0, 0.4);
  505. padding-left: 11px;
  506. }
  507.  
  508. #nav > li.current-menu-item a,
  509. #nav > li.current_page_item a,
  510. nav li.selected a {
  511. -moz-box-shadow:inset 0 0 1px #AAA;
  512. -webkit-box-shadow:inset 0 0 1px #AAA;
  513. box-shadow:inset 0 0 1px #AAA;
  514. color: #444;
  515. background: #EBEBEB;
  516. background: -moz-linear-gradient(top, #EBEBEB 0%, #EBEBEB 15%, #DADADA 100%);
  517. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#EBEBEB), color-stop(15%,#EBEBEB), color-stop(100%,#DADADA));
  518. background: -webkit-linear-gradient(top, #EBEBEB 0%,#EBEBEB 15%,#DADADA 100%);
  519. background: -o-linear-gradient(top, #EBEBEB 0%,#EBEBEB 15%,#DADADA 100%);
  520. background: -ms-linear-gradient(top, #EBEBEB 0%,#EBEBEB 15%,#DADADA 100%);
  521. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#EBEBEB', endColorstr='#DADADA',GradientType=0 );
  522. background: linear-gradient(top, #EBEBEB 0%,#EBEBEB 15%,#DADADA 100%);
  523. }
  524. #nav li .children,
  525. #nav li .sub-menu {
  526. -moz-border-radius:0;
  527. -webkit-border-radius: 0;
  528. border-radius:0;
  529. border: none;
  530. margin-top: -1px;
  531. }
  532. #nav li .children li a,
  533. #nav li .sub-menu li a {
  534. background: #797979;
  535. float: left;
  536. line-height: 30px;
  537. margin: 0;
  538. width: 100%;
  539. filter: none;
  540. -moz-border-radius:0;
  541. -webkit-border-radius: 0;
  542. border-radius:0;
  543. text-shadow: 0 -1px 0 #444;
  544. text-align: left;
  545. border: none;
  546. -moz-box-shadow: none;
  547. -webkit-box-shadow: none;
  548. box-shadow: none;
  549. }
  550. #nav > li.current-menu-item a li a {
  551. -moz-box-shadow: none;
  552. -webkit-box-shadow: none;
  553. box-shadow: none;
  554. }
  555. #nav li .children li:nth-child(odd) a,
  556. #nav li .sub-menu li:nth-child(odd) a {
  557. background: #797979;
  558. }
  559. #nav li .children li:nth-child(even) a,
  560. #nav li .sub-menu li:nth-child(even) a {
  561. background: #6A6A6A;
  562. }
  563. #nav li .children li a:hover,
  564. #nav li .sub-menu li a:hover {
  565. background: #666;
  566. color: #EEE;
  567. -moz-box-shadow: none;
  568. -webkit-box-shadow: none;
  569. box-shadow: none;
  570. }
  571. #nav li .children li:nth-child(odd) a:hover,
  572. #nav li .sub-menu li:nth-child(odd) a:hover {
  573. background: #5E5E5E;
  574. }
  575. #nav li .children li:nth-child(even) a:hover,
  576. #nav li .sub-menu li:nth-child(even) a:hover {
  577. background: #575756;
  578. }
  579. #nav .sfhover ul, #nav *:hover ul {
  580. min-width: 180px;
  581. width: auto;
  582. }
  583. #nav li.sfhover:last-child > ul.children,
  584. #nav li.sfhover:last-child > ul.sub-menu {
  585. right: 0;
  586. left: auto;
  587. }
  588. #nav .sfhover ul.children .sfhover ul.children,
  589. #nav *:hover ul.sub-menu *:hover ul.sub-menu {
  590. left: 100%;
  591. opacity: .9;
  592. margin: 0;
  593. top: 0;
  594. }
  595. #nav .sfhover:last-child ul.children .sfhover ul.children,
  596. #nav *:hover:last-child ul.sub-menu *:hover ul.sub-menu {
  597. right: 100%;
  598. top: 0%;
  599. width: 100%;
  600. left: auto;
  601. margin: 0;
  602. }
  603. #nav .sfhover ul li, #nav *:hover ul li {
  604. width: 100%;
  605. }
  606. #nav .sfhover ul .sfhover > ul, #nav *:hover ul *:hover > ul {
  607. width: 100%;
  608. }
  609. #header #navigation {
  610. min-height: 30px;
  611. width: 100%;
  612. z-index: 99999;
  613. margin: 0 auto;
  614. }
  615. #header #navigation {
  616. z-index: 99999;
  617. position: relative;
  618. overflow: visible;
  619. }
  620. #nav li.sfhover a {
  621. -moz-border-radius:0;
  622. -webkit-border-radius: 0;
  623. border-radius:0;
  624. }
  625. div#item-header h2 a {
  626. font-size: 1.4em;
  627. letter-spacing: -0.05em;
  628. line-height: 1em;
  629. color: #343B3E;
  630. }
  631. .directory .padder h3,
  632. #blog-page,
  633. #blog-latest,
  634. #blog-single,
  635. #register-page {
  636. margin-left:auto;
  637. margin-right:auto;
  638. max-width: 960px;
  639. }
  640. div#message.updated {
  641. margin: -10px auto 0;
  642. max-width: 958px;
  643. }
  644. body.profile div#message.updated {
  645. margin: 10px auto;
  646. }
  647. #item-header div#message p {
  648. background: #DFFCD9;
  649. border: none;
  650. color: #7B6B01;
  651. margin-top: 0;
  652. line-height: 30px;
  653. border: 1px solid #FFDE00;
  654. padding: 4px 10px;
  655. }
  656. div#message.error {
  657. margin: 0 -19px;
  658. background: #EAEAEA;
  659. }
  660. div#message.error p {
  661. padding-bottom: 10px;
  662. border: 1px solid #DB2E2E;
  663. }
  664. #whats-new-form div#message.error {
  665. margin: 0;
  666. margin-bottom: 10px;
  667. padding-bottom: 0;
  668. }
  669. .group-create div#message.error {
  670. margin: 0 auto;
  671. background: transparent;
  672. }
  673. form#whats-new-form textarea {
  674. background: #FFF;
  675. border: 1px solid #CCC;
  676. -moz-box-shadow:0 0 5px #D7D7D7 inset, 0 0 5px #D7D7D7 inset;
  677. -webkit-box-shadow:0 0 5px #D7D7D7 inset, 0 0 5px #D7D7D7 inset;
  678. box-shadow: 0 0 5px #D7D7D7 inset, 0 0 5px #D7D7D7 inset;
  679. color: #A1A1A1;
  680. font-size: 14px;
  681. width: 94%;
  682. padding: 8px 10px;
  683. max-width: 94%;
  684. }
  685. #whats-new-avatar {
  686. border: 1px solid #CCC;
  687. }
  688. #whats-new-avatar img.avatar {
  689. border: 5px solid #FFF;
  690. }
  691. a.button, button,
  692. input[type="submit"],
  693. input[type="reset"],
  694. input[type="button"],
  695. div.generic-button a,
  696. body .navigation a,
  697. body.single a.comment-reply-link,
  698. body.page a.comment-reply-link {
  699. background: #CDCDCD;
  700. background: -moz-linear-gradient(top, #FBFBFB 0%, #CDCDCD 100%);
  701. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FBFBFB), color-stop(100%,#CDCDCD));
  702. background: -webkit-linear-gradient(top, #FBFBFB 0%,#CDCDCD 100%);
  703. background: -o-linear-gradient(top, #FBFBFB 0%,#CDCDCD 100%);
  704. background: -ms-linear-gradient(top, #FBFBFB 0%,#CDCDCD 100%);
  705. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#CDCDCD',GradientType=0 );
  706. background: linear-gradient(top, #FBFBFB 0%,#CDCDCD 100%);
  707. border-color: #CCC #AAA #AAA #CCC;
  708. -moz-border-radius: 3px;
  709. -webkit-border-radius: 3px;
  710. border-radius: 3px;
  711. border-right: 1px solid #AAA;
  712. border-style: solid;
  713. border-width: 1px;
  714. color: #444444;
  715. cursor: pointer;
  716. font-size: 14px;
  717. font-weight: bold;
  718. line-height: 21px;
  719. padding: 4px 12px;
  720. text-decoration: none;
  721. text-shadow: 0 1px #F7F7F7;
  722. text-shadow: 0 1px rgba(255, 255, 255, 0.75);
  723. background-repeat: no-repeat;
  724. background-position: 95% 50%;
  725. }
  726. a.button:hover,
  727. button:hover,
  728. input[type="submit"]:hover,
  729. input[type="reset"]:hover,
  730. input[type="button"]:hover,
  731. div.generic-button a:hover,
  732. body .navigation a:hover,
  733. body.single a.comment-reply-link:hover,
  734. body.page a.comment-reply-link:hover {
  735. background: #B3B3B3;
  736. background: -moz-linear-gradient(top, #FBFBFB 0%, #B3B3B3 100%);
  737. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FBFBFB), color-stop(100%,#B3B3B3));
  738. background: -webkit-linear-gradient(top, #FBFBFB 0%,#B3B3B3 100%);
  739. background: -o-linear-gradient(top, #FBFBFB 0%,#B3B3B3 100%);
  740. background: -ms-linear-gradient(top, #FBFBFB 0%,#B3B3B3 100%);
  741. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#B3B3B3',GradientType=0 );
  742. background: linear-gradient(top, #FBFBFB 0%,#B3B3B3 100%);
  743. border-color: #AAA #888 #888 #AAA;
  744. border-right: 1px solid #888;
  745. border-style: solid;
  746. border-width: 1px;
  747. color: #222;
  748. background-repeat: no-repeat;
  749. background-position: 95% 50%;
  750. }
  751. a.button:active,
  752. button:active,
  753. input[type="submit"]:active,
  754. input[type="reset"]:active,
  755. input[type="button"]:active,
  756. div.generic-button a:active,
  757. body .navigation a:active {
  758. background: #B3B3B3;
  759. background: -moz-linear-gradient(top, #B3B3B3 0%, #FBFBFB 100%);
  760. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#B3B3B3), color-stop(100%,#FBFBFB));
  761. background: -webkit-linear-gradient(top, #B3B3B3 0%,#FBFBFB 100%);
  762. background: -o-linear-gradient(top, #B3B3B3 0%,#FBFBFB 100%);
  763. background: -ms-linear-gradient(top, #B3B3B3 0%,#FBFBFB 100%);
  764. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#B3B3B3', endColorstr='#FBFBFB',GradientType=0 );
  765. background: linear-gradient(top, #B3B3B3 0%,#FBFBFB 100%);
  766. border-color: #888 #AAA #AAA #888;
  767. border-style: solid;
  768. border-width: 1px;
  769. background-repeat: no-repeat;
  770. background-position: 95% 50%;
  771. }
  772. .button.full-width,
  773. button.full-width,
  774. input.full-width[type="submit"],
  775. input.full-width[type="reset"],
  776. input.full-width[type="button"] {
  777. padding-left: 0 !important;
  778. padding-right: 0 !important;
  779. text-align: center;
  780. width: 100%;
  781. }
  782. #nav-above,
  783. #nav-below {
  784. margin: 20px 0;
  785. padding: 4px 12px;
  786. }
  787. body #subnav ul li a {
  788. -moz-border-radius: 1em;
  789. -webkit-border-radius: 1em;
  790. border-radius: 1em;
  791. }
  792. body #subnav ul li a:hover {
  793. background-color: #F3F3F3;
  794. color: #555;
  795. }
  796. body #subnav ul li a:active {
  797. background: #DCDCDC;
  798. }
  799. body #subnav ul li.selected a,
  800. body #subnav ul li.current a {
  801. background: #EEE;
  802. color: #222;
  803. }
  804. li span.unread-count,
  805. tr.unread span.unread-count {
  806. background: #A6B909;
  807. }
  808. #item-header #bp-before-member-header img.avatar,
  809. #item-header #bp-before-group-header img.avatar,
  810. body.activity-permalink .activity-list li .activity-avatar img.avatar {
  811. float: left;
  812. margin: 5px 15px 19px 5px;
  813. border: 8px solid #FFF;
  814. position: relative;
  815. -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
  816. -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
  817. box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
  818. }
  819. body.activity-permalink .activity-list li .activity-avatar img.avatar, .activity-permalink .activity-list li.mini .activity-avatar img.avatar {
  820. width: 100px;
  821. height: 100px;
  822. }
  823. body.activity-permalink .activity-list li .activity-content {
  824. margin-left: 160px;
  825. }
  826. div#item-header #bp-before-member-header #item-header-content {
  827. margin-left: 200px;
  828. }
  829. #item-header-content span.activity {
  830. background: #CBCACA;
  831. border-bottom: none;
  832. border-right: none;
  833. color: #555557;
  834. margin-top: 0;
  835. }
  836. #container #item-body {
  837. max-width: 960px;
  838. margin: 0 auto;
  839. }
  840. div#message.error p {
  841. background: #F15B5B;
  842. border:none;
  843. color: #FFF;
  844. max-width: 960px;
  845. margin: 0 auto;
  846. }
  847. div#item-header h2 span.highlight {
  848. background:#555;
  849. color: #EEE;
  850. margin-top: -6px;
  851. }
  852. div#item-header h2 span.highlight span {
  853. background: #222;
  854. }
  855. span.activity,
  856. div#message p {
  857. background: #FFFDD0;
  858. -moz-border-radius: 0;
  859. -webkit-border-radius: 0;
  860. border-bottom-radius: 0;
  861. border: none;
  862. border: none;
  863. color: #888;
  864. font-weight: normal;
  865. margin-top: 3px;
  866. text-decoration: none;
  867. }
  868. #item-header div#message p {
  869. background: #FFFDD0;
  870. color: #666;
  871. }
  872. #item-header-content #latest-update {
  873. color: #828688;
  874. }
  875. div.activity-meta a {
  876. padding:2px 5px;
  877. margin-right: 3px;
  878. text-shadow: none;
  879. }
  880.  
  881. .standard-form textarea,
  882. .standard-form input[type="text"],
  883. .standard-form select,
  884. .standard-form input[type="password"],
  885. .dir-search input[type="text"] {
  886. border: 1px solid #CCC;
  887. -moz-border-radius: 2px;
  888. -webkit-border-radius: 2px;
  889. border-radius: 2px;
  890. color: #888;
  891. font-family: inherit;
  892. font-size: 14px;
  893. padding: 6px;
  894. }
  895. div.dir-search input[type="text"] {
  896. font-size: 14px;
  897. padding: 5px 9px;
  898. }
  899. div#item-header span.activity,
  900. div#item-header h2 span.highlight {
  901. margin-bottom: 0;
  902. }
  903. span.user-nicename,
  904. #item-header-content span.highlight {
  905. background: #F4F4F4;
  906. border-bottom: none;
  907. -moz-border-radius: 0;
  908. -webkit-border-radius: 0;
  909. border-radius: 0;
  910. border-right: none;
  911. color: #666;
  912. display: inline-block;
  913. font-size: 11px;
  914. font-weight: normal;
  915. margin-top: 6px;
  916. padding: 1px 8px;
  917. text-decoration: none;
  918. margin-right: 3px;
  919. }
  920. #item-header #bp-before-group-header #group-admins img.avatar,
  921. #item-header #bp-before-group-header #group-mods img.avatar {
  922. border: 2px solid #FFF;
  923. }
  924. body.activity-permalink .activity-list li .activity-content,
  925. body.activity-permalink div.activity-comments {
  926. margin-left: 160px;
  927. }
  928. body.activity-permalink ul#activity-stream {
  929. margin-top: 3em;
  930. margin-bottom: 3em;
  931. }
  932. #whats-new-options {
  933. width: 94%;
  934. }
  935. #footer {
  936. margin: 0;
  937. padding-bottom: 20px;
  938. background: #313131;
  939. background: -moz-linear-gradient(top, #313131 0%, #313131 35%, #3C3C3C 100%);
  940. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#313131), color-stop(35%,#313131), color-stop(100%,#3C3C3C));
  941. background: -webkit-linear-gradient(top, #313131 0%,#313131 35%,#3C3C3C 100%);
  942. background: -o-linear-gradient(top, #313131 0%,#313131 35%,#3C3C3C 100%);
  943. background: -ms-linear-gradient(top, #313131 0%,#313131 35%,#3C3C3C 100%);
  944. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#313131', endColorstr='#3C3C3C',GradientType=0 );
  945. background: linear-gradient(top, #313131 0%,#313131 35%,#3C3C3C 100%);
  946. }
  947. #footer-widgets {
  948. border: none;
  949. background: transparent;
  950. padding: 0;
  951. }
  952. #footer-widget-area div.item-options,
  953. div#sidebar div.item-options {
  954. background: transparent;
  955. }
  956. #sidebar div.item-options {
  957. border-bottom: 1px solid #CCC;
  958. }
  959. #footer-widget-area div.item-options {
  960. border-bottom: 1px solid #000;
  961. }
  962. #footer-widget-area h3.widgettitle,
  963. #sidebar h3.widgettitle {
  964. background: #222;
  965. background: rgba(0,0,0,0.1);
  966. font-size: 1.2em;
  967. letter-spacing: 0;
  968. padding: 10px 15px;
  969. text-shadow: 0 1px 0 #F7F7F7;
  970. text-transform: uppercase;
  971. }
  972. #footer-widget-area h3.widgettitle {
  973. text-shadow: none;
  974. color: #E1E1E1;
  975. }
  976. #sidebar a {
  977. text-shadow: 0 1px 0 #F7F7F7;
  978. }
  979.  
  980. #footer-widget-area img.avatar,
  981. #sidebar img.avatar {
  982. border: 2px solid #FFF;
  983. }
  984. #sidebar ul.item-list {
  985. border-bottom: 1px solid #FFF;
  986. }
  987. #footer-widget-area ul.item-list {
  988. border-bottom: 1px solid #444;
  989. }
  990. #footer span.activity {
  991. background: #222;
  992. }
  993. #sidebar ul.item-list li {
  994. border-bottom: 1px solid #CCC;
  995. border-top: 1px solid #FFF;
  996. }
  997. #footer-widget-area ul.item-list li {
  998. border-bottom: 1px solid #000;
  999. border-top: 1px solid #444;
  1000. }
  1001. #site-generator {
  1002. color: #777;
  1003. margin-top: 0;
  1004. padding-top: 30px;
  1005. text-shadow: none;
  1006. }
  1007. .blog #blog-latest .post {
  1008. padding: 18px 20px;
  1009. }
  1010. .sticky.post {
  1011. background:#1D1D1D;
  1012. }
  1013. .sticky.post div.author-box {
  1014. background: #000;
  1015. }
  1016. .sticky.post p.date,
  1017. .sticky.post p.postmetadata {
  1018. border-bottom: 1px solid #999;
  1019. border-top: 1px solid #999;
  1020. }
  1021. span.sticky-post {
  1022. background: #333;
  1023. color: #FFF;
  1024. font-weight: bold;
  1025. text-transform: uppercase;
  1026. }
  1027. .sticky.post .date {
  1028. color: #999;
  1029. background: transparent;
  1030. }
  1031. .sticky.post div.author-box img {
  1032. border-color: #333;
  1033. }
  1034. .sticky.post .entry, .sticky.post h2.posttitle a {
  1035. color: #EEE;
  1036. }
  1037. body.directory.groups div#content .padder,
  1038. body.directory.members div#content .padder,
  1039. body.directory.blogs div#content .padder,
  1040. body.directory.forums div#content .padder,
  1041. body.directory.activity div#content .padder,
  1042. .group-create div#content .padder {
  1043. background: url("images/bg-content-padder.png") repeat-x scroll left top transparent;
  1044. }
  1045. #aw-whats-new-submit {
  1046. display: inline;
  1047. }
  1048. #whats-new-options {
  1049. overflow: hidden;
  1050. }
  1051. #sidebar-me {
  1052. overflow: hidden;
  1053. }
  1054. body #container #new-topic-post {
  1055. margin-bottom: 20px;
  1056. }
  1057. #sidebar-squeeze {
  1058. width: 960px;
  1059. margin: 0 auto;
  1060. }
  1061. #sidebar-squeeze #main-column {
  1062. float: left;
  1063. width: 700px;
  1064. }
  1065. #sidebar-squeeze div#sidebar {
  1066. float: right;
  1067. margin: 10px 0 20px;
  1068. border: 1px solid #DDD;
  1069. }
  1070. #sidebar-squeeze div#sidebar .padder {
  1071. background: none;
  1072. padding: 18px;
  1073. }
  1074. #sidebar-squeeze div#sidebar div.item-options {
  1075. margin: -10px 0 0;
  1076. }
  1077. #sidebar-squeeze div#sidebar h3.widgettitle {
  1078. margin: 25px -19px 10px -18px;
  1079. }
  1080. body.register #sidebar {
  1081. display: none;
  1082. }
  1083. body.page-template-onecolumn-page-php #container div#content .padder {
  1084. margin-right: 0;
  1085. }
  1086. body.page-template-onecolumn-page-php #blog-page {
  1087. width: 75%;
  1088. margin: 0 auto;
  1089. }
  1090. #activity-stream {
  1091. margin-top: 0;
  1092. }
  1093. .messages-notices a.button {
  1094. font-size: 85%;
  1095. padding: 3px 4px;
  1096. }
  1097. .standard-form div.submit input#send,
  1098. #post-topic-reply,
  1099. #profile-edit-form,
  1100. #avatar-upload-form,
  1101. #settings-form,
  1102. body.messages #container #item-body,
  1103. #item-body .profile,
  1104. body.friends #container #item-body,
  1105. body.groups #container #item-body,
  1106. body.forums #container #item-body {
  1107. margin-bottom: 1em;
  1108. }
  1109. body.profile .bp-widget h4 {
  1110. margin-top: 1em;
  1111. }
  1112. #previous-next.submit {
  1113. margin-bottom: 20px;
  1114. }
  1115. #wp-admin-bar-favorite-topics {
  1116. display: none;
  1117. }
  1118. #adminbarsearch-wrap {
  1119. display: none;
  1120. }
  1121.  
  1122. body.single a.comment-reply-link,
  1123. body.page a.comment-reply-link {
  1124. font-size: 11px;
  1125. font-weight: normal;
  1126. }
  1127. body.search-results h2.pagetitle,
  1128. body.search-no-results h2.pagetitle {
  1129. display: none;
  1130. }
  1131. .nav-wrap {
  1132. width: 100%;
  1133. float: left;
  1134. margin: 0 auto;
  1135. background: #FFF;
  1136. padding: 1em 0;
  1137. border-bottom: 1px solid #CCCCCC;
  1138. }
  1139. body.activity div#message.updated {
  1140. display: none;
  1141. }
  1142.  
  1143. /*--------------------------------------------------------------
  1144. The media queries below were taken from Less Framework (http://lessframework.com/).
  1145. --------------------------------------------------------------*/
  1146.  
  1147. /* Tablet Layout: 768px.
  1148. Gutters: 24px.
  1149. Outer margins: 28px.
  1150. Inherits styles from: Default Layout.
  1151. -----------------------------------------------------------------
  1152. cols 1 2 3 4 5 6 7 8
  1153. px 68 160 252 344 436 528 620 712 */
  1154.  
  1155. @media only screen and (min-width: 768px) and (max-width: 991px) {
  1156.  
  1157. body {
  1158. min-width: 100%;
  1159. }
  1160. .fullwidth {
  1161. min-width: 100%;
  1162. }
  1163. }
  1164.  
  1165. /* Mobile Layout: 320px.
  1166. Gutters: 24px.
  1167. Outer margins: 34px.
  1168. Inherits styles from: Default Layout.
  1169. ---------------------------------------------
  1170. cols 1 2 3
  1171. px 68 160 252 */
  1172.  
  1173. @media only screen and (max-width: 767px) {
  1174.  
  1175. body {
  1176. width: 320px;
  1177. min-width: 320px;
  1178. padding: 0;
  1179. }
  1180. .fullwidth {
  1181. width: 320px;
  1182. max-width: 320px;
  1183. min-width: 320px;
  1184. }
  1185. .activity-list .activity-content .activity-header img.avatar {
  1186. display: none;
  1187. }
  1188. body div.item-list-tabs ul li,
  1189. body div.item-list-tabs ul li:first-child {
  1190. margin: 0 0 -1px 0 !important;
  1191. width: 100%;
  1192. float: left;
  1193. border: none !important;
  1194. }
  1195. div.item-list-tabs ul li a,
  1196. div.item-list-tabs ul li span {
  1197. display: block;
  1198. padding: 2px 8px;
  1199. text-align: center;
  1200. }
  1201. div#item-header #bp-before-member-header #item-header-content {
  1202. margin-left: 0;
  1203. }
  1204. #search-form {
  1205. margin-top: 0;
  1206. }
  1207. #nav {
  1208. margin:0;
  1209. }
  1210. #item-header #bp-before-member-header img.avatar,
  1211. #item-header #bp-before-group-header img.avatar {
  1212. height: 75px;
  1213. width: 75px;
  1214. }
  1215. div#item-header div#item-actions {
  1216. display: none;
  1217. }
  1218. div#item-header div#item-header-content {
  1219. margin-left: 0;
  1220. }
  1221. div#topic-meta div.admin-links {
  1222. top: 0;
  1223. }
  1224. div#item-header h2 a {
  1225. font-size: .7em;
  1226. }
  1227. #item-header-content #latest-update {
  1228. display: none;
  1229. }
  1230. div#item-header div#item-meta {
  1231. margin-top: 0;
  1232. }
  1233. div#item-header div#item-meta #item-buttons div.generic-button a {
  1234. font-size: 13px;
  1235. padding: 3px 7px;
  1236. }
  1237. div#item-header div.generic-button,
  1238. div#item-header a.button {
  1239. margin-right: 5px;
  1240. }
  1241. #bp-before-member-header div#item-header h2 span.highlight {
  1242. display: none;
  1243. }
  1244. div#item-header #bp-before-member-header h2 span.highlight {
  1245. display: none;
  1246. }
  1247. #header h1 {
  1248. margin-left: 0;
  1249. }
  1250. body.activity-permalink .activity-list li .activity-avatar img.avatar {
  1251. height: 60px !important;
  1252. width: 60px !important;
  1253. }
  1254. body.activity-permalink .activity-list li .activity-content,
  1255. body.activity-permalink div.activity-comments {
  1256. margin-left: 90px;
  1257. }
  1258. body.activity-permalink .activity-list li .activity-header > p {
  1259. background: none;
  1260. }
  1261. #footer-widget-area div.widget-area > ul {
  1262. margin-right: 0;
  1263. width: 100%;
  1264. }
  1265. body.page div#container,
  1266. body.blog div#container,
  1267. body.single div#container,
  1268. body.archive div#container {
  1269. width: 100%;
  1270. }
  1271. body.page div#content .padder,
  1272. body.blog div#content .padder,
  1273. body.single div#content .padder,
  1274. body.archive div#content .padder {
  1275. margin-right: 0;
  1276. }
  1277. div#sidebar {
  1278. clear: both;
  1279. margin-left: 0;
  1280. width: 100%;
  1281. }
  1282. #footer-widget-area div.widget-area > ul > li {
  1283. padding: 10px;
  1284. }
  1285. div.dir-search {
  1286. display: none;
  1287. }
  1288. .dir-form h3 {
  1289. font-size: 2em;
  1290. }
  1291. a.button,
  1292. button,
  1293. input[type="submit"],
  1294. input[type="reset"],
  1295. input[type="button"],
  1296. div.generic-button a {
  1297. padding: 3px 4px;
  1298. }
  1299. #th-postcount,
  1300. .td-postcount,
  1301. th#th-postcount {
  1302. display: none;
  1303. }
  1304. #sidebar-squeeze,
  1305. #sidebar-squeeze #main-column,
  1306. #sidebar-squeeze div#sidebar {
  1307. width: 100%;
  1308. margin-left: 0;
  1309. margin-right:0;
  1310. }
  1311. #header,
  1312. #header #navigation,
  1313. #header #search-bar,
  1314. #header #search-bar .padder {
  1315. float: left;
  1316. }
  1317. #header #search-bar .padder {
  1318. height: auto;
  1319. width: 100%;
  1320. padding: 1em 0;
  1321. }
  1322. #header h1 {
  1323. margin: 0 0 10px;
  1324. width: 100%;
  1325. text-align: center;
  1326. }
  1327. #search-form {
  1328. margin-bottom: 1em;
  1329. text-align: center;
  1330. }
  1331. #header #search-bar input[type="text"] {
  1332. width: 80px;
  1333. }
  1334. #nav {
  1335. width: 100%;
  1336. }
  1337. #nav li {
  1338. width: 50%;
  1339. }
  1340. #nav li a {
  1341. background: none;
  1342. filter: none;
  1343. border: none;
  1344. color: #666;
  1345. margin: 0;
  1346. padding: 7px 0;
  1347. text-align: center;
  1348. width: 100%;
  1349. float: left;
  1350. white-space: normal;
  1351. }
  1352. #nav li a:hover,
  1353. #nav li.sfhover a {
  1354. box-shadow: none;
  1355. border: none;
  1356. padding-left: 0;
  1357. }
  1358. #nav > li.current-menu-item a,
  1359. #nav > li.current_page_item a,
  1360. nav li.selected a {
  1361. background: #D7D7D7;
  1362. box-shadow: none;
  1363. }
  1364. #nav li .children,
  1365. #nav li .sub-menu {
  1366. display: none !important;
  1367. }
  1368.  
  1369. #nav li:first-child a {
  1370. border-left: none;
  1371. }
  1372. form#whats-new-form #whats-new-avatar {
  1373. display: none;
  1374. }
  1375. form#whats-new-form #whats-new-avatar {
  1376. display: none;
  1377. }
  1378. form#whats-new-form #whats-new-content,
  1379. form#whats-new-form h5 {
  1380. margin-left: 0;
  1381. padding-left: 0;
  1382. }
  1383. #bp-before-activity-post-form {
  1384. overflow: visible;
  1385. }
  1386. .dir-form h3 {
  1387. margin-bottom: 3em !important;
  1388. }
  1389. .dir-form h3,
  1390. .dir-form h3 a {
  1391. clear: both;
  1392. text-align: center !important;
  1393. float: left;
  1394. width: 80%;
  1395. margin: 0 10% !important;
  1396. }
  1397. .dir-form #sidebar h3,
  1398. .dir-form #sidebar h3 a {
  1399. width: auto;
  1400. margin: 25px -19px 10px -18px !important;
  1401. float: none;
  1402. }
  1403. }
  1404.  
  1405. /* Wide Mobile Layout: 480px.
  1406. Gutters: 24px.
  1407. Outer margins: 22px.
  1408. Inherits styles from: Default Layout, Mobile Layout.
  1409. ------------------------------------------------------------
  1410. cols 1 2 3 4 5
  1411. px 68 160 252 344 436 */
  1412.  
  1413. @media only screen and (min-width: 480px) and (max-width: 767px) {
  1414.  
  1415. body {
  1416. width: 480px;
  1417. min-width: 480;
  1418. padding: 0;
  1419. }
  1420. .fullwidth {
  1421. width: 480px;
  1422. max-width: 480px;
  1423. min-width: 480px;
  1424. }
  1425. .activity-list .activity-content .activity-header img.avatar {
  1426. display: none;
  1427. }
  1428. body div.item-list-tabs ul li,
  1429. body div.item-list-tabs ul li:first-child {
  1430. margin: 0 0 -1px 0 !important;
  1431. width: 100%;
  1432. float: left;
  1433. border: none !important;
  1434. }
  1435. div.item-list-tabs ul li a,
  1436. div.item-list-tabs ul li span {
  1437. display: block;
  1438. padding: 2px 8px;
  1439. text-align: center;
  1440. }
  1441. div.item-list-tabs ul li a span {
  1442. margin: -3px 0 0 3px;
  1443. padding: 2px 8px;
  1444. }
  1445. div#item-header #bp-before-member-header #item-header-content {
  1446. margin-left: 0;
  1447. }
  1448. #item-header #bp-before-member-header img.avatar {
  1449. height: 75px;
  1450. width: 75px;
  1451. }
  1452. div#item-header h2 a {
  1453. font-size: 1em;
  1454. }
  1455. #item-header-content #latest-update {
  1456. display: none;
  1457. }
  1458. div#item-header div#item-meta {
  1459. margin-top: 0;
  1460. }
  1461. div#item-header div#item-meta #item-buttons div.generic-button a {
  1462. font-size: 13px;
  1463. padding: 3px 7px;
  1464. }
  1465. div#item-header div.generic-button,
  1466. div#item-header a.button {
  1467. margin-right: 5px;
  1468. }
  1469. div#item-header #bp-before-member-header h2 span.highlight {
  1470. display: none;
  1471. }
  1472. #search-form {
  1473. margin-top: 8px;
  1474. }
  1475. #header h1 {
  1476. margin-left: 0;
  1477. }
  1478. body.activity-permalink .activity-list li .activity-avatar img.avatar {
  1479. height: 60px !important;
  1480. width: 60px !important;
  1481. }
  1482. body.activity-permalink .activity-list li .activity-content,
  1483. body.activity-permalink div.activity-comments {
  1484. margin-left: 110px;
  1485. }
  1486. #footer-widget-area div.widget-area > ul {
  1487. margin-right: 0;
  1488. width: 50%;
  1489. }
  1490. #third.widget-area {
  1491. clear:left;
  1492. }
  1493. body.page div#container,
  1494. body.blog div#container,
  1495. body.single div#container,
  1496. body.archive div#container {
  1497. width: 100%;
  1498. }
  1499. body.page div#content .padder,
  1500. body.blog div#content .padder,
  1501. body.single div#content .padder,
  1502. body.archive div#content .padder {
  1503. margin-right: 0;
  1504. }
  1505. div#sidebar {
  1506. clear: both;
  1507. margin-left: 0;
  1508. width: 100%;
  1509. }
  1510. #footer-widget-area div.widget-area > ul > li {
  1511. padding: 10px;
  1512. }
  1513. div.dir-search {
  1514. display: none;
  1515. }
  1516. .dir-form h3 {
  1517. font-size: 2.3em;
  1518. }
  1519. a.button, button,
  1520. input[type="submit"],
  1521. input[type="reset"],
  1522. input[type="button"],
  1523. div.generic-button a {
  1524. padding: 4px 8px;
  1525. }
  1526. #th-postcount,
  1527. .td-postcount {
  1528. display: none;
  1529. }
  1530. #sidebar-squeeze,
  1531. #sidebar-squeeze #main-column,
  1532. #sidebar-squeeze div#sidebar {
  1533. width: 100%;
  1534. margin-left: 0;
  1535. margin-right:0;
  1536. }
  1537. #header,
  1538. #header #navigation,
  1539. #header #search-bar,
  1540. #header #search-bar .padder {
  1541. float: left;
  1542. }
  1543. #header #search-bar .padder {
  1544. height: auto;
  1545. width: 100%;
  1546. padding: 1em 0;
  1547. }
  1548. #header h1 {
  1549. margin: 0 0 10px;
  1550. width: 100%;
  1551. text-align: center;
  1552. }
  1553. #search-form {
  1554. margin-bottom: 1em;
  1555. text-align: center;
  1556. }
  1557. #nav {
  1558. width: 100%;
  1559. margin: 0;
  1560. }
  1561. #nav li {
  1562. width: 50%;
  1563. }
  1564. #nav li a {
  1565. background: none;
  1566. filter: none;
  1567. border: none;
  1568. color: #666;
  1569. margin: 0;
  1570. padding: 7px 0;
  1571. text-align: center;
  1572. width: 100%;
  1573. float: left;
  1574. }
  1575. #nav li a:hover,
  1576. #nav li.sfhover a {
  1577. box-shadow: none;
  1578. border: none;
  1579. padding-left: 0;
  1580. }
  1581. #nav > li.current-menu-item a,
  1582. #nav > li.current_page_item a,
  1583. nav li.selected a {
  1584. background: #D7D7D7;
  1585. box-shadow: none;
  1586. }
  1587. #nav li .children,
  1588. #nav li .sub-menu {
  1589. display: none !important;
  1590. }
  1591. #nav li:first-child a {
  1592. border-left: none;
  1593. }
  1594. form#whats-new-form #whats-new-avatar {
  1595. display: none;
  1596. }
  1597. form#whats-new-form #whats-new-content,
  1598. form#whats-new-form h5 {
  1599. margin-left: 0;
  1600. padding-left: 0;
  1601. }
  1602. .dir-form h3 {
  1603. margin-bottom: 1em !important;
  1604. }
  1605. .dir-form h3,
  1606. .dir-form h3 a {
  1607. clear: both;
  1608. text-align: center !important;
  1609. float: left;
  1610. width: 80%;
  1611. margin: 0 10% !important;
  1612. }
  1613. .dir-form #sidebar h3,
  1614. .dir-form #sidebar h3 a {
  1615. width: auto;
  1616. margin: 25px -19px 10px -18px !important;
  1617. float: none;
  1618. }
  1619. }


Merci par avance !

Autres pages sur : probleme rapide marge css

22 Mars 2012 11:18:47

*marge à gauche*
a c 232 L Programmation
22 Mars 2012 11:45:38

Salut,

Utilise un outil du genre Firebug (extension pour Firefox et Chrome, doit même exister en light pour IE) pour analyser ta page et voir d'où ça vient.

Ca vient de ta class "post-content" qui a une margin-left de 105px. (déclaré ligne 1014 du fichier default.css)

En supprimant cette marge gauche, ça te permet d'avoir 3 éléments (et pas 4).
Pour en avoir 4 il faudrait aussi supprimer le padding sur .blog #blog-latest .post (déclaré ligne 1007 du fichier style.css)
Mais ça fait un peu juste encore...
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