[Résolu]Je reviens pour vérif...

Note de ce sujet :
  • Moyenne : 0 (0 vote(s))
  • 1
  • 2
  • 3
  • 4
  • 5
#1
Citation :#~~~~~ DEBUT BLOC A NE PAS SUPPRIMER ~~~~~
#~ Version du CMS: !1.11.6
#~ Hébergeur / Soft : OVH
#~ Informations Système :
#~ ----------------------------------------------
#~ Cms Version: 1.11.6
#~ Installed Modules:
#~ CMSMailer: 5.2.1
#~ CMSPrinting: 1.0.4
#~ FileManager: 1.4.3
#~ MenuManager: 1.8.5
#~ MicroTiny: 1.2.5
#~ ModuleManager: 1.5.5
#~ News: 2.12.12
#~ Search: 1.7.8
#~ ThemeManager: 1.1.8
#~ Gallery: 1.6.1
#~ Config Information:
#~ php_memory_limit:
#~ process_whole_template:
#~ output_compression:
#~ max_upload_size: 64000000
#~ url_rewriting: none
#~ page_extension:
#~ query_var: page
#~ image_manipulation_prog: GD
#~ auto_alias_content: true
#~ locale:
#~ default_encoding: utf-8
#~ admin_encoding: utf-8
#~ set_names: true
#~ Php Information:
#~ phpversion: 5.3.16
#~ md5_function: On (Vrai)
#~ gd_version: 2
#~ tempnam_function: On (Vrai)
#~ magic_quotes_runtime: Off (Faux)
#~ E_STRICT: 0
#~ E_DEPRECATED: 8192
#~ memory_limit: 128M
#~ max_execution_time: 120
#~ output_buffering: 4096
#~ safe_mode: Off (Faux)
#~ file_uploads: On (Vrai)
#~ post_max_size: 64M
#~ upload_max_filesize: 64M
#~ session_save_path: /tmp (1777)
#~ session_use_cookies: On (Vrai)
#~ xml_function: On (Vrai)
#~ xmlreader_class: On (Vrai)
#~ Server Information:
#~ Server Api: cgi-fcgi
#~ Server Db Type: MySQL (mysql)
#~ Server Db Version: 5.1.66
#~ Server Db Grants: Impossible de trouver un privilège "GRANT ALL". Cela peut signifier que vous pourriez avoir des problèmes pour installer ou retirer des modules, ou encore l 'ajout et la suppression d'éléments, y compris les pages.
#~ ----------------------------------------------
#~~~~~ FIN BLOC A NE PAS SUPPRIMER ~~~~~

----------------------------------------------------------

Bonjour à tous,
J'ai bien pris note de vos avertissements concernant les bases CSS et HTML...
Je ne suis pas capable d'évaluer mon niveau en ces matières.
Disons que je comprend à peu près tout ce que je lis dans les feuilles de codes, mais je ne sais pas pour autant intervenir sur tout !
La preuve :
Je reviens sur les Backgrounds...
Je cherche simplement une bg_couleur différentes par rubrique de menu.
En suivant vos différents conseils (et articles forum), j'ai pondu ceci dans ma feuille CSS - simplex Layout (qui ne donne rien) :
Code :
[== CSS ==]
/*--- esssai de background couleur différenciée ---*/
body {
    background: [[$how-cmsms-works]]
}
body.how-cmsms-works {
    background: #5f9ea0;
}

Il est plus que probable que mon code soit pourri... Mais n'y a t-il pas nécessité d’insérer également un code dans le gabarit Simplex ?
Merci pour vos conseils
Rolleyes
#1
Citation :#~~~~~ DEBUT BLOC A NE PAS SUPPRIMER ~~~~~
#~ Version du CMS: !1.11.6
#~ Hébergeur / Soft : OVH
#~ Informations Système :
#~ ----------------------------------------------
#~ Cms Version: 1.11.6
#~ Installed Modules:
#~ CMSMailer: 5.2.1
#~ CMSPrinting: 1.0.4
#~ FileManager: 1.4.3
#~ MenuManager: 1.8.5
#~ MicroTiny: 1.2.5
#~ ModuleManager: 1.5.5
#~ News: 2.12.12
#~ Search: 1.7.8
#~ ThemeManager: 1.1.8
#~ Gallery: 1.6.1
#~ Config Information:
#~ php_memory_limit:
#~ process_whole_template:
#~ output_compression:
#~ max_upload_size: 64000000
#~ url_rewriting: none
#~ page_extension:
#~ query_var: page
#~ image_manipulation_prog: GD
#~ auto_alias_content: true
#~ locale:
#~ default_encoding: utf-8
#~ admin_encoding: utf-8
#~ set_names: true
#~ Php Information:
#~ phpversion: 5.3.16
#~ md5_function: On (Vrai)
#~ gd_version: 2
#~ tempnam_function: On (Vrai)
#~ magic_quotes_runtime: Off (Faux)
#~ E_STRICT: 0
#~ E_DEPRECATED: 8192
#~ memory_limit: 128M
#~ max_execution_time: 120
#~ output_buffering: 4096
#~ safe_mode: Off (Faux)
#~ file_uploads: On (Vrai)
#~ post_max_size: 64M
#~ upload_max_filesize: 64M
#~ session_save_path: /tmp (1777)
#~ session_use_cookies: On (Vrai)
#~ xml_function: On (Vrai)
#~ xmlreader_class: On (Vrai)
#~ Server Information:
#~ Server Api: cgi-fcgi
#~ Server Db Type: MySQL (mysql)
#~ Server Db Version: 5.1.66
#~ Server Db Grants: Impossible de trouver un privilège "GRANT ALL". Cela peut signifier que vous pourriez avoir des problèmes pour installer ou retirer des modules, ou encore l 'ajout et la suppression d'éléments, y compris les pages.
#~ ----------------------------------------------
#~~~~~ FIN BLOC A NE PAS SUPPRIMER ~~~~~

----------------------------------------------------------

Bonjour à tous,
J'ai bien pris note de vos avertissements concernant les bases CSS et HTML...
Je ne suis pas capable d'évaluer mon niveau en ces matières.
Disons que je comprend à peu près tout ce que je lis dans les feuilles de codes, mais je ne sais pas pour autant intervenir sur tout !
La preuve :
Je reviens sur les Backgrounds...
Je cherche simplement une bg_couleur différentes par rubrique de menu.
En suivant vos différents conseils (et articles forum), j'ai pondu ceci dans ma feuille CSS - simplex Layout (qui ne donne rien) :
Code :
[== CSS ==]
/*--- esssai de background couleur différenciée ---*/
body {
    background: [[$how-cmsms-works]]
}
body.how-cmsms-works {
    background: #5f9ea0;
}

Il est plus que probable que mon code soit pourri... Mais n'y a t-il pas nécessité d’insérer également un code dans le gabarit Simplex ?
Merci pour vos conseils
Rolleyes
#2
Salut,
À mon avis le plus simple serait ceci :
Code :
[== HTML ==]
<body class="page-{$page_alias}">
Puis
Code :
[== CSS ==]
body.page-presentation {
   background-color : #FF0000 ;
}

body.page-prestations {
   background-color : #0000FF;
}

body.page-contact {
   background-color : #00FF00;
}

Sinon tu as la possibilité de rajouter des balises {content} dans tes gabarits pour définir la couleur depuis la page d'administration ou alors simplement un code couleur « perso ». Sur chaque page tu saisis un code couleur, ici « red » ou « blue ».

Par exemple une balise « code couleur » dans les gabarits :
Code :
[== SMARTY ==]
{content block="color_code" label="Code couleur" oneline="true" assign="color_code"}

Dans ton HTML :
Code :
[== HTML ==]
<body{if isset($color_code)} class="color-{$color_code}"{/if}>


Puis dans ton CSS :
Code :
[== CSS ==]
body.color-red{
   background-color : #FF0000;
}
body.color-blue {
   background-color : #0000FF;
}
Exacore - Freelance en communication
#2
Salut,
À mon avis le plus simple serait ceci :
Code :
[== HTML ==]
<body class="page-{$page_alias}">
Puis
Code :
[== CSS ==]
body.page-presentation {
   background-color : #FF0000 ;
}

body.page-prestations {
   background-color : #0000FF;
}

body.page-contact {
   background-color : #00FF00;
}

Sinon tu as la possibilité de rajouter des balises {content} dans tes gabarits pour définir la couleur depuis la page d'administration ou alors simplement un code couleur « perso ». Sur chaque page tu saisis un code couleur, ici « red » ou « blue ».

Par exemple une balise « code couleur » dans les gabarits :
Code :
[== SMARTY ==]
{content block="color_code" label="Code couleur" oneline="true" assign="color_code"}

Dans ton HTML :
Code :
[== HTML ==]
<body{if isset($color_code)} class="color-{$color_code}"{/if}>


Puis dans ton CSS :
Code :
[== CSS ==]
body.color-red{
   background-color : #FF0000;
}
body.color-blue {
   background-color : #0000FF;
}
Exacore - Freelance en communication
#3
Bonjour,
et merci... je vais essayer, cela me semble une réponse précise et précieuse!!!
Une question toutefois avant de faire une éventuelle erreur :
Quand tu dis "Dans ton HTML", tu veux dire que j'interviens dans le Gabarit même de mon site (en l'occurence : SIMPLEX), n'est-ce pas ?


encore merci
Rolleyes
#3
Bonjour,
et merci... je vais essayer, cela me semble une réponse précise et précieuse!!!
Une question toutefois avant de faire une éventuelle erreur :
Quand tu dis "Dans ton HTML", tu veux dire que j'interviens dans le Gabarit même de mon site (en l'occurence : SIMPLEX), n'est-ce pas ?


encore merci
Rolleyes
#4
jcpapa a écrit :et précieuse!!!
Une question toutefois avant de faire une éventuelle erreur :
Quand tu dis "Dans ton HTML", tu veux dire que j'interviens dans le Gabarit même de mon site (en l'occurence : SIMPLEX), n'est-ce pas ?

Effectivement tu interviens sur le gabarit que tu utilises.
Attention cependant, si ta balise « body » ne contient pas de classe CSS alors cette ligne fonctionnera :
Code :
[== HTML ==]
<body{if isset($color_code)} class="color-{$color_code}"{/if}>

Sinon, si une ou plusieurs classes CSS sont associés à la balise « body » il faudra les garder comme ceci (dans le cas où les classes se nomment « class1 » et « class2 » :
Code :
[== HTML ==]
<body class="class1 class2{if isset($color_code)} color-{$color_code}{/if}">

Je ne pourrais pas être plus précis avec le gabarit « Simplex » car je n'ai jamais utilisé un gabarit déjà fait.
Exacore - Freelance en communication
#4
jcpapa a écrit :et précieuse!!!
Une question toutefois avant de faire une éventuelle erreur :
Quand tu dis "Dans ton HTML", tu veux dire que j'interviens dans le Gabarit même de mon site (en l'occurence : SIMPLEX), n'est-ce pas ?

Effectivement tu interviens sur le gabarit que tu utilises.
Attention cependant, si ta balise « body » ne contient pas de classe CSS alors cette ligne fonctionnera :
Code :
[== HTML ==]
<body{if isset($color_code)} class="color-{$color_code}"{/if}>

Sinon, si une ou plusieurs classes CSS sont associés à la balise « body » il faudra les garder comme ceci (dans le cas où les classes se nomment « class1 » et « class2 » :
Code :
[== HTML ==]
<body class="class1 class2{if isset($color_code)} color-{$color_code}{/if}">

Je ne pourrais pas être plus précis avec le gabarit « Simplex » car je n'ai jamais utilisé un gabarit déjà fait.
Exacore - Freelance en communication
#5
Ok, merci beaucoup, beaucoup...
Je vais essayer tout ça et reviendrai pour afficher mes résultats.
Bonne journée (soleil) Big Grin
Rolleyes
#5
Ok, merci beaucoup, beaucoup...
Je vais essayer tout ça et reviendrai pour afficher mes résultats.
Bonne journée (soleil) Big Grin
Rolleyes
#6
Bonjour,
J'ai essayé toutes les manières pour parvenir à changer le background-color de mes pages en fonction du menu mais rien ne fonctionne.
Je pense qu'il y a un problème avec le Gabarit Simplex. Bien sûr le problème vient de la limite de mes connaissance, pas du gabarit. Il doit y avoir quelque chose qui bloque...
Voici le code du gabarit simplex :
Code :
[== HTML ==]
{strip}
{process_pagedata}

{* With cms_lang_info we retrieve current language information, assign gives us $nls variable we can work with *}
{cms_lang_info assign='nls'}

{* using strip as we don't want useless whitespace, especially not before doctype *}
{/strip}<!doctype html>
<html lang='{if isset($nls)}{$nls->htmlarea()}{/if}' dir='{if isset($nls)}{$nls->direction()}{/if}'>
<head>
<meta charset='{if isset($nls)}{$nls->encoding()}{/if}'>
<title>{title} - {sitename}</title>
<meta name='viewport' content='initial-scale=1.0 maximum-scale=1.0 user-scalable=no' />
<meta name='HandheldFriendly' content='true' />
{* Don't remove this! Metadata is entered in Site Admin/Global settings. *}
{metadata}
{* See in news detail template how cannonical url can be assigned from module *}
{if isset($canonical)}<link rel='canonical' href='{$canonical}' />{elseif isset($content_obj)}<link rel='canonical' href='{$content_obj->GetURL()}' />{/if}
{* This is how all the stylesheets attached to this template are linked to *}
{cms_stylesheet}
{* using google fonts *}
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300,300italic' rel='stylesheet' type='text/css'>
{* learning IE lower then Version 9 some html5 *}
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
{* Relational links for interconnections between pages, good for accessibility and Search Engine Optmization *}
{cms_selflink dir='start' rellink='1'}
{cms_selflink dir='prev' rellink='1'}
{cms_selflink dir='next' rellink='1'}
</head>
<body id='boxed{if isset($color_code)} color-{$color_code}{/if}'>

<!-- essai de fond différencié (début) -->
<body{if isset($color_code)} class="color-{$color_code}"{/if}>
<!-- essai de fond différencié (fin) -->

<!-- #wrapper (wrapping content in a box) -->
<div class='container centered' id='wrapper'>
    <!-- accessibility links, jump to nav or content -->
    <ul class="visuallyhidden">
        <li>{anchor anchor='nav' title='Skip to navigation' accesskey='n' text='Skip to navigation'}</li>
        <li>{anchor anchor='main' title='Skip to content' accesskey='s' text='Skip to content'}</li>
    </ul>
    <!-- accessibility //-->
    <!-- .top (top section of page containing logo, navigation search...) -->
    <header class='top'>
        <div class='row header'>
            <!-- .logo (cmsms logo on the left side) -->
            <div class='logo grid_4'>
                <a href='{root_url}' title='{sitename}'>
                    <img src='{uploads_url}/simplex/images/logo1.gif' width='156' height='140' alt='{sitename}' />
                    <!-- <span class='palm'></span> //-->
                </a>
            </div>
            <!-- .logo //-->
            <!-- .main-navigation (main navigation on the right side) -->
            <nav class='main-navigation grid_8 noprint' id='nav' role='navigation'>
                {menu template='Simplex_Navigation.tpl'}
            </nav>
            <!-- .main-navigation //-->
        </div>
        <!-- .header-bottom (bottom part of header containing catchphrase and search field) -->
        <div class='row header-bottom'>
            <section class='phrase'>
                <span class='grid_7'>Les Arts du coin... Du graphisme à la Terre.</span>
                {strip}
                {search assign='is_search'}{* assigned search module tag, now we can build different search template for this site template and have fun with html5, Read http://www.w3.org/TR/html-markup/input.search.html for full attirbute specs *}
                {if isset($is_search)}
                <div class='grid_5 search noprint' role='search'>
                        {$startform}
                        <label for='{$search_actionid}searchinput' class='visuallyhidden'>{$searchprompt}:</label>
                            <input type='search' class='search-input' id='{$search_actionid}searchinput' name='{$search_actionid}searchinput' size='20' maxlength='50' value='' placeholder='{$searchtext}' />
                            {if isset($hidden)}{$hidden}{/if}
                        {$endform}
                </div>
                {/if}{/strip}
            </section>
        </div>
        <div class='clear'></div>
        <!-- .header-bottom //-->
        <!-- .banner (banner area for a slider or teaser image) -->
        <section class='banner row noprint' role='banner'>
            <!-- <div class='banner-text'>
                <ul>
                    <li>Graphisme</li>
                    <li>Céramique</li>
                    <li>Peinture</li>
<li>...</li>
                </ul>
            </div> //-->
            <div class='banner-image cf'>
            {strip}
                {* you do not need a module for every simple site functionality. For example you can build a simple slideshow
                with php glob function (http://www.php.net/manual/en/function.glob.php) without wasting your system resources
                by using modules or plugins.
                Below would search for files matching .jpg in folder named teaser in simplex theme folder *}
                {assign var='teaser' value='uploads/simplex/teaser/*.jpg'|glob}
                    {foreach from=$teaser item='one'}
                        <div><img src='{root_url}/{$one}' width='852' height='275' alt='' /></div>
                    {/foreach}
            {/strip}
            </div>
        </section>
        <!-- .banner //-->
    </header>
    <!-- .top //-->
    <!-- .content-wrapper (wrapping div for content area) -->
    <div class='content-wrapper cf'>
        <!-- .content (display content first) -->
        <div class='content-inner grid_8 push_4'>
            <!-- .content-top (breadcrumbs and print button) -->
            <div class='content-top cf' itemscope itemtype='http://data-vocabulary.org/Breadcrumb'>            
                {* menu manager has action breadcrumbs since 1.11, you can use {cms_breadcrumbs} tag or {menu action='breadcrumbs'} as below *}
{*ci-dessous affichage de l'url de page*}              
{*menu action='breadcrumbs'*}                
                {* print tag from CMSPrinting Module *}
                {print showbutton='false' class='printbutton noprint'}                
            </div>
            <!-- .content-top //-->
            <!-- .content (actual content with title and content tags) -->
            <article class='content' id='main' role='main'>
                <h1>{title}</h1> {* title tag *}
                    {content} {* content entered in page editor area *}
            </article>
            <!-- .content //-->
        </div>
        <!-- .content-inner //-->
        <!-- .sidebar (then show sidebar) -->
        <aside class='sidebar grid_4 pull_8'>
            {* sample of using News Module tag for summary of latest two articles *}
            {news summarytemplate='Summary_Simplex' number='2' detailpage='news' detailtemplate='Simplex_Detail'}
        </aside>
        <!-- .sidebar //-->
        <div class='cf grid_8 prefix_4'>
            <span class='previous'>{cms_selflink dir='previous'}</span>
            <span class='next'>{cms_selflink dir='next'}</span>
        </div>
    </div>
    <!-- .content-wrapper //-->
    <!-- .footer (footer area) -->
    <footer class='row footer'>
        <span class='back-top'>{anchor anchor='main' text='&uarr;'}</span>
        <section class='grid_4 copyright'>
            <ul class='social cf'>
                <li class='twitter'><a title='Twitter' href='http://twitter.com/#!/cmsms'>Twitter</a></li>
                <li class='facebook'><a title='Facebook' href='https://www.facebook.com/cmsmadesimple'>Facebook</a></li>
                <li class='linkedin'><a title='LinkedIn' href='http://www.linkedin.com/groups?gid=1139537'>LinkedIn</a></li>
                <li class='youtube'><a title='YouTube' href='http://www.youtube.com/user/cmsmadesimple'>YouTube</a></li>
            </ul>
            {global_content name='footer'}
        </section>
        <section class='grid_8 noprint'>
            <nav class='footer-navigation row'>
                {menu template='Simplex_Navigation.tpl' excludeprefix='home' number_of_levels='2' loadprops='0'}
            </nav>
        </section>
    </footer>
    <div class='clear'></div>
</div>
<!-- #wrapper //-->
{cms_jquery exclude='jquery-ui.min.js,jquery.ui.nestedSortable.js,jquery.json.min.js' append='uploads/simplex/js/functions.min.js'}
</body>
</html>


-------------------
Et voici le CSS Simplex Layout :
Code :
[== CSS ==]
@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed);
[[strip]][[* using strip in stylesheet to remove unneeded empty space, will reduce the file size *]]

[[* APPEARANCE *]]
[[*
By adding #boxed id to body tag you can easily change appearance of the site.
This would add a background image to body and content would be wrapped in a box.
By removing that id the background is removed and site is presented in white.

How: Go to Template -> Simplex and find <body>
Now simply edit as following <body id='boxed'>

You can as well reposition your site by changing class on wrapping div.
Find in Simplex Template following:

<div class='container centered' id='wrapper'>

Now change "centered" to "left" or "right" and page will be left or right aligned.
*]]

[[* assign the images path to a variable *]]
[[capture assign='path']][[uploads_url]]/simplex/images[[/capture]]

[[* COLORS *]]
[[*assign var='boxed_bg' value="#d1d1d1 url(`$path`/full_screen-02.jpg)"*]]
[[assign var='light_grey' value='#f1f1f1']]
[[assign var='grey' value='#e9e9e9']]
[[assign var='dark_grey' value='#555']]
[[assign var='white' value='#fff']]
[[assign var='orange' value='#f39c2c']]
[[assign var='dark_orange' value='#e6870e']]
[[assign var='yellow' value='#fdbd34']]
[[assign var='bordeau' value='#b5454e']]


/* =====================================
BASIC STYLES
===================================== */
body {
    /*background: [[$white]];*/
    font-family: sans-serif; /* sans-serif falls back to default OS and Browser font, usually Arial or Helvetica and so on */
    font-size: 12px;
    color: [[$dark_grey]];
    line-height: 1.3
}
body:before { content: "";
position: fixed;
top: -10px;
left: 0;
width: 100%;
height: 10px;
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
box-shadow: 0px 0px 10px rgba(0,0,0,.8);
z-index: 100;
}
/*--- esssai de background couleur différencié ---*/
body.color-red{
   background-color : #FF0000;
}
body.color-blue {
   background-color : #0000FF;
}
/* ------------------------------------------------- */

/* you can change appearance of the page by adding or removing #boxed id to body tag. */
/* body#boxed {
    background: [[$boxed_bg]] no-repeat
} */


/* add some space inside the boxed container */
#boxed .container {
    padding: 0 1%
}
a img {
    border: none
}
/* you can use these classes to align images to left or right */
.right {
    float: right
}
.left {
    float:left
}
/* if image needs some space add this class to img tag
* so at the end a left floating image would be <img src='some.jpg' class='left spacing' alt='foo' />
*/
.spacing {
    margin: 10px
}
.spacing.left {
    margin: 10px 10px 10px 0
}
.spacing.right {
    margin: 10px 0 10px 10px
}
/* or add a 2 px border to image or something, change as you need it */
.border {
    border: 2px solid [[$grey]]
}
/* some styling for code chunks */
code, samp, kbd {
    font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', monospace;
    color: [[$dark_grey]]
}
pre code {
    line-height: 1.4;
    font-size: 11px
}
pre {
    padding: 10px;
    margin: 10px 0;
    overflow: auto;
    width: 93%;
    background: [[$light_grey]];
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -o-border-radius: 6px
}
/* target IE7 and IE6 */
*:first-child+html pre {
    padding-bottom: 20px;
    overflow-y: hidden;
    overflow: visible;
    overflow-x: auto
}
* html pre {
    padding-bottom: 20px;
    overflow: visible;
    overflow-x: auto
}
/* horizontal ruler */
hr {
    border: solid [[$grey]];
    border-width: 1px 0 0 0;
    clear: both;
    margin: 10px 0 30px 0;
    height: 0
}
/* =====================================
COMMON TYPOGRAPHY
===================================== */

/* link default styles */
a {
    color: [[$bordeau]];
}
a:visited {  
    color: [[$bordeau]]
}
a:hover {
    color: [[$dark_grey]];
    transition: transform 0.6s ease-out;
    -webkit-transition: color 0.6s ease-out;
    -moz-transition: color 0.6s ease-out;
    -o-transition: color 0.6s ease-out;    
    text-decoration: underline
}
a:focus {
    outline: thin dotted
}
a:hover, a:active {
    outline: 0
}
/* add icon to links with class external */
a.external span {
    display: inline-block;
    width: 9px;
    height: 9px;
    text-indent: -999em;
    margin: 0 3px;
    /* using sprite image, but left as reference to single image
    background: transparent url([[$path]]/external-icon.png) no-repeat 0 0
    */
    background: transparent url([[$path]]/simplex-sprite.png) no-repeat -10px -130px;
}
a.external:hover span {
    background-position: -10px -139px
}
/* default heading styles */
h1,
h2,
h3,
h4 {
    font-family:'Open Sans Condensed', Arial Narrow Bold, sans-serif;
}
h1 {
    color: #B5454E;
    margin: 10px 0;
    font-size: 25px;
    text-transform: uppercase;
}
h2 {
    color: [[$dark_grey]];
    font-size: 22px
}
h3 {
    color: [[$dark_grey]];
    font-weight: 700;
    font-size: 18px
}
h4 {
    color: [[$dark_grey]];
    font-weight: 700;
    font-size: 16px;

}
/* blockquotes and cites */
blockquote,
blockquote p {
    font-size: 14px;
    line-height: 1.5;
    color: [[$dark_grey]];
    font-style: italic;
    font-family: Georgia, Times New Roman, serif
}
blockquote {
    margin: 0 0 20px 0;
    padding: 9px 10px 10px 19px;
    border-left: 5px solid [[$light_grey]]
}
blockquote cite {
    display: block;
    font-size: 12px;
    color: [[$dark_grey]]
}
blockquote cite:before {
    content: "\2014 \0020";
}
blockquote cite a,
blockquote cite a:visited,
blockquote cite a:visited {
    font-family: Georgia, Times New Roman, serif;    
}

/* =====================================
LAYOUT
===================================== */
/* wrapping the page in a box */
#wrapper {
    margin-top: 10px;
    /* border-top: 5px solid [[$orange]] */
filter:alpha(opacity=85);
-moz-opacity:0.85;
opacity: 0.85;

-moz-border-radius: 17px;
-webkit-border-radius: 17px;
border-radius: 17px;
/*IE 7 AND 8 DO NOT SUPPORT BORDER RADIUS*/
-moz-box-shadow: 3px 3px 4px #000000;
-webkit-box-shadow: 3px 3px 4px #000000;
box-shadow: 3px 3px 4px #000000;
filter: progid:DXImageTransform.Microsoft.Shadow(strength = 3, direction = 135, color = '#000000');
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(strength = 3, Direction = 135, Color = '#000000')";
/*Shadows look very different in IE (Only cardinal directions supported)*/
/*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
/*Element should have a background-color*/
/*All filters must be placed together*/
/*IE 7 AND 8 DO NOT SUPPORT BLUR PROPERTY OF SHADOWS*/
opacity: 0.9;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity = 85);
/*-ms-filter must come before filter*/
filter: alpha(opacity = 85);
/*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
/*All filters must be placed together*/

}
/* you can switch appearance of the page by adding or removing id #boxed to body tag */
#boxed #wrapper {
    background: [[$white]];
    box-shadow: 2000px 1500px 8px [[$dark_grey]]
}
  
/* ------ HEADER SECTION ------ */
/* if you need height or something for header part add style here */
.header {

}
/* the logo */
.logo {
    margin-top: 12px;
    position: relative
}
/* having some fun with palm, rotating with css3, will not work in IE */
.logo .palm {
    position: absolute;
    top: 5px;
    left: 45px;
    /* using sprite image as background, left as reference to single image
    background: url([[$path]]/palm-circle.png) no-repeat;
    */
    background: url([[$path]]/simplex-sprite.png) no-repeat -10px -10px;
    display: block;
    width: 48px;
    height: 48px;
    transition: transform 0.6s ease-out;    
    -webkit-transition: -webkit-transform 0.6s ease-out;
    -moz-transition: -moz-transform 0.6s ease-out;
    -o-transition: -o-transform 0.6s ease-out;
    -webkit-perspective: 1000;
    -webkit-backface-visibility: hidden;    
}
/* css3 transform rotating palm on hover */
.logo a:hover .palm {
    transform: rotate(360deg);    
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg)  
}
.top .header {
    border-bottom: 1px solid [[$light_grey]]
}

/* ------ NAVIGATION ------ */

/* first level */
nav.main-navigation {
    z-index: 990;
    height: 55px;
    line-height: 37px;
    margin-top: 20px;
}
nav.main-navigation > ul {
    float:right;
    padding: 0
}
nav.main-navigation > ul > li {
    float: left;
    padding: 0;
    margin:0 12px;
    position: relative
}
nav.main-navigation > ul > li:first-child,
nav.main-navigation > ul > li.first {
    margin-left: 0
}
nav.main-navigation > ul > li:last-child,
nav.main-navigation > ul > li.last {
    margin-right: 0
}
nav.main-navigation > ul > li > a,
nav.main-navigation > ul > li.sectionheader span {
    font-family:'Open Sans Condensed', Arial Narrow Bold, sans-serif;
    color: [[$dark_grey]];
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase
}
/* Second Level */
nav.main-navigation ul li ul {
    top: -999em;
    left: -999em;
    position: absolute;
    display: block;
    height: 0px;
    width: 200px;  
    padding: 10px;
    background: [[$white]];
    background: rgba(255,255,255,.95);    
    box-shadow: 1px 1px 8px [[$dark_grey]];
    -webkit-box-shadow: 1px 1px 8px [[$dark_grey]];
    -moz-box-shadow: 1px 1px 8px [[$dark_grey]];
    -o-box-shadow: 1px 1px 8px [[$dark_grey]];
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -o-border-radius: 6px;
    border: 1px solid [[$grey]]
}
nav.main-navigation > ul > li:hover > ul {    
    height: auto;
    z-index: 9999;
    top: 37px;
    right: 0;
    left: auto;
    display: block
}
nav.main-navigation ul ul li {
    position: relative;
    line-height: 1;
    margin: 0;
    padding: 0;
    border-bottom: 1px dotted [[$grey]]
}
/* third level */
nav.main-navigation > ul > li > ul > li:hover > ul {
    height: auto;
    top: 0;
    right: auto;
    left: -210px;
    z-index: 999;    
    display: block
}
/* navigation text color */
nav.main-navigation ul li li a,
nav.main-navigation ul li li.sectionheader span {
    padding: 6px 12px;
    font-family: sans-serif;
    text-transform: none;
    font-weight: normal;
    font-size: 12px;
    text-decoration: none;
    color: [[$dark_grey]];
    display: block
}
nav.main-navigation a:hover,
nav.main-navigation a.current,
nav.main-navigation li.sectionheader span:hover,
nav.main-navigation li.sectionheader span.current,
nav.main-navigation li.sectionheader span.parent,
nav.main-navigation ul ul li a:hover,
nav.main-navigation ul ul li a.current {
    color: [[$bordeau]]
}
/* bottom part of header*/
.header-bottom {
    height: 55px;
    line-height: 55px
}
/* catchphrase */
.phrase span {
    font-family:'Open Sans Condensed', Arial Narrow Bold, sans-serif;
    text-transform: none;
    color: gray;
    font-size: 15px;
    font-weight: 700
}
/* search */
.search {
    text-align: right;
}
/* webkit browser add icons to input of type search, we dont want it here now */
input.search-input::-webkit-search-decoration,
input.search-input::-webkit-search-results-button,
input.search-input::-webkit-search-results-decoration {
    -webkit-appearance:none
}
/* styling the search input field */
input.search-input {
    border: 1px solid [[$light_grey]];  
    height: 17px;
    line-height: 17px;
    outline: 0;
    margin: 13px 0 0 0;
    width: 165px;
    padding: 5px 0 3px 35px;
    font-size: 11px;
    color: [[$dark_grey]];
    transition: all .35s ease-in-out;
    -webkit-transition: all .35s ease-in-out;
    -moz-transition: all .35s ease-in-out;
    -o-transition: all .35s ease-in-out;
    /* using sprite image, left as reference to single image
    background: [[$white]] url([[$path]]/search-icon.png) 10px 50% no-repeat
    */
    background: [[$white]] url([[$path]]/simplex-sprite.png) 0px -434px no-repeat
}
input.search-input:focus {
    border: 1px solid [[$orange]];
    width: 240px;      
    box-shadow: 0 0 3px [[$orange]];    
    -webkit-box-shadow: 0 0 3px [[$orange]];
    -moz-box-shadow: 0 0 3px [[$orange]];
    -o-box-shadow: 0 0 3px [[$orange]];
}
  
/* ------ BANNER AREA ------ */
/* ------
.banner {
    overflow: hidden;
    background: [[$orange]]
}
/* left text in orange box */
.banner-text {
    padding:0 0 0 1%;
    position: relative;
    float: left;
    max-height: 275px;
    width: 30.333%
}
.banner-text ul {
    padding: 32px 0;
}
.banner-text li {
    list-style: none;
    display: block;
    color: [[$dark_orange]];
    text-shadow: 0px 1px 0 [[$yellow]], 0 -1px 0 rgba(0,0,0,0.3);
    font-size: 36px;
    font-weight: 700;
    transition: all 2s linear;
    -webkit-transition: all 1.5s linear;
    -moz-transition: all 1.5s linear;
    -o-transition: all 1.5s linear;
    display: block
}
/* animating unordered list text in banner */
.banner-text li:hover {
    text-indent: 120px;
    opacity: 0;
    transform: scale(2) rotate(35deg);
    -webkit-transform: scale(2) rotate(35deg);
    -moz-transform: scale(2) rotate(35deg);
    -o-transform: scale(2) rotate(35deg)
}
/* images on the right */
.banner-image {
    float:right;
    display: block;
    position: relative;
    width: 67.667%;
    overflow: hidden;
    background: [[$grey]]
}
.banner-image div {
    position: absolute;
    z-index: 0;
    width: 100%;
    min-height: 100px;
    overflow: hidden;
    display: block;
    top: 0;
    left: 0
}
.banner-image img {
    display: block;
    height: auto;
    width: 100%;
    bottom: 0;
    max-width: 100%;
}
------ */

/* ------ CONTENT AREA ------ */
.content-wrapper {
    padding-top: 20px
}
.content-top {
    background: url([[$path]]/dots.gif) repeat-x 0 50%;
    font-family: Georgia, Times New Roman, serif;
    color: [[$dark_grey]];
    font-style: italic;
    line-height: 20px
}

/* breadcrumbs */
.breadcrumb {
    display: inline-block;
    background: [[$white]];
    width: auto;
    padding-right: 6px
}
.breadcrumb a {
    color: [[$dark_grey]];
    display: inline-block;
    width: auto;
    background: [[$white]]
}

/* print button */
a.printbutton {
    display: block;
    padding-left: 6px;
    width: 16px;
    height: 16px;
    float:right;
    text-indent: -999em;
    /* using sprite image, left as reference to single image
    background: [[$white]] url([[$path]]/print-icon.png) no-repeat 6px -16px;
    */
    background: [[$white]] url([[$path]]/simplex-sprite.png) no-repeat -4px -94px;
    transition: all 0.2s ease-out;    
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out    
}
a.printbutton:hover {
    /* using sprite image, left as reference to single image
    background: [[$white]] url([[$path]]/print-icon.png) no-repeat 6px 0;
    */
    background: [[$white]] url([[$path]]/simplex-sprite.png) no-repeat -4px -78px;
}

/* news module summary -> content */
.content .news-summary  span.heading {
    display: none
}
.content .news-article {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px dotted [[$grey]]
}
.content .news-summary ul.category-list {
    margin: 15px 0
}
.content .news-summary ul.category-list li a,
.news-summary ul.category-list li span {
    border-radius: 4px
}
.news-summary ul.category-list li span {
    opacity: .4
}
/* news module summary -> sitewide (content + sidebar) */
/* article heading */
.news-article h2 {
    margin: 0 0 15px 0
}
.news-article h2 a {
    font-family:'Open Sans Condensed', Arial Narrow Bold, sans-serif;
    text-transform: uppercase;
    color: [[$dark_grey]];
    font-size: 16px;
    text-decoration: none;
    font-weight: 700
}
/* date circle, well square for IE  */
.news-article .date {
    background: [[$orange]];
    color: [[$white]];
    display: block;
    float:left;
    width: 40px;
    padding: 6px;
    height: 40px;
    border-radius: 26px;
    text-align: center;
    font-family: Georgia, Times New Roman, serif
}
.news-article .day {
    font-size: 20px;
    line-height: 1;
    padding-bottom: 2px;
    font-style: italic;
    display: block
}
.news-article.month {
    font-size: 11px;
    display: block
}
/* author and category */
.news-article .author,
.news-article .category {
    font-family: Georgia, Times New Roman, serif;
    display: block;
    padding-left: 60px;
    font-size: 11px;
    font-style: italic
}
/* category list on top of summary */
.news-summary ul.category-list {
    margin:15px 0 0 0;
    padding:0;
    list-style: none
}
.news-summary ul.category-list li {
    float:left;
    display: block;
    width: auto;
    margin-right: 5px
}
.news-summary ul.category-list li a,
.news-summary ul.category-list li span {
    display: block;
    color: [[$dark_grey]];
    padding: 4px 8px;
    background: [[$light_grey]];
    border-radius: 4px 4px 0 0;
    text-decoration: none;
    font-size: 11px;
    text-transform: uppercase
}
.news-summary ul.category-list li a:hover {
    color: [[$orange]]
}
.news-summary .paginate {
    font: italic 11px/1.2 Georgia, Times New Roman, serif;
    
}
.news-summary .paginate a {
    padding: 0 3px;
}
.news-meta {
    background: [[$light_grey]];
    padding: 10px;
    margin: 10px 0
}
/* more link */
.more,
.more a,
/* back link */
.back,
.back a,
/* previous, next links */
.previous a,
.next a,
.previous,
.next {
    font:  italic 12px/1.3 Georgia, Times New Roman, serif;
    color: [[$dark_grey]];
    text-decoration: none
}
/* hover behavior of more, next, previous links */
.more a:hover,
.back a:hover,
.previous a:hover,
.next a:hover {
    text-decoration: underline
}
.previous,
.next {
    padding: 6px 0;
}
/* align next link to right */
.previous {
    float:left;
}
.next {
    float: right
}

/* ------ SIDEBAR AREA ------ */

/* news module summary -> sidebar */
.sidebar .news-summary  span.heading {
    background: url([[$path]]/dots.gif) repeat-x 0 50%;
    color: [[$dark_grey]];
    font:  normal 16px/20px Georgia, Times New Roman, serif;
    margin: 0 0 15px 0;
    display: block
}
.sidebar .news-summary .heading span {
    display: inline-block;
    width: auto;
    background: [[$white]];
    padding-right: 6px
}
.sidebar .news-article {
    padding: 15px;
    position: relative;
    background: [[$light_grey]];
    margin-bottom: 20px;
    border-radius: 0 0 6px 0
}
/* creating a bubble box with css3 */
.sidebar .news-article:before {
    content:'';
    position: absolute;
    bottom: -15px;
    right: 25px;
    width: 10px;
    height: 35px;
    -webkit-transform: rotate(55deg) skewY(55deg);
    -moz-transform: rotate(55deg) skewY(55deg);
    -o-transform: rotate(55deg) skewY(55deg);
    -ms-transform: rotate(55deg) skewY(55deg);
    transform: rotate(55deg) skewY(55deg);
    background: [[$light_grey]]
}

/* ------ FOOTER AREA ------ */
/* footer wrapper */
.footer {
    position: relative;
    background: transparent url([[$path]]/footer-background.png) repeat-x top;
    border-bottom: 1px dotted [[$grey]];
    margin: 25px 0 10px 0;
    padding: 20px 0
}
/* copyright text */
.copyright {
    padding-top: 15px
}
.copyright p,
.copyright a {
    color: [[$dark_grey]];
    font-size: 11px
}
/* social icons */
.footer ul.social {
    padding: 0;
    margin: 0
}
.footer .social li {
    float:left;
    margin: 0;
    padding: 0;
    list-style: none;
    margin-right: 6px
}
.footer .social li a {
    display: block;
    width: 24px;
    height: 24px;
    transition: all 0.2s ease-out;    
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;    
    text-indent: -999em
}
.footer .social li.facebook a {
    /* using sprite image, left as reference to single image
    background: transparent url([[$path]]/facebook-icon.png) no-repeat 0 -24px
    */
    background: transparent url([[$path]]/simplex-sprite.png) no-repeat -10px -260px
}
.footer .social li.facebook a:hover {
    /* using sprite image, left as reference to single image
    background: transparent url([[$path]]/facebook-icon.png) no-repeat 0 0
    */
    background: transparent url([[$path]]/simplex-sprite.png) no-repeat -10px -236px
}
.footer .social li.twitter a {
    /* background: transparent url([[$path]]/twitter-icon.png) no-repeat 0 -24px */
    background: transparent url([[$path]]/simplex-sprite.png) no-repeat -10px -192px
}
.footer .social li.twitter a:hover {
    /* background: transparent url([[$path]]/twitter-icon.png) no-repeat 0 0 */
    background: transparent url([[$path]]/simplex-sprite.png) no-repeat -10px -168px
}
.footer .social li.linkedin a {
    /* background: transparent url([[$path]]/linkedin-icon.png) no-repeat 0 -24px */
    background: transparent url([[$path]]/simplex-sprite.png) no-repeat -10px -328px
}
.footer .social li.linkedin a:hover {
   /*  background: transparent url([[$path]]/linkedin-icon.png) no-repeat 0 0 */
   background: transparent url([[$path]]/simplex-sprite.png) no-repeat -10px -304px
}
.footer .social li.youtube a {
    /* background: transparent url([[$path]]/youtube-icon.png) no-repeat 0 -24px */
    background: transparent url([[$path]]/simplex-sprite.png) no-repeat -10px -396px
}
.footer .social li.youtube a:hover {
    /* background: transparent url([[$path]]/youtube-icon.png) no-repeat 0 0 */
    background: transparent url([[$path]]/simplex-sprite.png) no-repeat -10px -372px
}
/* back to top anchor */
.back-top a {
    display: inline-block;
    width: auto;
    padding: 8px;
    border-left: 5px solid [[$white]];
    border-right: 5px solid [[$white]];
    font:  normal italic 11px/20px Georgia, Times New Roman, serif;
    text-decoration: none;
    color: [[$dark_grey]];
    background: [[$light_grey]];
    color: [[$dark_grey]];
    border-radius: 10px 0 10px 0;
    -webkit-border-radius: 10px 0 10px 0;
    -moz-border-radius: 10px 0 10px 0;
    -o-border-radius: 10px 0 10px 0;
    position: absolute;
    top: -14px;
    left: 48%
}
/* Footer navigation */
.footer-navigation {
    padding-top: 15px
}
.footer-navigation > ul > li {
    float:left;
    width: 32.333%
}
.footer-navigation > ul > li > a,
.footer-navigation > ul > li span.sectionheader {
    font-family:'Open Sans Condensed', Arial Narrow Bold, sans-serif;
    text-transform: uppercase;
    color: [[$dark_grey]];
    text-decoration: none;
    display: block
}
/* second level */
.footer-navigation > ul ul {
    margin-top: 10px
}
.footer-navigation > ul > li li {
    float: none;
    width: 100%;
    display: block
}
.footer-navigation > ul > li li a,
.footer-navigation > ul > li.sectionheader li a,
.footer-navigation > ul > li li span.sectionheader  {
    text-decoration: none;
    font-family: sans-serif;
    font-weight: normal;
    text-transform: none;
    display: block;
    padding: 2px 0;
    color: [[$dark_grey]]
}
.footer-navigation > ul > li li a:hover {
    color: [[$orange]]
}

[[/strip]]

-----------------------
La faille doit se trouver dans le gabarit, mais toutes mes manipulations n'ont pour l'instant, rien donné. :/
Rolleyes
#6
Bonjour,
J'ai essayé toutes les manières pour parvenir à changer le background-color de mes pages en fonction du menu mais rien ne fonctionne.
Je pense qu'il y a un problème avec le Gabarit Simplex. Bien sûr le problème vient de la limite de mes connaissance, pas du gabarit. Il doit y avoir quelque chose qui bloque...
Voici le code du gabarit simplex :
Code :
[== HTML ==]
{strip}
{process_pagedata}

{* With cms_lang_info we retrieve current language information, assign gives us $nls variable we can work with *}
{cms_lang_info assign='nls'}

{* using strip as we don't want useless whitespace, especially not before doctype *}
{/strip}<!doctype html>
<html lang='{if isset($nls)}{$nls->htmlarea()}{/if}' dir='{if isset($nls)}{$nls->direction()}{/if}'>
<head>
<meta charset='{if isset($nls)}{$nls->encoding()}{/if}'>
<title>{title} - {sitename}</title>
<meta name='viewport' content='initial-scale=1.0 maximum-scale=1.0 user-scalable=no' />
<meta name='HandheldFriendly' content='true' />
{* Don't remove this! Metadata is entered in Site Admin/Global settings. *}
{metadata}
{* See in news detail template how cannonical url can be assigned from module *}
{if isset($canonical)}<link rel='canonical' href='{$canonical}' />{elseif isset($content_obj)}<link rel='canonical' href='{$content_obj->GetURL()}' />{/if}
{* This is how all the stylesheets attached to this template are linked to *}
{cms_stylesheet}
{* using google fonts *}
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300,300italic' rel='stylesheet' type='text/css'>
{* learning IE lower then Version 9 some html5 *}
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
{* Relational links for interconnections between pages, good for accessibility and Search Engine Optmization *}
{cms_selflink dir='start' rellink='1'}
{cms_selflink dir='prev' rellink='1'}
{cms_selflink dir='next' rellink='1'}
</head>
<body id='boxed{if isset($color_code)} color-{$color_code}{/if}'>

<!-- essai de fond différencié (début) -->
<body{if isset($color_code)} class="color-{$color_code}"{/if}>
<!-- essai de fond différencié (fin) -->

<!-- #wrapper (wrapping content in a box) -->
<div class='container centered' id='wrapper'>
    <!-- accessibility links, jump to nav or content -->
    <ul class="visuallyhidden">
        <li>{anchor anchor='nav' title='Skip to navigation' accesskey='n' text='Skip to navigation'}</li>
        <li>{anchor anchor='main' title='Skip to content' accesskey='s' text='Skip to content'}</li>
    </ul>
    <!-- accessibility //-->
    <!-- .top (top section of page containing logo, navigation search...) -->
    <header class='top'>
        <div class='row header'>
            <!-- .logo (cmsms logo on the left side) -->
            <div class='logo grid_4'>
                <a href='{root_url}' title='{sitename}'>
                    <img src='{uploads_url}/simplex/images/logo1.gif' width='156' height='140' alt='{sitename}' />
                    <!-- <span class='palm'></span> //-->
                </a>
            </div>
            <!-- .logo //-->
            <!-- .main-navigation (main navigation on the right side) -->
            <nav class='main-navigation grid_8 noprint' id='nav' role='navigation'>
                {menu template='Simplex_Navigation.tpl'}
            </nav>
            <!-- .main-navigation //-->
        </div>
        <!-- .header-bottom (bottom part of header containing catchphrase and search field) -->
        <div class='row header-bottom'>
            <section class='phrase'>
                <span class='grid_7'>Les Arts du coin... Du graphisme à la Terre.</span>
                {strip}
                {search assign='is_search'}{* assigned search module tag, now we can build different search template for this site template and have fun with html5, Read http://www.w3.org/TR/html-markup/input.search.html for full attirbute specs *}
                {if isset($is_search)}
                <div class='grid_5 search noprint' role='search'>
                        {$startform}
                        <label for='{$search_actionid}searchinput' class='visuallyhidden'>{$searchprompt}:</label>
                            <input type='search' class='search-input' id='{$search_actionid}searchinput' name='{$search_actionid}searchinput' size='20' maxlength='50' value='' placeholder='{$searchtext}' />
                            {if isset($hidden)}{$hidden}{/if}
                        {$endform}
                </div>
                {/if}{/strip}
            </section>
        </div>
        <div class='clear'></div>
        <!-- .header-bottom //-->
        <!-- .banner (banner area for a slider or teaser image) -->
        <section class='banner row noprint' role='banner'>
            <!-- <div class='banner-text'>
                <ul>
                    <li>Graphisme</li>
                    <li>Céramique</li>
                    <li>Peinture</li>
<li>...</li>
                </ul>
            </div> //-->
            <div class='banner-image cf'>
            {strip}
                {* you do not need a module for every simple site functionality. For example you can build a simple slideshow
                with php glob function (http://www.php.net/manual/en/function.glob.php) without wasting your system resources
                by using modules or plugins.
                Below would search for files matching .jpg in folder named teaser in simplex theme folder *}
                {assign var='teaser' value='uploads/simplex/teaser/*.jpg'|glob}
                    {foreach from=$teaser item='one'}
                        <div><img src='{root_url}/{$one}' width='852' height='275' alt='' /></div>
                    {/foreach}
            {/strip}
            </div>
        </section>
        <!-- .banner //-->
    </header>
    <!-- .top //-->
    <!-- .content-wrapper (wrapping div for content area) -->
    <div class='content-wrapper cf'>
        <!-- .content (display content first) -->
        <div class='content-inner grid_8 push_4'>
            <!-- .content-top (breadcrumbs and print button) -->
            <div class='content-top cf' itemscope itemtype='http://data-vocabulary.org/Breadcrumb'>            
                {* menu manager has action breadcrumbs since 1.11, you can use {cms_breadcrumbs} tag or {menu action='breadcrumbs'} as below *}
{*ci-dessous affichage de l'url de page*}              
{*menu action='breadcrumbs'*}                
                {* print tag from CMSPrinting Module *}
                {print showbutton='false' class='printbutton noprint'}                
            </div>
            <!-- .content-top //-->
            <!-- .content (actual content with title and content tags) -->
            <article class='content' id='main' role='main'>
                <h1>{title}</h1> {* title tag *}
                    {content} {* content entered in page editor area *}
            </article>
            <!-- .content //-->
        </div>
        <!-- .content-inner //-->
        <!-- .sidebar (then show sidebar) -->
        <aside class='sidebar grid_4 pull_8'>
            {* sample of using News Module tag for summary of latest two articles *}
            {news summarytemplate='Summary_Simplex' number='2' detailpage='news' detailtemplate='Simplex_Detail'}
        </aside>
        <!-- .sidebar //-->
        <div class='cf grid_8 prefix_4'>
            <span class='previous'>{cms_selflink dir='previous'}</span>
            <span class='next'>{cms_selflink dir='next'}</span>
        </div>
    </div>
    <!-- .content-wrapper //-->
    <!-- .footer (footer area) -->
    <footer class='row footer'>
        <span class='back-top'>{anchor anchor='main' text='&uarr;'}</span>
        <section class='grid_4 copyright'>
            <ul class='social cf'>
                <li class='twitter'><a title='Twitter' href='http://twitter.com/#!/cmsms'>Twitter</a></li>
                <li class='facebook'><a title='Facebook' href='https://www.facebook.com/cmsmadesimple'>Facebook</a></li>
                <li class='linkedin'><a title='LinkedIn' href='http://www.linkedin.com/groups?gid=1139537'>LinkedIn</a></li>
                <li class='youtube'><a title='YouTube' href='http://www.youtube.com/user/cmsmadesimple'>YouTube</a></li>
            </ul>
            {global_content name='footer'}
        </section>
        <section class='grid_8 noprint'>
            <nav class='footer-navigation row'>
                {menu template='Simplex_Navigation.tpl' excludeprefix='home' number_of_levels='2' loadprops='0'}
            </nav>
        </section>
    </footer>
    <div class='clear'></div>
</div>
<!-- #wrapper //-->
{cms_jquery exclude='jquery-ui.min.js,jquery.ui.nestedSortable.js,jquery.json.min.js' append='uploads/simplex/js/functions.min.js'}
</body>
</html>


-------------------
Et voici le CSS Simplex Layout :
Code :
[== CSS ==]
@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed);
[[strip]][[* using strip in stylesheet to remove unneeded empty space, will reduce the file size *]]

[[* APPEARANCE *]]
[[*
By adding #boxed id to body tag you can easily change appearance of the site.
This would add a background image to body and content would be wrapped in a box.
By removing that id the background is removed and site is presented in white.

How: Go to Template -> Simplex and find <body>
Now simply edit as following <body id='boxed'>

You can as well reposition your site by changing class on wrapping div.
Find in Simplex Template following:

<div class='container centered' id='wrapper'>

Now change "centered" to "left" or "right" and page will be left or right aligned.
*]]

[[* assign the images path to a variable *]]
[[capture assign='path']][[uploads_url]]/simplex/images[[/capture]]

[[* COLORS *]]
[[*assign var='boxed_bg' value="#d1d1d1 url(`$path`/full_screen-02.jpg)"*]]
[[assign var='light_grey' value='#f1f1f1']]
[[assign var='grey' value='#e9e9e9']]
[[assign var='dark_grey' value='#555']]
[[assign var='white' value='#fff']]
[[assign var='orange' value='#f39c2c']]
[[assign var='dark_orange' value='#e6870e']]
[[assign var='yellow' value='#fdbd34']]
[[assign var='bordeau' value='#b5454e']]


/* =====================================
BASIC STYLES
===================================== */
body {
    /*background: [[$white]];*/
    font-family: sans-serif; /* sans-serif falls back to default OS and Browser font, usually Arial or Helvetica and so on */
    font-size: 12px;
    color: [[$dark_grey]];
    line-height: 1.3
}
body:before { content: "";
position: fixed;
top: -10px;
left: 0;
width: 100%;
height: 10px;
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
box-shadow: 0px 0px 10px rgba(0,0,0,.8);
z-index: 100;
}
/*--- esssai de background couleur différencié ---*/
body.color-red{
   background-color : #FF0000;
}
body.color-blue {
   background-color : #0000FF;
}
/* ------------------------------------------------- */

/* you can change appearance of the page by adding or removing #boxed id to body tag. */
/* body#boxed {
    background: [[$boxed_bg]] no-repeat
} */


/* add some space inside the boxed container */
#boxed .container {
    padding: 0 1%
}
a img {
    border: none
}
/* you can use these classes to align images to left or right */
.right {
    float: right
}
.left {
    float:left
}
/* if image needs some space add this class to img tag
* so at the end a left floating image would be <img src='some.jpg' class='left spacing' alt='foo' />
*/
.spacing {
    margin: 10px
}
.spacing.left {
    margin: 10px 10px 10px 0
}
.spacing.right {
    margin: 10px 0 10px 10px
}
/* or add a 2 px border to image or something, change as you need it */
.border {
    border: 2px solid [[$grey]]
}
/* some styling for code chunks */
code, samp, kbd {
    font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', monospace;
    color: [[$dark_grey]]
}
pre code {
    line-height: 1.4;
    font-size: 11px
}
pre {
    padding: 10px;
    margin: 10px 0;
    overflow: auto;
    width: 93%;
    background: [[$light_grey]];
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -o-border-radius: 6px
}
/* target IE7 and IE6 */
*:first-child+html pre {
    padding-bottom: 20px;
    overflow-y: hidden;
    overflow: visible;
    overflow-x: auto
}
* html pre {
    padding-bottom: 20px;
    overflow: visible;
    overflow-x: auto
}
/* horizontal ruler */
hr {
    border: solid [[$grey]];
    border-width: 1px 0 0 0;
    clear: both;
    margin: 10px 0 30px 0;
    height: 0
}
/* =====================================
COMMON TYPOGRAPHY
===================================== */

/* link default styles */
a {
    color: [[$bordeau]];
}
a:visited {  
    color: [[$bordeau]]
}
a:hover {
    color: [[$dark_grey]];
    transition: transform 0.6s ease-out;
    -webkit-transition: color 0.6s ease-out;
    -moz-transition: color 0.6s ease-out;
    -o-transition: color 0.6s ease-out;    
    text-decoration: underline
}
a:focus {
    outline: thin dotted
}
a:hover, a:active {
    outline: 0
}
/* add icon to links with class external */
a.external span {
    display: inline-block;
    width: 9px;
    height: 9px;
    text-indent: -999em;
    margin: 0 3px;
    /* using sprite image, but left as reference to single image
    background: transparent url([[$path]]/external-icon.png) no-repeat 0 0
    */
    background: transparent url([[$path]]/simplex-sprite.png) no-repeat -10px -130px;
}
a.external:hover span {
    background-position: -10px -139px
}
/* default heading styles */
h1,
h2,
h3,
h4 {
    font-family:'Open Sans Condensed', Arial Narrow Bold, sans-serif;
}
h1 {
    color: #B5454E;
    margin: 10px 0;
    font-size: 25px;
    text-transform: uppercase;
}
h2 {
    color: [[$dark_grey]];
    font-size: 22px
}
h3 {
    color: [[$dark_grey]];
    font-weight: 700;
    font-size: 18px
}
h4 {
    color: [[$dark_grey]];
    font-weight: 700;
    font-size: 16px;

}
/* blockquotes and cites */
blockquote,
blockquote p {
    font-size: 14px;
    line-height: 1.5;
    color: [[$dark_grey]];
    font-style: italic;
    font-family: Georgia, Times New Roman, serif
}
blockquote {
    margin: 0 0 20px 0;
    padding: 9px 10px 10px 19px;
    border-left: 5px solid [[$light_grey]]
}
blockquote cite {
    display: block;
    font-size: 12px;
    color: [[$dark_grey]]
}
blockquote cite:before {
    content: "\2014 \0020";
}
blockquote cite a,
blockquote cite a:visited,
blockquote cite a:visited {
    font-family: Georgia, Times New Roman, serif;    
}

/* =====================================
LAYOUT
===================================== */
/* wrapping the page in a box */
#wrapper {
    margin-top: 10px;
    /* border-top: 5px solid [[$orange]] */
filter:alpha(opacity=85);
-moz-opacity:0.85;
opacity: 0.85;

-moz-border-radius: 17px;
-webkit-border-radius: 17px;
border-radius: 17px;
/*IE 7 AND 8 DO NOT SUPPORT BORDER RADIUS*/
-moz-box-shadow: 3px 3px 4px #000000;
-webkit-box-shadow: 3px 3px 4px #000000;
box-shadow: 3px 3px 4px #000000;
filter: progid:DXImageTransform.Microsoft.Shadow(strength = 3, direction = 135, color = '#000000');
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(strength = 3, Direction = 135, Color = '#000000')";
/*Shadows look very different in IE (Only cardinal directions supported)*/
/*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
/*Element should have a background-color*/
/*All filters must be placed together*/
/*IE 7 AND 8 DO NOT SUPPORT BLUR PROPERTY OF SHADOWS*/
opacity: 0.9;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity = 85);
/*-ms-filter must come before filter*/
filter: alpha(opacity = 85);
/*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
/*All filters must be placed together*/

}
/* you can switch appearance of the page by adding or removing id #boxed to body tag */
#boxed #wrapper {
    background: [[$white]];
    box-shadow: 2000px 1500px 8px [[$dark_grey]]
}
  
/* ------ HEADER SECTION ------ */
/* if you need height or something for header part add style here */
.header {

}
/* the logo */
.logo {
    margin-top: 12px;
    position: relative
}
/* having some fun with palm, rotating with css3, will not work in IE */
.logo .palm {
    position: absolute;
    top: 5px;
    left: 45px;
    /* using sprite image as background, left as reference to single image
    background: url([[$path]]/palm-circle.png) no-repeat;
    */
    background: url([[$path]]/simplex-sprite.png) no-repeat -10px -10px;
    display: block;
    width: 48px;
    height: 48px;
    transition: transform 0.6s ease-out;    
    -webkit-transition: -webkit-transform 0.6s ease-out;
    -moz-transition: -moz-transform 0.6s ease-out;
    -o-transition: -o-transform 0.6s ease-out;
    -webkit-perspective: 1000;
    -webkit-backface-visibility: hidden;    
}
/* css3 transform rotating palm on hover */
.logo a:hover .palm {
    transform: rotate(360deg);    
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg)  
}
.top .header {
    border-bottom: 1px solid [[$light_grey]]
}

/* ------ NAVIGATION ------ */

/* first level */
nav.main-navigation {
    z-index: 990;
    height: 55px;
    line-height: 37px;
    margin-top: 20px;
}
nav.main-navigation > ul {
    float:right;
    padding: 0
}
nav.main-navigation > ul > li {
    float: left;
    padding: 0;
    margin:0 12px;
    position: relative
}
nav.main-navigation > ul > li:first-child,
nav.main-navigation > ul > li.first {
    margin-left: 0
}
nav.main-navigation > ul > li:last-child,
nav.main-navigation > ul > li.last {
    margin-right: 0
}
nav.main-navigation > ul > li > a,
nav.main-navigation > ul > li.sectionheader span {
    font-family:'Open Sans Condensed', Arial Narrow Bold, sans-serif;
    color: [[$dark_grey]];
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase
}
/* Second Level */
nav.main-navigation ul li ul {
    top: -999em;
    left: -999em;
    position: absolute;
    display: block;
    height: 0px;
    width: 200px;  
    padding: 10px;
    background: [[$white]];
    background: rgba(255,255,255,.95);    
    box-shadow: 1px 1px 8px [[$dark_grey]];
    -webkit-box-shadow: 1px 1px 8px [[$dark_grey]];
    -moz-box-shadow: 1px 1px 8px [[$dark_grey]];
    -o-box-shadow: 1px 1px 8px [[$dark_grey]];
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -o-border-radius: 6px;
    border: 1px solid [[$grey]]
}
nav.main-navigation > ul > li:hover > ul {    
    height: auto;
    z-index: 9999;
    top: 37px;
    right: 0;
    left: auto;
    display: block
}
nav.main-navigation ul ul li {
    position: relative;
    line-height: 1;
    margin: 0;
    padding: 0;
    border-bottom: 1px dotted [[$grey]]
}
/* third level */
nav.main-navigation > ul > li > ul > li:hover > ul {
    height: auto;
    top: 0;
    right: auto;
    left: -210px;
    z-index: 999;    
    display: block
}
/* navigation text color */
nav.main-navigation ul li li a,
nav.main-navigation ul li li.sectionheader span {
    padding: 6px 12px;
    font-family: sans-serif;
    text-transform: none;
    font-weight: normal;
    font-size: 12px;
    text-decoration: none;
    color: [[$dark_grey]];
    display: block
}
nav.main-navigation a:hover,
nav.main-navigation a.current,
nav.main-navigation li.sectionheader span:hover,
nav.main-navigation li.sectionheader span.current,
nav.main-navigation li.sectionheader span.parent,
nav.main-navigation ul ul li a:hover,
nav.main-navigation ul ul li a.current {
    color: [[$bordeau]]
}
/* bottom part of header*/
.header-bottom {
    height: 55px;
    line-height: 55px
}
/* catchphrase */
.phrase span {
    font-family:'Open Sans Condensed', Arial Narrow Bold, sans-serif;
    text-transform: none;
    color: gray;
    font-size: 15px;
    font-weight: 700
}
/* search */
.search {
    text-align: right;
}
/* webkit browser add icons to input of type search, we dont want it here now */
input.search-input::-webkit-search-decoration,
input.search-input::-webkit-search-results-button,
input.search-input::-webkit-search-results-decoration {
    -webkit-appearance:none
}
/* styling the search input field */
input.search-input {
    border: 1px solid [[$light_grey]];  
    height: 17px;
    line-height: 17px;
    outline: 0;
    margin: 13px 0 0 0;
    width: 165px;
    padding: 5px 0 3px 35px;
    font-size: 11px;
    color: [[$dark_grey]];
    transition: all .35s ease-in-out;
    -webkit-transition: all .35s ease-in-out;
    -moz-transition: all .35s ease-in-out;
    -o-transition: all .35s ease-in-out;
    /* using sprite image, left as reference to single image
    background: [[$white]] url([[$path]]/search-icon.png) 10px 50% no-repeat
    */
    background: [[$white]] url([[$path]]/simplex-sprite.png) 0px -434px no-repeat
}
input.search-input:focus {
    border: 1px solid [[$orange]];
    width: 240px;      
    box-shadow: 0 0 3px [[$orange]];    
    -webkit-box-shadow: 0 0 3px [[$orange]];
    -moz-box-shadow: 0 0 3px [[$orange]];
    -o-box-shadow: 0 0 3px [[$orange]];
}
  
/* ------ BANNER AREA ------ */
/* ------
.banner {
    overflow: hidden;
    background: [[$orange]]
}
/* left text in orange box */
.banner-text {
    padding:0 0 0 1%;
    position: relative;
    float: left;
    max-height: 275px;
    width: 30.333%
}
.banner-text ul {
    padding: 32px 0;
}
.banner-text li {
    list-style: none;
    display: block;
    color: [[$dark_orange]];
    text-shadow: 0px 1px 0 [[$yellow]], 0 -1px 0 rgba(0,0,0,0.3);
    font-size: 36px;
    font-weight: 700;
    transition: all 2s linear;
    -webkit-transition: all 1.5s linear;
    -moz-transition: all 1.5s linear;
    -o-transition: all 1.5s linear;
    display: block
}
/* animating unordered list text in banner */
.banner-text li:hover {
    text-indent: 120px;
    opacity: 0;
    transform: scale(2) rotate(35deg);
    -webkit-transform: scale(2) rotate(35deg);
    -moz-transform: scale(2) rotate(35deg);
    -o-transform: scale(2) rotate(35deg)
}
/* images on the right */
.banner-image {
    float:right;
    display: block;
    position: relative;
    width: 67.667%;
    overflow: hidden;
    background: [[$grey]]
}
.banner-image div {
    position: absolute;
    z-index: 0;
    width: 100%;
    min-height: 100px;
    overflow: hidden;
    display: block;
    top: 0;
    left: 0
}
.banner-image img {
    display: block;
    height: auto;
    width: 100%;
    bottom: 0;
    max-width: 100%;
}
------ */

/* ------ CONTENT AREA ------ */
.content-wrapper {
    padding-top: 20px
}
.content-top {
    background: url([[$path]]/dots.gif) repeat-x 0 50%;
    font-family: Georgia, Times New Roman, serif;
    color: [[$dark_grey]];
    font-style: italic;
    line-height: 20px
}

/* breadcrumbs */
.breadcrumb {
    display: inline-block;
    background: [[$white]];
    width: auto;
    padding-right: 6px
}
.breadcrumb a {
    color: [[$dark_grey]];
    display: inline-block;
    width: auto;
    background: [[$white]]
}

/* print button */
a.printbutton {
    display: block;
    padding-left: 6px;
    width: 16px;
    height: 16px;
    float:right;
    text-indent: -999em;
    /* using sprite image, left as reference to single image
    background: [[$white]] url([[$path]]/print-icon.png) no-repeat 6px -16px;
    */
    background: [[$white]] url([[$path]]/simplex-sprite.png) no-repeat -4px -94px;
    transition: all 0.2s ease-out;    
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out    
}
a.printbutton:hover {
    /* using sprite image, left as reference to single image
    background: [[$white]] url([[$path]]/print-icon.png) no-repeat 6px 0;
    */
    background: [[$white]] url([[$path]]/simplex-sprite.png) no-repeat -4px -78px;
}

/* news module summary -> content */
.content .news-summary  span.heading {
    display: none
}
.content .news-article {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px dotted [[$grey]]
}
.content .news-summary ul.category-list {
    margin: 15px 0
}
.content .news-summary ul.category-list li a,
.news-summary ul.category-list li span {
    border-radius: 4px
}
.news-summary ul.category-list li span {
    opacity: .4
}
/* news module summary -> sitewide (content + sidebar) */
/* article heading */
.news-article h2 {
    margin: 0 0 15px 0
}
.news-article h2 a {
    font-family:'Open Sans Condensed', Arial Narrow Bold, sans-serif;
    text-transform: uppercase;
    color: [[$dark_grey]];
    font-size: 16px;
    text-decoration: none;
    font-weight: 700
}
/* date circle, well square for IE  */
.news-article .date {
    background: [[$orange]];
    color: [[$white]];
    display: block;
    float:left;
    width: 40px;
    padding: 6px;
    height: 40px;
    border-radius: 26px;
    text-align: center;
    font-family: Georgia, Times New Roman, serif
}
.news-article .day {
    font-size: 20px;
    line-height: 1;
    padding-bottom: 2px;
    font-style: italic;
    display: block
}
.news-article.month {
    font-size: 11px;
    display: block
}
/* author and category */
.news-article .author,
.news-article .category {
    font-family: Georgia, Times New Roman, serif;
    display: block;
    padding-left: 60px;
    font-size: 11px;
    font-style: italic
}
/* category list on top of summary */
.news-summary ul.category-list {
    margin:15px 0 0 0;
    padding:0;
    list-style: none
}
.news-summary ul.category-list li {
    float:left;
    display: block;
    width: auto;
    margin-right: 5px
}
.news-summary ul.category-list li a,
.news-summary ul.category-list li span {
    display: block;
    color: [[$dark_grey]];
    padding: 4px 8px;
    background: [[$light_grey]];
    border-radius: 4px 4px 0 0;
    text-decoration: none;
    font-size: 11px;
    text-transform: uppercase
}
.news-summary ul.category-list li a:hover {
    color: [[$orange]]
}
.news-summary .paginate {
    font: italic 11px/1.2 Georgia, Times New Roman, serif;
    
}
.news-summary .paginate a {
    padding: 0 3px;
}
.news-meta {
    background: [[$light_grey]];
    padding: 10px;
    margin: 10px 0
}
/* more link */
.more,
.more a,
/* back link */
.back,
.back a,
/* previous, next links */
.previous a,
.next a,
.previous,
.next {
    font:  italic 12px/1.3 Georgia, Times New Roman, serif;
    color: [[$dark_grey]];
    text-decoration: none
}
/* hover behavior of more, next, previous links */
.more a:hover,
.back a:hover,
.previous a:hover,
.next a:hover {
    text-decoration: underline
}
.previous,
.next {
    padding: 6px 0;
}
/* align next link to right */
.previous {
    float:left;
}
.next {
    float: right
}

/* ------ SIDEBAR AREA ------ */

/* news module summary -> sidebar */
.sidebar .news-summary  span.heading {
    background: url([[$path]]/dots.gif) repeat-x 0 50%;
    color: [[$dark_grey]];
    font:  normal 16px/20px Georgia, Times New Roman, serif;
    margin: 0 0 15px 0;
    display: block
}
.sidebar .news-summary .heading span {
    display: inline-block;
    width: auto;
    background: [[$white]];
    padding-right: 6px
}
.sidebar .news-article {
    padding: 15px;
    position: relative;
    background: [[$light_grey]];
    margin-bottom: 20px;
    border-radius: 0 0 6px 0
}
/* creating a bubble box with css3 */
.sidebar .news-article:before {
    content:'';
    position: absolute;
    bottom: -15px;
    right: 25px;
    width: 10px;
    height: 35px;
    -webkit-transform: rotate(55deg) skewY(55deg);
    -moz-transform: rotate(55deg) skewY(55deg);
    -o-transform: rotate(55deg) skewY(55deg);
    -ms-transform: rotate(55deg) skewY(55deg);
    transform: rotate(55deg) skewY(55deg);
    background: [[$light_grey]]
}

/* ------ FOOTER AREA ------ */
/* footer wrapper */
.footer {
    position: relative;
    background: transparent url([[$path]]/footer-background.png) repeat-x top;
    border-bottom: 1px dotted [[$grey]];
    margin: 25px 0 10px 0;
    padding: 20px 0
}
/* copyright text */
.copyright {
    padding-top: 15px
}
.copyright p,
.copyright a {
    color: [[$dark_grey]];
    font-size: 11px
}
/* social icons */
.footer ul.social {
    padding: 0;
    margin: 0
}
.footer .social li {
    float:left;
    margin: 0;
    padding: 0;
    list-style: none;
    margin-right: 6px
}
.footer .social li a {
    display: block;
    width: 24px;
    height: 24px;
    transition: all 0.2s ease-out;    
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;    
    text-indent: -999em
}
.footer .social li.facebook a {
    /* using sprite image, left as reference to single image
    background: transparent url([[$path]]/facebook-icon.png) no-repeat 0 -24px
    */
    background: transparent url([[$path]]/simplex-sprite.png) no-repeat -10px -260px
}
.footer .social li.facebook a:hover {
    /* using sprite image, left as reference to single image
    background: transparent url([[$path]]/facebook-icon.png) no-repeat 0 0
    */
    background: transparent url([[$path]]/simplex-sprite.png) no-repeat -10px -236px
}
.footer .social li.twitter a {
    /* background: transparent url([[$path]]/twitter-icon.png) no-repeat 0 -24px */
    background: transparent url([[$path]]/simplex-sprite.png) no-repeat -10px -192px
}
.footer .social li.twitter a:hover {
    /* background: transparent url([[$path]]/twitter-icon.png) no-repeat 0 0 */
    background: transparent url([[$path]]/simplex-sprite.png) no-repeat -10px -168px
}
.footer .social li.linkedin a {
    /* background: transparent url([[$path]]/linkedin-icon.png) no-repeat 0 -24px */
    background: transparent url([[$path]]/simplex-sprite.png) no-repeat -10px -328px
}
.footer .social li.linkedin a:hover {
   /*  background: transparent url([[$path]]/linkedin-icon.png) no-repeat 0 0 */
   background: transparent url([[$path]]/simplex-sprite.png) no-repeat -10px -304px
}
.footer .social li.youtube a {
    /* background: transparent url([[$path]]/youtube-icon.png) no-repeat 0 -24px */
    background: transparent url([[$path]]/simplex-sprite.png) no-repeat -10px -396px
}
.footer .social li.youtube a:hover {
    /* background: transparent url([[$path]]/youtube-icon.png) no-repeat 0 0 */
    background: transparent url([[$path]]/simplex-sprite.png) no-repeat -10px -372px
}
/* back to top anchor */
.back-top a {
    display: inline-block;
    width: auto;
    padding: 8px;
    border-left: 5px solid [[$white]];
    border-right: 5px solid [[$white]];
    font:  normal italic 11px/20px Georgia, Times New Roman, serif;
    text-decoration: none;
    color: [[$dark_grey]];
    background: [[$light_grey]];
    color: [[$dark_grey]];
    border-radius: 10px 0 10px 0;
    -webkit-border-radius: 10px 0 10px 0;
    -moz-border-radius: 10px 0 10px 0;
    -o-border-radius: 10px 0 10px 0;
    position: absolute;
    top: -14px;
    left: 48%
}
/* Footer navigation */
.footer-navigation {
    padding-top: 15px
}
.footer-navigation > ul > li {
    float:left;
    width: 32.333%
}
.footer-navigation > ul > li > a,
.footer-navigation > ul > li span.sectionheader {
    font-family:'Open Sans Condensed', Arial Narrow Bold, sans-serif;
    text-transform: uppercase;
    color: [[$dark_grey]];
    text-decoration: none;
    display: block
}
/* second level */
.footer-navigation > ul ul {
    margin-top: 10px
}
.footer-navigation > ul > li li {
    float: none;
    width: 100%;
    display: block
}
.footer-navigation > ul > li li a,
.footer-navigation > ul > li.sectionheader li a,
.footer-navigation > ul > li li span.sectionheader  {
    text-decoration: none;
    font-family: sans-serif;
    font-weight: normal;
    text-transform: none;
    display: block;
    padding: 2px 0;
    color: [[$dark_grey]]
}
.footer-navigation > ul > li li a:hover {
    color: [[$orange]]
}

[[/strip]]

-----------------------
La faille doit se trouver dans le gabarit, mais toutes mes manipulations n'ont pour l'instant, rien donné. :/
Rolleyes
#7
Salut,

Code :
[== Indéfini ==]
<body id='boxed{if isset($color_code)} color-{$color_code}{/if}'>

Doit être

Code :
[== Indéfini ==]
<body id='boxed'{if isset($color_code)} class='color-{$color_code}'{/if}>

Ne pas conforme un ID (unique) et une classe, respectivement représentés par un « # » et un « . » devant son nom dans le CSS.


Ensuite il faut virer çà :
Code :
[== Indéfini ==]
<!-- essai de fond différencié (début) -->
<body{if isset($color_code)} class="color-{$color_code}"{/if}>
<!-- essai de fond différencié (fin) -->

Car tu ne peux avoir deux balises « <body> ».

Et puis je n'ai pas vu :

Code :
[== Indéfini ==]
{content block="color_code" label="Code couleur" oneline="true" assign="color_code"}

dans ton gabarit. Mets le tout en haut, ça devrait fonctionner ou sinon juste après « {content} ».

Et pour finir tu édites la page en cherchant le champ « COde couleur » pour mettre « red » ou « blue ».

P.S. : Je ne sais pas si je suis clair car je viens d'ouvrir l'oeil y'a 3 minutes.
Exacore - Freelance en communication
#7
Salut,

Code :
[== Indéfini ==]
<body id='boxed{if isset($color_code)} color-{$color_code}{/if}'>

Doit être

Code :
[== Indéfini ==]
<body id='boxed'{if isset($color_code)} class='color-{$color_code}'{/if}>

Ne pas conforme un ID (unique) et une classe, respectivement représentés par un « # » et un « . » devant son nom dans le CSS.


Ensuite il faut virer çà :
Code :
[== Indéfini ==]
<!-- essai de fond différencié (début) -->
<body{if isset($color_code)} class="color-{$color_code}"{/if}>
<!-- essai de fond différencié (fin) -->

Car tu ne peux avoir deux balises « <body> ».

Et puis je n'ai pas vu :

Code :
[== Indéfini ==]
{content block="color_code" label="Code couleur" oneline="true" assign="color_code"}

dans ton gabarit. Mets le tout en haut, ça devrait fonctionner ou sinon juste après « {content} ».

Et pour finir tu édites la page en cherchant le champ « COde couleur » pour mettre « red » ou « blue ».

P.S. : Je ne sais pas si je suis clair car je viens d'ouvrir l'oeil y'a 3 minutes.
Exacore - Freelance en communication
#8
Bonjour et merci pour cette réponse.
Mais ça ne fonctionne pas.
J'ai posé en première ligne de gabarit :
Code :
[== Indéfini ==]
{content block="color_code" label="Code couleur" oneline="true" assign="color_code"}
J'ai aussi trouvé un {content} en bas du gabarit mais l'ajout du même code juste à la suite, n'y a rien fait...

Et sur mes page j'ai un "SMARTY" libellé ainsi :
Code :
[== Indéfini ==]
{content block="color_code" label="blue" oneline="true"

assign="color_code"}
Là... je bloque ! j'ai essayé plusieurs formules trouvées sur le forum mais sans succès.
Rolleyes
#8
Bonjour et merci pour cette réponse.
Mais ça ne fonctionne pas.
J'ai posé en première ligne de gabarit :
Code :
[== Indéfini ==]
{content block="color_code" label="Code couleur" oneline="true" assign="color_code"}
J'ai aussi trouvé un {content} en bas du gabarit mais l'ajout du même code juste à la suite, n'y a rien fait...

Et sur mes page j'ai un "SMARTY" libellé ainsi :
Code :
[== Indéfini ==]
{content block="color_code" label="blue" oneline="true"

assign="color_code"}
Là... je bloque ! j'ai essayé plusieurs formules trouvées sur le forum mais sans succès.
Rolleyes
#9
Est-ce que tu as un accès temporaire à m'ouvrir à ton CMSMS ?
Si oui, fais le moi parvenir par message privée que je puisse te mettre en place la « base ».
Exacore - Freelance en communication
#9
Est-ce que tu as un accès temporaire à m'ouvrir à ton CMSMS ?
Si oui, fais le moi parvenir par message privée que je puisse te mettre en place la « base ».
Exacore - Freelance en communication
#10
ouh! la ! j'en serai ravi.. mais on fait comment pour ouvrir un accès temporaire ?
Merci
Rolleyes
#10
ouh! la ! j'en serai ravi.. mais on fait comment pour ouvrir un accès temporaire ?
Merci
Rolleyes
#11
Tu créés un compte utilisateur avec accès « Administrateur » différent du tien. Ainsi, dès que j'ai fini de t'aider tu supprimes le compte de façon à ce que je n'y accède plus.
Exacore - Freelance en communication
#11
Tu créés un compte utilisateur avec accès « Administrateur » différent du tien. Ainsi, dès que j'ai fini de t'aider tu supprimes le compte de façon à ce que je n'y accède plus.
Exacore - Freelance en communication
#12
tu lui créé un compte utilisateur dans ton cmsms, tu lui transmet les codes, il test, il te dit qu'il a finit, tu lui désactive ou tu lui supprime son compte.

exacore est un ancien du forum malgré ce que la date récente de son inscription laisse supposer. Tu peux lui laisser l'accès pour t'aider Smile
#12
tu lui créé un compte utilisateur dans ton cmsms, tu lui transmet les codes, il test, il te dit qu'il a finit, tu lui désactive ou tu lui supprime son compte.

exacore est un ancien du forum malgré ce que la date récente de son inscription laisse supposer. Tu peux lui laisser l'accès pour t'aider Smile
#13
Nom : XXXXXXXXXXXXXX
passe : XXXXXXX

adresse :
http://cluster015.ovh.net/~hgraffit/cmsm.../login.php

Je m'absente une petite heure
Merci à vous.
Rolleyes
#13
Nom : XXXXXXXXXXXXXX
passe : XXXXXXX

adresse :
http://cluster015.ovh.net/~hgraffit/cmsm.../login.php

Je m'absente une petite heure
Merci à vous.
Rolleyes
#14
EN MESSAGE PRIVE!!! :mad:
Je masque les codes, Exacore les retrouve dans son mail de notif, sans oublier de changer le mot de passe Wink
{SEO}
Inscrivez-vous à notre Newsletter sur le site (colonne de droite, en bas).
Vous appréciez CMSMS et l'aide qui vous est fournie ici, aidez-nous en participant au projet.
Formation CMS Made Simple | Création de site CMS Made Simple.

C'est en se plantant qu'on devient cultivé.
J'ai un string dans l'Array (Paris Hilton)
#14
EN MESSAGE PRIVE!!! :mad:
Je masque les codes, Exacore les retrouve dans son mail de notif, sans oublier de changer le mot de passe Wink
{SEO}
Inscrivez-vous à notre Newsletter sur le site (colonne de droite, en bas).
Vous appréciez CMSMS et l'aide qui vous est fournie ici, aidez-nous en participant au projet.
Formation CMS Made Simple | Création de site CMS Made Simple.

C'est en se plantant qu'on devient cultivé.
J'ai un string dans l'Array (Paris Hilton)
#15
Oups, que je suis nase... !
Désolé.
Bon voilà, c'est fait (en privé) avec nouveau passe.
Merci et encore désolé.
On apprend à tout âge...
Rolleyes
#15
Oups, que je suis nase... !
Désolé.
Bon voilà, c'est fait (en privé) avec nouveau passe.
Merci et encore désolé.
On apprend à tout âge...
Rolleyes
#16
Je m'occupe de ça dans quelques minutes. J'étais en train de régler des demandes de poste de secours dans mon deuxième « métier » :-)
Exacore - Freelance en communication
#16
Je m'occupe de ça dans quelques minutes. J'étais en train de régler des demandes de poste de secours dans mon deuxième « métier » :-)
Exacore - Freelance en communication
#17
Et bien alors ?
Tu avais fais 99% du boulot, je n'ai juste eu qu'à rajouter le code couleur dans la page.
Accueil => blue
Graphisme => red

Par contre, pense à mettre à jour ta version de CMSMS. Une de retard c'est pas bien grave mais il y a faille de sécurité tout de même.
Exacore - Freelance en communication
#17
Et bien alors ?
Tu avais fais 99% du boulot, je n'ai juste eu qu'à rajouter le code couleur dans la page.
Accueil => blue
Graphisme => red

Par contre, pense à mettre à jour ta version de CMSMS. Une de retard c'est pas bien grave mais il y a faille de sécurité tout de même.
Exacore - Freelance en communication
#18
Bravo !
Je vois les couleurs...
Mais j'ai beau regarder le gabarit et le CSS, je ne vois pas où tu as fais le changement !
Il y a vraiment un truc qui m'échappe. J'ai pas tout compris à ce CMS, loin de là.

Tu me dis que : jtu n'as eu qu'à rajouter le code couleur dans la page.
Oui, mais où ça ? je ne vois pas comment on accède au code spécifique d'une page !
Je dois être miro...
merci de m'éclairer un peu...
En tous les cas, C'est exactement ce que je cherchais !
Mille fois merci.
Quand j'aurai pigé, j'affinerai les couleurs.
Rolleyes
#18
Bravo !
Je vois les couleurs...
Mais j'ai beau regarder le gabarit et le CSS, je ne vois pas où tu as fais le changement !
Il y a vraiment un truc qui m'échappe. J'ai pas tout compris à ce CMS, loin de là.

Tu me dis que : jtu n'as eu qu'à rajouter le code couleur dans la page.
Oui, mais où ça ? je ne vois pas comment on accède au code spécifique d'une page !
Je dois être miro...
merci de m'éclairer un peu...
En tous les cas, C'est exactement ce que je cherchais !
Mille fois merci.
Quand j'aurai pigé, j'affinerai les couleurs.
Rolleyes
#19
Dans « Contenu > Pages », quand tu cliques sur la page d'accueil (et sur les autres pages utilisant le gabarits Simplex modifié), tu as un nouveau champ « Code couleur ».

Ce champ est créé grâce à ce code « {content block="color_code" label="Code couleur" oneline="true" assign="color_code"} ».

Tu n'as plus qu'à saisir, dans chaque page, le code couleur que tu souhaites appliquer... à condition de l'avoir préalablement défini dans le CSS.

Vas voir les pages « Accueil » et « Graphisme » et tu vas comprendre.
Exacore - Freelance en communication
#19
Dans « Contenu > Pages », quand tu cliques sur la page d'accueil (et sur les autres pages utilisant le gabarits Simplex modifié), tu as un nouveau champ « Code couleur ».

Ce champ est créé grâce à ce code « {content block="color_code" label="Code couleur" oneline="true" assign="color_code"} ».

Tu n'as plus qu'à saisir, dans chaque page, le code couleur que tu souhaites appliquer... à condition de l'avoir préalablement défini dans le CSS.

Vas voir les pages « Accueil » et « Graphisme » et tu vas comprendre.
Exacore - Freelance en communication
#20
Ah! la la... ça me crevait les yeux, je ne l'avais pas vu !!!
Bon, bah! que dire...
Encore merci
C'est super, je vais affiner tout ceci.
Rolleyes
#20
Ah! la la... ça me crevait les yeux, je ne l'avais pas vu !!!
Bon, bah! que dire...
Encore merci
C'est super, je vais affiner tout ceci.
Rolleyes


Atteindre :


Utilisateur(s) parcourant ce sujet : 1 visiteur(s)