[MODERNBB] Changer les couleurs de la template et +

@ThunderTB ,
Hello Franck,
ben la couenne n'est pas vraiment grillée avec le temps maussade que l'on eut
Mais par contre pour le repos surement .

Bref,
alors, ce script de mon ami Ange Tuteur n'est pas optimisé pour ta version (Modernbb).

J'aurais voulu savoir quelle div car sans information avec le code html et la css associée difficile de te répondre mon ami !!!!

Milouze14 a écrit:
@ThunderTB ,
Hello Franck,
ben la couenne n'est pas vraiment grillée avec le temps maussade que l'on eut
Mais par contre pour le repos surement .

Bref,
alors, ce script de mon ami Ange Tuteur n'est pas optimisé pour ta version (Modernbb).

J'aurais voulu savoir quelle div car sans information avec le code html et la css associée difficile de te répondre mon ami !!!!

Re-Salut Phil en effet nous avons eu un été bizarre qui va bien avec ce qui se passe dans le monde en se moment .

Le forum en question : https://www.hockeyfederation.com/
La div en question : banimgblack
https://snipboard.io/rD04Zk.jpg

Avec le thème d'origine est en bleu , mais j'aimerais sa que lorsqu'on change de thème que
la div invisible devienne visible sois en opacity ou en display inline ...

Ps. L'astuce fonctionne pour le monderbb en phpbb3 puisque tout mes changements sont effectif
sur le forum en se moment et sa fonctionne bien .

Message envoyé via la réponse rapide par: @ThunderTB

@ThunderTB ,
Hello Franck,
alors vu comme le script est déposé, il ne doit pas fonctionner comme il faut mon ami.

Tu as modifié ce dernier ?
Tu as aussi ajouté un style dans ta feuille de style pour placer le thème
en haut dans la toolbar.

Je comprends aussi ta demande,pourquoi utiliser une image à l'intérieur d'une div?
Ce que tu souhaites, c'est que cette div prenne la couleur du thème ?

J'ai revus le script,
supprimes le et supprimes aussi la css ajoutée.
Comme ce dernier n'est pas configuré pour la version ModernBB mais pour la version Phpbb3,
il y a des trucs a rajouter.

Avant de faire quoique ce soit, voir l'effet ici:
https://m14phpbb2.forumactif.org/
Sers toi du sélecteur de thème qui sera fonctionnel en relation avec le scrool de la page.
Regarde aussi les messages, les bordures des messages sont de la même couleur que le thème ainsi que les avatars.

---

On peut aussi ajouter la couleur sur tous les petits rectangles si te le souhaites???
Dans ce cas il faudra revoir le code html dans la description du forum.
Fais le moi savoir si c'est ton souhait.


Voir sur fofo phpbb3:
https://testphpbb3.1fr1.net/

Sers toi du sélecteur de thème .

---

Le bouton restera en haut à gauche comme sur ton fofo mais sera toujours visible.
Ensuite pour le petit rectangle:
Dans la description du forum, tu as ceci:

Code:


<div class="banimg">
           <img src="https://i.servimg.com/u/f84/16/67/19/10/inscri10.png" style="margin-top:-0px;" class="responsive"><div class="banimgblack"><img src="https://i.servimg.com/u/f84/16/67/19/10/blacks10.png" style="margin-top:-0px;" class="responsive">
</div></div>



Remplaces par:

Code:


<div class="banimg">
   <img class="responsive" style="margin-top:-0px;" src="https://i.servimg.com/u/f20/20/11/87/27/franck10.png" />
   <div class="banimgblack">
   </div>
</div>



On va juste donné un style rectangulaire et le tour sera joué   .


Voici la c.s.s a ajouter pour le thème et aussi le petit rectangle concerné.

Code:

.pagination span a:not(.pag-img),.is-sticky#headerbar-top,.banimgblack,.button1,.button2,#privmsgs-menu i,
.button-round,.rep-button
{background-color: #3793ff;}
#privmsgs-menu i{color:white!important;}
.banimgblack
{
width: 130px;
height: 32px;
transform: skew(-20deg);
position: absolute;
margin-top: -47px;
margin-left: 37%;

}

Puis remplaces le script par celui-ci:

Code:


(function() {
          // 0 = phpbb2
          // 1 = phpbb3
          // 2 = punbb
          // 3 = invision
          var version = 1; // forum version
        
          window.fa_theme_color = {
            version : version,
        
            delay : 500, // delay between rainbow colors ( 500 = 0.5s )
            transition : 1000, // transition between colors ( 1000 = 1s )
            transition_all : false, // set to true if you want all themes to utilize the transitions
        
            // elements the selector is attached to
            attachTo : [
              '.bodyline > table:first-child', // phpbb2
              '#page-header', // phpbb3
              '#pun-head', // punbb
              '#submenu' // invision
            ][version],
        
            selected : my_getcookie('fa_theme_color') || 'Select a theme', // selected theme
        
            // color palettes
            palette : {
              'Select a theme' : '',
                'Random theme' : [],
                      'Rainbow' : '',
                      'Silver' : ['#DDD', '#CCC', '#BBB', '#999', '#555'], // hue 000
                  'Dusty Gray' : ['#AAA', '#999', '#888', '#666', '#444'], // hue 000
                    'Dove Gray' : ['#777', '#666', '#555', '#333', '#333'], // hue 000
                  'Mine Shaft' : ['#444', '#333', '#222', '#000', '#222'], // hue 000
                  'Persian Red' : ['#D44', '#C33', '#B22', '#900', '#522'], // hue 000
                'Christmas Red' : ['#C33', '#B22', '#A11', '#800', '#522'], // hue 000
                    'Coral Red' : ['#F55', '#F44', '#E33', '#C11', '#622'], // hue 000
                'Chestnut Rose' : ['#D77', '#C66', '#B55', '#933', '#533'], // hue 000
                        'Eunry' : ['#DAA', '#C99', '#B88', '#966', '#544'], // hue 000
                  'Brandy Rose' : ['#C99', '#B88', '#A77', '#855', '#544'], // hue 000
                      'Bazaar' : ['#A88', '#977', '#866', '#644', '#433'], // hue 000
                    'Cinnabar' : ['#F54', '#E43', '#D32', '#B10', '#622'], // hue 005
                        'Crail' : ['#A65', '#B54', '#A43', '#821', '#532'], // hue 008
                    'Flamingo' : ['#F64', '#E53', '#D42', '#B20', '#632'], // hue 010
                  'Red Damask' : ['#E75', '#D64', '#C53', '#A31', '#532'], // hue 013
                      'Tabasco' : ['#A42', '#931', '#820', '#300', '#421'], // hue 015
                        'Paarl' : ['#B64', '#A53', '#942', '#720', '#432'], // hue 017
                'Cape Palliser' : ['#B75', '#A64', '#953', '#731', '#432'], // hue 020
                      'Tuscany' : ['#D64', '#C63', '#B52', '#930', '#532'], // hue 020
                'Hot Cinnamon' : ['#E73', '#D62', '#C51', '#A30', '#532'], // hue 021
                'Blaze Orange' : ['#F71', '#F60', '#E50', '#C30', '#630'], // hue 024
                      'Pumpkin' : ['#F82', '#F71', '#E60', '#C40', '#631'], // hue 025
                'Antique Brass' : ['#DA7', '#C96', '#B85', '#963', '#543'], // hue 029
                  'Raw Sienna' : ['#D95', '#C84', '#B73', '#951', '#542'], // hue 029
                    'Earthtone' : ['#753', '#642', '#531', '#310', '#321'], // hue 029
                    'Americano' : ['#987', '#876', '#765', '#543', '#433'], // hue 030
                      'Coffee' : ['#876', '#765', '#654', '#432', '#432'], // hue 030
                    'Cinnamon' : ['#950', '#840', '#730', '#510', '#420'], // hue 030
                        'Brown' : ['#A61', '#950', '#840', '#620', '#420'], // hue 033
                    'Sandy Tan' : ['#EC9', '#DB8', '#CA7', '#A85', '#554'], // hue 035
                  'Hokey Pokey' : ['#DA4', '#C93', '#B82', '#960', '#542'], // hue 039
                      'Sienna' : ['#764', '#653', '#542', '#320', '#332'], // hue 039
                      'Shadow' : ['#986', '#875', '#764', '#542', '#433'], // hue 040
                    'Buttercup' : ['#FB2', '#EA1', '#D90', '#B70', '#641'], // hue 041
                  'Tulip Tree' : ['#FC4', '#EB3', '#DA2', '#B80', '#652'], // hue 043
                'Golden Grass' : ['#EB3', '#DA2', '#C91', '#A70', '#542'], // hue 043
                        'Pizza' : ['#DA2', '#C91', '#B80', '#960', '#541'], // hue 043
                    'Reef Gold' : ['#B93', '#A82', '#971', '#750', '#442'], // hue 045
                        'Olive' : ['#990', '#880', '#770', '#550', '#440'], // hue 060
                  'Camouflage' : ['#552', '#441', '#330', '#110', '#221'], // hue 060
                      'Avocado' : ['#997', '#886', '#775', '#553', '#443'], // hue 060
                  'Earls Green' : ['#DD4', '#CC3', '#BB2', '#990', '#552'], // hue 060
                        'Laser' : ['#DD7', '#CC6', '#BB5', '#993', '#553'], // hue 060
                  'Pine Glade' : ['#DDA', '#CC9', '#BB8', '#996', '#554'], // hue 060
                    'Pea Green' : ['#8A3', '#792', '#681', '#460', '#341'], // hue 077
                      'Celery' : ['#AD4', '#9C3', '#8B2', '#690', '#452'], // hue 080
                  'Chartreuse' : ['#9E1', '#8D0', '#7C0', '#5A0', '#450'], // hue 083
            'Forumactif Green' : ['#9D4', '#8C3', '#7B2', '#590', '#452'], // hue 086
                  'Dollar Bill' : ['#9C6', '#8B5', '#7A4', '#582', '#453'], // hue 090
                  'Wild Willow' : ['#AD7', '#9C6', '#8B5', '#693', '#453'], // hue 090
                    'Asparagus' : ['#8B6', '#7A5', '#694', '#472', '#343'], // hue 095
                    'Atlantis' : ['#7D4', '#6C3', '#5B2', '#390', '#352'], // hue 100
                'Forest Green' : ['#393', '#282', '#171', '#050', '#242'], // hue 120
              'Christmas Green' : ['#171', '#060', '#050', '#030', '#030'], // hue 120
                        'Apple' : ['#4D4', '#3C3', '#2B2', '#090', '#252'], // hue 120
                      'Mantis' : ['#7D7', '#6C6', '#5B5', '#393', '#353'], // hue 120
                      'De York' : ['#ADA', '#9C9', '#8B8', '#696', '#454'], // hue 120
                        'Envy' : ['#9B9', '#8A8', '#797', '#575', '#454'], // hue 120
                      'Spruce' : ['#7D8', '#6C7', '#5B6', '#394', '#353'], // hue 130
                'Bottle Green' : ['#2B4', '#1A3', '#092', '#070', '#142'], // hue 133
                  'Aqua Forest' : ['#7B8', '#6A7', '#596', '#374', '#343'], // hue 135
              'Mountain Meadow' : ['#4D7', '#3C6', '#2B5', '#093', '#253'], // hue 140
                      'Meadow' : ['#3B6', '#2A5', '#194', '#072', '#243'], // hue 142
                    'Sea Green' : ['#496', '#385', '#274', '#052', '#243'], // hue 144
                      'Amazon' : ['#486', '#375', '#264', '#042', '#233'], // hue 150
                      'Emerald' : ['#7DA', '#6C9', '#5B8', '#396', '#354'], // hue 150
                    'Shamrock' : ['#4DA', '#3C9', '#2B8', '#096', '#254'], // hue 160
                  'Blue Lagoon' : ['#5CB', '#4BA', '#3A9', '#187', '#254'], // hue 171
                    'Turquoise' : ['#4DD', '#3CC', '#2BB', '#099', '#255'], // hue 180
                        'Downy' : ['#7DD', '#6CC', '#5BB', '#399', '#355'], // hue 180
                      'Sinbad' : ['#ADD', '#9CC', '#8BB', '#699', '#455'], // hue 180
                        'Teal' : ['#199', '#088', '#077', '#055', '#044'], // hue 180
                  'Blue Chill' : ['#29A', '#189', '#078', '#056', '#144'], // hue 187
                    'Cerulean' : ['#1BE', '#0AD', '#09C', '#07A', '#045'], // hue 193
                'Deep Cerulean' : ['#18B', '#07A', '#069', '#047', '#034'], // hue 198
                'Curious Blue' : ['#4AD', '#39C', '#28B', '#069', '#245'], // hue 200
                  'Slate Gray' : ['#89A', '#789', '#678', '#456', '#344'], // hue 210
                      'Danube' : ['#7AD', '#69C', '#58B', '#369', '#345'], // hue 210
              'Azure Radiance' : ['#18F', '#07F', '#06E', '#04C', '#036'], // hue 212
                      'Mariner' : ['#47D', '#36C', '#25B', '#039', '#235'], // hue 220
                        'Azure' : ['#46B', '#35A', '#249', '#027', '#234'], // hue 222
                'Governor Bay' : ['#44D', '#33C', '#22B', '#009', '#225'], // hue 240
              'Blue Marguerite' : ['#77D', '#66C', '#55B', '#339', '#335'], // hue 240
                    'Blue Bell' : ['#AAD', '#99C', '#88B', '#669', '#445'], // hue 240
                        'Comet' : ['#668', '#557', '#446', '#224', '#334'], // hue 240
                'Purple Heart' : ['#74D', '#63C', '#52B', '#309', '#325'], // hue 260
                    'Amethyst' : ['#A7D', '#96C', '#85B', '#639', '#435'], // hue 270
              'Amethyst Smoke' : ['#BAC', '#A9B', '#98A', '#768', '#445'], // hue 270
                        'Mauve' : ['#EBF', '#DAF', '#C9E', '#A79', '#546'], // hue 276
                      'Affair' : ['#85A', '#749', '#638', '#416', '#324'], // hue 276
                      'Purple' : ['#A4D', '#93C', '#82B', '#609', '#425'], // hue 279
                    'Lavendar' : ['#C8E', '#B7D', '#A6C', '#84A', '#535'], // hue 279
                      'Cerise' : ['#D4D', '#C3C', '#B2B', '#909', '#525'], // hue 300
                'Fuchsia Pink' : ['#D7D', '#C6C', '#B5B', '#939', '#535'], // hue 300
                        'Lilac' : ['#DAD', '#C9C', '#B8B', '#969', '#545'], // hue 300
                  'Red Violet' : ['#D4A', '#C39', '#B28', '#906', '#524'], // hue 321
                        'Disco' : ['#926', '#815', '#704', '#501', '#413'], // hue 326
              'Carnation Pink' : ['#FAD', '#F9C', '#E8B', '#C69', '#645'], // hue 330
                      'Hopbush' : ['#D7A', '#C69', '#B58', '#936', '#534'], // hue 331
                  'French Rose' : ['#F59', '#E48', '#D37', '#B15', '#624'], // hue 337
                    'Hibiscus' : ['#D47', '#C36', '#B25', '#903', '#523'], // hue 340
                      'Claret' : ['#824', '#713', '#602', '#400', '#312'], // hue 340
                    'Bordeaux' : ['#713', '#602', '#501', '#300', '#301'], // hue 340
              'Tickle Me Pink' : ['#F9B', '#F8A', '#E79', '#C57', '#645'], // hue 343
                    'Burgundy' : ['#913', '#802', '#701', '#500', '#401'], // hue 345
                        'Blush' : ['#E68', '#D57', '#C46', '#A24', '#534'], // hue 345
              'Wild Watermelon' : ['#F68', '#F57', '#E46', '#C24', '#634'], // hue 348
                    'Amaranth' : ['#F46', '#E35', '#D24', '#B02', '#623'], // hue 350
                    'Mauvelous' : ['#FAB', '#F9A', '#E89', '#967', '#645'], // hue 351
            'Alizarin Crimson' : ['#F34', '#E23', '#D12', '#B00', '#622'] // hue 355
            },
        
            // change the current theme
            change : function(color, select) {
              var head = $('head'),
                  style = document.getElementById('fa_theme_style');
        
              my_setcookie('fa_theme_color', color, true); // update selected theme
        
              // remove old styles
              if (style) {
                head[0].removeChild(style);
              }
        
              fa_theme_color.selector.firstChild.innerHTML = 'Default theme'; // change select a theme texts
        
              // Random / Normal Themes
              if (!/Select a theme|Rainbow/.test(color) && fa_theme_color.palette[color]) {
                fa_theme_color.selected = color == 'Random theme' ? fa_theme_color.palette['Random theme'][Math.floor(Math.random() * fa_theme_color.palette['Random theme'].length)] : color;
                fa_theme_color.selector.style.backgroundColor = fa_theme_color.palette[fa_theme_color.selected][1];
                fa_theme_color.selector.style.borderColor = fa_theme_color.palette[fa_theme_color.selected][2];
        
                head.append('<style type="text/css" id="fa_theme_style">' + fa_theme_color.css() + '</style>');
        
              } else if (color == 'Rainbow') { // Rainbow theme
                if (fa_theme_color.stop) {
                  fa_theme_color.selected = color;
                  fa_theme_color.selector.style.backgroundColor = fa_theme_color.palette[select][1];
                  fa_theme_color.selector.style.borderColor = fa_theme_color.palette[select][2];
        
                  head.append('<style type="text/css" id="fa_theme_style">' + fa_theme_color.css(select) + '</style>');
                } else {
                  fa_theme_color.rainbow();
                }
              } else { // No theme
                fa_theme_color.selector.style.backgroundColor = '#999';
                fa_theme_color.selector.style.borderColor = '#888';
                fa_theme_color.selector.firstChild.innerHTML = 'Select a theme';
              }
        
              // delete rainbow assets if it's not selected
              if (color != 'Rainbow' && fa_theme_color.stop) {
                if (!fa_theme_color.transition_all) {
                  head[0].removeChild(document.getElementById('fa_rainbow_smoothness'));
                }
        
                window.clearInterval(fa_theme_color.interval);
                delete fa_theme_color.index;
                delete fa_theme_color.stop;
              }
            },
        
            // get and return the theme CSS per version
            css : function(select) {
              var palette = fa_theme_color.palette[select || fa_theme_color.selected],
                  all = '::-webkit-scrollbar { width:17px !important; height:17px !important; }'+
                        '::-webkit-scrollbar-track { background:#DDD !important; }'+
                        '::-webkit-scrollbar-thumb { border:2px solid #DDD !important; }'+
                        '::-webkit-scrollbar-button { background:url(https://i.servimg.com/u/f86/18/21/41/30/webkit10.gif) no-repeat 0 0 !important; height:17px !important; width:17px !important; }'+
                        '::-webkit-scrollbar-button:vertical:increment { background-position:-17px 0 !important }'+
                        '::-webkit-scrollbar-button:horizontal:decrement { background-position:-34px 0 !important }'+
                        '::-webkit-scrollbar-button:horizontal:increment { background-position:-51px 0 !important }'+
                        '::selection { color:#FFF; background-color:' + palette[1] + ' !important; }'+
                        '::-moz-selection { color:#FFF; background-color:' + palette[1] + ' !important; }'+
                        '::-webkit-scrollbar-thumb, ::-webkit-scrollbar-button { background-color:' + palette[1] + ' !important; }'+
                        '::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-button:hover { background-color:' + palette[2] + ' !important; }'+
                        '::-webkit-scrollbar-thumb:active, ::-webkit-scrollbar-button:active { background-color:' + palette[3] + ' !important; }';
        
              switch (fa_theme_color.version) {
        
                case 0 : // phpbb2
                  return 'a, a:link, a:visited, a.forumlink, a.forumlink:link, a.forumlink:visited, a.topictitle, a.topictitle:link, a.topictitle:visited { color:' + palette[3] + '; }'+
                        'a:hover, a.forumlink:hover, a.topictitle:hover { color:' + palette[1] + '; }'+
                        'th, td.cat, td.catBottom, td.catHead, td.catLeft, td.catRight, td.catSides { background:' + palette[1] + '!important; }'+
                        '.forumline { border-color:' + palette[1] + '; }'+
                        'th, td.cat, td.catBottom, td.catHead, td.catLeft, td.catRight, td.catSides, .cattitle, h1.pagetitle, .module-title, .catHead .genmed, .secondarytitle h2, .catBottom a, .catLeft .genmed { color:#FFF !important; }'+
                        all;
        
                case 1 : // phpbb3
                  return 'a, a:link, a.forumtitle, a.topictitle, a:visited, .postprofile a:active, .postprofile a:link, .postprofile a:visited, .postprofile dt.author a { color:' + palette[3] + '; }'+
                        'a:hover, a.forumtitle:hover, a.topictitle:hover, .postprofile a:hover, .postprofile dt.author a:hover { color:' + palette[1] + '; }'+
                        '.banimgblack,h1, h2, h3, h4, h5, h6, .h3, h2.h3, h1.page-title, hr, hr.dashed, .content h1, .content h2, .panel h1, .panel h2, #cp-main h1 { color:' + palette[3] + '; border-color:' + palette[3] + '; }'+
                    '.rep-button,#privmsgs-menu i,.button1,.button2,.button-round,.banimgblack,.pagination span a:not(.pag-img),.is-sticky#headerbar-top,.headerbar, .forabg, .forumbg { background:' + palette[1] + '!important; }'+
                        all;
        
                case 2 : // punbb
                  return 'a, a:link, a:visited, .pun a:link, .pun a:visited { color:' + palette[3] + '; }'+
                        'a:hover, .pun a:hover { color:' + palette[1] + '; }'+
                        '#pun-intro, .main .main-foot, .main .main-head, #tabs ul li.activetab a { background:' + palette[1] + '!important; }'+
                        '#tabs ul li.activetab a { border-color:' + palette[1] + '!important; }'+
                        '#pun-navlinks { background:' + palette[4] + '!important; }'+
                        '#pun-navlinks a.mainmenu, .main .main-foot, .main .main-head, #tabs ul li.activetab a, #tabs ul li.activetab a * { color:#FFF!important; }'+
                        '#pun-intro { border:none; }'+
                        all;
        
                case 3 : // invision
                  return 'a, a:link, a:visited { color:' + palette[3] + '; }'+
                        'a:hover { color:' + palette[1] + '; }'+
                        'div#logostrip, div.maintitle, ul.privmsg li { background:' + palette[1] + '!important; }'+
                        '.box-content { border-bottom-color:' + palette[4] + '!important; }'+
                        '#submenu, table.ipbtable tfoot td, #gfooter { background:' + palette[4] + '!important; }'+
                        '#submenu ul li a:hover { background:' + palette[3] + '!important; }'+
                        'div.maintitle, #submenu, #submenu a.mainmenu, table.ipbtable tfoot td, #gfooter, #gfooter a { color:#FFF!important; }'+
                        all;
        
                default : // unknown
                  return ''+
                        all;
        
              }
            },
        
            // get and return the transition CSS per version
            // helps make the transition in colors smooth
            applyTransitionRules : function() {
              switch (fa_theme_color.version) {
        
                case 0 : // phpbb2
                  return 'a, a:link, a:visited, a.forumlink, a.forumlink:link, a.forumlink:visited, a.topictitle, a.topictitle:link, a.topictitle:visited, th, td.cat, td.catBottom, td.catHead, td.catLeft, td.catRight, td.catSides, .forumline { transition:' + fa_theme_color.transition + 'ms; }';
        
                case 1 : // phpbb3
                  return 'a, a:link, a.forumtitle, a.topictitle, a:visited, .postprofile a:active, .postprofile a:link, .postprofile a:visited, .postprofile dt.author a,.headerbar, .forabg, .forumbg, a.button2, body:last-child a.button1, button.button2, input.button1, input.button2, .button, input[type="button"], input[type="submit"], h1, h2, h3, h4, h5, h6, .h3, h2.h3, h1.page-title, hr, hr.dashed, select, input, textarea, .inputbox { transition:' + fa_theme_color.transition + 'ms; }';
        
                case 2 : // punbb
                  return 'a, a:link, a:visited, .pun a:link, .pun a:visited, #pun-intro, .main .main-foot, .main .main-head, #pun-navlinks { transition:' + fa_theme_color.transition + 'ms; }';
        
                case 3 : // invision
                  return 'a, a:link, a:visited, div#logostrip, div.maintitle, .box-content, #submenu, table.ipbtable tfoot td, #gfooter, #submenu ul li a, ul.privmsg li { transition:' + fa_theme_color.transition + 'ms; }';
        
                default : // unknown
                  return '';
        
              }
            },
        
            // setup the rainbow assets
            rainbow : function() {
              if (!fa_theme_color.transition_all) {
                $('head').append('<style type="text/css" id="fa_rainbow_smoothness">' + fa_theme_color.applyTransitionRules() + '</style>');
              }
        
              fa_theme_color.index = 0;
              fa_theme_color.stop = fa_theme_color.palette['Random theme'].length;
              fa_theme_color.change('Rainbow', fa_theme_color.palette['Random theme'][fa_theme_color.index]);
        
              fa_theme_color.interval = window.setInterval(function() {
                if (++fa_theme_color.index >= fa_theme_color.stop) {
                  fa_theme_color.index = 0;
                }
        
                fa_theme_color.change('Rainbow', fa_theme_color.palette['Random theme'][fa_theme_color.index]);
              }, fa_theme_color.transition + fa_theme_color.delay);
            }
          };
        
          var htmlStr = '', i;
        
          // put together the theme options and random array
          for (i in fa_theme_color.palette) {
            if (typeof fa_theme_color.palette[i] != 'undefined') {
              if (!/Random theme|Select a theme|Rainbow/.test(i)) {
                fa_theme_color.palette['Random theme'][fa_theme_color.palette['Random theme'].length] = i;
              }
        
              htmlStr += '<option value="' + i + '" ' + ( fa_theme_color.selected == i ? 'selected="true"' : '' ) + ' style="background-color:' + (/Random theme|Select a theme|Rainbow/.test(i) ? '#FFF;color:#000;' : fa_theme_color.palette[i][2]) + '">' + i + '</option>';
            }
          }
        
          // create the theme selector
          fa_theme_color.selector = $('<select id="fa_theme_selector" />').html(htmlStr).change(function() {
            fa_theme_color.change(this.value);
          })[0];
        
          fa_theme_color.change(fa_theme_color.selected); // apply the selected theme
        
          // add the theme selector to the document
          $(function() {
            $(fa_theme_color.attachTo).after([fa_theme_color.selector, $('<div class="clear" />')[0]]);
          });
        
          // basic styles for the theme selector
  document.write('<style type="text/css">#fa_theme_selector {color:#FFF;position:fixed;z-index:999999;cursor:pointer;padding:6px;margin:3px;width:144px;}' + ( fa_theme_color.transition_all ? fa_theme_color.applyTransitionRules() : '' ) + '</style>');
        }());




Re-Salut Phil , tout d’abords un gros merci d'avoir tenter de me concocté cette solution par contre plusieurs choses semble faire défaut . Premièrement j'ai mis une class responsive sur mes bannières pour que les images
ce redimentionne bien pour les cellulaires et avec ton astuce elle reste avec sa taille original .
Y'a aussi le fait que y'a un hover black/white sur la bannière lorsqu'on laisse glisser la souris sur l'image et en
se moment le rectangle que tu as ajouter ce promène vers la gauche lorsqu'on y glisse la souris .
Autres choses qui pose problème c'est la couleurs du background du logo en haut du forum change avec les
changement de couleurs et j'aimerais qu'il reste en tout temps blanc et même chose pour les textes/font de la
toolbar qui change selon le style j'aimerais qu'il demeure blanc . Et pour terminer le selecteur de couleurs j'aimerais qu'il reste non fixed puique si tu regarde bien avec ma navbar de la façon donc j'ai patenté sa le logo du forum s'y glisse et ce mute a la toolbar ... Un gros merci je vais laisser sa comme sa comme sa tu pourras y jeter un coup d'oeil .

P.s. Je tes redonner le status d'administrateur sur mon forum si tu veux y jeter un coup d'oeil , un gros merci d'avance et bon dimanche .

Message envoyé via la réponse rapide par: @ThunderTB

@ThunderTB ,
coucou Franck,
alors pour toutes ces remontées, j'ai apporté des corrections pour ton header et aussi au survol.

Le hover a été désactivé dans la css :

Code:


/*.banimg:hover{-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */filter: grayscale(100%);transition:0.7s;}*/


Pour tes images ayant la class "responsive" , il vaut mieux se tourner vers la version Phpbb3:

https://testphpbb3.1fr1.net/

Sur ce forum de tests tu as qu'une image et elle garde cette class, le reste des rectangles ne sont pas touché!!!!

Je verrais le reste demain mon ami .



Message envoyé via la réponse rapide par: @Milouze14

Re-Salut Phil , j'ai fait quelque modifications à partir de ce que tu avais fait et j'ai exactement le rendu que je cherchais ça veux donc dire que encore une fois tu me sauve c'est encore mieux de ce que je voulais faire avec mon image ... L'astuce transform: skew(-20deg); j'y avais penser mais c'étais trop compliquer maintenant au lieu d'être noir elle suivrons la couleurs donner .

P.s. le seul "Hic" c'est sont rendu sur les cellulaires l'astuce est de lui mettre une class responsive pour les redimention ce qui fonctionne très bien avec tout les images du forum par contre pourrais tu me guider ?

En théorie je dois faire en sorte que la div ajouter ".banimgblack" soit de la même dimension que l'image d'origine est la partie qu'on veux changer de couleur comme ceci : https://snipboard.io/iaVA6H.jpg

donc la class responsive redimensionne tout les images du forum sur les cellulaires avec mon astuce , donc la question que je te pose c'est comment faire en sort d'ajouter une class à notre div ajouter ".banimgblack" ??

Bonne journée !!!


Message envoyé via la réponse rapide par: @ThunderTB

Hello Franck,
alors il est impératif de le code html soit ainsi:

Code:


<div class="banimg">
<img src="https://i.servimg.com/u/f20/20/11/87/27/franck10.png" style="margin-top:-0px;" class="responsive" />   <div class="banimgblack"></div>
</div>


La class banimg doit engloutir tout le contenu Franck.
Sur ton fofo, c'était ainsi:

Code:


<div class="banimg">
           <img class="responsive" style="margin-top:-0px;" src="https://i.servimg.com/u/f84/16/67/19/10/inscri11.png" />
</div>
<div class="banimgblack">
</div>


On ne pourra malheureusement pas adapté le height on fonction de l'image Franck.
Le hover sert à quoi exactement ?





J'ai modifié la css ainsi:

Code:

.banimgblack
{
width: 120px;
height: 32px;
transform: skew(-20deg);
float:right;
  margin-top: -9%;

}

A ce soir .

Re-Salut Phil , de mon coter sa sort bien sur PC par contre sa va pas sur les cellulaires et sachant
que plus de la moitié sur le forum navigue avec ceux ci je dois trouver une façon sinon je vais devoir
retourner à ma méthode innitialle c'est à dire ajouter une opacity a une image si biensur tu peux
le faire sans posibilité de changer la couleur mais au moins couleur noire serais une couleur
qui fiterais avec le forum et tout les couleurs de la palette de couleur .

Si ont retourne à ce que nous faisons en ce moment , j'ai peut-être une idée .
L'image principale ici : https://i.servimg.com/u/f84/16/67/19/10/inscri11.png
c'est dimensions sont : 516x76 donc lorsque ont consulte le forum sur cellulaires la class responsive
fait ceci pour les redimensionner :

Code:

.responsive {
max-width:100%;
height:auto;
}

donc je crois que je sais pourquoi la div que nous avons ajouter redimensionne pas de la bonne façon ,
en se moment notre div ajouter fait ces dimensions : 114x30
donc je me demande si ce serais possible d'ajouter une div à cette même div pour lui donner un total de
516x76 avec un opacity transparent ou background transparent toute en gardant notre div qui change
de couleurs dans ces même dimensions ? donc en théorie elle va suivre le reste de l'image qui fait les
même dimensions ? Je sais que sa fonctionne avec une image parce que je l'est tester l'autre jours
c'est pour sa que je voulais que tu ajouter une option opacity sur l'astuce d'ange tuteur .

Merci ont se rejase plus tard Phil .

Message envoyé via la réponse rapide par: @ThunderTB

Re Franck,
alors il vaut mieux reprendre la structure que tu avais de base.

Code:

<div class="banimg">
          <img src="https://i.servimg.com/u/f84/16/67/19/10/inscri10.png" style="margin-top:-0px;" class="responsive"><div class="banimgblack"><img src="https://i.servimg.com/u/f84/16/67/19/10/blacks10.png" style="margin-top:-0px;" class="responsive">
</div></div>

Ensuite, le sélecteur de thèmes gère simplement de la couleur/couleur de fond et bordure
( [palette) dans le script ) mon ami, difficile de faire autrement.

Pour l'opacité ce ne sera pas possible Franck.

Je cherche une autre solution pour mettre une class juste pour le thème de base .
Si c'est fonctionnel on pourra faire quelque chose.






Message envoyé via la réponse rapide par: @Milouze14

Alors, j'ai trouvé une solution en déposant ce script sur l'index:

Code:


$(function(){
$('.forabg:first').each(function(){
var $this=$(this);
var color = $(this).css('background-color');
if($this.css('background-color') == 'rgb(0, 143, 255)')
{$('.banimgblack').css('opacity','0');}
else {$('.banimgblack').css('opacity','1');}
});});

$(function(){
$('#fa_theme_selector option').click(function(){
window.location.reload();
});});


Donc invisible avec le thème de base, dès lors que tu changes elle sera affichée avec la couleur du thème choisis.

J'attend de tes nouvelles , un gros merci encore j,ai fait quelque retouche avec l'image noire
mais pour le moment elle n'est pas parfaite et elle bouge rendu sur cell il y surement quelque chose qui cloche avec les div , en principle ont pourrais enlever la div .banimgblack
est fusionner ensemble avec une seul div non ? c'est la seul façon que je vois le tout se suivre sans boucher d'un bord ou l'autre .

Message envoyé via la réponse rapide par: @ThunderTB

C'est encore moi Phil , après avoir jouer quelque peu avec ton astuce j'ai réussi à bien de
dimensionné sur le forum et les cellulaires maintenant il ne reste plus que bien le cadré
y'a t'il moyen de lui faire suivre l'autre image avec un display:block ou quelque chose du genre ?

Message envoyé via la réponse rapide par: @ThunderTB

C'est encore moi Phil , j'ai jouer avec tout sa un bon bout et j'en suis finalement
arriver avec le résultat que je voulais ... L'image noir apparait lorsqu'on change le thème du
forum et elle est au bonne emplacement sur toute les navigateurs et plateforme pc , cell , android ... La seul chose que j'ai remarquer est le fait que sur Chrome qu'utilise mon cellulaire ne fait pas le "Refresh" de la page web du forum lorsque le changement est fait ont dois le
faire à la main alors que sur Firefox sur mon pc toute est beau il le fait automatiquement .
C'est pas grand chose si tu peux réglé sa rapidement se serais bien sinon si c'est trop
compliquer pour rien alors c'est correct aussi puisque en ce moment tout #1 de mon coter .

Message envoyé via la réponse rapide par: @ThunderTB

Hello Franck,

a priori Chrome ne supporte pas (encore un fois) l'évènement click sur un select,
voilà la raison pour le click.


Message envoyé via la réponse rapide par: @Milouze14

C'est parfait alors Phil , je te remercie énormément mon sujet est résolu .

A+ plus mon ami à la prochaine d'ici là fait attention à toi !!!


Message envoyé via la réponse rapide par: @ThunderTB

De rien cher ami  .


Message envoyé via la réponse rapide par: @Milouze14