[TOUTES VERSIONS] Héberger du css dans une page html comme sur la feuille de style

[fascicularia]

Bonjour à tous, 
le petit bout de code que vous allez trouver dans ce sujet vous permettra d'utiliser une page html comme une feuille de style.

Au niveau utilité, je dirai que les avantages sont multiples :

1 si vous avez votre feuille de style saturée et que vous ne souhaitez pas surcharger votre overall_header ou héberger en externe ce script vous permettra de palier a ce soucis.

2 si vous voulez compartimenter votre css par champ d'action (modification index, modification postbody.....) vous pourrez utiliser vos pages html pour cela.

3 Si vous souhaitez offrir à vos membres un thème temporaire sans chambouler votre css initial, ce script vous permettra de le faire sans pour autant aller modifier le css du thème principal. Il vous suffira d'utiliser La règle CSS !important  pour modifier un élément précis du thème initial.


Passons aux choses sérieuses




1 collez votre css sur la page html comme vous le feriez sur la feuille de style

Modules/HTML & JAVASCRIPT/Gestion des pages HTML/Création en mode avancé (HTML)

Titre * : Mettre un titre
Voulez-vous utiliser le haut et le bas de page de votre forum ? Cocher Non
Utiliser cette page en tant que page d'accueil ?  Cocher Non



2 récupérez le lien écourté de cette page html



Comme pour l'exemple, il faut récupérer :

Code:

/h87-body

3 Modules/HTML JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript
Mettre un titre explicite.
Cocher sur toutes les pages.
Pensez a cliquer sur le bouton 

collez le script suivant dans la gestion des javascripts en remplaçant le "LIEN DE VOTRE PAGE HTML" par celui de votre page html et en cochant sur toutes les pages.

Code:

$(function() {
  $('head').append('<style id="externcss"></style>');
  $('#externcss').load('/h87-body');
});

4 Validez et le tour est joué



Pour l'exemple le script sera donc:

Code:

$(function() {
  $('head').append('<style id="externcss"></style>');
  $('#externcss').load('/h87-body');
});

[Milouze14Fondateur]

Stéphane,

merci pour le partage, c'est assez judicieux comme astuce ,
je me demande encore pourquoi je n'y ai pas pensé .

[dragon594]

Merci beaucoup !

[RED²]

Merci beaucoup !

[Sacha]

Hello,

Alors cela, oui effectivement, très intéressant.

Merci.
Sacha.

[photoclic]

Merci beaucoup !

[photoclic]

Excellent ça. Merci.

Un truc du genre pour les javascipts qui eux sont limités à 50 je crois serait top.

[Sick.l.Offrande]

Merci beaucoup !

[Gae]

Merci beaucoup !

[Ecleasya]

Merci beaucoup !

[msfeettoes]

Merci beaucoup !

[Ptite_Perle]

Merci beaucoup !

[petit coq]

Merci beaucoup !

[photoclic]

Juste un petit mot pour dire qu'en encadrant ainsi le code CSS dans la page HTML, les commentaires peuvent être conservés.
 

Code:

<style>
/*commentaire*/
le code css en html
etc.
</style>

[JuliaLany]

Merci beaucoup !

[kristhyane]

Merci beaucoup !

[chrisnvidia]

Merci beaucoup !

[Senpai]

Merci beaucoup !

[Psychotic Bitch]

Merci beaucoup !

[Ambroise]

Merci beaucoup !

[Constellation]

Super pratique merci beaucoup

[ren]

Merci beaucoup , mais il me manque des explications : Quelle page HTML ? comment je fais ca ?  le lien écouté je le trouve où ?

[Milouze14Fondateur]

@ren  ,
je viens d'apporter des informations au tutoriel car effectivement ce n'était pas très clair quand on débute.

https://www.milouze14.com/t29034-toutes-versions-heberger-du-css-dans-une-page-html-comme-sur-la-feuille-de-style#556149


Attention toutefois, les astuces ne reçoivent pas d'autres informations .