25/03/2014, 09:54:00
Bonjour et encore merci pour cette aide précieuse...
Je commence à comprendre, pourvu que je n'oublie pas !
Voilà, en suivant tes conseils éclairés, j'ai réussi ça : http://h-graffiti.fr/cmsmadesimple/index...=actualite
Le résultat "mécanique" des liens me convient...
J'ai édité une feuille de style art-du-coin.css dans laquelle j'ai commencé à faire des transformation à destination de mes news... mais je n'arrive pas à intervenir sur tous les éléments.
La voici :
Par exemple, j'ai réduit le corps du texte (p) et les Titres h3 qui étaient bien trop gros mais je ne peux pas réduire mes marges (padding left et right) pour que le texte occupe toute la largeur du pavé gris. Je trouve également les photos un peu grosses. Pour ça, il faut peut-être intervenir sur le CGSmartImages mais j'ai peur de faire une ânerie !
Quand à la feuille de style qui doit gérer la page "actualités" des news... Alors là, carrément je ne la trouve pas !
Il va falloir que je réduise les titres également, supprimer le point de (li) et réduire les marges également.
Mais bon, j'ai bien avancé et je crois avoir compris des choses grâce à toi.
Merci
Je commence à comprendre, pourvu que je n'oublie pas !
Voilà, en suivant tes conseils éclairés, j'ai réussi ça : http://h-graffiti.fr/cmsmadesimple/index...=actualite
Le résultat "mécanique" des liens me convient...
J'ai édité une feuille de style art-du-coin.css dans laquelle j'ai commencé à faire des transformation à destination de mes news... mais je n'arrive pas à intervenir sur tous les éléments.
La voici :
Code :
[== CSS ==]
/*Use this stylesheet for your custom styles*/
@font-face {
font-family: "GeneralFoundicons";
src: url("[[root_url]]/foundation-5.0.2/fonts/general_foundicons.eot");
src: url("[[root_url]]/foundation-5.0.2/fonts/general_foundicons.eot?#iefix") format("embedded-opentype"), url("[[root_url]]/foundation-5.0.2/fonts/general_foundicons.woff") format("woff"), url("[[root_url]]/foundation-5.0.2/fonts/general_foundicons.ttf") format("truetype"), url("[[root_url]]/foundation-5.0.2/fonts/general_foundicons.svg#GeneralFoundicons") format("svg");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'GeneralEnclosedFoundicons';
src: url('[[root_url]]/foundation-5.0.2/fonts/general_enclosed_foundicons.eot');
src: url('[[root_url]]/foundation-5.0.2/fonts/general_enclosed_foundicons.eot?#iefix') format('embedded-opentype'), url('[[root_url]]/foundation-5.0.2/fonts/general_enclosed_foundicons.woff') format('woff'), url('[[root_url]]/foundation-5.0.2/fonts/general_enclosed_foundicons.ttf') format('truetype'), url('[[root_url]]/foundation-5.0.2/fonts/general_enclosed_foundicons.svg#GeneralEnclosedFoundicons') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "SocialFoundicons";
src: url("[[root_url]]/foundation-5.0.2/fonts/social_foundicons.eot");
src: url("[[root_url]]/foundation-5.0.2/fonts/social_foundicons.eot?#iefix") format("embedded-opentype"), url("[[root_url]]/foundation-5.0.2/fonts/social_foundicons.woff") format("woff"), url("[[root_url]]/foundation-5.0.2/fonts/social_foundicons.ttf") format("truetype"), url("[[root_url]]/foundation-5.0.2/fonts/social_foundicons.svg#SocialFoundicons") format("svg");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "AccessibilityFoundicons";
src: url("[[root_url]]/foundation-5.0.2/fonts/accessibility_foundicons.eot");
src: url("[[root_url]]/foundation-5.0.2/fonts/accessibility_foundicons.eot?#iefix") format("embedded-opentype"), url("[[root_url]]/foundation-5.0.2/fonts/accessibility_foundicons.woff") format("woff"), url("[[root_url]]/foundation-5.0.2/fonts/accessibility_foundicons.ttf") format("truetype"), url("[[root_url]]/foundation-5.0.2/fonts/accessibility_foundicons.svg#AccessibilityFoundicons") format("svg");
font-weight: normal;
font-style: normal;
}
/* global foundicon styles */
[class*="foundicon-"] {
display: inline;
width: auto;
height: auto;
line-height: inherit;
vertical-align: baseline;
background-image: none;
background-position: 0 0;
background-repeat: repeat;
}
[class*="general foundicon-"]:before {
font-family: "GeneralFoundicons";
}
[class*="gen-enclosed foundicon-"]:before {
font-family: "GeneralEnclosedFoundicons";
}
[class*="social foundicon-"]:before {
font-family: "SocialFoundicons";
}
[class*="accessibility foundicon-"]:before {
font-family: "AccessibilityFoundicons";
}
/*general icons */
.foundicon-settings:before {
content: "\f000";
}
.foundicon-heart:before {
content: "\f001";
}
.foundicon-star:before {
content: "\f002";
}
.foundicon-plus:before {
content: "\f003";
}
.foundicon-minus:before {
content: "\f004";
}
.foundicon-checkmark:before {
content: "\f005";
}
.foundicon-remove:before {
content: "\f006";
}
.foundicon-mail:before {
content: "\f007";
}
.foundicon-calendar:before {
content: "\f008";
}
.foundicon-page:before {
content: "\f009";
}
.foundicon-tools:before {
content: "\f00a";
}
.foundicon-globe:before {
content: "\f00b";
}
.foundicon-home:before {
content: "\f00c";
}
.foundicon-quote:before {
content: "\f00d";
}
.foundicon-people:before {
content: "\f00e";
}
.foundicon-monitor:before {
content: "\f00f";
}
.foundicon-laptop:before {
content: "\f010";
}
.foundicon-phone:before {
content: "\f011";
}
.foundicon-cloud:before {
content: "\f012";
}
.foundicon-error:before {
content: "\f013";
}
.foundicon-right-arrow:before {
content: "\f014";
}
.foundicon-left-arrow:before {
content: "\f015";
}
.foundicon-up-arrow:before {
content: "\f016";
}
.foundicon-down-arrow:before {
content: "\f017";
}
.foundicon-trash:before {
content: "\f018";
}
.foundicon-add-doc:before {
content: "\f019";
}
.foundicon-edit:before {
content: "\f01a";
}
.foundicon-lock:before {
content: "\f01b";
}
.foundicon-unlock:before {
content: "\f01c";
}
.foundicon-refresh:before {
content: "\f01d";
}
.foundicon-paper-clip:before {
content: "\f01e";
}
.foundicon-video:before {
content: "\f01f";
}
.foundicon-photo:before {
content: "\f020";
}
.foundicon-graph:before {
content: "\f021";
}
.foundicon-idea:before {
content: "\f022";
}
.foundicon-mic:before {
content: "\f023";
}
.foundicon-cart:before {
content: "\f024";
}
.foundicon-address-book:before {
content: "\f025";
}
.foundicon-compass:before {
content: "\f026";
}
.foundicon-flag:before {
content: "\f027";
}
.foundicon-location:before {
content: "\f028";
}
.foundicon-clock:before {
content: "\f029";
}
.foundicon-folder:before {
content: "\f02a";
}
.foundicon-inbox:before {
content: "\f02b";
}
.foundicon-website:before {
content: "\f02c";
}
.foundicon-smiley:before {
content: "\f02d";
}
.foundicon-search:before {
content: "\f02e";
}
/* general enclosed icons */
.foundicon-settings:before {
content: "\f000";
}
.foundicon-heart:before {
content: "\f001";
}
.foundicon-star:before {
content: "\f002";
}
.foundicon-plus:before {
content: "\f003";
}
.foundicon-minus:before {
content: "\f004";
}
.foundicon-checkmark:before {
content: "\f005";
}
.foundicon-remove:before {
content: "\f006";
}
.foundicon-mail:before {
content: "\f007";
}
.foundicon-calendar:before {
content: "\f008";
}
.foundicon-page:before {
content: "\f009";
}
.foundicon-tools:before {
content: "\f00a";
}
.foundicon-globe:before {
content: "\f00b";
}
.foundicon-home:before {
content: "\f00c";
}
.foundicon-quote:before {
content: "\f00d";
}
.foundicon-people:before {
content: "\f00e";
}
.foundicon-monitor:before {
content: "\f00f";
}
.foundicon-laptop:before {
content: "\f010";
}
.foundicon-phone:before {
content: "\f011";
}
.foundicon-cloud:before {
content: "\f012";
}
.foundicon-error:before {
content: "\f013";
}
.foundicon-right-arrow:before {
content: "\f014";
}
.foundicon-left-arrow:before {
content: "\f015";
}
.foundicon-up-arrow:before {
content: "\f016";
}
.foundicon-down-arrow:before {
content: "\f017";
}
.foundicon-trash:before {
content: "\f018";
}
.foundicon-add-doc:before {
content: "\f019";
}
.foundicon-edit:before {
content: "\f01a";
}
.foundicon-lock:before {
content: "\f01b";
}
.foundicon-unlock:before {
content: "\f01c";
}
.foundicon-refresh:before {
content: "\f01d";
}
.foundicon-paper-clip:before {
content: "\f01e";
}
.foundicon-video:before {
content: "\f01f";
}
.foundicon-photo:before {
content: "\f020";
}
.foundicon-graph:before {
content: "\f021";
}
.foundicon-idea:before {
content: "\f022";
}
.foundicon-mic:before {
content: "\f023";
}
.foundicon-cart:before {
content: "\f024";
}
.foundicon-address-book:before {
content: "\f025";
}
.foundicon-compass:before {
content: "\f026";
}
.foundicon-flag:before {
content: "\f027";
}
.foundicon-location:before {
content: "\f028";
}
.foundicon-clock:before {
content: "\f029";
}
.foundicon-folder:before {
content: "\f02a";
}
.foundicon-inbox:before {
content: "\f02b";
}
.foundicon-website:before {
content: "\f02c";
}
.foundicon-smiley:before {
content: "\f02d";
}
.foundicon-search:before {
content: "\f02e";
}
/*social icons*/
.foundicon-thumb-up:before {
content: "\f000";
}
.foundicon-thumb-down:before {
content: "\f001";
}
.foundicon-rss:before {
content: "\f002";
}
.foundicon-facebook:before {
content: "\f003";
}
.foundicon-twitter:before {
content: "\f004";
}
.foundicon-pinterest:before {
content: "\f005";
}
.foundicon-github:before {
content: "\f006";
}
.foundicon-path:before {
content: "\f007";
}
.foundicon-linkedin:before {
content: "\f008";
}
.foundicon-dribbble:before {
content: "\f009";
}
.foundicon-stumble-upon:before {
content: "\f00a";
}
.foundicon-behance:before {
content: "\f00b";
}
.foundicon-reddit:before {
content: "\f00c";
}
.foundicon-google-plus:before {
content: "\f00d";
}
.foundicon-youtube:before {
content: "\f00e";
}
.foundicon-vimeo:before {
content: "\f00f";
}
.foundicon-flickr:before {
content: "\f010";
}
.foundicon-slideshare:before {
content: "\f011";
}
.foundicon-picassa:before {
content: "\f012";
}
.foundicon-skype:before {
content: "\f013";
}
.foundicon-steam:before {
content: "\f014";
}
.foundicon-instagram:before {
content: "\f015";
}
.foundicon-foursquare:before {
content: "\f016";
}
.foundicon-delicious:before {
content: "\f017";
}
.foundicon-chat:before {
content: "\f018";
}
.foundicon-torso:before {
content: "\f019";
}
.foundicon-tumblr:before {
content: "\f01a";
}
.foundicon-video-chat:before {
content: "\f01b";
}
.foundicon-digg:before {
content: "\f01c";
}
.foundicon-wordpress:before {
content: "\f01d";
}
/*Accessibility icons*/
/* icons */
.foundicon-wheelchair:before {
content: "\f000";
}
.foundicon-speaker:before {
content: "\f001";
}
.foundicon-fontsize:before {
content: "\f002";
}
.foundicon-eject:before {
content: "\f003";
}
.foundicon-view-mode:before {
content: "\f004";
}
.foundicon-eyeball:before {
content: "\f005";
}
.foundicon-asl:before {
content: "\f006";
}
.foundicon-person:before {
content: "\f007";
}
.foundicon-question:before {
content: "\f008";
}
.foundicon-adult:before {
content: "\f009";
}
.foundicon-child:before {
content: "\f00a";
}
.foundicon-glasses:before {
content: "\f00b";
}
.foundicon-cc:before {
content: "\f00c";
}
.foundicon-blind:before {
content: "\f00d";
}
.foundicon-braille:before {
content: "\f00e";
}
.foundicon-iphone-home:before {
content: "\f00f";
}
.foundicon-w3c:before {
content: "\f010";
}
.foundicon-css:before {
content: "\f011";
}
.foundicon-key:before {
content: "\f012";
}
.foundicon-hearing-impaired:before {
content: "\f013";
}
.foundicon-male:before {
content: "\f014";
}
.foundicon-female:before {
content: "\f015";
}
.foundicon-network:before {
content: "\f016";
}
.foundicon-guidedog:before {
content: "\f017";
}
.foundicon-universal-access:before {
content: "\f018";
}
.foundicon-elevator:before {
content: "\f019";
}
/*sub nav*/
ul.sub-nav {
display: block;
margin: 8px 0;
float: right;
margin-top: 18px;
}
ul.sub-nav li {
float: left;
list-style: none outside none;
width: auto;
margin-left: 5px;
}
ul.sub-nav li a {
color: #FFFFFF;
display: block;
font-size: 12px;
margin:0 0 24px 5px;
font-size: 14px;
margin: 0;
padding: 4px 10px;
}
ul.sub-nav li.active a, ul.sub-nav li a:hover {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.15);
color: #FFFFFF;
}
/*other general styles*/
.noList {
list-style-type:none;
}
#content-bottom {
}
/* Default Link Styles */
a {
color: #b07446;
text-decoration: none;
line-height: inherit;
}
a:hover, a:focus {
color: #b84f2b;
}
a img {
border: none;
}
/* Default paragraph styles */
p {
font-family: inherit;
font-weight: normal;
font-size: 0.85em;
line-height: 1.19em;
margin-bottom: 1.0em;
text-rendering: optimizeLegibility;
text-align: justify;
}
p aside {
font-size: 0.875em;
line-height: 1.35;
font-style: italic;
}
/* Default header styles */
h1, h2, h3, h4, h5, h6 {
font-family: "Open Sans", "Helvetica Neue", "Helvetica", Arial, Verdana, sans-serif;
font-weight: 300;
font-style: normal;
color: #222222;
text-rendering: optimizeLegibility;
margin-top: 0.2em;
margin-bottom: 0.5em;
line-height: 1.2125em;
}
hr {
border: solid #dddddd;
border-width: 1px 0 0;
clear: both;
margin: 1.25em 0 1.1875em;
height: 0;
}
/* Helpful Typography Defaults */
em, i {
font-style: italic;
line-height: inherit;
}
strong, b {
font-weight: bold;
line-height: inherit;
}
small, .small {
font-size: 80%;
line-height: inherit;
}
img.left {
margin: 0 .8em 0 0;
}
img.right {
margin: 0 0 0 .8em;
}
code {
font-family: Consolas, "Liberation Mono", Courier, monospace;
font-weight: bold;
color: #7f0a0c;
}
.noMarginBottom {
margin-bottom: 0 !important;
}
.maxMarginBottom {
margin-bottom: 2em !important;
}
.minPaddingBottom {
margin-bottom: 1em !important;
}
.meta {
color: #775637;
font-size: .7em;
}
/* News */
.news {
border: 1px solid #B8B09D;
padding: 10px 20px 10px 3px;
font-size: 0.85em;
line-height: 1.19em;
text-align: left;
}
.news p {
text-align: left;
font-size: 0.75em;
}
.news h3 {
text-align: left;
font-size: 0.8175em;
font-weight: bold;
}
.news ul {
list-style: none;
}
.news ul li {
margin-bottom: 5px;
}
header {
background-color: #DCA270;
padding: 8px 0;
color: #fff;
margin-bottom: 10px;
}
header#home .orbit-container {
background: none;
color: #FFF;
}
.orbit-bullets {
margin-bottom:20px;
}
header#home .orbit-container a {
color: #FFF;
}
header#home .orbit-container .orbit-slide-number, header#home .orbit-container .orbit-timer {
display:none;
}
#footermenu li {
margin-left: 0;
}
#footermenu li a {
margin-right: 10px;
padding-right: 10px;
border-right: 1px dotted #B8B09D
}
#footermenu li:last-child a {
border-right: none;
margin-right: 0;
padding-right: 0;
}
.orbit-container .orbit-prev, .orbit-container .orbit-next {
background-color: rgba(0, 0, 0, 0.4);
color: white;
height: 60px;
position: absolute;
text-indent: -9999px !important;
top: 50%;
}
/*Top bar and menu*/
.top-bar {
background-color:#545454;
}
.top-bar .top-bar-section li > a {
border-left: 1px solid #545454;
}
header h1 {
color: #FFFFFF;
font-weight: 300;
margin:0;
}
header#home {
}
header#responsive-gallery-template {
background-color: #D4BC7C;
}
header#responsive-news-template {
background-color:#FAB46E
}
header#formbuilder-responsive {
background-color:#DF8167
}
header#theme-features {
background-color:#A59A58
}
.top-bar {
margin-bottom: 0;
}
.joyride-tip-guide .joyride-nub.right {
right: -27px;
}
.joyride-tip-guide .joyride-nub.left {
right: -27px;
}
.joyride-tip-guide .joyride-nub.bottom {
bottom: -27px;
}
.joyride-tip-guide .joyride-nub.top {
top: -27px;
}
#copyright {
background: #545454;
color: #eac56e;
padding: 7px 0;
font-size: .68em;
text-align: center;
}
#copyright a {
color: #eac56e;
font-size: 10px;
}
#copyright a:hover {
color: white;
}
#copyright p, #copyright ul {
margin-bottom: 0;
}
footer {
background-color: #B8B09D;
color: #333;
padding: 10px 0 0;
margin-top: 20px;
}
footer a:link, footer a:visited {
color: #999;
font-size: 12px;
}
footer a:hover, footer a:active {
color: #333;
text-decoration: underline;
}
/*Formbuilder*/
.fbsubmit, .fbsubmit_next {
border-style: solid;
border-width: 1px;
font-weight: bold;
line-height: 1;
margin: 0 0 1.0em;
position: relative;
text-align: center;
display: inline-block;
padding: 0.50em 1.25em 0.8125em 1.25em;
font-size: 0.85em;
background-color: #CF995B;
border-color: #D97A5A;
color: white;
}
@media only screen and (min-width: 800px) {
.docs.header {
float: left;
}
.docs.subheader {
margin-top: 38px;
float: right;
}
}
@media only screen and (max-width: 768px) {
header h1 {
text-align:center;
}
header ul.sub-nav {
float: none;
margin: 0 auto;
text-align: center;
}
header ul.sub-nav li {
float: none;
}
#carousel .small-10 {
width:100% !important;
}
}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
#carousel .small-10 img, #carousel .small-10 img.right {
float:none !important;
clear:both;
margin:0 auto
}
}Par exemple, j'ai réduit le corps du texte (p) et les Titres h3 qui étaient bien trop gros mais je ne peux pas réduire mes marges (padding left et right) pour que le texte occupe toute la largeur du pavé gris. Je trouve également les photos un peu grosses. Pour ça, il faut peut-être intervenir sur le CGSmartImages mais j'ai peur de faire une ânerie !
Quand à la feuille de style qui doit gérer la page "actualités" des news... Alors là, carrément je ne la trouve pas !
Il va falloir que je réduise les titres également, supprimer le point de (li) et réduire les marges également.
Mais bon, j'ai bien avancé et je crois avoir compris des choses grâce à toi.
Merci
