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

Note de ce sujet :
  • Moyenne : 0 (0 vote(s))
  • 1
  • 2
  • 3
  • 4
  • 5
#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


Messages dans ce sujet

Atteindre :


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