Ombres à certains endroits

[Alexlerouche]

Détails techniques

Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome, Internet Explorer
Personnes concernées par le problème : Moi uniquement
Lien du forum : http://standardfoot.forumgratuit.be/

Description du problème

Bonjour ,

Après plusieurs recherches infructueuses (je ne dois p-ê pas utiliser les bons mots clés ..) je vous fais part de mes petits caprices .. ^^

Voilà , comme le titre l'indique , j'aimerais ajouter des ombres à certains endroits mais toujours sur le bas et la droite de ce que je vais mentionner ci-après :

- Des cadres commentaires (comme ici sur le FDF) ;
- De tous les widgets (comme ici aussi) ;
- De la chat box ;
- Juste sous mes images/entêtes catégories (mais là , juste de l'ombre vers le bas). Voici une capture pour être plus précis :

Et chat box également :

- Zone d'éditeur de texte.

Ouf , j'espère que ça ne fait pas trop d'un coup ..

J'ai déjà réussi à faire des ombres pour les corps de mes catégories ainsi que sous les entêtes de mes widgets , comme vous pourrez le constater si vous visitez mon forum test .. Je le dis car p-ê faut-il simplement compléter les codes css que j'ai utiliser ..

Voilà voilà .. En espérant que vous comprenez bien toutes mes requêtes ..

Merci d'avances pour vos précieuses aides ..
Bon dimanche ,
Alex.

[Alexlerouche]

Un peu en avance pour un "up" mais c'est simplement juste avant que je ne parte au boulot ..

J'espère avoir une réponse ne rentrant ..

Bonne journée !

[Nikkyzon]

Salut à toi !
C'est peut-être long à lire, mais ça vaut le coup.
D'après ce que j'ai compris, tu veux mettre des ombres à l'intérieur, mais de toute façon, je vais te montrer les deux.

Pour pouvoir mettre des ombres, il te faut d'abord une table (ou règle) CSS, dont ici, je penses que c'est forabg pour les forums principaux et forumbg pour les sous-forums*. Dans celle-ci, nous allons mettre des ombres externe grâce à box-shdaow.

Exemple :

Code:


.forabg
{
    box-shadow: 0px 0px 5px #000;
}


Ici, dans box-shadow, nous avons 3 valeurs :
La première (0px) : correspond à l'orientation horizontale. C-a-d que si je veux que mon ombre fasse effet à droite, je n'ai qu'à définir la première valeur à 1 et plus [2,3,10...px] (ça dépendra de tes goûts). Et si je veux que mon ombre fasse effet à gauche, je rentre la même valeur que sur la droite MAIS avec un signe moins (-) avant la valeur indiquée [-1,-2,-10...px] pour lui ordonner d'aller à l'autre côté.

La deuxième (0px) : correspond à l'orientation verticale. C-a-d que si je veux que mon ombre fasse effet vers le bas, je n'ai qu'à définir la première valeur à 1 et plus [2,3,10...px] (ça dépendra de tes goûts). Et si je veux que mon ombre fasse effet vers le haut, je rentre la même valeur que pour le bas MAIS avec un signe moins (-) avant la valeur indiquée [-1,-2,-10...px] pour lui ordonner d'aller à l'autre côté.

La troisième valeur (5px) : correspond à l'étendu de l'ombre.
Si l'ombre devient un peut trop floue à cause de l'étendu de l'ombre, je peux l'intensifier en copiant les même valeur juste après celles-ci, avec une virgule qui les séparent.

La quatrième valeur : correspond tout simplement à la couleur de mon ombre (ici #000 = noir).

Une cinquième valeur s'incrustera plus tard qui prendra la première position. (à voir ci-dessous)

Exemple :

Code:


.forabg
{
    box-shadow: 0px 0px 5px #000, 0px 0px 5px #000;
}


Ici, j'en ai mis que 2, mais après tout dépendra de tes goûts, tu peux donc intensifier encore plus en les copiant ainsi, sans oublier la virgule entre les valeurs.

---

Maintenant pour appliquer tout ça, mais en ombre interne, rien n'est plus facile que de rajouter inset avant les quatres valeurs indiquées précédemment. (c'est la 5e valeur évoquée ci-dessus)

Exemple :

Code:


.forabg
{
    box-shadow: inset 0px 0px 5px #000;
}


Comme le blabla de tout à l'heure, tu peux intensifier l'étendu de l'ombre en copiant les mêmes valeurs juste après celles-ci en mettant une virgule entres ces valeurs-là.

Exemple :

Code:


.forabg
{
    box-shadow: inset 0px 0px 5px #000, inset 0px 0px 5px #000;
}


CEPENDANT, on peut insérer les ombres (interne, externe) en même temps. Tu deviens comment ?

Exemple :

Code:


.forabg
{
                    (externe)              (interne)
    box-shadow: 0px 0px 5px #000, inset 0px 0px 5px #000;
}


Tu peux intensifier blablabla...

Exemple :

Code:


.forabg
{
                (externe)          (externe)          (interne)          (interne)
    box-shadow: 0px 0px 5px #000, 0px 0px 5px #000, inset 0px 0px 5px #000, inset 0px 0px 5px #000;
}


* Je vois que tu es en PhpBB3, je le suis aussi, donc ça devrait être aussi forabg et forumbg pour toi. Donc tu appliques la même chose pour .forumbg.


J'espère que mon post t'aidera, n'oublies pas de cocher le post si oui, et marquer [résolu] au sujet.

[Alexlerouche]

Salut

Aaah , un très grand merci de bien vouloir t'attarder sur "mes problèmes" !

En fait , j'avais déjà réussi à bidouiller mes codes CSS et à installer des ombres sous les catégories et les widgets (j'en ai fait qu'un jusque maintenant mais j'ai pigé le truc , c'est déjà ça ).
Jusque là , pour ces éléments (forabg et modules widgets) , tout va bien .. Après , ce que j'aimerais , c'est que que les ombres se retrouvent également sur les côtés droits externes (donc vers l'extérieur) , et ça , je n'y arrive pas ..

Pour ce qui des ombres internes avec la table "inset" , je viens de tester et ce n'est à priori pas ce que je recherche .. Les ombres se placent sur les lignes supérieures (et font donc de l'ombre aux images d'entêtes) alors que , si tu regardes les captures d'écran dans le 1er commentaire , ce que je recherche c'est que ces ombres se placent sur les lignes inférieurs , que ça donne vers l'intérieur des cellules en somme .. Maintenant , si ce n'est pas faisable , ce n'est pas bien grave .. Même si j'aimerais bien .. ^^
J'ai réussi à le faire avec mes widgets (sous leurs entêtes) :



Voilà le résultat que j'aimerais avec mes entêtes de catégorie ..

Aussi , j'aimerais également faire la même chose (toujours si faisable) avec la chatbox, les "cellules" commentaires, la cellule éditeur de texte et les boutons "prévisualisations" et "envoyer" .. Je suppose qu'il me faut les bonnes "tables" et qu'après je complète mes css avec "box shadow" , etc .. ?

J'espère avoir été assez précis .. Pas toujours facile quand on n'est pas certains d'utiliser les bons mots ..

@ bientôt j'espère ..

Alex.

EDIT : précision sûrement inutile mais au cas où , si tu veux avoir un aperçu du forum où je "bosse" , utilise le lien dans la description se trouvant dans mon 1er commentaire .. C'est mon forum test ..

[Alexlerouche]

Bon , pour ce qui est de ma quête pour faire des effets d'ombre à droite , j'y parviens mais avec une bordure "solid" , grâce à ce code :

Code:

border-right: solid 3px #2C2C2C;

C'est pas trop mal mais pas exactement ce que je recherche .. Je ne dois pourtant pas être si loin du bon code ..

[Alexlerouche]

Alors , pour ce qui est de l'ombre en bas et des bordures à droite (avec le code "border-right: solid) pour forabg et les modules widgets , en chipotant un peu le résultat me satisfait .. J'ai pas encore encodé pour les sous-forums (ce sera pour demain ... ^^) ..

Me reste à faire la même chose pour :

- La Chatbox
- Le contour des cadres commentaires (rien qu'une fine bordure en bas et à droite ce serait déjà pas mal.. Comme ici sur FDF)
- Pour l'éditeur de texte (si possible)
- Les boutons "prévisualisation" et "envoyer" (rien qu'une fine bordure me satisferait également , il faut juste un petit effet , rien de plus ..)

Aussi , s'il y a moyen d'ajouter de l'ombre sous la partie inférieure des entêtes de mes catégories , ce serait juste parfait ..

@ bientôt

Alex.

[Nikkyzon]

Fais un tour sur mon fofo regarde les boutons et dis moi si tu les trouves bien je t enverrai directemeny le code
Et pour tes autres demandes je les verrai demain je suis fatigué avec la journée de travail.

pour mon fofo : clique sur la planete a droite en dessus de mon avatar

[Alexlerouche]

Oki merci .. J'vais aller voir sur ton forum ..

Passe une bonne journée et à très bientôt ..

[Nikkyzon]

Mais maintenant que tu as trouvé ce qui te satisfait pour la catégorie "Derniers sujet", je ne vois pas pourquoi tu n'appliques pas la même chose pour la chatbox et les autres catégories...

Je t'ai fais ça, dis-moi si ça te convient :


P.S: Je ne vois pas la Chatbox c'est pour ça que je ne l'ai pas fait pour elle.

[Alexlerouche]

Mais maintenant que tu as trouvé ce qui te satisfait pour la catégorie "Derniers sujet", je ne vois pas pourquoi tu n'appliques pas la même chose pour la chatbox et les autres catégories...

Pour la Chatbox , j'ai essayé avec ce code mais sans succès :

Code:

.chatbox {
border-right: solid 4px #2C2C2C;
box-shadow: 0px 5px 5px #2C2C2C;
}

Je tente de me débrouiller mais suis loin d'être un expert en codage .. En plus j'suis archi nul en anglais ..
Il me faudrait les bons termes (des tables ?) qui désignent les zones que je veux modifier .. Après je devrais normalement savoir m'en sortir .. ^^
Donc :
- De l'ombre en bas et bordure à droite pour ces zones : Chatbox , cadres des commentaires (comme ici) , éditeur de texte (si faisable car ici il est normal) et les boutons "prévisualisation" et "envoyer" (j'ai été sur ton forum mais pour les voir , je dois m'inscrire ? En tout cas , je ne veux pas changer ces boutons , juste pouvoir traficoter ceux déjà en place ..).

Sinon , pour ta proposition que tu montres dans ta capture d'image , oui , ça pourrait très bien m'intéresser .. Je suppose que je pourrais jouer avec les tons ?

Encore un grand merci pour tout !

[Alexlerouche]

Et je vais continuer à être casse-bonbon .. Mais les cadres citations avec bordures comme ici sur FDF , ça m'intéresse aussi ... lol

Désolé d'en vouloir autant .. Suis en pleine refonte pour mon prochain design et j'ai vraiment envie que tout soit tip-top comme je le souhaiterai avant de tout mettre en place sur mon forum officiel .. Quand on fait des travaux , mieux vaut tout faire en une fois pour être tranquille ..... jusqu'à la prochaine fois ... :lol!:

[Nikkyzon]

Voilà, tu vois j'ai copié ton box-shadow que tu as mis sur "Derniers Sujets" et je l'ai collé à la table ul.forums, que j'ai trouvé.. en cherchant !

Code:

ul.forums {
    background-color: #F0F0F0;
    background-image: none;
    box-shadow: inset 0px 5px 3px #c2c2c2;
}

Mets-le sur ton fofo et dis-moi si c'est bien ce que tu veux.

[Alexlerouche]

Merveilleux , ça me convient impec' !

Me reste pour les autres "tables" (c'est comme ça qu'on les désigne ? Il y a une liste avec toutes les "tables" ?)

[Nikkyzon]

Une table, ça commence par une accolade et sa termine par une accolade :

.forabg (ou autre){
Les modifs...
}fin de la table.

J'ai pris la peine de m'inscrire sur ton fofo pour te faire la ChatBox.


Voici le code

Code:

#chatbox_header {
    background-color: #5E564F;
    height: 30px;
    margin-bottom: 10px;
    margin-top: 2px;
    box-shadow: 0 5px 3px #c2c2c2;
}

ET AUSSI

Code:

#chatbox {
    bottom: 30px;
    left: 181px;
    line-height: 10px;
    overflow: auto;
    position: absolute;
    right: 0px;
    top: 30px;
    margin-top: 10px;
}

[Nikkyzon]

Merveilleux , ça me convient impec' !

Me reste pour les autres "tables" (c'est comme ça qu'on les désigne ? Il y a une liste avec toutes les "tables" ?)

Non tu les cherches par toi-même :
Clique droit sur ton fofo à l'endroit que tu veux modifier puis examiner l’élément, une fenêtre s'affichera : à gauche tu as le code HTML de la table et à droite son code CSS.

EDIT :
Tu veux aussi de l'ombre dans la zone de saisie de texte ?
Comme ça :

[Alexlerouche]

Hé bien mille merci ! Tes précieux conseils vont m'être très utiles !

Je vais laisser pour le moment car le devoir m'appelle .. Je reviens plus tard pour dire si c'est ok ..

Encore un grand merci ..

Passe une bonne journée ..

@ +

[Alexlerouche]

EDIT : 
Tu veux aussi de l'ombre dans la zone de saisie de texte ?
Comme ça :

Yes ! 

[Nikkyzon]

Code:


#quick_reply textarea, #quick_reply textarea:hover, textarea:focus {
    border: medium none !important;
    margin: 0;
    box-shadow: 0 0 5px #000;
}


[Alexlerouche]

Zut , j'ai un problème , en "jouant" avec les codes css , mon forum s'est élargi .. :/ Tu pourrais m'aider Nikkyzon ou j'ouvre un autre sujet ?

EDIT : c'est bon , c'est réglé .. 

[Nikkyzon]

Si tout y est, n'oublies pas de modifier ton topic et cocher résolu.

Et bonne continuation !

[Alexlerouche]

J'y suis presque ..

Je bosse encore dessus ce soir et si tout va bien , je mets en résolu ..

En tout cas, je l'ai déjà dit plusieurs fois mais MERCI pour tes astuces !! J'ai déjà pu changer pas mal l'aspect du forum grâce à toi .. ^^

@+ tard ..

[Nikkyzon]

No problem. Si tu as besoin de plus d astuces tu n as qu a demander.

[Alexlerouche]

Bon , me voilà de retour .. ^^

Nikkyzon , je me suis bcp amusé depuis que tu m'as expliqué à quoi servait "inspecter l'élément" .. J'ai pu modifier à ma guise toutes les zones où je voulais mettre des ombres et je suis très content du résultat ..

Reste 2 petits binz que je n'arrive pas à résoudre ..

- Je n'arrive pas à mettre des ombres dans le "box des sujets" (si je puis dire) , comme on l'a fait avec "ul.forums" pour mes catégories et forums ..
Donc ces ombres là dans mes catégories et forums :



Que je n'arrive pas à mettre dans le "box" qui donne la liste des sujets :



Sinon partout ailleurs où je le souhaitais , j'ai réussi à mettre des ombres ..

Une deuxième petite chose que j'ai voulu modifier mais sans succès , c'est l'agrandissement de l'éditeur de texte .. Je le voudrais plus large , comme ici sur FDF ..

Voici le CSS que j'ai utilisé pour modifier son apparence , suffit p-ê d'ajouter quelque chose .. :

Code:

.sceditor-container {
-moz-background-clip: padding;
-moz-border-radius: 4px;
-webkit-background-clip: padding-box;
-webkit-border-radius: 4px;
background: #fff;
background-clip: padding-box;
border: 1px solid #2c2c2c;
border-radius: 4px;
box-shadow: 4px 5px 5px #2c2c2c;
color: #222;
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
font-size: 13px;
font-weight: 700;
line-height: 1;
position: relative;
}

Voilà , après cela , ce sujet sera ré-so-lu ..

[Nikkyzon]

Re

Tu veux mettre des ombres pour chaque sujet ? Ou juste pour le cadre tout entier ?

[Alexlerouche]

Tu veux mettre des ombres pour chaque sujet ? Ou juste pour le cadre tout entier ?

Non juste le cadre , à l'intérieur comme avec les catégories .. J'ai su mettre des ombres sur tous les sujets en cherchant le bon code mais ce n'est pas l'effet que je recherche et ça ne ressemblait vraiment à rien , en fait ..

[Nikkyzon]

Très bien, je vais voir ce que je peux faire après je reviens vers toi

PS : Peut-être pas ce soir, desolé... Pcq je suis très occupé là.

[Alexlerouche]

Très bien, je vais voir ce que je peux faire après je reviens vers toi

PS : Peut-être pas ce soir, desolé... Pcq je suis très occupé là.

Oh t'en fais pas , ça ne presse pas .. J'ai encore énormément de chose à modifier et ce projet de lifting pour mon fofo officiel n'est pas pour tout de suite .. J'vais d'ailleurs bien em***** mon monde les prochaines semaines sur FDF ..

Donc à ton aise et merci pour tout ..

Passe une bonne soirée si on ne se lit plus aujourd'hui ..

[Nikkyzon]

Alors là... depuis taleur j'essaies des trucs mais rien n'y fait... :S

[Alexlerouche]

Pas grave , c'est pas bien dérangeant , c'est juste au niveau des sujets et les membres ne devraient pas m'en tenir rigueur ..

Bon je mets en résolu .. Je voulais aussi élargir le zone de saisie de commentaire mais après tout , vu qu'on sait l'agrandir à sa convenance , c'est vraiment du chipotage pour une broutille ...
100.000 fois mercis pour tes aides et conseils , le forum à bien progressé grâce à toi et même moi tu m'as fait progresser , et ça c'est beau ! comme dirait Van Damme .. ^^

@ bientôt p-ê sur un autre sujet ..

[Alexlerouche]

Dernière chose , en parlant de p-ê se retrouver sur un autre sujet , si tu sais m'aider là , je suis preneur mdr : https://forum.forumactif.com/t375823-placer-les-liens-des-sous-forums-se-trouvant-dans-les-categories-dans-un-cadre

@ pluche ..