المظهر العادي و  الداكن لنسخة ModernBB

اذهب الى الأسفل

 المظهر العادي و  الداكن لنسخة ModernBB Empty  المظهر العادي و  الداكن لنسخة ModernBB

مُساهمة من طرف كونان2000 الثلاثاء 8 يونيو 2021 - 3:15

السلام عليكم ورحمة الله وبركاته
 المظهر العادي و  الداكن لنسخة ModernBB Gwkbqf10
كود جفا يسمح لاعضاء المنتدى بأختيار  المظهر العادي او  الداكن,
المظهر العادي هو شكل الاستايل من غير تغيير اما المظهر الداكن يجعل الاستايل   مظلم ,
--
صوره للمعاينة
https://i.servimg.com/u/f30/20/35/61/89/feewr610.gif
طريقة التركيب لنسخة ModernBB
اول شيء اذهب الى لوحة الادارة > عناصر إضافية  > إدارة أكواد Javascript
اضف الكود التالي واختار جميع الصفحات كما في الصورة https://i.servimg.com/u/f20/16/85/77/67/ocia_a11.png

الكود:
(function() {
  // 3 = modernbb
  var version = 3; // forum version
 
  window.fa_theme_color = {
    version : version,
 
 
    // elements the selector is attached to
    attachTo : [
      '.نوار2000', // سبحان الله
      '.نوار2000', // اللهم صل وسلم على محمد
      '.نوار2000', // وفوق كل ذي علم عليم
      '.نوار2000'  // لا تنسى ذكرا الله
    ][version],
 
 selected : my_getcookie('fa_theme_color') || 'اختيار', // selected theme
 
    // color palettes
    palette : {
 '☼ العادي' : '',

    '☾ الداكن' : [],
    },

 
 
    // 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);
      }
 

 
      // Random / Normal Themes
      if (!/Select a theme|Rainbow/.test(color) && fa_theme_color.palette[color]) {
        fa_theme_color.selected = color == '☾ الداكن' ? fa_theme_color.palette['☾ الداكن'][Math.floor(Math.random() * fa_theme_color.palette['☾ الداكن'].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';
      }
 
      // 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-track { background:#DDD; }'+
                '::-webkit-scrollbar-button:horizontal:increment { background-position:-51px 0  }'+
                '::-webkit-scrollbar-thumb:active, ::-webkit-scrollbar-button:active { background-color:' + palette[3] + ' !important; }';




 
      switch (fa_theme_color.version) {
 
 
 
 
 
 
 
        case 3 : // invision
        return'#wrap, body, html, h1.page-title, #cp-main .panel {
            color: #d4d0d0!important;
            background: #000!important;
          ' + palette[3] + '!important; }'+
                '#tabs ul a span,  .fa_like_div,  #picture_legend, .fa_dislike_list, .fa_like_list, .forumbg table.table1, .mod-news-footer,  .is-sticky#headerbar-top, #privmsgs-menu, .block-footer, .module-footer, .chatbox_row_1, #chatbox_header  {
          background-color: #2c353b!important;
            color:#d4d0d0!important; }'+
    'ul.forums, .block, dt label, .module, fieldset.polls dt, p.author, dl.faq dt, dd label, label, #cp-main .panel + h1, #cp-main h1, .panel, table.table1 td, .mod-news, .row1, .row2, .row3, li.row:hover  {
          background-color: #1f1f1f!important;
            color: #d4d0d0!important; }'+
              'a:link, a {
            color:#fff!important; }'+
  'li.row, .pagination span strong  {
          border-color: #444!important; }'+
 '.postbody .content, .content, .postprofile {
          color: #fff!important; }'+
 '#comments_scroll_div:after {
        box-shadow: 0 0 18px 9px #fff0 inset!important; }'+
  'body.chatbox {
  background-color: #101010;
    background-image: none;
    margin-top: 0!important; }'+
  '.navbar a:hover {
    background-color: #607d8b;
}'+
    '.block .h3, .h3, h3  {
            color: #d4d0d0!important; }'+
  'select {
    background-color: #fbfbfbe0;
    color: black;
}'+
 
 '#profile-tab-field-profil dl dt, #profile-tab-field-profil dl dt span, #ucp fieldset dl dt label, #ucp fieldset dt, #ucp fieldset dt span,.postprofile .label span, .postprofile .label  {
    color: #fff!important;
    font-weight: bold;
}'+
 
  'span.label {
color: #131107;
    display: inline-block;
    margin: 2px;
    background: aliceblue;
 }'+
  'dl.codebox {
    background-color: rgb(96 125 139 / 31%);
    border-color: #607d8b;
 }'+
  '.quick-nav-topics a, .inputbox, input[type="text"] {
color: #0e0e0e;
    background-color: #ffffffc2;
}'+  
                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) {
 
 
 
 
    
        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['☾ الداكن'].length;
      fa_theme_color.change('Rainbow', fa_theme_color.palette['☾ الداكن'][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['☾ الداكن'][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['☾ الداكن'][fa_theme_color.palette['☾ الداكن'].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="نوار20000" />').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">نوار20000 {margin:3px;}' + ( fa_theme_color.transition_all ? fa_theme_color.applyTransitionRules() : '' ) + '</style>');
}());

ثاني شيء اذهب الى التومبيلات والقوالب > قالب overall_footer_begin
وابحث عن الكود التالي
الكود:

<div class="statistics">

ثم ضع الكود التالي فوقه مباشرة
الكود:

    <style>
       select#نوار20000 {
    background: #27424e!important;
    border: solid #9e9e9e 1px!important;
    border-radius: 11px!important;
    color: #f0ffff!important;
    float: right;
    margin-left: 5px;
}
.نوار2000 {
    margin: 7px 15px 5px 6px;
    float: right;
}
.اليل-و-النهار {
    width: max-content;
    margin-right: 3px;
    background-color: #4a6471;
    color: #FFF;
    font-size: 1.3rem;
    padding: 7px;
}
</style>
  
<div class="اليل-و-النهار">
<div class="نوار2000">المظهر</div>
</div>

ويمكن للمدير من خلال الجفا ان يغير  كما يريد من درجة الالوان في المظهر الداكن
و يمكنه ان يغير اي شيء لا يعجبه من المظهر الداكن من كود الجفا,

ملاحظة...
هذا الكود مناسب لنسخة ModernBB  فقط,
لكن ممكن من الجفا جعله مناسب لباقي النسخ واذا لا تعرف
افتح موضوع في القسم المناسب في منتدى الدعم,

ملاحظة اخرى
الكود لا يعمل بالشكل الصحيح مع الاستايلات المحوله وغيرت من القوالب الاصلية,

وفقكم الله
كونان2000
كونان2000
احلى مساعد
احلى مساعد

ذكر
عدد المساهمات : 296
معدل النشاط : 585
السُمعة : 38

https://rami1.ahlamontada.com/

MostWanted و ebrah يعجبهم هذا الموضوع

الرجوع الى أعلى الصفحة اذهب الى الأسفل

الرجوع الى أعلى الصفحة


 
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى