info:concrete5:themes:csshack

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentes Révision précédente
Prochaine révision		 Révision précédente
info:concrete5:themes:csshack [2025/09/19 04:44] – supprimée - modification externe (Date inconnue) 127.0.0.1info:concrete5:themes:csshack [2025/09/19 05:31] (Version actuelle) – ↷ Liens modifiés en raison d'un déplacement. 217.113.196.132
Ligne 1: Ligne 1:
 +====== CSS: ajouter une css quick&dirty (importation de site) ======
 +{{tag>c5 css}}
 +
 +Vous devez importer un site dans c5 et vous avez peu de temps?
 +
 +Voici une solution sale mais rapide, qui permet d'éviter d'interférer avec les css de c5 (notamment celles qui servent pour l'administration du site) en surchargeant simplement.
 +
 +===== Ajouter la css du site original dans le thème =====
 +
 +Soit la css originale, p. ex. siteoriginal.css
 +
 +Modifier avec une expression régulière la css en prenant garde auparavant à avoir une et une seule règle css par ligne:
 +
 +<code>
 +saveback siteoriginal.css
 +cat siteoriginal.css | sed 's|^|#siteoriginalcss |g' > tmp && mv tmp siteoriginal.css
 +</code>
 +
 +On aura un truc du genre:
 +<code css>
 +/* original stylesheet old website */
 +#siteoriginalcss a:hover{background-color: transparent; color: transparent; padding: 0px}
 +/* #siteoriginalcss ... (suite de la css)*/
 +</code>
 +
 +Si on est un des thèmes standards c56 (sinon adapter à ses besoins)
 +
 +Copier la css dans /themes/yourtheme/elements/siteoriginal.css
 +
 +Puis modifier
 +
 +   /themes/elements/header.php
 +
 +<note tip>
 +le nom du fichier dépendra du thème! ici c'est le thème par défaut; si on utilise le package/thème stucco, p. ex., ce sera
 +     packages/theme_stucco/themes/stucco/inc/header_top.php
 +</note>
 +
 +On ajoute au début la css 
 +
 +<code php>
 +<!-- Site Header Content //-->
 +<link rel="stylesheet" media="screen" type="text/css" href="<?php echo $this->getStyleSheet('main.css')?>" />
 +<link rel="stylesheet" media="screen" type="text/css" href="<?php echo $this->getStyleSheet('typography.css')?>" />
 +<link rel="stylesheet" media="screen" type="text/css" href="<?php echo $this->getStyleSheet('siteoriginal.css')?>" />
 +
 +</head>
 +</code>
 +
 +Puis un peu plus bas:
 +
 +<code php>
 +//...
 +<body>
 +//...
 + <div id="header-area">
 + <div class="divider"></div>
 + <div id="header-area-inside">
 + <?php
 + $ah = new Area('Header');
 + $ah->display($c);
 + ?>
 + </div>
 +
 + <?php if ($ah->getTotalBlocksInArea() > 0) { ?>
 + <div class="divider"></div>
 + <?php } ?>
 + </div>
 + </div>
 + <div id="siteoriginal"> //modif zpartakov ADDED TO INTEGRATE ORIGINAL CSS
 +</code>
 +
 +Puis modifier le footer en ajoutant un </div> pour fermer la balise
 +
 +   /themes/elements/footer.php
 +   
 +<code php>
 +//... début du fichier
 +</div>
 +<?php Loader::element('footer_required'); ?>
 +</div>
 +</body>
 +</code>
 +   
 +C'est tout!
 +
 +===== voir aussi =====
 +
 +
 +  * [[info:concrete5:themes:csseditor|csseditor: ajouter des entrées CSS dans l'éditeur WYSIWYG]]
 +  * [[..:docfred:theme_elements|Concrete5: éléments communs dans le thème (/elements/header & footer)]]
 +  * [[https://documentation.concrete5.org/developers/designing-for-concrete5/building-a-concrete5-theme/converting-an-html-template-to-a-concrete5-theme|converting-an-html-template-to-a-concrete5-theme]]
 +  * [[https://legacy-documentation.concrete5.org/tutorials/how-to-copy-the-elemental-theme-to-use-as-a-base-for-new-themes|adapter le thème elemental]] 
 +  * [[info:concrete5:themes:cssperso|Personnaliser le thème directement via l'interface c5]]
 +