06/06/2013, 06:30:45
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 :
-------------------
Et voici le CSS Simplex Layout :
-----------------------
La faille doit se trouver dans le gabarit, mais toutes mes manipulations n'ont pour l'instant, rien donné. :/
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='↑'}</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é. :/
