Clubic V2² > Optimisation et refonte

_riton · Avril 12, 2010, 4:03

Salut, vu le nombre de gens qui n’aiment pas la nouvelle version de clubic, j’ai décider de faire une refonte :

Version optimisée :
- Index :

. Supression des pub
. Suppression de la barre rapide
. Suppression du message de refonte
. Supression des images des news
. Redim des picto des news

News :

. Suppression des pub
. Suppression de la collone de droite
. Maximisation de la news
. Maximisation du forum

Screenshot :

[Photo supprimée]

Installation du code :

Téléchargez l’extention stylish pour firefox ( addons.mozilla.org… ), et ajouter le code suivant :

[spoiler]


/* ///////////////////////////////////////////////////////////////////////// */ 
/* ////// index //////////////////////////////////////////////////////////// */ 
/* ///////////////////////////////////////////////////////////////////////// */ 
/* ///////////////////////////////////////////////////////////////////////// */ 
/* ////////////////////// [WWW.CLUBIC.COM...](HTTP://WWW.CLUBIC.COM) BETA 1 ///////////////////// */ 
/* ///////////////////////////////////////////////////////////////////////// */ 
/* ///////////////////////////////////////////////////////////////////////// */ 
/* ///////////////////////////////////////////////////////////////////////// */ 

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("www.clubic.com"), url-prefix('www.clubic.com') { 


/* ///////////////////////////////////////////////////////////////////////// */ 
/* ///////////////////////////////////////////////////// SUPRESSION DES PUBS */
/* ///////////////////////////////////////////////////////////////////////// */ 

/* index */
a#banniere, div#pub_dart_MBR_T_728x90, span#annonce_pub, div.pub_premium, div#footer_all { display: none; }

/* news */
div#pub_dart_REC_M_300x250, div.one_widget, div#adsense, div.selection_af, div#pousse_clic, div.incitation_groupe { display: none !important; }


/* ///////////////////////////////////////////////////////////////////////// */ 
/* //////////////////////////////////////////////////////////// ACCES RAPIDE */
/* ///////////////////////////////////////////////////////////////////////// */ 

div#liensTransversaux { width:1px !important; height: 1px !important; }
div#search_home { top: 0px !important; margin-left: 180px !important }
a#logo_home { top: 28px; }


/* ///////////////////////////////////////////////////////////////////////// */ 
/* ////////////////////////////////////////////////////////// BLOC DEPANNAGE */
/* ///////////////////////////////////////////////////////////////////////// */ 

div.bloc_depannage {
width: 520px !important;
/* background-color: red !important; */
 }

div.ToPespace_depannage {
width: 520px !important;
background-repeat: repeat !important; 
background-color: orange !important; 
}

div.Bottomespace_depannage { display: none !important ; }

div.espace_depannage { width: 510px !important ; }

div.question_title > BR { display: none !important; }

div.question_title {
font-weight: bolder !important;
letter-spacing: 2px;
word-spacing: 4px;
font-size: 16px !important;
}

div.espace_depannage li { width: 510px !important; }

div.espace_depannage a { word-spacing: 2px !important; }



/* ///////////////////////////////////////////////////////////////////////// */ 
/* /////////////////////////////////////////////////////////// BLOC INFORMER */
/* ///////////////////////////////////////////////////////////////////////// */ 

div.contenu_block_info { height: auto !important; }

div.title_bloc_info h2  { font-size: 0px !important; }
div.title_bloc_info span { font-size: 28px !important; word-spacing: 4px; line-height: 16px; }

div.articleHigh  img { width: 50px; height: 50px; }
div.articleMedium  img { width: 50px; height: 50px; }


div.articleDes h2 {
/* background-color: red;*/
width: 500px;
}

div.articleDes a { font-size: 12px !important; }

div.articleDes {
width: 470px !important;
text-align: justify !important;
/* background-color: silver; */
font-size: 10px;
 }

li.afficheNews > span { display: none !important; }

li.afficheNews > h2 > a { font-size: 12px !important; }

li.afficheNews  > a  img { display: none !important; }

div.forumMsg { display: none; }

/* ///////////////////////////////////////////////////////////////////////// */ 
/* ///////////////////////////////////////////////////////////////////////// */ 
/* ///////////////////////////////////////////////////////////////////////// */ 
/* ///////////////////////////////////////////////////////////////////////// */ 

}

/* ///////////////////////////////////////////////////////////////////////// */ 
/* ///////////////////////////////////////////////////////////////////////// */ 
/* ///////////////////////////////////////////////////////////////////////// */ 
/* ///////////////////////////////////////////////////////////////////////// */ 




/* ///////////////////////////////////////////////////////////////////////// */ 
/* ////// NEWS //////////////////////////////////////////////////////////// */ 
/* ///////////////////////////////////////////////////////////////////////// */ 
/* ///////////////////////////////////////////////////////////////////////// */ 
/* ////////////////////// [WWW.CLUBIC.COM...](HTTP://WWW.CLUBIC.COM) BETA 1 ///////////////////// */ 
/* ///////////////////////////////////////////////////////////////////////// */ 
/* ///////////////////////////////////////////////////////////////////////// */ 
/* ///////////////////////////////////////////////////////////////////////// */ 

@-moz-document domain(""),
 url-prefix('http://www.clubic.com/humour-informatique-geek'),
 url-prefix('http://www.clubic.com/os-mobile'),
 url-prefix('http://www.clubic.com/materiel-informatique'),
 url-prefix('http://www.clubic.com/tablette-internet-mid'),
 url-prefix('http://www.clubic.com/carte-graphique'),
 url-prefix('http://www.clubic.com/linux-os'),
 url-prefix('http://www.clubic.com/windows-os'),
 url-prefix('http://www.clubic.com/antivirus-securite-informatique'),
 url-prefix('http://www.clubic.com/univers-mac'),
 url-prefix('http://www.clubic.com/smartphone'),
 url-prefix('http://www.clubic.com/jeu-video'),
 url-prefix('http://www.clubic.com/disques-durs-ssd'),
 url-prefix('http://www.clubic.com/processeur')
 { 


div.block_central { width: 1000px !important; }

div.pagination { display: none; }

div.comments h2 { display: none; }

div.surforum a { float: left; width: 880px !important; margin-bottom: 5px !important; }

div.message_total { width: 980px !important; background-color: white !important; }
div.message_header { width: 980px !important; }
div.message_txt { width: 830px !important; background-color: white; }

/* ///////////////////////////////////////////////////////////////////////// */ 
/* ///////////////////////////////////////////////////////////////////////// */ 
/* ///////////////////////////////////////////////////////////////////////// */ 
/* ///////////////////////////////////////////////////////////////////////// */ 

}

/* ///////////////////////////////////////////////////////////////////////// */ 
/* ///////////////////////////////////////////////////////////////////////// */ 
/* ///////////////////////////////////////////////////////////////////////// */ 
/* ///////////////////////////////////////////////////////////////////////// */

[/spoiler]

Version Light de l’index + optimisé autre pages :

* index :

. Suppression de tout les bloc inutiles.
. Suppression des picto ( dommage que chaque news n’ai plus sont picto de catégorie :nexath )
. Suppression du texte de description
. Les liens visités apparaissent en rouge

* Le reste :

Comme pour la version optimisée.

* Screenshot :

[Photo supprimée]

Installation du code :

Téléchargez l’extention stylish pour firefox ( addons.mozilla.org… ), et ajouter le code suivant :

[spoiler]



/* ///////////////////////////////////////////////////////////////////////// */ 
/* ////// index //////////////////////////////////////////////////////////// */ 
/* ///////////////////////////////////////////////////////////////////////// */ 
/* ///////////////////////////////////////////////////////////////////////// */ 
/* ////////////////////// [WWW.CLUBIC.COM...](HTTP://WWW.CLUBIC.COM) BETA 1 ///////////////////// */ 
/* ///////////////////////////////////////////////////////////////////////// */ 
/* ///////////////////////////////////////////////////////////////////////// */ 
/* ///////////////////////////////////////////////////////////////////////// */ 

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("www.clubic.com"), url-prefix('www.clubic.com') { 


/* ///////////////////////////////////////////////////////////////////////// */ 
/* ///////////////////////////////////////////////////// SUPRESSION DES PUBS */
/* ///////////////////////////////////////////////////////////////////////// */ 

/* index */
a#banniere, div#pub_dart_MBR_T_728x90, span#annonce_pub, div.pub_premium, div#footer_all { display: none; }

/* news */
div#pub_dart_REC_M_300x250, div.one_widget, div#adsense, div.selection_af, div#pousse_clic, div.incitation_groupe { display: none !important; }

/* ///////////////////////////////////////////////////////////////////////// */ 
/* //////////////////////////////////////////////////////////// ACCES RAPIDE */
/* ///////////////////////////////////////////////////////////////////////// */ 

div#liensTransversaux { width:1px !important; height: 1px !important; }
div#search_home { top: 0px !important; margin-left: 180px !important }
a#logo_home { top: 28px; }


/* ///////////////////////////////////////////////////////////////////////// */ 
/* ////////////////////////////////////////////////////////// BLOC DEPANNAGE */
/* ///////////////////////////////////////////////////////////////////////// */ 

/* Supression du bloc dépannage / carrousel */
div#colMiddle { display: none !important; }


div.bloc_depannage {
width: 520px !important;
/* background-color: red !important; */
 }

div.ToPespace_depannage {
width: 520px !important;
background-repeat: repeat !important; 
background-color: orange !important; 
}

div.Bottomespace_depannage { display: none !important ; }

div.espace_depannage { width: 510px !important ; }

div.question_title > BR { display: none !important; }

div.question_title {
font-weight: bolder !important;
letter-spacing: 2px;
word-spacing: 4px;
font-size: 16px !important;
}

div.espace_depannage li { width: 510px !important; }

div.espace_depannage a { word-spacing: 2px !important; }



/* ///////////////////////////////////////////////////////////////////////// */ 
/* /////////////////////////////////////////////////////////// BLOC INFORMER */
/* ///////////////////////////////////////////////////////////////////////// */ 

div#sinformer a:visited { color: red !important; }

li.afficheNews p, div.articleDes div, div.articleDes span, div.articleMedium img, div.articleHigh img { display: none !important; }

ul.news .afficheNews {
line-height:14px;
}

div.articleDes    { 
/* background-color: yellow; */
margin: 0px !important;
padding: 0px !important;
}



ul.news .afficheNews {
margin: 0px !important;
padding: 0px !important;
 }


div.contenu_block_info { height: auto !important; }

div.title_bloc_info h2  { font-size: 0px !important; }
div.title_bloc_info span { font-size: 28px !important; word-spacing: 4px; line-height: 16px; }

div.articleHigh  img { width: 50px; height: 50px; }
div.articleMedium  img { width: 50px; height: 50px; }


div.articleDes h2 {
/* background-color: red;*/
width: 500px;
}

div.articleDes a { font-size: 11px !important; }

div.articleDes {
width: 470px !important;
text-align: justify !important;
/* background-color: silver; */
font-size: 10px;
 }

li.afficheNews { /* background-color: red; */}

li.afficheNews > span { display: none !important; }

li.afficheNews > h2 > a { font-size: 11px !important; }

li.afficheNews > h3 > a { font-size: 11px !important; }

li.afficheNews > h3, li.afficheNews > h2,  div.articleDes > h3, div.articleDes > h3 {
margin: 0px !important;
padding: 0px !important;
 }

li.afficheNews  > a  img { display: none !important; }

div.forumMsg { display: none; }

/* ///////////////////////////////////////////////////////////////////////// */ 
/* ///////////////////////////////////////////////////////////////////////// */ 
/* ///////////////////////////////////////////////////////////////////////// */ 
/* ///////////////////////////////////////////////////////////////////////// */ 

/* ///////////////////////////////////////////////////////////////////////// */ 
/* //////////////////////////////////////////////////////// BLOC TELECHARGER */
/* ///////////////////////////////////////////////////////////////////////// */ 

li#listBlock_telecharger { margin: 0px !important; }

/* ///////////////////////////////////////////////////////////////////////// */ 
/* ///////////////////////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////////////////////// */ 



/* ///////////////////////////////////////////////////////////////////////// */ 
/* //////////////////////////////////////////////////////////// BLOC EQUIPER */
/* ///////////////////////////////////////////////////////////////////////// */ 

div#sequiper { display: none; }

/* ///////////////////////////////////////////////////////////////////////// */ 
/* ///////////////////////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////////////////////// */ 

/* ///////////////////////////////////////////////////////////////////////// */ 
/* ///////////////////////////////////////////////////////////// BLOC TECHNO */
/* ///////////////////////////////////////////////////////////////////////// */ 

li#listBlock_nouvelleTechno { display: none; }

/* ///////////////////////////////////////////////////////////////////////// */ 
/* ///////////////////////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////////////////////// */ 

/* ///////////////////////////////////////////////////////////////////////// */ 
/* ///////////////////////////////////////////////////////////////// BLOC JV */
/* ///////////////////////////////////////////////////////////////////////// */ 

li#listBlock_jeuxVideo { display: none; }

/* ///////////////////////////////////////////////////////////////////////// */ 
/* ///////////////////////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////////////////////// */ 

/* ///////////////////////////////////////////////////////////////////////// */ 
/* ////////////////////////////////////////////////////////////BLOC LECTEURS */
/* ///////////////////////////////////////////////////////////////////////// */ 

li#listBlock_espaceLecteur { display: none; }

/* ///////////////////////////////////////////////////////////////////////// */ 
/* ///////////////////////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////////////////////// */ 


/* ///////////////////////////////////////////////////////////////////////// */ 
/* /////////////////////////////////////////////////////////// BLOC MEILLEUR */
/* ///////////////////////////////////////////////////////////////////////// */ 

li#listBlock_meilleurClubic { display: none; }

/* ///////////////////////////////////////////////////////////////////////// */ 
/* ///////////////////////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////////////////////// */ 

/* ///////////////////////////////////////////////////////////////////////// */ 
/* /////////////////////////////////////////////////////////////// Glossaire */
/* ///////////////////////////////////////////////////////////////////////// */ 

div#alpha_glossaire { display: none; }

/* ///////////////////////////////////////////////////////////////////////// */ 
/* ///////////////////////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////////////////////// */ 




}

/* ///////////////////////////////////////////////////////////////////////// */ 
/* ///////////////////////////////////////////////////////////////////////// */ 
/* ///////////////////////////////////////////////////////////////////////// */ 
/* ///////////////////////////////////////////////////////////////////////// */ 




/* ///////////////////////////////////////////////////////////////////////// */ 
/* ////// NEWS //////////////////////////////////////////////////////////// */ 
/* ///////////////////////////////////////////////////////////////////////// */ 
/* ///////////////////////////////////////////////////////////////////////// */ 
/* ////////////////////// [WWW.CLUBIC.COM...](HTTP://WWW.CLUBIC.COM) BETA 1 ///////////////////// */ 
/* ///////////////////////////////////////////////////////////////////////// */ 
/* ///////////////////////////////////////////////////////////////////////// */ 
/* ///////////////////////////////////////////////////////////////////////// */ 

@-moz-document domain(""),
 url-prefix('http://www.clubic.com/humour-informatique-geek'),
 url-prefix('http://www.clubic.com/os-mobile'),
 url-prefix('http://www.clubic.com/materiel-informatique'),
 url-prefix('http://www.clubic.com/tablette-internet-mid'),
 url-prefix('http://www.clubic.com/carte-graphique'),
 url-prefix('http://www.clubic.com/linux-os'),
 url-prefix('http://www.clubic.com/windows-os'),
 url-prefix('http://www.clubic.com/antivirus-securite-informatique'),
 url-prefix('http://www.clubic.com/univers-mac'),
 url-prefix('http://www.clubic.com/smartphone'),
 url-prefix('http://www.clubic.com/jeu-video'),
 url-prefix('http://www.clubic.com/disques-durs-ssd'),
 url-prefix('http://www.clubic.com/processeur'),
 url-prefix('http://pro.clubic.com/blog-forum-reseaux-sociaux'),
 url-prefix('http://www.clubic.com/article')
 { 


div.block_central { width: 1000px !important; }

div.pagination { display: none; }

div.comments h2 { display: none; }

div.surforum a { float: left; width: 880px !important; margin-bottom: 5px !important; }

div.message_total { width: 980px !important; background-color: white !important; }
div.message_header { width: 980px !important; }
div.message_txt { width: 830px !important; background-color: white; }

/* ///////////////////////////////////////////////////////////////////////// */ 
/* ///////////////////////////////////////////////////////////////////////// */ 
/* ///////////////////////////////////////////////////////////////////////// */ 
/* ///////////////////////////////////////////////////////////////////////// */ 

}

/* ///////////////////////////////////////////////////////////////////////// */ 
/* ///////////////////////////////////////////////////////////////////////// */ 
/* ///////////////////////////////////////////////////////////////////////// */ 
/* ///////////////////////////////////////////////////////////////////////// */

[/spoiler]

Ils subsisent encore quelques bug, à cause de l’url rewriting. Un futur mod sera fait, pour essayer de retrouver l’ancien design du site, ou au moins, les news sans picto, la petite liste à l’ancienne sans devoir scroller comme un goret.
Edité le 12/04/2010 à 21:23

Nightwrath · Avril 12, 2010, 5:43

En tout cas c’est comme ca que le site devrait être , c’est propre , c’est simple , on est pas noyé sous le bordel et ca prends déjà moins de place

fbzn · Avril 12, 2010, 5:45

“Suppression des pubs”, je veux bien… mais faut bien payer les gens en fin du mois, hein ?

LTGreg22 · Avril 12, 2010, 6:30

+1 mais sans l’encadré “Comment faire”.

Nightwrath · Avril 12, 2010, 6:35

Tous les sites vivant sur la pub sont victimes de leur propre politique :

mal intégré
intrusif
bloque la navigation / vision
parfois buggé

Pas étonnant que les gens utilisent ad-block ou les dégagent , faut juste bien penser la pub pour que ca ne gonfle pas les gens :neutre:

_riton · Avril 12, 2010, 7:12

Je répond juste dans le cas des pub :

. Elle sont masquée, et pas supprimée ( c’est du css , donc vous les chargez quand même ).
. J’utilise aussi adblock, parce que avoir 3 fois la même pub sur la même page avec des adresse différente, c’est trop lourd.

Sinon pour la “refonte”, il faudrait peut être créer plusieurs version, ou alors des switch d’entête pour les bloc. Je vais aussi publier une autre version pour rétrécir au maximum le bloc de news, et virer tout les autre truc inutiles. La version sera mise à jours très souvent car je compte bien continuer à bosser avec ce plugin.

Je trouve trop de site moche, avec des texte jamais en justifié, etc. J’ai aussi un grand écran, et j’en ai marre d’avoir des site en timbre poste.

untilisateur · Avril 13, 2010, 8:02

c’est de la boulette ce truc ! merci riton

PiouPiouXtreme · Avril 13, 2010, 8:37

Lequel prendre ? Clubic Essential V2 ou Clubic V2² ? Et comment ajouter le code dans stylish … Navré mais je débute dans les scripts, j’ai découvert ça y a à peine 2 heures --’
Edité le 13/04/2010 à 22:10

_riton · Avril 14, 2010, 4:41

Tu peut prendre tout les codes et les essayer. Quand tu a installé stylish, tu clique le logo stylish, puis “gérer les style”

Ensuite pour chaque code tu lui donne un nom. Et chaque code est désactivable ou non, en cliquant toujours sur le logo.

rXp · Avril 14, 2010, 5:05

Bravo c’est le site comme il devrait être mais j’utilise Chrome Dommage.

dam42c · Avril 14, 2010, 5:06

“trompé de topoc”
Mais je vais essayer ca ceci dit
Edité le 14/04/2010 à 17:07

NaZboT · Avril 18, 2010, 9:39

La version Light est parfaite :super:

C’est bien plus clair désormais

Mercoi :jap:

PiouPiouXtreme · Avril 19, 2010, 3:29

Merci riton, j’avais quand même fait quelques recherches mais merci et c’est vrai que les deux ne sont pas mal du tout sachant qu’ils n’ont pas la même page d’accueil, gardons les deux

nekosama · Juin 19, 2010, 12:41

Bon ca fait un moment que je voulais en parler, et la dernière fois, en peu de temps, je n’ai su trouver ou mettre mon com.

Franchement, vous le trouvez comment le nouveau site (et forum) par ce que là, perso, je le trouve moins bien qu’avant.

Il est beau certes

MAIS

moins explicite
moins pratique
trop complexe
trop brouillon

Avant il me suffisait d’un coup d’ il pour voir et choisir l’actu… Maintenant il faut que je jongle avec la molette, 5 articles par 5 articles. Il me faut maintenant 5 coup de molette pour atteindre le bas alors qu’il en fallait qu’un auparavant.

Pour télécharger c’est pareil, je me suis perdu, ne sachant pas du tout ou aller.

Bon je n’ai pas tout vu, positifs ou négatifs, mais je dois dire que depuis le temps qu’il est là, j’ai encore du mal à m’y faire, je passe 2 à 3 fois plus de temps qu’avant et que n’importe quel site.

Ce n’est plus du tout INSTINCTIF et ça je trouve ça dommage, du coup je viens beaucoup moins sur le site et je lis 10 fois moins d’articles ou de dossiers qu’auparavant.