Arborescence des pages

Comparaison des versions

Légende

  • Ces lignes ont été ajoutées. Ce mot a été ajouté.
  • Ces lignes ont été supprimées. Ce mot a été supprimé.
  • La mise en forme a été modifiée.

...

Le thème de POD s'appuie sur Bootstrap 4 ainsi qu'une feuille de style spécifique à POD. Vous pouvez aussi ajouter votre propre feuille de style. Bootstrap est un toolkit pour développer rapidement en HTML, CSS et JS. Pour en savoir plus, consulter le site GetBootstrap.

Vous pouvez aussi ajouter votre propre feuille de style. Les modifications des styles se font principalement à deux endroits :

...

Choisir un thème de départ

Vous Dans POD, vous disposez de 3 thèmes, configurables dans votre fichier settings_local.py. Choisissez le plus proche de ce que vous voulez faire. Pour cela modifiez la variable USE_THEME :

...

dark ressemble à green, mais en noir. La couleur de fond est blanche (pas de background sur la class jumbotron). Il y a deux couleurs primaires pour différencier boutons et liens. Les coins sont droits.

Modifier juste les couleurs

...

Dupliquer le theme de votre choix (default, green ou dark) dans votre dossier custom :


Bloc de code
languagebash
cp pod/main/static/bootstrap-4/css/bootstrap-default.min.css pod/main/static/custom

Editer le ficher et changer les valeurs des variables qui vous intéressent .(à priori $primary)

Modifier la variable BOOTSTRAP_CUSTOM dans le fichier settings_local.py :


Bloc de code
languagepy

...

'BOOTSTRAP_CUSTOM': 'custom/bootstrap-default.min.css',


Voilà, c'est tout, votre site a déjà une nouvelle allure (sourire)

...

Pour ajouter votre propre feuille de style, modifier le fichier settings_local.py :

Bloc de code
languagepy
'CSS_OVERRIDE': 'custom/custom.css',

Votre feuille de styles doit être dans le dossier pod/main/static/custom

...

Voici une tentative de tuto ... mais après de nombreux essais / erreurs, je ne suis plus sur de ce qui marche ou pas ! J'ai fait l'installation sous Ubuntu, mais cela devrait être similaire sous d'autres OS, y compris Windows. En gros, télécharger les sources de bootstrap, installer les dépendances avec npm et utiliser gulpjs pour compiler les fichiers scss en css. Donc n'hésitez pas à modifier selon votre expérience :modifier ce tuto s'il y a des erreurs ...

Méthode 1 : installation automatique avec Ansible

Cette méthode automatise complètement l'installation de votre environnement de développement SASS. Elle utilise les playbooks de Ansible. Ce logiciel permet d'automatiser des tâches. Ici, le playbook va installer Node.js, télécharger boostrap et ses dépendances, créer les dossiers scss et dist nécessaires pour customiser, installer gulp, gulp-sass et autres extensions, mettre en place un fichier de configuration pour gulp et vous préparer délicatement un fichier bootstrap à customiser.

Installer Ansible

Si vous avez installé Python (à installer dans un environnement virtuel si vous êtes à l'aise avec ça) :

Bloc de code
languagebash
pip install ansible

Sinon, des paquets existent pour votre distribution favorite. Pour ubuntu / debian :

Bloc de code
languagebash
sudo apt install ansible

Télécharger le playbook

Bloc de code
languagebash
git clone https://github.com/halbo5/ansible-bootstrap-css.git

ou si vous n'avez pas git, télécharger les fichiers depuis github

Lancer l'installation

Depuis le dossier ansible-bootstrap-css :

Editer les fichiers de configuration dans les dossiers roles/bootstrap/defaults et roles/nodejs/defaults. En particulier, il faut spécifier le dossier dans lequel installer votre dossier de travail. Il faut modifier la variable 'bootstrap_directory'.

Bloc de code
languagebash
ansible-playbook install-bootstrap.yml -K

On vous demandera un "BECOME password". Cela correspond au mot de passe sudo pour installer des applications.

Si tout se passe bien, vous n'avez qu'à regarder défiler les lignes dans votre console ... Ce script a été très peu testé ... signalez les erreurs sur github.

Si tout est bien installé, passer au point "Générer un fichier CSS", sinon, il vous faudra passer par l'installation manuelle.

Méthode 2 : installation manuelle

Si la version automatisée ne fonctionne pas, ou si vous voulez comprendre ce qui se passe, voici une procédure manuelle.

Installation des sources de bootstrap :

...

Bloc de code
languagejs
linenumberstrue
// gulpfile.js    
var gulp = require("gulp"),
    sass = require("gulp-sass"),
    postcss = require("gulp-postcss"),
    autoprefixer = require("autoprefixer"),
    cssnano = require("cssnano"),
    sourcemaps = require("gulp-sourcemaps");

var paths = {    
    styles: {
        // By using styles/**/*.sass we're telling gulp to check all folders for any sass file
        src: "scss/**/*.scss",
        // Compiled files will end up in whichever folder it's found in (partials are not compiled)
        dest: "dist"
    }
};

// Define tasks after requiring dependencies
    
function style() {    
    return (
        gulp
            .src(paths.styles.src)
            .pipe(sourcemaps.init())
            .pipe(sass())
            .on("error", sass.logError)
            .pipe(postcss([autoprefixer(), cssnano()]))
            .pipe(sourcemaps.write())
            .pipe(gulp.dest(paths.styles.dest))
    );
}    
exports.style = style;

function watch(){
    // gulp.watch takes in the location of the files to watch for changes
    // and the name of the function we want to run on change
    gulp.watch(paths.styles.src, style)
}
exports.watch = watch;


Générer un fichier css

...


Lancer la commande : gulp watch dans le dossier qui contient gulpjs. Ce script surveille vos modifications et compile à la volée, donc ne l'arrêtez pas.

Modifier votre fichier custombootstrap-default.min.scss comme expliqué sur la page Theming de bootstrap.

Votre fichier custom. css est automatiquement compilé et généré dans le dossier dist à chaque enregistrement de custom.scss.Vous pouvez bien sur donner tout de suite le bon nom à votre fichier source, par exemple : bootstrap-customdefault.min.scss. Vous obtiendrez ainsi le fichier bootstrap-custom.min.css à déposer dans votre arborescence de pod.