Bordure fantaisie [Réglé]
Modifier le cadre
Créations de Thèmes
Visiteur
Je vous propose une petite modification qui je l'espère plaira à quelques uns ...
Modifier la bordure comme ici:
bord-boost.zip
Vous trouverez deux images dans ce zip:
la première :bord-boost.png est aux couleur de phpboost -base.
Il vous suffit si vous utilisez ce style de placer celle-çi dans: templates/base/thème/images/bord-boost.png.
Et de modifier design.css comme indiqué plus bas.
La seconde est une image .psd modifiable.
Si vous désirez adapter cette image aux couleurs de votre site il vous faudra modifier celle-ci de façon à vous convenir :
Ouvrez l'image avec un logiciel de retouche (GIMP et gratuit).
1- Sélectionnez le calque: -background- placez le au dessus et remplissez le de la couleur de votre choix ou de votre thème.
2- Replacez le à nouveau -SOUS- le premier calque :-bord-
3- Enregistrez votre travail dans le dossier: images de votre thème : bord-boost.png par exemple.
En local :
Sauvegardez votre thème ou renommez design.css en old_design.css.
Modifiez design.css Ligne 235
Code CSS :
/* --- Contenu central --- */ div#main-content { padding: 1.5em 0.8em; border: 1px #BEBEBE solid; background-color: #FFFFFF; }
Par :
Code CSS :
/* --- Contenu central --- */ div#main-content { padding: 1.5em 0.8em; border-image: url (images/bord-boost.png) 40 / 30px stretch; background-color: #FFFFFF; }
Si vous nommez bord-boost.png autrement il vous faudra le modifier.
TESTEZ le résultat en local !
Si cela ne vous convient pas:
-Supprimez l'image et remplacez dans design.css
border-image: url(images/bord-boost.png) 40 / 30px stretch;
par l'ancienne propriété:
border: 1px #BEBEBE solid;
Si tout est bon vous pouvez envoyer via FTP
Voili-voilou...
EDIT- Evidement à partir de cette image, on peut aussi imaginer d'autre motifs .....
des angles en creux, des vis etc ...
Édité par Mipel Le 11/11/2017 à 11h15
Répondre
Vous n'êtes pas autorisé à écrire dans cette catégorie