web-dev-qa-db-fra.com

Comment conserver mon sous-thème Bootstrap sans utiliser le CDN?

J'ai créé un sous-thème bootstrap version de CDN.

Je me suis basé sur "Journal" version "3.3.6" et j'ai personnalisé mon fichier style.css avec 900 lignes.

enter image description here

https://bootswatch.com/

Je ne souhaite plus utiliser le CDN, mais j'aime conserver mon thème actuel "Journal" et ma feuille de style personnalisée.

Comment puis-je faire cela sans utiliser "moins"?

Ce que je veux c'est travailler avec CSS

J'ai posé cette question il y a plusieurs semaines mais je n'ai toujours pas trouvé de solution:

Installer sans Bootstrap CDN

enter image description here

Merci Zuzuesque, votre solution fonctionne, mais j'ai un problème d'affichage:

  • Je n'ai plus les "glyphicons"

  • La barre de menus ne s'affiche pas correctement

  • Le menu d'administration est masqué par la barre de menus

7theming
5
user54067

Vous devrez changer le module que vous utilisez - Bootstrap La bibliothèque n'est pas adaptée pour être utilisée sans CDN. La fonction principale de ce module est la connexion à un CDN de votre choix - pas de thème (ou css) lui-même.

Le module que vous voudrez utiliser est le Bootstrap Theme . Celui-ci fournit un sous-thème que vous pouvez développer.

Pour lancer le thème Bootstrap:

  1. Désactivez votre ancien thème Journal + déplacez-le du dossier de thème - c'est important. (Peut-être faire une sauvegarde quelque part).
  2. Téléchargez le Bootstrap Theme à partir du site Drupal et placez-le dans votre dossier de thème. (Et laissez-le là))
  3. Créez un sous-thème en suivant les instructions du kit moins starter (vous n'aurez pas besoin de toucher moins de soucis) ici: Bootstrap sous-thématique . Fondamentalement, vous copiez le bootstrap_subtheme dossier du bootstrap thème dans votre dossier de thème et renommez le dossier en journal (nom de votre thème). Vous renommez également ./journal/less.starterkit à ./journal/journal.info.
  4. Ouvrez votre nouveau fichier .info et changez le nom + la description. (Vous pouvez le copier à partir de votre ancien thème.)
  5. Téléchargez la dernière version 3.x.x de Bootstrap Framework Source Files dans votre nouveau sous-thème. Une fois qu'il a été extrait, le dossier doit lire ./journal/bootstrap. (Ne modifiez pas les fichiers de ce dossier, ce dossier vous permet de mettre à jour ultérieurement Bootstrap sans écraser vos modifications.)
  6. Téléchargez le thème du journal css sur bootswatch. Copiez-le dans votre journal/css dossier. (Il s'agit du fichier qui était précédemment fourni par le CDN.) Il devrait maintenant afficher journal/css/bootstrap.min.css
  7. Ouvrez votre .info fichier à nouveau, recherchez la ligne stylesheets[all][] = css/style.csset ajoutez une ligne juste au-dessus: stylesheets[all][] = css/bootstrap.min.css. Cela chargera le journal par défaut css.
  8. Vous devez maintenant copier vos modifications personnalisées dans le nouveau thème. Copiez votre css personnalisé dans css/style.css et vos fichiers de modèle (si vous avez des fichiers de modèle personnalisés) dans le journal/templatesdossier.
  9. Activez votre nouveau thème de journal.

Glyphicons

Vérifiez votre sous-thème ... il devrait y avoir un dossier fonts. S'il n'y en a pas, créez-en un. Ensuite, accédez au bootstrap fichiers source que vous placez dans le dossier bootstrap de votre thème, recherchez-y le dossier de polices et copiez tous les fichiers de polices dans votre propre font (Ceci est nécessaire car le CSS par défaut recherche les polices sous ../fonts/font-name)

Menu principal

Avez-vous vérifié les paramètres de votre nouveau thème dans l'interface utilisateur? Il a quelques paramètres de barre de menu, peut-être que vous utilisez simplement le mauvais. Généralement bootstrap fonctionne bien avec le menu d'administration, au moins sur tous les sites sur lesquels je l'ai. Il est possible que certains de vos CSS personnalisés interfèrent avec la valeur par défaut bootstrap configuration du thème. Dans ce cas, vous auriez besoin de faire un débogage sur votre CSS personnalisé. D'après ce que je vois, il pourrait être suffisant pour le front-end de donner au conteneur principal une marge supérieure de 60 à 70 pixels.

6
Zuzuesque

J'ai pu désactiver l'utilisation du CDN dans Drupal Bootstrap 7.x-3.25 dans un sous-thème que nous pouvons appeler subtheme_name.

J'ai d'abord chargé le site avec le CDN activé, puis je suis allé dans les outils de développement du navigateur, j'ai regardé l'onglet réseau, rechargé la page, puis copié les URL pour bootstrap.css, drupal-bootstrap.css et bootstrap.js. J'ai ensuite téléchargé ces fichiers depuis le CDN et les ai mis dans le subtheme_name/bootstrap/css/ et subtheme_name/bootstrap/js/ répertoires que j'ai créés.

J'ai ajouté ces lignes à la section Stylesheets de subtheme_name.info:

stylesheets[all][] = bootstrap/css/bootstrap.css
stylesheets[all][] = bootstrap/css/drupal-bootstrap.css

J'ai ajouté cette ligne à la section Scripts de .info fichier:

scripts[] = 'bootstrap/js/bootstrap.js'

J'ai commenté settings[bootstrap_cdn_provider] = '' dans ce fichier, puis a exécuté drush cc all pour vider le cache. Les outils réseau indiquent désormais que les fichiers proviennent du site et non du CDN.

0
sudoman