La partie css de bootstrap

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • piko
    a répondu
    Re : La partie css de bootstrap

    Bonjour lefabdu51,

    merci pour ta répense,

    Comment démarrer avec bootstrap, j'ai lu un peu de documentations, mais j'ai pas compris ou je fais le code, et il ne travail que sur le serveur local, Quel est son principe!!!!

    Merci une autre fois

    Laisser un commentaire:


  • lefabdu51
    a répondu
    Re : La partie css de bootstrap

    la plupart des modifs vont être a faire sur le fichier index.php de ton template. Et pour certaines fonctionnalités, une surcharge de module est nécéssaire.
    Ceci pour integrer le html5 a ton template.

    bootsrap sert a gerer l'aspect responsif (adaptation ala resolution du client) d'un template.
    chaque zone est une ligne que tu decoupes en 12.
    LA balise span sert a definir la largeur d un module. ( 4 span3 , 1 span12)
    et c est grace a ce marquage que ton template s adapteras aux smartphones.

    Pour activer bootstrap, il faut inserer une instruction ds l entete de ton template.
    (j edites et je continues demain)

    Laisser un commentaire:


  • piko
    a répondu
    Re : La partie css de bootstrap

    Bonjour,

    Merci pour les précisions, je travail sur joomla 2.5, et je viens de travailler une template et je vais travailler avec bootstrap pour la partie intégration, mais, chui encore débutante et j'ai pas beaucoup de temps que je l'ai découvert (bootstrap) , et j'ai pas bien compris comment ca fonctionne, et les documentations sont en anglais, et ou je vais les configurer les fichiers css, maintenant quand je démarre l'intégration vers le html, et puis dans la partie de l'intégration vers un template joomla??

    Merci d'avance

    Laisser un commentaire:


  • lomart
    a répondu
    Re : La partie css de bootstrap

    j'utilise lessphp, qui permet de compiler le less au chargement de la page. Je trouve cela plus pratique en dev, qu'une compilation extérieure. Il suffit ensuite de la désactiver en prod.
    Entièrement d'accord avec toi.
    Par contre attention à la précision des calculs qui ne sont pas suffisant avec lessphp. Il est donc préférable de compiler la base (template.css) avec crunch et la personnalisation (perso.css par exemple) avec lessphp.

    Plutôt que de modifier l'index.php, on peut utiliser ce plugin avec les mêmes réserves concernant lessphp:
    http://extensions.joomla.org/extensi...elopment/22424

    Laisser un commentaire:


  • proximcreation
    a répondu
    Re : La partie css de bootstrap

    Envoyé par lomart Voir le message
    Pas mal ton sujet sur les CSS de Bootstrap.


    Les fichiers que l'on utilise sont ceux qui sont dans le dossier du template, isis pour l'admin ou protostar pour le client


    Bootstrap a un 4ème niveau pour les écrans larges > 1200px

    On ne peut pas comprendre Bootstrap si on ne le regarde pas au travers de LESS
    Le principe de personnalisation est le suivant, je me base sur protostar mais c'est quasi-universel :

    1 / on modifie le fichier less/variables.less qui contient la définition des couleurs, polices, etc utilisées par le template.
    Les noms sont suffisamment explicites pour identifier leur utilisation. A ce niveau, la seule chose à savoir en LESS est qu'un nom de variable commence par @. exemple .monTexte {@rouge:#FFFF00; color:@rouge} veut dire que l'on affecte la valeur #FFFF00 à la variable @rouge puis que l'on utilise cette variable pour la propriété color.

    2/ on modifie ou on ajoute des règles CSS au fichier less/template.less.
    Vous remarquerez que ce fichier commence par des imports des fichiers less de bootstrap. Lesquels fichiers sont situés dans ce fameux dossier media/ui
    @import "../../../media/jui/less/reset.less";

    3/ on utilise un programme comme Crunch pour compiler le fichier less/template.less afin d'obtenir le fichier css/template.css
    Je mets ci-dessous une copie d'écran que j'avais faite pour un topic publié sur Joomla-support.fr où l'on taquine pas mal le bootstrap actuellement
    [ATTACH=CONFIG]22710[/ATTACH]

    Voilà c'était juste quelques petites précisions, et encore bravo pour ton initiative
    Bonjour,

    je suis en train de découvrir le templating joomla 3 via le template protostar. Du coup étant déjà utilisateur de less (avec joomla 2.5), j'utilise lessphp, qui permet de compiler le less au chargement de la page. Je trouve cela plus pratique en dev, qu'une compilation extérieure. Il suffit ensuite de la désactiver en prod.

    Lessphp : http://leafo.net/lessphp/ pour l'intégrer à l'arbo de votre template.

    Et du coup il suffit d'intégrer ceci en haut du index.php :
    Code:
    // Compilation du less
    $path_dir = $_SERVER['DOCUMENT_ROOT'].$this->baseurl.'/templates/'.$this->template;
    require $path_dir.'/lessphp/lessc.inc.php';
    
    try {
    	lessc::ccompile($path_dir.'/less/template.less', $path_dir.'/css/template.css');
    } catch (exception $ex) {
    	exit('lessc fatal error:
         '.$ex->getMessage());
    }
    // Fin compilation du less
    Voilà c'est une position purement personnelle, mais je me dis que si d'autre comme moi sont en train de se mettre en route sur le sujet, ça leur fera une alternative...

    En tout cas merci, cette discussion m'a débloqué (pour moi less était forcement compilé qqpart automatiquement dans joomla 3).

    Laisser un commentaire:


  • lefabdu51
    a répondu
    Re : La partie css de bootstrap

    Vu sous cet angle....c est vrai que cela peut être plus simple.

    Laisser un commentaire:


  • lomart
    a répondu
    Re : La partie css de bootstrap

    mais la doc officielle n indiques que les 3 que j ai indiqué.
    Mais le fichier CSS gère les 4 !
    C'était juste pour expliquer pourquoi la largeur est plus grande sur un grand écran

    Il est à réserver à ceux qui ont de fortes compétences en html et css. il est très facile de se perdre dans les imbrications de régles css.
    Pas du tout, si on se contente de modifier les couleurs en utilisant les variables définies dans le fichier variables.less.
    Un exemple: c'est quand même plus facile de changer la couleur des liens en changeant la valeur de la variable @linkColor que de trouver les 15 règles où elle est utilisée. Je ne parle même pas d'un changement de taille, hauteur de la navbar par exemple, où il faudra non seulement modifier sa hauteur, mais recalculer à la main toutes les hauteurs dérivées

    Laisser un commentaire:


  • lefabdu51
    a répondu
    Re : La partie css de bootstrap

    merci pour les precisions... mais la doc officielle n indiques que les 3 que j ai indiqué.

    Secundo, les non informaticiens se contenteront d ajouter ou de modifier les css existante, ils n utiliseront pas less.

    Pour ma part, je ne me sert de less que quand j ai des calculs a faire, du genre @marge-b = 2 * @marge-a ...
    Il est à résérver à ceux qui ont de fortes compétences en html et css. il est très facile de se perdre dans les imbrications de régles css.. il faut faire attention quand on l'utilise.

    la documentation officielle de less: http://lesscss.org/
    Dernière édition par lefabdu51 à 09/10/2012, 14h31

    Laisser un commentaire:


  • lomart
    a répondu
    Re : La partie css de bootstrap

    Pas mal ton sujet sur les CSS de Bootstrap.

    sous Joomla 3.0, les fichiers css de bootstrap se trouvent dans le dossier /media/jui/css
    Les fichiers que l'on utilise sont ceux qui sont dans le dossier du template, isis pour l'admin ou protostar pour le client

    desktop signifies une résolution > à 1024px
    tablet signifies une résolution entre 768px et 1024
    mobile signifies une résolution inférieure a 768px
    Bootstrap a un 4ème niveau pour les écrans larges > 1200px

    On ne peut pas comprendre Bootstrap si on ne le regarde pas au travers de LESS
    Le principe de personnalisation est le suivant, je me base sur protostar mais c'est quasi-universel :

    1 / on modifie le fichier less/variables.less qui contient la définition des couleurs, polices, etc utilisées par le template.
    Les noms sont suffisamment explicites pour identifier leur utilisation. A ce niveau, la seule chose à savoir en LESS est qu'un nom de variable commence par @. exemple .monTexte {@rouge:#FFFF00; color:@rouge} veut dire que l'on affecte la valeur #FFFF00 à la variable @rouge puis que l'on utilise cette variable pour la propriété color.

    2/ on modifie ou on ajoute des règles CSS au fichier less/template.less.
    Vous remarquerez que ce fichier commence par des imports des fichiers less de bootstrap. Lesquels fichiers sont situés dans ce fameux dossier media/ui
    @import "../../../media/jui/less/reset.less";

    3/ on utilise un programme comme Crunch pour compiler le fichier less/template.less afin d'obtenir le fichier css/template.css
    Je mets ci-dessous une copie d'écran que j'avais faite pour un topic publié sur Joomla-support.fr où l'on taquine pas mal le bootstrap actuellement
    Cliquez sur l'image pour l'afficher en taille normale

Nom : crunch.jpg 
Affichages : 1 
Taille : 66,8 Ko 
ID : 1802146

    Voilà c'était juste quelques petites précisions, et encore bravo pour ton initiative

    Laisser un commentaire:


  • lefabdu51
    a crée un sujet La partie css de bootstrap

    La partie css de bootstrap

    Quelques trucs que j ai compris sur bootstrap. Pour ceux qui ne sont pas informaticien, ou qui ont peu de compétences en matière de css.

    La plupart des utilisateurs rajouteront, modifieront ou supprimerons des propriétés css (existantes ou non), ce qui autorise deja un fort degré de personnalisation.

    Bootstrap est de plus en plus utilisé, mais il est très peu personnalisé, ce qui fait que les templates ont un peu tendance a se ressembler.

    Peu de template intègre complètement bootstrap au niveau css. Je l ais remarqué en cherchant à exploiter certains points de la doc officielle. Donc j ai du rajouter ce dont j'avais besoin au fur et a mesure.

    Ce ne sont que des observations, ce post n as pas pour vocation a devenir une copie de la doc officielle de bootstrap.D'ou les aspects tels que la typographie, que je n ais pas abordé.

    Si une erreur s est glissée, merci de me la signaler afin que j'edites ce post.

    sous Joomla 3.0, les fichiers système css de bootstrap se trouvent dans le dossier /media/jui/css.

    EDIT:Le fichier contenant les propriétés bootstrap, dans le template protostar est le fichier css/template.css

    Il yas les fichiers.min.css et les fichiers css.
    Les fichiers.min.css sont des fichiers dont le contenu est identique au fichiers css "standard", mais dont l'affichage est sur une seule ligne et ou touts les caractères inutiles ont été supprimés, ce qui les rends très dur à lire. Si vous devez effectuer des modifications, modifiez le fichier css correspondant et ensuite minifiez le avec un site tel que celui ci: http://www.minifycss.com/css-compressor/, et ensuite remplacez le fichier .min.css.

    Pour la typographie, suivez ce lien :http://twitter.github.com/bootstrap/base-css.html C'est la doc officielle. Memes les non anglophones peuvent la comprendre, car pour chaque propriété, il y ass un exemple.
    Pour ma part, c est mon document de référence. Ces typographies peuvent directement être utilisées dans vos articles , a condition d'utiliser l'editeur codemirror ou non wysiwyg.

    Au niveau du positionnement:
    si on met une balise <jdoc:include> dans un conteneur <div="row"> , il est possible de positionner plusieurs modules de manière horizontale. Pour cela, il faut ajouter " spann" (n étant le nombre de "colonnes" que le module doit occuper) comme suffixe de module et bootstrap s'occupe tout seul du positionnement. Le premier module dans l'ordre d'affichage est à gauche. Et cela permet d'ajuster la largeur de chaque module indépendament.

    Cela simplifies la creation des template, car on as besoin d'une seule position par rangée, alors qu'avant, si on voulais 3 colonnes, il fallait 3 positions differentes.

    La classe offset:
    Cette classe permet de décaler le module en laissant un espace vide.
    Si on souhaite un module de 4 colonnes de large a gauche et un autre module de 4 colonnes completement à droite, il suffit d ajouter les suffixes de classe de module suivant:
    1er module:" span4", et pour le second " span4 offset4".


    Les classes .visible-desktop , .visible-tablet, .visible_phone, .hidden-desktop, .hidden-tablet, .hidden-phone:

    Ces classes correspondent à des intervalles de résolution. Ce sont aussi des suffixes de classe de module.
    Elles servent à afficher ou cacher des modules en fonction de la résolution de l'écran du visiteur.
    Elles sont utiles pour simplifier la mise en page pour les ecrans de faible résolution (smartphone).

    desktop signifies une résolution > à 1024px
    tablet signifies une résolution entre 768px et 1024
    mobile signifies une résolution inférieure a 768px

    .visible-desktop signfies que le module serat visible uniquement si la resolution de l'ecran du visiteur as une résolution > à 1024px. Le module n'apparaitras pas si la resolution est inférieure à 1024px
    .hidden-desktop signifies que le module serat invisible si la résolution est > à 1024px et visible pour les mobiles et tablets.

    Les boutons s'appliquent principalement aux liens, les labels et badges aux balises <span>.

    Les sélécteurs css standard sont des balises sémantiques qui correspondent à des actions. Il n y as aucun sélécteur qui est la pour la présentation.
    J'ai eu besoin de creer une classe social, pour indiquer que les liens pointent vers des réseaux sociaux.
    Dans le fichier bootstrap.min.css, j ai ajouté les lignes ci dessous dans le fichier bootstrap.css pour les boutons:
    .btn-social:hover,
    .btn-social:active,
    .btn-social.active,
    .btn-social.disabled,
    .btn-social[disabled] {
    color: #C461BB;
    background-color: #C461BB;
    *background-color: #C461BB;
    }
    .btn-social:active,
    .btn-social.active {
    background-color: #EF15DB \9;
    }
    Dans mon article ou ma surcharge, je m'en sert comme ceci <a class="btn btn-social" href="#">mon texte</a>

    Pour agrandir, ou rétrecir la taille d'un bouton, il faut utiliser les classes suivante: btn-mini, btn-small ou btn-large.
    Pour empiler les boutons les uns sur les autres, il faut utiliser la classe btn-block.
    pour mettre une balise ou un sélécteur completement à droite, il faut utiliser la classe pull-right.

    Pour les labels , les bages, le principe est le meme. Vous pouvez creer vos propres schemas de couleurs.
    un autre exemple de personnalisation:
    Vous pouvez creer uniquement un label, ou un badge.
    La classe ci dessous correspond aux labels suivi d'un lien
    .label-blue[href],
    .badge-blue[href] {
    background-color: #7ABCC4;
    }
    .label-blue,
    .badge-blue {
    background-color: #15D7EF;
    }
    Pur utiliser cette classe ,j'entre ceci dans mon article ou ma surcharge <span class="label label-blue"> mon texte </span> .

    Dans les fichiers css vous pouvez voir des lignes comme celles ci:
    Traduction en francais du selecteur css:
    .nav .active a > [class^="icon-"] correspond aux classe nav, qui contiennent la classe active, qui contient un lien a enfant de nimporte quelle classe qui ne contient pas icon-.

    .nav .active a > [class*="icon-"] correspond aux classe nav, qui contiennent la classe active, qui contient un lien a enfant de nimporte quelle classe dont le nom contient icon- suivi de nimporte quelle suite de caractéres, autrement dit toutes les icones.

    Je ferais un autre sujet sur la personnalisation des icones .

    en esperant que cela soit utile.
    Dernière édition par lefabdu51 à 09/10/2012, 14h23 Raison: ajout de précisions

Annonce

Réduire
1 sur 2 < >

C'est [Réglé] et on n'en parle plus ?

A quoi ça sert ?
La mention [Réglé] permet aux visiteurs d'identifier rapidement les messages qui ont trouvé une solution.

Merci donc d'utiliser cette fonctionnalité afin de faciliter la navigation et la recherche d'informations de tous sur le forum.

Si vous deviez oublier de porter cette mention, nous nous permettrons de le faire à votre place... mais seulement une fois
Comment ajouter la mention [Réglé] à votre discussion ?
1 - Aller sur votre discussion et éditer votre premier message :


2 - Cliquer sur la liste déroulante Préfixe.

3 - Choisir le préfixe [Réglé].


4 - Et voilà… votre discussion est désormais identifiée comme réglée.

2 sur 2 < >

Assistance au forum - Outil de publication d'infos de votre site

Compatibilité: PHP 4.1,PHP4, 5, 6DEV MySQL 3.2 - 5.5 MySQLi from 4.1 ( @ >=PHP 4.4.9)

Support Version de Joomla! : | J!3.0 | J!2.5.xx | J!1.7.xx | J!1.6.xx | J1.5.xx | J!1.0.xx |

Version française (FR) D'autres versions sont disponibles depuis la version originale de FPA

UTILISER À VOS PROPRES RISQUES :
L'exactitude et l'exhaustivité de ce script ainsi que la documentation ne sont pas garanties et aucune responsabilité ne sera acceptée pour tout dommage, questions ou confusion provoquée par l'utilisation de ce script.

Problèmes connus :
FPA n'est actuellement pas compatible avec des sites Joomla qui ont eu leur fichier configuration.php déplacé en dehors du répertoire public_html.

Installation :

1. Téléchargez l'archive souhaitée : http://afuj.github.io/FPA/

Archive zip : https://github.com/AFUJ/FPA/zipball/master

2. Décompressez le fichier de package téléchargé sur votre propre ordinateur (à l'aide de WinZip ou d'un outil de décompression natif).

3. Lisez le fichier LISEZMOI inclus pour toutes les notes de versions spécifiques.

4. LIRE le fichier de documentation inclus pour obtenir des instructions d'utilisation détaillées.

5. Téléchargez le script fpa-fr.php à la racine de votre site Joomla!. C'est l'endroit que vous avez installé Joomla et ce n'est pas la racine principale de votre serveur. Voir les exemples ci-dessous.

6. Exécutez le script via votre navigateur en tapant: http:// www. votresite .com/ fpa-fr.php
et remplacer www. votresite .com par votre nom de domaine


Exemples:
Joomla! est installé dans votre répertoire web et vous avez installé la version française du fichier FPA:
Télécharger le script fpa-fr.php dans: /public_html/
Pour executer le script: http://www..com/fpa-fr.php

Joomla! est installé dans un sous-répertoire nommé "cms" et vous avez installé la version française du fichier FPA:
Télécharger le script fpa-fr.php dans: /public_html/cms/
Pour executer le script: http://www..com/cms/fpa-fr.php

En raison de la nature très sensible de l'information affichée par le script FPA, il doit être retiré immédiatement du serveur après son utilisation.

Pour supprimer le script de votre site, utilisez le lien de script de suppression fourni en haut de la page du script. Si le lien de suppression échoue pour supprimer le script, utilisez votre programme FTP pour le supprimer manuellement ou changer le nom une fois que le script a généré les données du site et le message publié sur le forum. Si le script est toujours présent sur le site, il peut être utilisé pour recueillir suffisamment d'informations pour pirater votre site. Le retrait du script empêche des étrangers de l'utiliser pour jeter un oeil à la façon dont votre site est structuré et de détecter les défauts qui peuvent être utilisé à vos dépends.
Voir plus
Voir moins

Partenaire de l'association

Réduire

Hébergeur Web PlanetHoster
Travaille ...
X