Navigation latérale

Ajout d'un fichier test.php dans blocks/autonav/templates avec le contenu de concrete/blocks/autonav/view.php.

ajout d'un style pour afficher la barre sur la gauche de l'écran:

#nav-sidebar{
position:fixed;
left:0;
top:0;
right:auto;
height:100%;
width:50px;
overflow-x: hidden;
white-space: nowrap;
}
#pagewrapper{
margin-left:50px;
overflow-x: hidden;
}
#nav-menu{
width:100%;
top:50%;
position: absolute;
text-align: center;
}

en ajoutant l'id "nav-menu" à l'élément ul 

et l'id "nav-sidebar" à un div qui englobe le ul.

ajout du script:

$(document).ready(function(){
$("#nav-sidebar").hover(function() {
$(this).stop().animate({
width: "200px"
});
$("#pagewrapper").stop().animate({
"margin-left": "200px"
});
}, function() {
$(this).stop().animate({
width: "50px"
});
$("#pagewrapper").stop().animate({
"margin-left": "50px"
});
});
})

pour changer la taille de l'autonav

 

Header Lateral pour Calyx

Modification du fichier cg_calyx/themes/cg_calyx/inc/header.php:

  • ajout d'un <div id="side-header" class="header-background"> englobant la balise header ainsi que les composant qui le suivent. (lignes 46 à 129)
  • ajout du code suivant à la fin du fichier:

<style>
#side-header{
position:fixed;
<?php if($c->isEditMode()) { ?>
width:250px;
<?php } else { ?>
width:75px;
<?php } ?>
height:100%;
z-index: 5;
white-space: nowrap;
overflow: hidden;
}
.header-background{
position:inherit;
}
.logo-content{
width:100% !important;
}
.main-background, footer{
<?php if($c->isEditMode()) { ?>
margin-left:250px;
<?php } else { ?>
margin-left:75px;
<?php } ?>
}
#nav-menu{
width: 100%;
margin-left: 0;
}
.logo-content img {
max-width: inherit;
}
#side-bottom{
position:absolute;
width:100%;
<?php if($u -> isLoggedIn ()) { ?>
bottom:50px;
<?php } else { ?>
bottom:0;
<?php } ?>
overflow: hidden;
}
footer{
position:absolute;
width: calc(100% - 75px);
}
body{
overflow-x: hidden;
}
</style>
<?php if(!$c->isEditMode()) { ?>
<script>
function footerbottom(){
var top = $("section.main-background").height()+60;
var max = $(window).height() - $("footer").height();
if (top < max){
top = max;
}
$("footer").css("top",top+"px");
}
$( window ).resize(function(e) {
footerbottom();
});
$(document).ready(function(){
footerbottom();
$("#side-header").hover(function() {
$(this).stop().animate({
width: "250px"
});
$("section.main-background, footer").stop().animate({
"margin-left": "250px"
});
}, function() {
$(this).stop().animate({
width: "75px"
});
$("section.main-background, footer").stop().animate({
"margin-left": "75px"
});
});
})
</script>
<?php } ?>

Ajout d'un espace éditable en bas de la barre latérale

Dans le fichier cg_calyx/themes/cg_calyx/inc/header.php:

ajouter un div à la ligne 69 apres le <div class="clear header-spacer" style="height:80px;"></div>:

<div id="side-bottom">
<?php
$a = new Area('Side bottom');
$a->display($c);
?>
</div>

ajouter ensuite le style suivant:

#side-bottom{
position:absolute;
<?php if($u -> isLoggedIn ()) { ?>
bottom:50px;
<?php } else { ?>
bottom:0;
<?php } ?>
overflow: hidden;
}

 

Ajout d'un modèle personnalisé pour autonav pour la barre latérale

copie du dossier theme_super_mint/blocks/autonav/templates/boxed vers cg_calyx/blocks/autonav/templates/calyx_sidebar_test

modifier view.css en remplacant son contenu par ceci:

.nav-boxed li a {
position: relative;
margin-bottom: -1px;
display: block;
border: 1px solid #ccc;
padding: 5px 5px;
color: inherit;
text-decoration:none;
}
.nav-boxed li a i{
font-size:xx-large;
margin:0 20px;
vertical-align: middle;
}
.nav-boxed li a.active, .nav-boxed li a:hover {
background: #efefef;
}
.nav-boxed li:first-child a {
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.nav-boxed li:last-child a {
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}

Header lateral dans SuperMint

 

 

Modifier le fichier theme_super_mint/themes/super_mint/elements/header.php en ajoutant le code suivant entre la balise <body> et la balise <div id="pagewrapper">:

 

<div id="side-header" class="header-background">
<header>
<div class="header-background">
<div class="container">
<div class="four columns alpha logo-content">
<a href="<?php echo DIR_REL?>/">
<?php
$a = new GlobalArea('Side Site Logo');
$a->display();
?>
</a>
</div><!--end-of-logo-content-->
<div class="clear header-spacer" style="height:80px;"></div>
<div id="side-navigation">
<?php
$a = new GlobalArea('Side Header nav');
$a->display();
?>
<?php
$a = new Area('Side Header nav locale');
$a->display($c);
?>
</div><!--end-of-side-naviation-->
<div class="clear header-spacer" style="height:80px;"></div>
<div id="side-bottom">
<?php
$a = new Area('Side bottom');
$a->display($c);
?>
</div>
</div><!--end-of-container-->
</div>
</header> <!--end-of-header-->

</div>

<style>
#side-header{
position:fixed;
<?php if($c->isEditMode()) { ?>
width:250px;
<?php } else { ?>
width:75px;
<?php } ?>
height:100%;
z-index: 5;
white-space: nowrap;
overflow: hidden;

}
.header-background{
position:inherit;
}
.logo-content{
width:100% !important;
}
#pagewrapper{
<?php if($c->isEditMode()) { ?>
margin-left:250px;
<?php } else { ?>
margin-left:75px;
<?php } ?>
}
#nav-menu{
width: 100%;
margin-left: 0;
}
.logo-content img {
max-width: inherit;
}
#side-bottom{
position:absolute;
width:100%;
<?php if($u -> isLoggedIn ()) { ?>
bottom:50px;
<?php } else { ?>
bottom:0;
<?php } ?>
overflow: hidden;
}

body{
overflow-x: hidden;
}
</style>
<?php if(!$c->isEditMode()) { ?>
<script>
$(document).ready(function(){
$("#side-header").hover(function() {
$(this).stop().animate({
width: "250px"
});
$("#pagewrapper").stop().animate({
"margin-left": "250px"
});
}, function() {
$(this).stop().animate({
width: "75px"
});
$("#pagewrapper").stop().animate({
"margin-left": "75px"
});
});
})
</script>
<?php } ?>

Changer les icones de l'autonav de supermint

Se rendre sur la page pour laquelle on veut changer l'icone, aller dans les propriétés de la page et cherche l'attribut "Icon". Ensuite, se rendre sur e site: http://fortawesome.github.io/Font-Awesome/icons/ et cherchez l'icone qui correspond le mieux à la page et cliquer dessus: on obtien alors le nom de l'icone commençant par "fa-", copier ce nom et le coller dans l'attribut "Icon" de la page.