الكود:

 var version = 1; // forum version


الكود:


(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(http://i86.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] + '; }'+
                '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] + '; }'+
                '.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;float:right;cursor:pointer;padding:3px 6px;margin:3px;}' + ( fa_theme_color.transition_all ? fa_theme_color.applyTransitionRules() : '' ) + '</style>');
}());


الكود:


/* -- 00. fa_initForumModules -- */
// initiate the toggler for the widget columns
function fa_initForumModules(column_id) {
  var column = document.getElementById(column_id), menu;
 
  if (column) {
    column.insertAdjacentHTML('afterbegin', '<div class="title module_column_title">Widget Menu</div>');
 
    menu = document.createElement('A');
    menu.href = '#';
    menu.title = 'Toggle widget menu';
    menu.className = 'widget_menu column_button_' + column_id + ' color-secondary';
 
    menu.onclick = function() {
      var column = document.getElementById(/left/.test(this.className) ? 'left' : 'right');
 
      $([this, column])[/active/.test(this.className) ? 'removeClass' : 'addClass']('active');
      return false;
    };
 
    document.body.appendChild(menu);
  }
};
 
// give active panels a very high z-index so they display above other panels and buttons
// forumotion replaces any z-index above 1000 w/999 in the stylesheet, so this must be applied via JS
document.write('<style type="text/css">'+
  '.module_column, .widget_menu { z-index:30000; }'+
  '.module_column.active, .widget_menu.active { z-index:99999; }'+
'</style>');


الكود:


/* -- 05. fae_sticky_nav_panel -- */
// adds a sticky navigation for quick use when the navbar isn't visible
$(function() {
  window.fae_sticky = {
            // various user options
            navbar : 'navbar',
          position : 'left',
            title : 'Quick Navigation',
          tooltip : 'Toggle quick navigation',
    additionalHTML : '<div class="nav-actions"><a href="javascript:fae_sticky.copyURL();" title="Copy BBCode URL"><i class="fa fa-link"></i></a>' + ( _userdata.user_level == 1 ? '<a href="/admin" title="Admin Panel"><i class="fa fa-wrench"></i></a>' : '' ) + '<a href="#top" title="Top of page"><i class="fa fa-chevron-up"></i></a><a href="#bottom" title="Bottom of page"><i class="fa fa-chevron-down"></i></a></div>',
    alwaysVisible : false,
 
    // copy page URL as bbcode
    copyURL : function() {
      window.prompt('Copy the BBCode URL below. (CTRL+C)', '[url=' + window.location + ']' + document.title + '[/url]');
    },
 
    // listen for changes in the navbar's bottom rect
    scroll : function() {
      var rect = fae_sticky.navbar.getBoundingClientRect(),
          position = fae_sticky.node[0].style[fae_sticky.position];
 
      if (rect.bottom <= fae_sticky.offset[fae_sticky.tb_state] && position == '-30px') {
        fae_sticky.node[0].style[fae_sticky.position] = '';
      } else if (rect.bottom > fae_sticky.offset[fae_sticky.tb_state] && position != '-30px') {
        fae_sticky.node[0].style[fae_sticky.position] = '-30px';
        $(fae_sticky.node).removeClass('active');
      }
    },
 
    // offsets for when the toolbar is hidden / shown
    offset : {
      fa_hide : 0,
      fa_show : 30
    }
  };
 
  // nodes used in the module
  fae_sticky.node = [
    // button
    $('<a class="widget_menu column_button_' + fae_sticky.position + ' color-secondary" />').attr({
      href : '#',
        id : 'fa_sticky_nav_button',
      style : fae_sticky.position + ':-30px;',
      title : fae_sticky.tooltip
 
    }).click(function() {
      $(fae_sticky.node)[/active/.test(this.className) ? 'removeClass' : 'addClass']('active');
      return false;
    })[0],
 
    // panel
    $('<div id="fae_sticky_nav_panel" class="module_column column_' + fae_sticky.position + ' color-secondary" />')
    .html('<div class="title module_column_title">' + fae_sticky.title + '</div><div class="module_inner"></div>')[0]
  ];
 
  fae_sticky.navbar = document.getElementById(fae_sticky.navbar); // get the old navbar
 
  // then clone its contents and add it to the sticky panel
  $('.module_inner', fae_sticky.node[1]).append($('a.mainmenu', fae_sticky.navbar).clone()).append(fae_sticky.additionalHTML);
  $(document.body).append(fae_sticky.node);
 
  if (!fae_sticky.alwaysVisible) {
    fae_sticky.tb_state = my_getcookie('toolbar_state') || (_userdata.activate_toolbar ? 'fa_show' : 'fa_hide');
    fae_sticky.scroll();
 
    $(window).scroll(fae_sticky.scroll);
 
    $(function() {
      $('#fa_hide, #fa_show').click(function() {
        fae_sticky.tb_state = this.id;
      });
    });
  } else {
    fae_sticky.node[0].style.left = '';
  }
});


الكود:


(function() {
  // 0 = phpbb2
  // 1 = phpbb3
  // 2 = punbb
  // 3 = invision
  var version = 0; // 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(http://i86.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] + '; }'+
                '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] + '; }'+
                '.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;float:right;cursor:pointer;padding:3px 6px;margin:3px;}' + ( fa_theme_color.transition_all ? fa_theme_color.applyTransitionRules() : '' ) + '</style>');
}());


الكود:


<div id='snav' class='en'><ul>
  <li><a href='#'><i class="fa fa-home"></i><span>الرئيسية</span></a></li>
</ul></div>
<div id='snav' class='en'>

  <ul>
 
    <li>
      <a href='#'>
        <i class="fa fa-home"></i>
        <span>الرئيسية</span>
      </a>
    </li>
 
    <li>
      <a href='#'>
        <i class="fa fa-css3"></i>
        <span>سي اس اس</span>
      </a>
    </li>

    <li>
      <a href='#'>
        <i class="fa fa-camera"></i>
        <span>صوري</span>
      </a>
    </li>
    <li>
      <a href='#'>
        <i class="fa fa-circle-o-notch"></i>
        <span>تحديث</span>
      </a>
    </li>
    <li>
      <a href='#'>
        <i class="fa fa-envelope"></i>
        <span>أتصل بنا</span>
      </a>
    </li>
    <li>
      <a href='#'>
        <i class="fa fa-music"></i>
        <span>موسيقي</span>
      </a>
    </li>
    <li>
      <a href='#'>
        <i class="fa fa-quote-right"></i>
        <span>اقتباس</span>
      </a>
    </li>
    <li>
      <a href='#'>
        <i class="fa fa-rss"></i>
        <span>RSS</span>
      </a>
    </li>
    <li>
      <a href='#'>
        <i class="fa fa-html5"></i>
        <span>HTML5</span>
      </a>
    </li>
    <li>
      <a href='#'>
        <i class="fa fa-video-camera"></i>
        <span>فديوهات</span>
      </a>
    </li>
  </ul>

</div>
<script type='text/javascript'>
//<![CDATA[
//CSS Ready
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");loadCSS("http://fonts.googleapis.com/earlyaccess/droidarabickufi.css");
//]]>
</script>
<style>
#snav.en {
  right: 0;
  text-align: right;
}
#snav.en  li span {
  right: -100px;
}
#snav.en li a:hover span {
  right: 35px;
}
/* main SideNav.css styles */
#snav {
  position: fixed;
  top:20%;
  z-index: 9999;
  font-size: 18px;
  font-family: 'Droid Arabic Kufi', sans-serif;
}
#snav ul {
  list-style: none;
}
#snav * {
  margin: 0;
  padding: 0;
  outline: 0;
  transition: all .5s ease;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -o-transition: all .5s ease;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#snav li a {
  text-decoration: none;
  color: #fff;
  display: block;
  position: relative;
}
#snav .fa {
  vertical-align: middle;
  font-size: 18px;
  width: 35px;
  height: 37px;
  line-height: 38px;
  text-align: center;
  position: relative;
  z-index: 4;
}
#snav li span {
  font-size: 15px;
  vertical-align: middle;
  height: 37px;
  line-height: 35px;
  width: auto;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  padding: 0 15px;
  position: absolute;
  top: 0;
  visibility: hidden;
  z-index: 3;
}
#snav li a:hover .fa {
  transform: rotate(720deg);
}
#snav li a:hover span {
  visibility: visible;
}
/* colors styles 3aseq.blogspot.com */
/* menu items title background used for browsers not supporting :nth-child */
#snav li span {
  background-color: #555;
}
/* icons color and background before hover  */
#snav li .fa {
  background-color: #EEE;
  color: #555
}
/* icons hover color */
#snav li a:hover .fa {
  color: #fff;
}
/* repeated colors from 1 to 10 each hover color repeated after 10 menu items */
#snav li:nth-child(10n+1) span, #snav li:nth-child(10n+1) a:hover .fa {
  background-color: #8350DD;
}
#snav li:nth-child(10n+2) span, #snav li:nth-child(10n+2) a:hover .fa {
  background-color: #4EC5DB;
}
#snav li:nth-child(10n+3) span, #snav li:nth-child(10n+3) a:hover .fa {
  background-color: #3DC25D;
}
#snav li:nth-child(10n+4) span, #snav li:nth-child(10n+4) a:hover .fa {
  background-color: #99BE24;
}
#snav li:nth-child(10n+5) span, #snav li:nth-child(10n+5) a:hover .fa {
  background-color: #38c;
}
#snav li:nth-child(10n+6) span, #snav li:nth-child(10n+6) a:hover .fa {
  background-color: #ff0000;
}
#snav li:nth-child(10n+7) span, #snav li:nth-child(10n+7) a:hover .fa {
  background-color: #000;
}
#snav li:nth-child(10n+8) span, #snav li:nth-child(10n+8) a:hover .fa {
  background-color: #F1A111;
}
#snav li:nth-child(10n+9) span, #snav li:nth-child(10n+9) a:hover .fa {
  background-color: #777;
}
#snav li:nth-child(10n+10) span, #snav li:nth-child(10n+10) a:hover .fa {
  background-color: #30555C;
}
</style>



alla13 كتب:هذه قائمة جانبية لاتعتمد على نسخة منتدى وتعدل يدوي تضاف في عناصر الرئيسية افتح عنصر جديد وضع الكود بداخله
غير كل من الاسماء المكتوبة بالعربية الى الاسم الذي ترغب فيه  و # الى رابط الخاص بالاسم
هذا مثال حي على اشتغالها
http://alla-omar.yoo7.com/h10-page

الكود:


<div id='snav' class='en'><ul>
  <li><a href='#'><i class="fa fa-home"></i><span>الرئيسية</span></a></li>
</ul></div>
<div id='snav' class='en'>

  <ul>
  
    <li>
      <a href='#'>
        <i class="fa fa-home"></i>
        <span>الرئيسية</span>
      </a>
    </li>
  
     <li>
      <a href='#'>
        <i class="fa fa-css3"></i>
        <span>سي اس اس</span>
      </a>
    </li>

     <li>
      <a href='#'>
        <i class="fa fa-camera"></i>
        <span>صوري</span>
      </a>
    </li>
    <li>
      <a href='#'>
        <i class="fa fa-circle-o-notch"></i>
        <span>تحديث</span>
      </a>
    </li>
    <li>
      <a href='#'>
        <i class="fa fa-envelope"></i>
        <span>أتصل بنا</span>
      </a>
    </li>
    <li>
      <a href='#'>
        <i class="fa fa-music"></i>
        <span>موسيقي</span>
      </a>
    </li>
    <li>
      <a href='#'>
        <i class="fa fa-quote-right"></i>
        <span>اقتباس</span>
      </a>
    </li>
    <li>
      <a href='#'>
        <i class="fa fa-rss"></i>
        <span>RSS</span>
      </a>
    </li>
    <li>
      <a href='#'>
        <i class="fa fa-html5"></i>
        <span>HTML5</span>
      </a>
    </li>
    <li>
      <a href='#'>
        <i class="fa fa-video-camera"></i>
        <span>فديوهات</span>
      </a>
    </li>
  </ul>

</div>
<script type='text/javascript'>
//<![CDATA[
//CSS Ready
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");loadCSS("http://fonts.googleapis.com/earlyaccess/droidarabickufi.css");
//]]>
</script>
<style>
#snav.en {
  right: 0;
  text-align: right;
}
#snav.en  li span {
  right: -100px;
}
#snav.en li a:hover span {
  right: 35px;
}
/* main SideNav.css styles */
#snav {
  position: fixed;
  top:20%;
  z-index: 9999;
  font-size: 18px;
  font-family: 'Droid Arabic Kufi', sans-serif;
}
#snav ul {
  list-style: none;
}
#snav * {
  margin: 0;
  padding: 0;
  outline: 0;
  transition: all .5s ease;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -o-transition: all .5s ease;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#snav li a {
  text-decoration: none;
  color: #fff;
  display: block;
  position: relative;
}
#snav .fa {
  vertical-align: middle;
  font-size: 18px;
  width: 35px;
  height: 37px;
  line-height: 38px;
  text-align: center;
  position: relative;
  z-index: 4;
}
#snav li span {
  font-size: 15px;
  vertical-align: middle;
  height: 37px;
  line-height: 35px;
  width: auto;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  padding: 0 15px;
  position: absolute;
  top: 0;
  visibility: hidden;
  z-index: 3;
}
#snav li a:hover .fa {
  transform: rotate(720deg);
}
#snav li a:hover span {
  visibility: visible;
}
/* colors styles 3aseq.blogspot.com */
/* menu items title background used for browsers not supporting :nth-child */
#snav li span {
  background-color: #555;
}
/* icons color and background before hover  */
#snav li .fa {
  background-color: #EEE;
  color: #555
}
/* icons hover color */
#snav li a:hover .fa {
  color: #fff;
}
/* repeated colors from 1 to 10 each hover color repeated after 10 menu items */
#snav li:nth-child(10n+1) span, #snav li:nth-child(10n+1) a:hover .fa {
  background-color: #8350DD;
}
#snav li:nth-child(10n+2) span, #snav li:nth-child(10n+2) a:hover .fa {
  background-color: #4EC5DB;
}
#snav li:nth-child(10n+3) span, #snav li:nth-child(10n+3) a:hover .fa {
  background-color: #3DC25D;
}
#snav li:nth-child(10n+4) span, #snav li:nth-child(10n+4) a:hover .fa {
  background-color: #99BE24;
}
#snav li:nth-child(10n+5) span, #snav li:nth-child(10n+5) a:hover .fa {
  background-color: #38c;
}
#snav li:nth-child(10n+6) span, #snav li:nth-child(10n+6) a:hover .fa {
  background-color: #ff0000;
}
#snav li:nth-child(10n+7) span, #snav li:nth-child(10n+7) a:hover .fa {
  background-color: #000;
}
#snav li:nth-child(10n+8) span, #snav li:nth-child(10n+8) a:hover .fa {
  background-color: #F1A111;
}
#snav li:nth-child(10n+9) span, #snav li:nth-child(10n+9) a:hover .fa {
  background-color: #777;
}
#snav li:nth-child(10n+10) span, #snav li:nth-child(10n+10) a:hover .fa {
  background-color: #30555C;
}
</style>