Feuille de style CSS externe hébergée sur Dropbox

[YodellingDude]

Détails techniques

Version du forum : phpBB2
Poste occupé : Membre
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Moi uniquement
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonsoir, je viens quémander votre aide après moult heures à m'arracher les cheveux. Je vais vous prévenir de suite, je suis en train d'atteindre les limites du peu de connaissance que j'ai à ce sujet, il va falloir me parler comme à un enfant et me vulgariser tout le vocabulaire hahaha!!

Alors voila je vais vous expliquer mon problème: Je suis actuellement en procédure d'inscription sur un forum et voulant utiliser de jolis codes pour ma fiche de présentation j'ai eu le droit à un "votre message dépasse la limite autorisée" (c'est un forum rpg et j'ai tendance à écrire des pavés haha). Tenant à ce que j'avais fait j'ai ressortie un vieux forum de sous ma manche pour créer une page dans la section "gestion des pages html" et poster ça sur le nouveau forum sous une balise iframe MAIS..!

..Je ne suis pas du tout convaincu de la praticité de la chose, et j'aimerais plutôt garder ma structure html avec mon blabla dans mon post et laisser l'encombrant css dans la page HTML, sauf que ça marche pas, et je découvre finalement que c'est impossible, puis tout les exemples que j'ai pu trouver ressemblait plus à

Code:

<link href="http://siteblabla.css" rel="stylesheet" type="text/css">

Je n'ai pas de droit d'admin sur ce forum donc pas d'accès au css (ce qui réglerait tout, j'ai testé sur mon vieux forum et ça vide assez le code pour que le message d'erreur n’apparaisse plus) j'ai essayé de l'héberger sur des sites pour obtenir le résultat ci-dessus mais en vain (je n'y comprend rien, trouve les sites louches et/ou payant) J'aimerais savoir s'il y avait moyen de tricher avec l'iframe ou même une autre solution (..que forumactif aurait laissé à disposition sans que je le sache ouuu j'sais pas aidez moi s'il vous plait ;__; )

[Walt]

Bonjour,

Il vous faut créer un fichier CSS comprenant l'ensemble du code en question, et trouver un hébergement pour ce fichier. Si vous utilisez Dropbox vous pourriez tenter par là. Une fois hébergé il ne vous restera plus qu'à récupérer le lien finissant en .css et à l'insérer dans la balise que vous indiquez ci-dessus.

Cordialement,
Walt

[YodellingDude]

Bonjour!

Merci beaucoup de votre réponse, j'ai testé votre méthode sans connaitre dropbox et je rencontre un petit souci: Je ne regarde peut être pas au bon endroit, mais le lien donné pour le partage ne termine pas en ".css" mais ".css?dl=0" et je pense que c'est pour ça que ça ne fonctionne pas, ou alors je n'ai pas compris quand vous disiez "l'ensemble du code en question" on parle bien que du css..?

EDIT: Je viens tomber là dessus: "Utilisateurs Dropbox Basic (gratuit) : à partir du 3 octobre 2016, vous ne pourrez plus utiliser de liens partagés pour l'affichage de fichiers HTML dans un navigateur Web. Si vous avez créé un site Web qui présente directement des fichiers HTML depuis votre Dropbox, vous ne pourrez plus automatiquement les afficher dans le navigateur." Ceci explique peut-être cela..

RE-EDIT: Même constat avec Google drive (je ne désespère pas hahaha!) apparemment ça ne serait plus possible depuis cet été pfuuuh help me plz ;__;

[YodellingDude]

Up

[Walt]

Bonjour,

Je ne sais pas si leur limitation vaut pour une feuille de style CSS. C'est possible... Pourriez-vous me donner le lien de votre fichier Dropbox ? Je vais tester.

Cordialement,
Walt

[YodellingDude]

Bonjour!

Voici le lien: https://www.dropbox.com/s/uasdi299gerqbx8/csspres.css?dl=0

Merci beaucoup pour votre aide, grâce à vous avec un peu de chance il me restera des cheveux quand tout ça sera réglé hahaha!

[YodellingDude]

up

[YodellingDude]

up

[Walt]

Bonjour,

Effectivement le fichier dropbox ne génère pas réellement un fichier CSS, utilisable directement... Il vous faut trouver un autre hébergeur pour le fichier qui permette un lien direct.

En outre, j'ai réduit votre CSS (26 lignes en moins) :

Code:

.BLIG {
    position: relative;
    width: 540px;
    height: 175px;
    margin: auto;
    line-height: normal;
    transition: height 1s linear;
}
.BLIG div {
    position: absolute;
    z-index: 2;
    width: 520px;
    height: 155px;
    padding: 3px 10px;
    text-align: center;
    background-color: #191919;
    color: #ccc;
    transition: height 0.45s linear;
    font-size: 16px;
    border-bottom: 16px solid #fff;
    box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.75);
    border-radius: 20px 20px 0 0;
}
.BLIG div p {
    display: block;
   margin: 10px auto auto 275px;
    font-size: 10px;
    text-align: center;
    width: 215px;
    height: 97px;
    padding: 5px;
    background: #fafafa;
    color: black;
    overflow: hidden;
    font-weight: normal;
    transition: height .75s linear;
}
.BLIG:hover div {
    height: 25px;
    overflow: hidden;
}
.BLIG:hover div p {
    height: 0px;
    overflow: hidden;
}
.BLIG div img {
    float: left;
    width: 225px;
    height: 100px;
    border: 3px solid;
   margin: 10px auto auto 20px;
    transition: height .75s linear;
    border-color: #ccc;
}
.BLIG span {
    position: absolute;
    z-index: 1;
    background-color: #191919;
    border-radius: 20px 20px 0 0;
    width: 510px;
    height: 0;
    text-align: justify;
    padding: 15px;
    transition: all 1s linear;
}
.BLIG span p {
    width: 95%;
    margin: auto;
    overflow: hidden;
    height: 0;
    padding: 7px;
    font-size: 11px;
    background-color: #fafafa;
    color: #000;
    transition: all 1s linear;
}
.BLIG:hover span {
    margin-top: 30px;
    height: 315px;
}
.BLIG:hover span p {
    height: 295px;
    overflow: auto;
}
.BLIG:hover {
    height: 375px;
}
.BLIG:hover div img {
    height: 0px;
}

Vous pourriez retenter dans le message... peut-être que ça passera. Voire en version minifiée :

Code:

.BLIG{position:relative;width:540px;height:175px;margin:auto;line-height:normal;transition:height 1s linear}.BLIG div{position:absolute;z-index:2;width:520px;height:155px;padding:3px 10px;text-align:center;background-color:#191919;color:#ccc;transition:height 0.45s linear;font-size:16px;border-bottom:16px solid #fff;box-shadow:0px 0px 0px 1px rgba(0, 0, 0, 0.75);border-radius:20px 20px 0 0}.BLIG div p{display:block;margin:10px auto auto 275px;font-size:10px;text-align:center;width:215px;height:97px;padding:5px;background:#fafafa;color:black;overflow:hidden;font-weight:normal;transition:height .75s linear}.BLIG:hover div{height:25px;overflow:hidden}.BLIG:hover div p{height:0px;overflow:hidden}.BLIG div img{float:left;width:225px;height:100px;border:3px solid;margin:10px auto auto 20px;transition:height .75s linear;border-color:#ccc}.BLIG span{position:absolute;z-index:1;background-color:#191919;border-radius:20px 20px 0 0;width:510px;height:0;text-align:justify;padding:15px;transition:all 1s linear}.BLIG span p{width:95%;margin:auto;overflow:hidden;height:0;padding:7px;font-size:11px;background-color:#fafafa;color:#000;transition:all 1s linear}.BLIG:hover span{margin-top:30px;height:315px}.BLIG:hover span p{height:295px;overflow:auto}.BLIG:hover{height:375px}.BLIG:hover div img{height:0px}

[YodellingDude]

Bonjour!

Tout d'abord, merci pour la nouvelle version! Ça me sera bien utile si je ne trouve pas de solution, je devrais alors me résoudre à contacter les admin pour savoir si squatter leur fiche css à titre exceptionnel serait possible, mais je préférerais éviter une approche aux allures si négative, la première impression peut nous coller à la peau et ce genre de démarche ne me parait pas très engageante..

Le souci avec le fait de l'incorporer dans le message est que le résultat de ce code correspond à l'encadrement de seulement un "chapitre" ..et que j'en ai 10 hahaha! Et devant déjà le faire en double post à cause de leurs longueurs sans mise en page je n'ose imaginer ce que ça donnerait avec si je n'isole pas le css d'où la recherche d'une solution.

Quelqu'un aurait-il une idée de comment les administrateurs procèdent quand leur feuille de style atteint la limite autorisée? Il y aurait-il une plateforme style blogspot, tumblr ou autre qui permettrais d'héberger une feuille de style css? (devrais-je poster un nouveau sujet en formulant ma recherche de cette manière..?)

[Walt]

Bonjour,

J'ai vu dans ce sujet que @Arcadia-forum utilisait une feuille de style hébergée sur Dropbox, donc il doit y avoir un moyen d'obtenir un lien du fichier .css qui n'affiche pas une page sur Dropbox mais qui charge réellement le fichier... Mais n'utilisant pas Dropbox je ne saurai vous dire lequel !

Peut-être @Arcadia-forum pourrait-il vous aider s'il passe par-là.

Cordialement,
Walt

[YodellingDude]

Merci beaucoup! Je lui ai envoyé un mp, je garde le sujet ouvert au cas ou (et le passerais en résolu s'il le devient) bonne journée à vous et encore merci pour toute votre aide!

[ZYVHK]

Bonsoir o/ Désolé du retard ~
En effet, il y a moyen d'utiliser une feuille de CSS externe pour son forum. Je vais faire en sorte que ce message soit efficace et compréhensible pour tous;

Ici, Dropbox est l'un des meilleurs hébergeurs que l'on peut utiliser à cet effet : ne pas utiliser Google Drive qui ne fonctionne qu'une fois sur deux. Après s'être inscrit sur le site de Dropbox, il vous faut obligatoirement installer l'application que vous trouverez ici. Une fois téléchargée, installez et ouvrez-la.

Il y a peut-être une procédure (très simple) de connexion et de synchronisation à faire lors du premier lancement de l'application; je ne m'en souviens plus très bien. Une fois connecté, vous devriez voir une nouvelle icône dans la barre des tâches, à droite. (cliquez sur le "^" si vous ne la voyez pas) Double cliquez.

Vous aurez désormais votre dossier personnel de Dropbox ouvert sur votre bureau : preuve que le site et votre ordinateur sont synchronisés et ce, en toute sécurité. Créez un nouveau document texte :

Nommez-le comme vous le souhaitez. Maintenant, direction le site : https://www.dropbox.com/home/
Vous avez normalement le site d'ouvert avec au milieu : le fichier que vous venez de créer. Clique droit sur celui-ci et cliquez sur Rename.

Remplacez simplement le ".txt" par un ".css".

Maintenant, retour dans le dossier de votre espace Dropbox sur le bureau. Ouvrez votre fichier renommé en .css, collez-y votre CSS en question et sauvegardez. Votre CSS est fin prêt.

Pour récupérer le .CSS brut du fichier .css pour qu'il soit fonctionnel en l'ajoutant à votre forum, il faut se baser sur le lien suivant : https://dl.dropboxusercontent.com/s/ID/CSS.css
Pour connaître l'ID, il suffit d'ouvrir votre CSS sur le site (par exemple pour vous : https://www.dropbox.com/s/uasdi299gerqbx8/csspres.css?dl=0) et de récupérer le long charabia entre le /s/ et le /csspres.css, ce qui donne : uasdi299gerqbx8
Pour le CSS, vous l'aurez deviné; il s'agit simplement de récupérer le nom de votre fichier .CSS; ici, csspres. Prenez le lien de base et modifiez ce que vous avez récupéré.

https://dl.dropboxusercontent.com/s/ID/CSS.css » https://dl.dropboxusercontent.com/s/uasdi299gerqbx8/csspres.css

Vous avez donc finalement le lien final et fonctionnel (normalement :B).
Pour l'intégrer au forum, je recommande de l'insérer dans le template overall_header ~

Code:

<link href="https://dl.dropboxusercontent.com/s/uasdi299gerqbx8/csspres.css" rel="stylesheet" type="text/css" />

J'espère que c'est assez clair ! ^-^

[YodellingDude]

Bonjouuuur!

Alalala, j'étais tellement content que j'ai finalement zapé le café pour tester la méthode, c'est seulement arrivé à la fin du tuto que j'ai réalisé que l'url que je fabriquais était en fait ..déjà prêt en bas de page, ça m'a bien fait rire XD Mais au moins je sais comment on fais si ça m'arrive de nouveau et ça pourra aider d'autres personnes qui rencontrent ce problème :B

En tout cas, merci beaucoup à tout les deux! Je passe le sujet en résolu!

[Walt]

Bonjour,

Merci à vous @Arcadia-forum pour cette explication détaillée qui ne manquera pas d'aider d'autres personnes.

Cordialement,
Walt