<![CDATA[Derniers messages dans: Personnaliser l'apparence de son profil TCB avec la feuille de style]]> https://clone.thechangebook.org/forum/rss/thread_2512/ <![CDATA[Personnaliser l'apparence de son profil TCB avec la feuille de style]]> https://clone.thechangebook.org/forum/tutoriels-23/personnaliser-l-apparence-de-son-profil-tcb-avec-la-feuille-de-style/post_31555/
Nous allons voir dans ce blog comment faire. Dans cet exemple, je me suis appuyé sur le thème existant "Density". L'apparence final donne un profil en deux colonnes sans gadget ni timeline. Si vous utilisez le mode timeline ainsi que la colonne de droite il vous faudra, pour l'heure, trouver par vous même ce qu'il y a à changer. Si vous utilisez Firefox comme navigateur, vous pouvez le faire en utilisant la barre de développement :



I- Styles prêts à être utilisés



BlackStyle : WaterStyle : GrassStyle :

SimpleStyle :

Red : Green : Purple : Blue :

Pink : Orange :

BlackStyle et WaterStyle sont des styles qui ne prennent pas en charge le mode timeline. Le premier est composé d'une entête, d'une colone de gauche, d'une colonne principale placée à droite et d'un pied de page. Le second est composé d'une en-tête, d'une colonne de gauche, d'une colonne principale au centre, d'une colonne de droite et d'un pied de page. GrassStyle, le troisième style, prend en charge le mode timeline mais pas le mode d'affichage classique. SimpleStyle, et ses déclinaisons en différentes couleurs, est compatible avec les deux modes d'affichage de TCB.

Ces modèles de styles sont applicables en l'état (vous n'avez qu'à changer ou pas votre visuel de couverture) mais rien ne vous empêche de vous les approprier en apportant des modifications de couleurs, etc. Si de votre côté vous composez un ou plusieurs styles, je vous propose de m'en donner l'information afin que nous puissions les partager et composer une bibliothèque de styles dans laquelle chaque membre de TCB pourra puiser, en complément des thèmes mis à disposition de la team tech'. Chaque fichier compressé, que vous pouvez télécharger ici, sont constitués d'un dossier dans lequel il y a :

- un fichier nommé ALire.rtf
- un fichier css NomDuStyle.css
- un répertoire image.



II - Mode d'emploi



Cet exemple ne montre que les balises que j'ai modifiées sur mon propre mur (avec la version BlackStyle) (https://www.thechangebook.org/profile-5480/). Commençons.

1) A l'accueil de votre profil, cliquez sur le bouton "Personnalisation du profil".
2) Tout à gauche, vous cliquez sur "Thèmes" et vous activez "Density" (quand un thème est sélectionné, il est en surbrillance jaune pâle).
3) Si vous avez apporté des modifications via la partie "Avancé" (en haut à gauche) de l'outil de personnalisation, avant d'appliquer une feuille de style personnalisée comme ci-dessous, il vous faudra remettre les paramètres par défaut (Bouton tout en haut à droite "Revenir au defaut")
4) Tout à gauche, vous cliquez sur "Blocs" et vous désactivez les blocs "Amis", "Amis en commun" et "Récemment visité par" (par défaut il sont activés et en surbrillance jaune pâle).
5) Tout à gauche, vous cliquez sur "CSS".
6) Bâtissez votre feuille de style dans la partie principale à droite.
7) Faites des aperçus régulièrement pour vérifier que votre saisie est correcte ou donne le résultat escompté (pratique quand on est sur la partie "Mur" mais par pour les autres comme infos, pages, etc., pour les autres ouvrez votre profil TCB dans un deuxième onglet de votre navigateur pour rafraichir la vue - F5).
8) Quand les modifications vous conviennent, cliquez sur le bouton sauvegarder.
9) Une fois que votre feuille de style est achevée et sauvegardée, tout en haut à droite, cliquez sur le lien "Fermer".

Ci-dessous, retrouvez un exemple de feuille de style. Attention, si vous ne savez pas ce que vous faites arrêtez là. Si vous avez besoin d'aide, demandez la; ou réinitialisez l'apparence de votre profil, notamment en effaçant le contenu de la feuille de style.

Les couleurs principales utilisées dans cet exemple sont :

- le blanc : color: rgb(255, 255, 255);
- un gris foncé : color: rgb(51, 51, 51);
- le noir : background-color: rgba(0, 0, 0, 0.5);

Aussi n'avez qu'à remplacer les valeurs 255, 51 et 0. Les valeurs des couleurs en rgb s'écrivent avec une série de trois chiffres allant de 0 à 255. Pour les valeurs des couleurs écrites en rgba, les trois premiers chiffres donnent la couleur comme rgb et le quatrième chiffre correspond au degrés d'opacité (de 0 à 1). Si vous n'avez pas de logiciel vous permettant de générer les codes couleurs, vous pouvez vous rendre ici : http://www.code-couleur.com/

Code couleur des commentaires :
- Rouge = type de mur
- Orange = partie d'un mur
- Noir = le code css correspondant

Logiciels pour éditer sa feuille de style sur son ordinateur :
- pour Windows, Notepad : http://notepad-plus-plus.org/fr/
- pour Mac, jEdit : http://jedit.org/
- pour Linux, utilisez Gedit

Étape 1 : le mur



Ci-dessous vous trouverez les balises à modifier, l'image montrant le résultat final :



/**
#####################
Mur du profil
#####################
*/

/*= Fond de page. (Note : "overflow-x: hidden;" masque le scroll lattéral) =*/

body {
background-repeat:repeat-y;background-image:url('https://www.thechangebook.org/file/attachment/a2608aceb59d843152ade7e54ad5d238.jpg');
overflow: auto;
overflow-x: hidden;
}

/*= Liens généraux =*/

a {
color: rgb(51, 51, 51);
font-weight:bold;
}

a:hover {
color: rgb(51, 51, 51);
font-weight:bold;
text-decoration: underline;
outline: 0px none;
}

/*= Liens pour afficher tous les commentaires =*/


a.comment_mini_link_block, a.comment_mini_link_block:hover {
color: rgb(51, 51, 51);
display: block;
}

/*= En-tête du profil =*/

#header {
background:none;background-color:#000000;
}

/*= Barre des notification toujours visible =*/


#header_holder
{
background-color: rgba(0, 0, 0, 0.9);
position:fixed; /*= Pour que la barre de notificatcionc ne soit pas toujours visible, passer la valeur à relative */
width:980px;
}

/*= En-tête du profil : Menu. (Note : Pour toutes les images, il est importat de mettre l'adresse entière pour que celles-ci s'affiche. Autrement il y aura un message d'erreur "Not Found" qui s'affichera en lieu et place. =*/


#header_menu_page_holder {
position: relative;
z-index: 1000;
padding-top:55px; /*= Si la barre de notifications n'est pas toujours visible, mettre la valeur à 0px */
}


#header_menu {
background: url("https://www.thechangebook.org/theme/frontend/default/style/density/image/layout/header_menu.png") no-repeat scroll 0% 0% transparent;
}


#header_menu ul li a,
#header_menu ul li a:hover {
color: rgb(51, 51, 51);
border-right: 1px solid rgb(207, 207, 207);
}


#header_menu ul li a:hover {
background:#BFBFBF;
}

#header_menu_holder ul li a:hover,
#header_menu_holder ul li a.has_drop_down:hover,
#holder_notify ul li a.notify_drop_link:hover {
background-color:transparent;
text-decoration:underline;
}

#header_menu_holder ul li a.active,
#header_menu_holder ul li a.active:hover,
#holder_notify ul li.is_active a.notify_drop_link:hover {
background-color:#fff;
}

#header_menu_holder ul li ul li a:hover {
text-decoration:none;
}

/*= En-tête du profil : Recherche =*/


#header_sub_menu_search_input {
background:url('https://www.thechangebook.org/theme/frontend/default/style/density/image/layout/header_search_input.png') no-repeat;
}

#header_sub_menu_search .focus {
background:url('https://www.thechangebook.org/theme/frontend/default/style/density/image/layout/header_search_input.png') no-repeat 0px -26px;
}

#header_search_button,
#header_search_button:hover {
background:url('https://www.thechangebook.org/theme/frontend/default/style/density/image/layout/header_search_button.png') no-repeat;
}

/*= En-tête du profil : Notification demandes d'ami =*/


#holder_notify ul li a.friend_notification {
background:url('https://www.thechangebook.org/theme/frontend/default/style/density/image/layout/holder_notify_friend_request.png') no-repeat 50% 0px;
}

/*= En-tête du profil : Notification message privé =*/


#holder_notify ul li a.message {
background:url('https://www.thechangebook.org/theme/frontend/default/style/density/image/layout/holder_notify_message.png') no-repeat 50% 0px;
}

/*= En-tête du profil : Notification d'interaction avec le profil =*/


#holder_notify ul li a.notification {
background:url('https://www.thechangebook.org/theme/frontend/default/style/density/image/layout/holder_notify_notification.png') no-repeat 50% 0px;
}

#holder_notify ul li a.notification {
background:url('https://www.thechangebook.org/theme/frontend/default/style/density/image/layout/holder_notify_notification.png') no-repeat 50% 0px;
}

/*= En-tête du profil : Logo TCB. (Note : si vous utilisez un logo TCB personnalisé en "background:url", il faut, au 16 août 2013, faire en sorte que le logo par défaut ne le masque pas. En effet ce dernier n'a été intégré via les styles. La solution est donc de l'écarter avec la balise "padding-left". Si vous ne comptez pas utiliser un logo personnalisé, n'intégrez pas cet extrait de code =*/


#header_left {
width: 180px;
background:url('https://www.thechangebook.org/file/pic/photo/f9b5f450511a0f2742082157bd87e2a4_1024.png') no-repeat;
padding-left:2000px;
}

/*= Corps de la page profil. (Note : Les couleurs sont souvent inscrites avec la valeur "rgba". Lorsque vous voyez une série de 4 chiffres, les trois premiers sont les références de la couleur et le dernier permet de régler l'opacité) =*/


.holder {
background-color: rgba(255, 255, 255, 0.5);
}

/*= Colonne de gauche =*/


#left {
float: left;
width: 180px;
margin-top:10px;
margin-left:8px;
margin-right:4px;
background-color: rgba(0, 0, 0, 0.7);
border-right: 1px solid rgb(51, 51, 51);
border-bottom: 1px solid rgb(51, 51, 51);
border-left: 1px solid rgb(51, 51, 51);
border-top: 1px solid rgb(51, 51, 51);

-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
}

/*= Couleur texte des liens colonnes de gauche =*/


.sub_section_menu ul li a, {
display: block;
line-height: 22px;
text-decoration: none;
color: rgb(255, 255, 255);
padding: 0px 0px 0px 4px;
background-repeat: no-repeat;
}


#js_is_user_profile .sub_section_menu ul li.active a, {
background-color: rgba(255, 255, 255, 0.3);
}


.sub_section_menu ul li a:hover {
line-height: 22px;
text-decoration: none;
color: rgb(51, 51, 51);
padding: 0px 0px 0px 4px;
background-color: rgba(255, 255, 255, 0.7);
background-repeat: no-repeat;
}


.no_ajax_link {
color: rgb(255, 255, 255);
font-weight:bold;
padding-left:2px;
}

.no_ajax_link_over {
color: rgb(255, 255, 255);
font-weight:bold;
}

/*= Partie centrale du profil (fil d'actualité, ...). (Note : Attention, dans cet exemple il n'y a pas de colonne de droite) =*/


#main_content {
width:786px;
margin-left: 189px;
}

#main_content_holder{background:none;}
#content_holder{}

#content {
width:776px;
}

/*= Identité du profil =*/


#js_is_user_profile .profile_info {
color: rgb(51, 51, 51);
margin-top: 4px;
}

/*= Zone de partage =*/


.activity_feed_form
{
background:none;
border:0px;
margin-right:4px;
}

.activity_feed_form_holder {
background-color: rgba(0, 0, 0, 0.7);

-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
}

.activity_feed_form input, .activity_feed_form textarea {
background: none repeat scroll 0% 0%;
}

#input, textarea {
font-size: 13px;
padding-left: 6px;
padding-right:4px;
padding-bottom:4px;
padding-top:4px;
border: 0px;
}

#input:focus, textarea:focus {
border: 0px;
}

/*= Couleur du texte qui vous invite à partager quelque chose =*/


.activity_feed_form textarea {
height: 40px;
width: 98%;
color: rgb(255, 255, 255);
}

/*= Couleur du texte que vous saisissez avant de partager quelque chose =*/


.activity_feed_form textarea.focus {
color: rgb(255, 255, 255);
}

/*= Couleur du texte que vous saisissez avant de partager un lien =*/


#activity_feed_textarea_status_info {
color: rgb(51, 51, 51);
border:1px solid rgb(51, 51, 51);

-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
}

#js_global_attach_value.global_link_input {
color: rgb(255, 255, 255);
}

/*= Couleur du titre de la description du lien que vous avez partager avant validation =*/


a.attachment_body_title, /*= vous pouvez inclure la valeur a.attachment_body_title:hover =*/
{
text-decoration: none;
color: rgb(255, 255, 255);
font-weight: bold;
font-size: 12px;
}

/*= Couleur du texte de la description du lien que vous avez partager avant validation =*/


div.attachment_body_description a /*= vous pouvez inclure la valeur div.attachment_body_description a:hover =*/
{
text-decoration: none;
color: rgb(255, 255, 255);
}

/*= Titres sondages/blogs/musiques =*/


.activity_feed_form input, {
color: rgb(255, 255, 255);
}

/*= Couleur du texte quand vous créez un sondage =*/


input.js_feed_poll_answer.v_middle {
color: rgb(255, 255, 255);
}

a.poll_feed_answer_add {
color: rgb(255, 255, 255);
}


/*= Bouton de Partage =*/


#activity_feed_submit.button {
cursor: pointer;
font-size: 11px;
margin: 0px;
padding: 4px 8px;
vertical-align: middle;
font-weight: bold;
overflow: visible;
color: rgb(255, 255, 255);
background: url('https://www.thechangebook.org/theme/frontend/default/style/default/image/layout/button.png') repeat-x scroll center bottom rgb(102, 102, 102);
border: 1px solid rgb(0, 0, 0);
box-shadow: 2px 2px 2px rgb(207, 207, 207);
}

/*= Contenus partagés =*/


#content_holder {
padding:0px 0px;
background:transparent;


-moz-border-radius-bottomright:10px;
-moz-border-radius-bottomleft:10px;
-webkit-border-bottom-right-radius:10px;
-webkit-border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
border-bottom-left-radius:10px;

-moz-box-shadow:6px 6px 6px #17191F;
-webkit-box-shadow:6px 6px 6px #17191F;
box-shadow:6px 6px 6px #17191F;
}

#js_feed_content {
background-color: rgba(255, 255, 255, 0.8);
margin-right:4px;

-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
}

.activity_feed_content_info {
margin-right:8px;
}

.activity_feed_content_display {
margin-right:8px;
}

.activity_feed_content_status {
margin-right:8px;
}

.content3 {
width:505px;
}

.content4 {
width:690px;
}

/*= Titre issu d'un lien cliqué suite à une notification =*/


#js_is_user_profile h2 {
font-weight: bold;
margin-left:8px;
margin-bottom: 10px;
padding-top:8px;
color: rgb(128, 128, 128);
font-size: 14px;
}

/*= Bouton Plus de publications en bas des contenus partagés =*/


a.global_view_more {
display: block;
background: rgba(215, 215, 215,);
width:250px;
margin-left: auto;
margin-right: auto;
font-size: 14px;
text-decoration: none;
line-height: 30px;
height: 30px;
position: relative;
margin-top: 15px;
padding: 0px 5px;
text-align: center;
color: rgb(51, 51, 51);
font-weight: bold;
border-width: 1px;
border-style: solid;
border-color: rgb(215, 215, 215);

box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);


-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
}

a.global_view_more:hover {
display: block;
background: rgba(0, 0, 0, 0.8);
font-size: 14px;
text-decoration: none;
line-height: 30px;
height: 30px;
position: relative;
margin-top: 15px;
padding: 0px 5px;
text-align: center;
color: rgb(255, 255, 255);
font-weight: bold;
border-width: 1px;
border-style: solid;
border-color: rgb(215, 215, 215);

box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);

-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
}

/*= Colonne de droite. (Note : Dans cet exemple il n'y en a pas, d'où les valeurs 0px du premier bloc css) =*/

#right {
width: 0px;
height:0px;
background:none;
padding: 0px;
border-radius: 8px 8px 8px 8px;
box-shadow: 0px;
display:block;

}

#js_controller_video_view #right {
width:290px;
}

#breadcrumb_holder {
position:relative;
}

/*= Pied de page =*/


#footer {
border:0px;
background-color: rgba(0, 0, 0, 0.7);
margin-top:0px;
padding:15px 10px 10px 10px;
color:#808080;
}

#footer a,
#footer a:hover {
color:#DFDFDF;
}

#footer ul#footer_menu li a, #footer ul#footer_menu li a:hover {
border-left:1px #808080 solid;
}

.request_text {
margin-left: 135px;
}

Étape 2 : les informations du profil



Ci-dessous vous trouverez les balises à modifier, l'image montrant le résultat final :



/**
#####################
Infos du profil
#####################
*/


/* Bloc info utiles =*/


#js_block_border_profile_info.block {
background-color: rgba(255, 255, 255, 0.8);
margin-right:4px;
padding: 16px;

-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
}

/* Bloc infos description =*/


#js_block_border_custom_cf_about_me.block {
background-color: rgba(255, 255, 255, 0.8);
margin-right:4px;
padding: 16px;

-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
}

/* Bloc infos Pages =*/


#js_block_border_pages_profile.block {
background-color: rgba(255, 255, 255, 0.8);
margin-right:4px;
padding: 16px;

-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
}

/* Bloc infos Film =*/



#js_block_border_custom_cf_movies.block {
background-color: rgba(255, 255, 255, 0.8);
margin-right:4px;
padding: 16px;

-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
}

/* Bloc infos Intérêts =*/


#js_block_border_custom_cf_interests.block {
background-color: rgba(255, 255, 255, 0.8);
margin-right:4px;
padding: 16px;

-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
}

/* Bloc infos Musique =*/


#js_block_border_custom_cf_music.block {
background-color: rgba(255, 255, 255, 0.8);
margin-right:4px;
padding: 16px;

-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
}

Étape 3 : les blogs du profil



Ci-dessous vous trouverez les balises à modifier, l'image montrant le résultat final :



/**
#####################
Blogs du profil
#####################
*/


/* Bandeau des fonctions (recherche, tri, etc.) =*/


.header_bar_menu {
background-color: rgba(255, 255, 255, 0.8);
margin-right:8px;

-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
}

.header_filter_holder {
right: 15px;
top: 10px;
}

#js_is_user_profile div.header_bar_menu {
margin: 0px 6px 10px 0px;
padding: 6px 0px 10px 10px;
}

/* Fond de la liste des blogs =*/


#site_content {
background-color: rgba(255, 255, 255, 0.8);
margin-right:4px;
padding: 4px;

-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
}

/* Fond des tags =*/


.item_tag_holder {
background-color: rgba(0, 0, 0, 0.5);
margin-top: 10px;
margin-right:8px;
padding: 4px;

-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
}

.item_tag, .item_tag a, .item_tag a:hover {
color: rgb(255, 255, 255);
}

Étape 4 : accueil du profil non connecté



Ci-dessous vous trouverez les balises à modifier, l'image montrant le résultat final :



/**
############################
Accueil profil non connecté
############################
*/


/*= En-tête du profil non connecté =*/


#header_user_register {
border-top: 1px solid rgb(0, 0, 0);
background: repeat scroll 0% 0% rgb(0, 0, 0);
line-height: 55px;
color: rgb(0, 0, 0);
}

/*= Champs de saisi de l'adresse mail =*/


#header_menu_login .header_menu_login_left {
position: absolute;
right: 280px;
width:250px;
top: 0px;
}

/*= Champs de saisi du mot de passe =*/


#header_menu_login .header_menu_login_right {
position: absolute;
right: 80px;
width:250px;
top: 0px;
}

/*= Bouton de connexion =*/


#header_menu_login .header_menu_login_button {
right: 8px;
position: absolute;
top: 18px;
}

#header_menu_login .header_menu_login_button input {
font-size: 11px;
margin: 0px;
padding: 0px 0px;
cursor: pointer;
height: 26px;
min-width: 50px;
background: none repeat scroll 0% 0% rgb(111, 111, 111);
color: rgb(255, 255, 255);
border: 1px solid rgb(63, 63, 63);
}

/*= Inscription =*/


#header_user_register_holder {
background:rgb(0, 0, 0, 0.8);
margin-top:70px;
position: relative;
font-size: 12px;
color: rgb(255, 255, 255);
}

/*= Autres actions =*/


#header_menu_login
.header_menu_login_sub {
padding-top: 4px;
color: rgb(191, 191, 191);
}

Étape 5 : style Mobile



Ci-dessous vous trouverez les balises à modifier, l'image montrant le résultat final :




/**
#####################
Mobile (Non modifié)
#####################
*/

/* Set the background color to contrast with the font color*/
#mobile_holder #main_content_holder
{
background-color: #FFFFFF;
}

/* Set the dimensions for the page categories when creating one*/
#mobile_holder .pages_type_add_holder
{
max-height: 200px;
width: 250px;
}

/* Set the max width for an input text field */
#mobile_holder input[type=text]
{
width:250px;
max-width: 250px;
}

/* js boxes are a tiny bit too small */
.mobile_js_box
{
width:350px;
max-width: 350px;
}

.mobile_js_box #profile_picture_container, .mobile_js_box .request_text
{
clear: both;
width: 100%;
margin-left: 10px;
}


#mobile_holder .js_pages_block select
{
width: 250px;
max-width:250px;
}
#mobile_holder #mobile_content .page_section_menu
{
height:80px;
}
#mobile_holder #mobile_content ul
{
width:200px;
max-width: 200px;
}
#mobile_holder .pages_sub_category
{
clear: both;
margin-left: 10px;
}

#mobile_holder textarea
{
width:250px;
max-width: 250px;
}

#mobile_holder #js_poll_form input[type=text]
{
max-width: 170px;
}

#right .block .content .tag_cloud ul li a,
#right .block .content .tag_cloud ul li a:hover
{
color:#333;
}

.profile_timeline_header_holder .no_cover_photo .profile_header_inner
{
width:810px;
}

#timeline_dates ul li.parent:hover
{
border-left:4px #000 solid;
}

#timeline_dates ul li a,
#timeline_dates ul li a:hover
{
color:#fff;
}

.timeline_friendlist_row
{
width:96px;
}

Voilà, c'est tous. A chacun son style et soyons créatifs !

]]> https://clone.thechangebook.org/forum/tutoriels-23/personnaliser-l-apparence-de-son-profil-tcb-avec-la-feuille-de-style/post_31555/ Sat, 10 Aug 2013 06:49:12 +0000