ownCloud : Revenir à l'ancien menu

Avec ownCloud 7, est apparu le nouveau menu :

oc_new_menu

Il n'est affiché que si vous cliquez dessus. Ce menu est assez pratique, surtout si vous êtes sur un petit écran (il est même indispensable pour les mobiles). Mais vous avez peut-être la nostalgie de l'ancien menu (qui a le mérite d'être tout de suite à portée de clic) ou un écran suffisamment large pour y placer un menu.

Pour retrouver l'ancien menu, 3 possibilités :

Je vous offre les trois :)

Dans tous les cas, le menu se placera sur la gauche (comme les version pré V7), et enlèvera le menu actuel, qui ne réapparaîtra qu'en dessous de 1100px, donc pour les mobiles (c'est beau le responsive).

Le style pour Stylish

C'est la solution si vous souhaitez faire une modification rapide, et simple. Elle ne sera effective que sur les navigateurs utilisant Stylish.

Le code

  @media screen and (min-width: 1100px){
  #body-user #controls, #body-settings #controls {
  padding-left: 1% !important;
  }
  #app-navigation + #app-content #controls {left:25.5%;width: 72%;}
  #content {margin-top: 0px !important;}
  #content-wrapper {padding-left: 7% !important;width: 100% !important;}
  #navigation{
  visibility:visible !important;
  display: block !important;
  position:fixed !important;
  bottom:0px !important;
  width: 7% !important;
  top:45px !important;
  max-height: 100% !important;
  margin-top:0px !important;
  -moz-user-select: none !important;
  -moz-box-sizing: border-box !important;
  box-shadow: 0px 0px 0px transparent !important;
  border-radius: 0px;
  }
  #navigation #apps ul{text-align: center;}
  #leftcontent{width: 21% !important;}
  #rightcontent{width: 78% !important;}
  #bookmark_settings {width:21% !important;}
  .bookmarks_list, #firstrun {left:27% !important;}
  #navigation .wrapper {margin: auto !important;}
  #header .icon-caret {display:none;}
  }

Comment faire

Pour cela :

Si vous avez tout bien suivi (l'étape de la respiration aussi), vous deviez avoir quelque chose comme ça :

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document url-prefix("l'url de votre instance"){
@media screen and (min-width: 1100px){

#body-user #controls, #body-settings #controls {
    padding-left: 1% !important;
}
#app-navigation + #app-content #controls {left:25.5%;width: 72%;}
#content {margin-top: 0px !important;}
#content-wrapper {padding-left: 7% !important;width: 100% !important;}
#navigation{

    visibility:visible !important;
    display: block !important;
    position:fixed !important;
    bottom:0px !important;
    width: 7% !important;
    top:45px !important;
    max-height: 100% !important;
    margin-top:0px !important;
    -moz-user-select: none !important;
    -moz-box-sizing: border-box !important;
    box-shadow: 0px 0px 0px transparent !important;
    border-radius: 0px;
}
#navigation #apps ul{text-align: center;}

#leftcontent{width: 21% !important;}
#rightcontent{width: 78% !important;}
#bookmark_settings {width:21% !important;}
.bookmarks_list, #firstrun {left:27% !important;}
#navigation .wrapper {margin: auto !important;}
#header .icon-caret {display:none;}
}
}

Un dernier clic sur Enregistrer et le tour est joué :)

Le thème

Bon, je ne vais pas vous cacher que c'est se prendre la tête pour pas grand chose. Mais si par la suite, vous voulez créer votre propre design pour ownCloud, je vous donne quelques bases.

Directement sur votre serveur, ou par FTP, allez dans le dossier themes. Créez le nom de votre thème ( spf par exemple). A l'intérieur, créez le dossier core puis encore à l'intérieur le dossier css (quand je vous disais que c'était se prendre la tête pour pas grand chose...).

En ligne de commandes (à partir de la racine):

#cd theme
#mkdir spf && cd spf
#mkdir core && cd core
#mkdir css && cd css

les lignes de commandes n'étaient pas nécessaires, mais j'en tape à longueur de journée, et j'ai jamais l'occasion de les mettre sur le blog, alors bon...

A partir de là, créez le fichier styles.css et mettez y le code donné plus haut.

c'est pas fini !

Vous devez encore modifier le fichier config.php qui se situe dans /config. Y insérer :

'theme' => 'spf',

Fini...

L'application

Cette application n'est pas censée casser quoique ce soit dans votre instance, mais notez que je ne garantis rien ! VOUS êtes responsables de ce que vous faites sur votre serveur (oui, je prends mes précautions) :)

Je garde le meilleur pour la fin. Si vous voulez que le menu soit pris en compte partout et sans vous prendre la tête inutilement comme plus haut, vous pouvez télécharger ma petite application (qui ne fait rien de plus que l'opposé de l'application Menu on top de awikatchikaen, qui a été implémenté directement dans ownCloud 7).

Pour cela, toujours par FTP ou ssh ou directement sur le serveur, allez dans /apps et décompressez l'archive.

Si tout va bien, votre ownCloud n'a pas explosé et vous devriez avoir le dossier old_menu. Vous n'avez plus qu'à retourner sur votre instance, cliquez sur le menu (pour la dernière fois) puis sur le + et activer Old menu.

Et... TADAAAAA :

oc_old_menu2

Qui a dit que c'était moche ?! oO

Le code est disponible sur Github, donc si vous avez envie de faire des modifs ou que vous avez des problèmes, n'hésitez pas.

EDIT : voici un petit lien pour télécharger la version zip.

EDIT 2 (15/11/14) : pour un souci de simplicité (pour moi ;)) voici le lien pour téléchager depuis Github. N'oubliez pas de renommez le dossier décompressé en old_menu !

img

diaspora*
Retour maison