Forum css et Adsense

[julk]

Bonjour à tous !!

J'ai un forum sur lequel j'ai installé plus de 70 styles différents.
Il s'agit de style css et j'aimerais que les adsense récupérent les propriétés css pour être le mieux intégré possible.
Es-ce possible avec javacript ou php ?

Bonne année bonne santé et longue vie à wri !!

[oli004]

tu crées une fichier adsense par style, puis tu fais un test sur le css demandé et affiche le style en conséquence. Je ne vois pas trop le problème, cela dit, ça peut etre long.

J'ai procédé comme ça sur certaines pages d'un de mes sites. Chaque montage affiche une adsense définie en couleur pour s'armoniser avec l'image pricipale.

Tu peux voir ce que ça donne : ici

Chaque montage à une style d'annonce qui lui est propre et bien sur, sans aucune modification du code

[julk]

oui je comprends comment tu as fait.
malheuresement je ne peux pas faire comme toi
j'ai recompté et en tout j'ai 141 css différents
comme il sont strucuturés de la même façon, je sais ou se trouve la couleur du lien des bordures du fond dans le css.
Il doit bien exister un moyen pour faire correspondre le css et le bloc adsense
personne n'a une petite idée ???

[Serious]

Tu extraits les couleurs de fond, bordure, titre et texte de la CSS et tu les utilises dans ton bloc adsense. Tout se fait en PHP.

[julk]

heu un indice sur la fonction à utiliser en php ?
sinon en javascript j'arrive à récupérer via document.bgColor les couleurs de fond mais j'arrive pas à atteindre via document.getElementById("layerID").style.backgroundColor une propriété css en particulier d'un élément en particulier (javacript me revoit une chaine vide quand je tente d'accéder aux css via ce style de fonction.)
J'en peut plus

[zeb]

heu un indice sur la fonction à utiliser en php ?

un bloc adsence ressemble a ça côté client:

Code: Tout sélectionner

<script type="text/javascript"><!--
google_ad_client = "pub-********************";
google_ad_width = 336;
google_ad_height = 280;
google_ad_format = "336x280_as";
google_ad_type = "text";
google_ad_channel ="";
google_color_border = "FFFFFF";
google_color_bg = "FFFFFF";
google_color_link = "A36D51";
google_color_text = "000000";
google_color_url = "008000";
//--></script>
<script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>


rien ne t'empèche de faire :

google_color_link = "<? echo $macouleur; ?>"; côté serveur

[julk]

whaaao c'est gentil de vouloir aider, mais le probléme réside à accéder aux propriété css stockés dans un fichier css externe et cela automatiquement.
Sérieux, j'y ai passé la journée
j'en peut plus
A L'AIDE !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

[oli004]

whaaao c'est gentil de vouloir aider, mais le probléme réside à accéder aux propriété css stockés dans un fichier css externe et cela automatiquement.
Sérieux, j'y ai passé la journée
j'en peut plus
A L'AIDE !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

On à rien sans rien !

Je t'ai donné une solution en début de sujet.
Tu as passé la journée à vouloir faire autrement, résultat, au lieu de passer ta journée à faire comme je te proposais, t'as perdu ton temps et aucune solution n'est encore en place.

Dis toi que tu vas passer peut-être une journée à définir chaque code adsense pour chaque css mais une fois que c'est pait, tu n'y touches plus.
lorsque tu mettras en ligne un nouveau css, il te suffit d'ajouter un code adsense et basta.

[zeb]

donne un extrait de ton CSS ou l'on voie les couleurs utilisées ... un petit regex devrait facilement te sortir du tunel.

donne aussi l'url du CSS ce sera plus pratique pour te donner un code complet.

[zeb]

whaaao c'est gentil de vouloir aider, mais le probléme réside à accéder aux propriété css stockés dans un fichier css externe et cela automatiquement.
Sérieux, j'y ai passé la journée
j'en peut plus
A L'AIDE !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

pour le moment c'est toi qui aide pas beaucoup

le prend pas mal mais on peut pas aider sans les données du problème.

[e-kiwi]

http://mozilla.tlk.fr/doc05.php
document.getElementById("layerID").style.backgroundColor devrait marcher sous ie

[zeb]

Le code fourni par GG est censé ne pas être modifié.

cela me fait penser qu'une modification dynamique du code côté client n'est pas forcement reglo vis a vis d'eux.

Je penche donc plutôt pour une adaptation du code côté serveur ...

qui plus est, je ne sais pas de quoi est composé le texte des annonces mais toute la zone est sensible. sagit-il de texte ou d'une image d'un texte fabriquée a la volée ? dans ce cas, je me demande si la modification des parametres de l'annonce fonctionnera.

[julk]

Bon, je vous fais un petit bilan...
J'étais arrivé à une solution plus ou moins viable en utilisant, les propriétés de document. en javascript
voilà le code :
<script type="text/javascript"><!--
google_color_border = document.bgColor;
google_color_border = google_color_border.replace("#","");
google_color_bg = document.bgColor;
google_color_bg = google_color_bg.replace("#","");
google_color_link = document.linkColor ;
google_color_link = google_color_link.replace("#","");
google_color_text = document.fgColor ;
google_color_text = google_color_text.replace("#","");
google_color_url = document.fgColor ;
google_color_url = google_color_url.replace("#","");
//--></script>
ça marche mais le probléme, c'est que ça respecte pas vraiment les régles d'adsense et que de toutes façon la couleur des liens sont liées à un style css particulier et que document.linkColor me renvoie de la merde.
Pour récupére les couleurs des liens, j'ai bien sur déjà essayé :
document.getElementById("layerID").style.backgroundColor
cela est censé marché sur IE >5 et firefox. Pourtant cette fonction me renvoir tout le temps une chaine vide quelque soit l'id que lui envoie et la propriété à analyser..
enfin du cotés php j'ai voulu essayé open(file) (avec le css) mais de toute facon cette fonction est beaucoup trop lourde à mettre en place malheurement.
Quant à regex, j'ai cherché sur le net mais je vois pas quand je pourrai utliser cette api dans mon cas précis (en tout cas ca a l'air pratique pour les formulaire donc à garder!)

code source (script forum punbb)
css d'un des styles :

Code: Tout sélectionner

/****************************************************************/
/* 1. IMPORTED STYLESHEETS */
/****************************************************************/

/* Import the basic setup styles */
@import url(imports/base.css);
/* Import the colour scheme */
@import url(imports/Artemis_cs.css);

/****************************************************************/
/* 2. TEXT SETTINGS */
/****************************************************************/

/* 2.1 This sets the default Font Group */

.pun, .pun INPUT, .pun SELECT, .pun TEXTAREA, .pun OPTGROUP {
   FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}

.pun {FONT-SIZE: 11px; LINE-HEIGHT: normal}

/* IEWin Font Size only - to allow IEWin to zoom. Do not remove comments \*/
* HTML .pun {FONT-SIZE: 68.75%}
/* End IE Win Font Size */

/* Set font size for tables because IE requires it */
.pun TABLE, .pun INPUT, .pun SELECT, .pun OPTGROUP, .pun TEXTAREA, DIV.postmsg P.postedit {FONT-SIZE: 1em}

/* 2.2 Set the font-size for preformatted text i.e in code boxes */

.pun PRE {FONT-FAMILY: monaco, Bitstream Vera Sans Mono, Courier New, courier, monospace}

/* 2.3 Font size for headers */

.pun H2, .pun H4 {FONT-SIZE: 1em;}
.pun H3 {FONT-SIZE: 1.1em}
#brdtitle H1 {FONT-SIZE: 1.4em;}

/* 2.4 Larger text for particular items */

DIV.postmsg P {LINE-HEIGHT: 1.4}
DIV.postleft DT {FONT-SIZE: 1.1em}
.pun PRE {FONT-SIZE: 1em}

/* 2.5 Bold text */

DIV.postleft DT, DIV.postmsg H4, TD.tcl H3, DIV.forminfo H3, P.postlink, DIV.linkst LI,
DIV.linksb LI, DIV.postlinksb LI, .blockmenu LI, #brdtitle H1, .pun SPAN.warntext, .pun P.warntext {FONT-WEIGHT: bold}

/****************************************************************/
/* 3. LINKS */
/****************************************************************/

/* 3.1 Remove underlining for main menu, post header links, post links and vertical menus */

#brdmenu A:link, #brdmenu A:visited, .blockpost DT A:link, .blockpost DT A:visited, .blockpost H2 A:link,
.blockpost H2 A:visited, .postlink A:link, .postlink A:visited, .postfootright A:link, .postfootright A:visited,
.blockmenu A:link, .blockmenu A:visited {
   TEXT-DECORATION: none
}

#brdmenu {text-align: left;}

/* 3.2 Underline on hover for links in headers and main menu */

#brdmenu A:hover, .blockpost H2 A:hover {TEXT-DECORATION: underline}

/****************************************************************/
/* 4. BORDER WIDTH AND STYLE */
/****************************************************************/

/* 4.1 By default borders are 1px solid */

DIV.box, .pun TD, .pun TH, .pun BLOCKQUOTE, DIV.codebox, DIV.forminfo, DIV.blockpost LABEL {
   BORDER-STYLE: solid;
   BORDER-WIDTH: 1px
}

/* 4.2 Special settings for the board header. */

#brdheader DIV.box {BORDER-TOP-WIDTH: 4px}

/* 4.3 Borders for table cells */

.pun TD, .pun TH {
   BORDER-BOTTOM: none;
   BORDER-RIGHT: none
}

.pun .tcl {BORDER-LEFT: none}

/* 4.4 Special setting for fieldsets to preserve IE defaults */

DIV.FIELDSET {
   BORDER-STYLE: solid;
   BORDER-WIDTH: 1px
}

/****************************************************************/
/* 5. VERTICAL AND PAGE SPACING */
/****************************************************************/

/* 5.1 Page margins */

HTML, BODY {

MARGIN: 0; PADDING: 0

}

#punwrap {margin:12px 20px}

/* 5.2 Creates vertical space between main board elements (Margins) */

DIV.blocktable, DIV.block, DIV.blockform, DIV.block2col, #postreview {MARGIN-BOTTOM: 12px}
#punindex DIV.blocktable, DIV.blockpost {MARGIN-BOTTOM: 6px}
DIV.block2col DIV.blockform, DIV.block2col DIV.block {MARGIN-BOTTOM: 0px}

/* 5.3 Remove space above breadcrumbs, postlinks and pagelinks with a negative top margin */

DIV.linkst, DIV.linksb {MARGIN-TOP: -12px}
DIV.postlinksb {MARGIN-TOP: -6px}

/* 5.4 Put a 12px gap above the board information box in index because the category tables only
have a 6px space beneath them */

#brdstats {MARGIN-TOP: 12px}

/****************************************************************/
/* 6. SPACING AROUND CONTENT */
/****************************************************************/

/* 6.1 Default padding for main items */

DIV.block DIV.inbox, DIV.blockmenu DIV.inbox { PADDING: 7px 6px}

.pun P, .pun UL, .pun DL, DIV.blockmenu LI, .pun LABEL, #announce DIV.inbox DIV {PADDING: 3px 0}

.pun H2 {text-align: top; PADDING-TOP: 8px; PADDING-BOTTOM: 10px; PADDING-LEFT: 6px}

/* 6.2 Special spacing for various elements */

#brdtitle P {PADDING-TOP: 0px}
DIV.linkst {PADDING: 8px 6px 3px 6px}
DIV.linksb, DIV.postlinksb {PADDING: 3px 6px 8px 6px}
#brdwelcome, #brdfooter DL A, DIV.blockmenu LI, DIV.rbox INPUT  {LINE-HEIGHT: 1.4em}
#viewprofile DT, #viewprofile DD {PADDING: 0 3px; LINE-HEIGHT: 2em}

/* 6.4 Create some horizontal spacing for various elements */

#brdmenu LI, DIV.rbox INPUT, DIV.blockform P INPUT { MARGIN-RIGHT: 12px}

/****************************************************************/
/* 7. SPACING FOR TABLES */
/****************************************************************/

.pun TH, .pun TD {PADDING: 4px 6px}
.pun TD P {PADDING: 5px 0 0 0}

/****************************************************************/
/* 8. SPACING FOR POSTS */
/****************************************************************/

/* 8.1 Padding around left and right columns in viewtopic */

DIV.postleft DL, DIV.postright {PADDING: 6px}

/* 8.2 Extra spacing for poster contact details and avatar */

DD.usercontacts, DD.postavatar {MARGIN-TOP: 5px}
DD.postavatar {MARGIN-BOTTOM: 5px}

/* 8.3 Extra top spacing for signatures and edited by */

DIV.postsignature, DIV.postmsg P.postedit {PADDING-TOP: 15px}

/* 8.4 Spacing for code and quote boxes */

DIV.postmsg H4 {MARGIN-BOTTOM: 10px}
.pun BLOCKQUOTE, DIV.codebox {MARGIN: 5px 15px 15px 15px; PADDING: 8px}

/* 8.5 Padding for the action links and online indicator in viewtopic */

DIV.postfootleft P, DIV.postfootright UL, DIV.postfootright DIV {PADDING: 10px 6px 5px 6px}

/* 8.6 This is the input on moderators multi-delete view */

DIV.blockpost INPUT, DIV.blockpost LABEL {
   PADDING: 3px;
   DISPLAY: inline
}

P.multidelete {
   PADDING-TOP: 15px;
   PADDING-BOTTOM: 5px
}

/* 8.7 Make sure paragraphs in posts don't get any padding */

DIV.postmsg P {PADDING: 0}

/****************************************************************/
/* 9. SPECIAL SPACING FOR FORMS */
/****************************************************************/

/* 9.1 Padding around fieldsets */

DIV.blockform FORM, DIV.fakeform {PADDING: 20px 20px 15px 20px}
DIV.inform {PADDING-BOTTOM: 12px}

/* 9.2 Padding inside fieldsets */

.pun FIELDSET {PADDING: 0px 12px 0px 12px}
DIV.infldset {PADDING: 9px 0px 12px 0}
.pun LEGEND {PADDING: 0px 6px}

/* 9.3 The information box at the top of the registration form and elsewhere */

DIV.forminfo {
   MARGIN-BOTTOM: 12px;
   PADDING: 9px 10px
}

/* 9.4 BBCode help links in post forms */

UL.bblinks LI {PADDING-RIGHT: 20px}

UL.bblinks {PADDING-BOTTOM: 10px; PADDING-LEFT: 4px}

/* 9.5 Horizontal positioning for the submit button on forms */

DIV.blockform P INPUT {MARGIN-LEFT: 12px}

/****************************************************************/
/* 10. POST STATUS INDICATORS */
/****************************************************************/

/* 10.1 These are the post status indicators which appear at the left of some tables.
.inew = new posts, .iredirect = redirect forums, .iclosed = closed topics and
.isticky = sticky topics. By default only .inew is different from the default.*/


div.icon{
    float: left;
    display: block;
    width:24px;
    height:24px;
}


DIV.searchposts DIV.icon {MARGIN-LEFT: 0}

/* 10.2 Class .tclcon is a div inside the first column of tables with post indicators. The
margin creates space for the post status indicator */

TD DIV.tclcon {MARGIN-LEFT: 2.3em}


css join (artemis_cs.css)

Code: Tout sélectionner


HTML , BODY {
color : #000;
background-color : #979797;
}
.pun {
color : #000;
}
.pun BLOCKQUOTE , DIV.codebox , DIV.box , adminconsole FIELDSET TH , .rowodd , .roweven {
background-color : #7a7a7a;
}

.pun H1 span {
color : #fafafa;
}

.pun input , select , textarea {
color : #000000;
}
#adminconsole TD , #adminconsole TH {
border-color : #7a7a7a;
background-color : #7a7a7a;
}
#postpreview , #viewprofile DD , DIV.forminfo , DIV.blockmenu DIV.box {
background-color : #7a7a7a;
}
#adminconsole FIELDSET TD {
border-color : #7a7a7a;
background-color : #7a7a7a;
}
TD.tcmod , adstats DD {
background-color : #7a7a7a;
}
TD.tc2 , TD.tc3 , TD.tc4 , TD.tc5 {
background-color : #666666;
color : #ffffff;
}
TD.tc2 a:link , TD.tc2 A:visited {
color : #ffffff;
}
TD.tc3 a:link , TD.tc3 A:visited {
color : #ffffff;
}
TD.tcl {
background-color : #7a7a7a;
}
TD.tcr {
background-color : #7a7a7a;
}
.pun H2 {
background-image : url(../../img/Artemis/cellpic1.gif);
border-right : 1px solid #666666;
border-left : 1px solid #666666;
border-top : 1px solid #a1a1a1;
border-bottom : 1px solid #666666;
color : #fff;
font-weight : bold;
}
.pun #brdmenu {
background-image : url(../../img/Artemis/cellpic1.gif);
border-right : 0 solid #a1a1a1;
border-left : 0 solid #a1a1a1;
border-top : 1px solid #a1a1a1;
border-bottom : 0 solid #a1a1a1;
color : #fff;
}
.pun TH {
color : #000000;
}
.pun TH.tcl , TH.tc2 , TH.tc3 , TH.tc4 , TH.tc5 , TH.tcr , TH.tcmod {
background-image : url(../../img/Artemis/cellpic2.gif);
color : #f1f1f1;
font-weight : bold;
}
.pun div.infldset TH.tcl , div.infldset TH.tc2 , div.infldset TH.tc3 , div.infldset TH.tcr {
background-image : url(../../img/Artemis/pix.gif);
color : #000;
}
.pun div.infldset th.hidehead {
color : #000;
background-image : url(../../img/Artemis/pix.gif);
}
.pun span.byuser {
background-position : 0% 50%;
background-repeat : no-repeat;
background-image : url(../../img/Artemis/icon_post.gif);
padding : 0 20px;
}
.pun LEGEND {
color : #fff;
}
.pun DIV.blockmenu LI.isactive A , #posterror LI STRONG {
color : #ffffff;
}
DIV.blockpost DIV.box , DIV.postright , DIV.postfootright {
background-color : #868686;
}
DIV.postright , DIV.postfootright {
border-left-color : #7a7a7a;
}
DIV.postleft , DIV.postfootleft , DIV.blockpost LABEL {
background-color : #7a7a7a;
}
DIV.blockpost H2 {
background-color : #7a7a7a;
}
DIV.blockpost H2 SPAN.conr {
color : #fff;
}
.pun HR {
background-color : #efefef;
color : #000;
}
DIV.box {
border-left-color : #505050;
border-right-color : #505050;
border-top-color : #505050;
border-bottom-color : #505050;
}
DIV.blockpost DIV.box {
border-color : #505050;
}
.pun TD {
border-color : #505050;
}
.pun TH {
border-color : #5e5e5e;
}
.pun BLOCKQUOTE {
background-color : #446f8d;
color : #fff;
}
.pun BLOCKQUOTE , DIV.codebox , DIV.forminfo , DIV.blockpost LABEL {
border-color : #505050;
}
.pun DIV.FIELDSET {
border-color : #006699;
}
.pun A:link , .pun A:visited {
color : #006699;
}
.pun A:hover {
color : #dd6900;
}
.pun H2 A:link , .pun H2 A:visited , #brdmenu A:link , #brdmenu A:visited {
color : #fff;
font-weight : bold;
}
.pun H2 A:hover , #brdmenu A:hover {
color : #f38918;
font-weight : bold;
}
LI.postreport A:link , LI.postreport A:visited , TR.iclosed TD.tcl A:link , TR.iclosed TD.tcl A:visited {
color : #505050;
}
LI.postreport A:hover , TR.iclosed TD.tcl A:hover {
color : #202020;
}
LI.maintenancelink A:link , LI.maintenancelink A:visited {
color : #b42000;
}
LI.maintenancelink A:hover {
color : #b42000;
}
TR.iclosed Div.icon {
background-image : url(../../img/Artemis/icon_closed.gif);
}
Div.icon {
background-image : url(../../img/Artemis/icon_normal.gif);
}
TR.iredirect DIV.icon {
background-image : url(../../img/Artemis/icon_moved.gif);
}
TR.inew Div.icon {
background-image : url(../../img/Artemis/icon_new.gif);
}
TR.isticky DIV.icon {
background-image : url(../../img/Artemis/icon_stiky.gif);
}
.pun DIV.validator {
position : absolute;
top : 20px;
right : 20px;
}


SOS !!

[zeb]

Une solution côté serveur :

soit le code (a adapter bien sur):

$css contient ta feuille de style (que tu peux obtenir a la volée avec un fopen() par exemple)
$adsense contient ton code fourni par google (tu dois y remplacer le code couleur fourni par Google par la chaine macouleurdefond par exemple, idem pour chaque couleur que tu veux modifier) soit (google_color_bg = "macouleurdefond";).

Code: Tout sélectionner

   // les CR posent des problèmes avec preg_match_all on les zap
   $css = eregi_replace("\n","%CR%",$css);
   // trouver les codes de style lié au BODY
   preg_match_all("/HTML , BODY \{.{1,60}\}/", $css, $matches, PREG_SET_ORDER);
   foreach ($matches as $val) {
      // supprimer ce qui se trouve avant le code couleur du background
      $val[0] = eregi_replace("^.*background\-color : #","",$val[0]);
      // supprimer ce qui se trouve après le code couleur du background
      $val[0] = eregi_replace(";.*$","",$val[0]);
      // assigner a $bgcouleur la valeur couleur tirée du CSS
      $bgcolor = $val[0];
   }
   $adsense = eregi_replace("macouleurdefond",$bgcolor,$adsense);
   echo $adsense;


le script isole une partie de ton fichier CSS (dans l'exemple ce qui est lié au body)
dans cette partie, il extrait ce qui a trait au Background.
ensuite il modifie le code adsense pour y inclure ce qu'il a extrait.
tes fichiers CSS doivent être construits de façon identiques pour que ton masque passe pour tous.