Light and dark Grey skin by Ape

by **APE** 2018-04-16, 20:05

Light and dark Grey skin

Hitskin address : [You must be registered and logged in to see this image.]
Description: This skin is a basic easy used skin with a light and dark feel to it.
The theme has no change to templates and is 100% CSS

Screenshot:
[You must be registered and logged in to see this image.]
Javascript's:
The only code added 2 codes are as follows

Place in Home screen only 

Toggle Category:

Code:: $(function() { if (_userdata.page_desktop) return; ("JScript <jscriptbrasil at live dot com>, based on Invision.js"); var style = document.createElement("style"), /* Versions:|phpBB2----------------------------------------| |phpBB3-------------| |PunBB-----------------| |Invision already have it!| */ oCat = $('#content-container .three-col td:eq(1) .forumline, #main-content .forabg, #main-content .main-head'), oThis = null, oTemp = null, sEval = ''; style.type = "text/css"; style.innerHTML = '.contract, .expand {' + ' background: url("http://2img.net/i/fa/invision/exp_minus.gif") no-repeat scroll 50% 50% rgba(0, 0, 0, 0);' + ' cursor: pointer;' + ' float: right;' + ' padding-right: 55px;' + ' padding-top: 10px;' + ' padding-bottom: 19px;' + ' margin-top: -35px;' + '}' + '.expand {' + ' background: url("http://2img.net/i/fa/invision/exp_plus.gif") no-repeat scroll 50% 50% rgba(0, 0, 0, 0);' + '}'; document.getElementsByTagName("head")[0].appendChild(style); switch (oCat[0].className) { case 'forumline': //phpBB2 sEval = "oTemp = oThis.find('tr').first();oTemp.addClass('title-bar');" + "oTemp.find('th:last').append('<div onclick=\"toggleCategory(\\'c' + i + '\\');\" id=\"bc' + i + '\" class=\"contract\" style=\"margin-top: -15px;\"> </div>');" + "oThis.find('tr').not('.title-bar').addClass('c' + i);"; break; case 'forabg': //phpBB3 sEval = "oThis.find('ul.topiclist:first dl.icon').append('<div onclick=\"toggleCategory(\\'c' + i + '\\');\" id=\"bc' + i + '\" class=\"contract\"> </div>');" + "oThis.find('ul.topiclist.forums').attr('id', 'c' + i);"; break; case 'main-head': //PunBB sEval = "oThis.find('h2').append('<div onclick=\"toggleCategory(\\'c' + i + '\\');\" id=\"bc' + i + '\" class=\"contract\"> </div>');" + "oThis.next().attr('id', 'c' + i);"; break; } for (var i = 0, len = oCat.length; i < len; i++) { oThis = $(oCat[i]); eval(sEval); } initCategories(); }); // by invision.js function initCategories() { var id; cookies = document.cookie.split('; '); for (var i = 0; i < cookies.length; i++) { if (cookies[i].charAt(0) == '_') { cookie = cookies[i].split('='); if (cookie[1] == '1') { id = cookie[0].substring(1); if (document.getElementById(id)) { toggleCategory(id) } } } } } // by invision.js, modified by JScript function toggleCategory(id) { var obj = document.getElementById(id); var button = document.getElementById('b' + id); if (obj) { var toggle = obj.style.display == 'none'; obj.style.display = toggle ? '' : 'none'; } else { var elems = document.getElementsByClassName(id); for (var i = 0, len = elems.length; i < len; i++) { var toggle = elems[i].style.display == 'none'; elems[i].style.display = toggle ? '' : 'none'; } } button.className = toggle ? 'contract' : 'expand'; my_setcookie('_' + id, toggle ? '' : '1', true); return false } /* ▲ -> contract ▼ -> expand */ $(function() { var online = document.getElementById('memberStat'); if (online) { online.innerHTML = online.innerHTML.replace(/, \d+ Hidden/, ''); } });

Place in In the topics only 

Reputation bar:

Code:: // REPUTATION BAR $(document).ready(function() { var version = 'phpbb3'; var settings = { repName : 'Likes', repStyle : 'block', repImage : 'https://i.servimg.com/u/f57/18/21/41/30/star12.png' }; var repLv = { lv1 : 1, lv2 : 10, lv3 : 20, lv4 : 30, lv5 : 40, lv6 : 50, lv7 : 80, lv8 : 100, lv9 : 150, lv10 : 200, lv11 : 300, lv13 : 400, lv11 : 900, lv12 : 1000 }; if (settings.repStyle.toLowerCase() == 'block') { var repBlock = '<span id="rLv" class="repuBlock">' } else if (settings.repStyle.toLowerCase() == 'image') { var repBlock = '<img id="rLv" src="'+settings.repImage+'"/>' } else { var repBlock = '<span id="rLv" class="repuBlock">' } var ver = { phpbb2 : version.toLowerCase() == 'phpbb2', phpbb3 : version.toLowerCase() == 'phpbb3', punbb : version.toLowerCase() == 'punbb', invision : version.toLowerCase() == 'invision' }; var reg = new RegExp('.*'+settings.repName+'\\s+:\\s+(\\d+)[\\s\\S]*'); if (ver.phpbb3 || ver.punbb || ver.invision) { if (ver.phpbb3 || ver.invision) { var profSel = '.postprofile'; var addRepu = $(this).find('dt').append('<div id="repu">'); } else if (ver.punbb) { var profSel = '.user'; var addRepu = $(this).find('.user-ident').prepend('<div id="repu">'); } $(profSel).each(function() { var rep = Number($(this).text().replace(reg,'$1')); addRepu; if (rep >= repLv.lv1) { $(this).find('#repu').append(repBlock); var next = rep + '/' + repLv.lv2 } if (rep >= repLv.lv2) { $(this).find('#repu').append(repBlock); var next = rep + '/' + repLv.lv3 } if (rep >= repLv.lv3) { $(this).find('#repu').append(repBlock); var next = rep + '/' + repLv.lv4 } if (rep >= repLv.lv4) { $(this).find('#repu').append(repBlock); var next = rep + '/' + repLv.lv5 } if (rep >= repLv.lv5) { $(this).find('#repu').append(repBlock); var next = rep + '/' + repLv.lv6 } if (rep >= repLv.lv6) { $(this).find('#repu').append(repBlock); var next = rep + '/' + repLv.lv7 } if (rep >= repLv.lv7) { $(this).find('#repu').append(repBlock); var next = rep + '/' + repLv.lv8 } if (rep >= repLv.lv8) { $(this).find('#repu').append(repBlock); var next = rep + '/' + repLv.lv9 } if (rep >= repLv.lv9) { $(this).find('#repu').append(repBlock); var next = rep + '/' + repLv.lv10 } if (rep >= repLv.lv10) { $(this).find('#repu').append(repBlock); var next = rep + '/' + repLv.lv11 } if (rep >= repLv.lv11) { $(this).find('#repu').append(repBlock); var next = rep + '/' + repLv.lv12 } if (rep >= repLv.lv13) { $(this).find('#repu').append(repBlock); var next = rep + '/' + repLv.lv13 } if (rep >= repLv.lv14) { $(this).find('#repu').append(repBlock); var next = rep + '/' + repLv.lv14 } if (rep >= repLv.lv15) { $(this).find('#repu').append(repBlock); var next = 'MAX' } $(this).find('#repu').attr('title','Reputation level ' + $(this).find('#rLv').length + '\nNext : (' + next + ')'); }); } else if (ver.phpbb2) { $('td .postdetails.poster-profile').each(function() { var rep = Number($(this).text().replace(reg,'$1')); $(this).parent().find('.name').next().after('<div id="repu">'); if (rep >= repLv.lv1) { $(this).find('#repu').append(repBlock); var next = rep + '/' + repLv.lv2 } if (rep >= repLv.lv2) { $(this).find('#repu').append(repBlock); var next = rep + '/' + repLv.lv3 } if (rep >= repLv.lv3) { $(this).find('#repu').append(repBlock); var next = rep + '/' + repLv.lv4 } if (rep >= repLv.lv4) { $(this).find('#repu').append(repBlock); var next = rep + '/' + repLv.lv5 } if (rep >= repLv.lv5) { $(this).find('#repu').append(repBlock); var next = rep + '/' + repLv.lv6 } if (rep >= repLv.lv6) { $(this).find('#repu').append(repBlock); var next = rep + '/' + repLv.lv7 } if (rep >= repLv.lv7) { $(this).find('#repu').append(repBlock); var next = rep + '/' + repLv.lv8 } if (rep >= repLv.lv8) { $(this).find('#repu').append(repBlock); var next = rep + '/' + repLv.lv9 } if (rep >= repLv.lv9) { $(this).find('#repu').append(repBlock); var next = rep + '/' + repLv.lv10 } if (rep >= repLv.lv10) { $(this).find('#repu').append(repBlock); var next = rep + '/' + repLv.lv11 } if (rep >= repLv.lv11) { $(this).find('#repu').append(repBlock); var next = rep + '/' + repLv.lv12 } if (rep >= repLv.lv13) { $(this).find('#repu').append(repBlock); var next = rep + '/' + repLv.lv13 } if (rep >= repLv.lv14) { $(this).find('#repu').append(repBlock); var next = rep + '/' + repLv.lv14 } if (rep >= repLv.lv15) { $(this).find('#repu').append(repBlock); var next = 'MAX' } $(this).find('#repu').attr('title','Reputation level ' + $(this).find('#rLv').length + '\nNext : (' + next + ')'); }); } }); // END OF CODE //REP CSS FILES document.write('<style type="text/css">.repuBlock { height:8px; width:8px; background:#0A0; border:1px solid #080; -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px; -webkit-box-shadow:0 3px 3px #0C0 inset; -moz-box-shadow:0 3px 3px #0C0 inset; box-shadow:0 3px 3px #0C0 inset; display:inline-block; margin:0 0.5px; } </style>');

Place in Topic's only 

like Button:

Code:: $(function() { // General Configuration of the plugin var config = { position_left : true, // true for left || false for right negative_vote :false, // true for negative votes || false for positive only vote_bar : false, // display a small bar under the vote buttons // button config icon_plus : '<img src="https://i.servimg.com/u/f68/12/23/10/57/heart110.png" alt="+"/>', icon_minus : '<img src="https://i.servimg.com/u/f18/18/21/41/30/minus10.png" alt="-"/>', // language config title_plus : 'Like %{USERNAME}\'s post', title_minus : 'Dislike %{USERNAME}\'s post', title_like_singular : '%{VOTES} person likes %{USERNAME}\'s post', title_like_plural : '%{VOTES} people like %{USERNAME}\'s post', title_dislike_singular : '%{VOTES} person dislikes %{USERNAME}\'s post', title_dislike_plural : '%{VOTES} people dislike %{USERNAME}\'s post', title_vote_bar : '%{VOTES} people liked %{USERNAME}\'s post %{PERCENT}' }, // function bound to the onclick handler of the vote buttons submit_vote = function() { var next = this.nextSibling, // the counter next to the vote button that was clicked box = this.parentNode, bar = box.getElementsByTagName('DIV'), vote = box.getElementsByTagName('A'), mode = /eval=plus/.test(this.href) ? 1 : 0, i = 0, j = vote.length, pos, neg, major, minor, percent; // submit the vote asynchronously $.get(this.href, function() { next.innerHTML = +next.innerHTML + 1; // add to the vote count next.title = next.title.replace(/(\d+)/, function(M, $1) { return +$1 + 1 }); pos = +vote[0].nextSibling.innerHTML; neg = vote[1] ? +vote[1].nextSibling.innerHTML : 0; percent = pos == 0 ? '0%' : pos == neg ? '50%' : Math.round(pos / (pos + neg) * 100) + '%'; if (bar[0]) { bar[0].style.display = ''; bar[0].firstChild.style.width = percent; box.title = box.title.replace(/\d+\/\d+/, pos + '/' + ( pos + neg )).replace(/$\d+%$/, '(' + percent + ')'); } }); // revoke voting capabilities on the post once the vote is cast for (; i < j; i++) { vote[i].href = '#'; vote[i].className = vote[i].className.replace(/fa_vote/, 'fa_voted'); vote[i].onclick = function() { return false }; } return false; }, vote = $('.vote'), i = 0, j = vote.length, version = $('.bodylinewidth')[0] ? 0 : document.getElementById('wrap') ? 1 : $('.pun')[0] ? 2 : document.getElementById('ipbwrapper') ? 3 : 'badapple', // version check // version data so we don't have to redefine these arrays during the loop vdata = { tag : ['SPAN', 'LI', 'SPAN', 'LI'][version], name : ['.name', '.postprofile dt > strong', '.username', '.popmenubutton'][version], actions : ['.post-options', '.profile-icons', '.post-options', '.posting-icons'][version], }, post, plus, minus, n_pos, n_neg, title_pos, title_neg, li, ul, bar, button, total, percent, span, pseudo, vote_bar; // startup variables for later use in the loop // prevent execution if the version cannot be determined if (version == 'badapple') { if (window.console) console.warn('This plugin is not optimized for your forum version. Please contact the support for further assistance.'); return; } for (; i < j; i++) { post = $(vote[i]).parentsUntil('.post').parent()[0]; bar = $('.vote-bar', vote[i])[0]; // vote bar button = $('.vote-button', vote[i]); // plus and minus buttons pseudo = $(vdata.name, post).text() || 'MISSING_STRING'; // username of the poster ul = $(vdata.actions, post)[0]; // post actions li = document.createElement(vdata.tag); // vote system container li.className = 'fa_reputation'; if (li.tagName == 'SPAN') li.style.display = 'inline-block'; // calculate votes if (bar) { total = +bar.title.replace(/.*?\((\d+).*/, '$1'); percent = +bar.title.replace(/.*?(\d+)%.*/, '$1'); n_pos = Math.round(total * (percent / 100)); n_neg = total - n_pos; } else { n_pos = 0; n_neg = 0; } // set up negative and positive titles with the correct grammar, votes, and usernames title_pos = (n_pos == 1 ? config.title_like_singular : config.title_like_plural).replace(/%\{USERNAME\}/g, pseudo).replace(/%\{VOTES\}/g, n_pos); title_neg = (n_neg == 1 ? config.title_dislike_singular : config.title_dislike_plural).replace(/%\{USERNAME\}/g, pseudo).replace(/%\{VOTES\}/g, n_neg); // define the vote counts li.innerHTML = '<span class="fa_count fa_positive" title="' + title_pos + '">' + n_pos + '</span>' + (config.negative_vote ? ' <span class="fa_count fa_negative" title="' + title_neg + '">' + n_neg + '</span>' : ''); span = li.getElementsByTagName('SPAN'); // get the vote count containers for use as insertion points // create positive vote button plus = document.createElement('A'); plus.href = button[0] ? button[0].firstChild.href : '#'; plus.onclick = button[0] ? submit_vote : function() { return false }; plus.className = 'fa_vote' + (button[0] ? '' : 'd') + ' fa_plus'; plus.innerHTML = config.icon_plus; plus.title = (button[0] ? config.title_plus : title_pos).replace(/%\{USERNAME\}/g, pseudo); span[0] && li.insertBefore(plus, span[0]); // create negative vote button if (config.negative_vote) { minus = document.createElement('A'); minus.href = button[1] ? button[1].firstChild.href : '#'; minus.onclick = button[1] ? submit_vote : function() { return false }; minus.className = 'fa_vote' + (button[1] ? '' : 'd') + ' fa_minus'; minus.innerHTML = config.icon_minus; minus.title = (button[1] ? config.title_minus : title_neg).replace(/%\{USERNAME\}/g, pseudo); span[1] && li.insertBefore(minus, span[1]); } // create vote bar if (config.vote_bar) { vote_bar = document.createElement('DIV'); vote_bar.className = 'fa_votebar'; vote_bar.innerHTML = '<div class="fa_votebar_inner" style="width:' + percent + '%;"></div>'; vote_bar.style.display = bar ? '' : 'none'; li.title = config.title_vote_bar.replace(/%\{USERNAME\}/, pseudo).replace(/%\{VOTES\}/, n_pos + '/' + (n_pos + n_neg)).replace(/%\{PERCENT\}/, '(' + percent + '%)'); li.appendChild(vote_bar); } // finally insert the vote system and remove the default one config.position_left ? ul.insertBefore(li, ul.firstChild) : ul.appendChild(li); vote[i].parentNode.removeChild(vote[i]); } }); //END OF CODE

 CSS update's:
like Bar system Updated ....00:24:14 Date: 17.04.2018

Code:: /****** reputation bar ******/ .fa_vote, .fa_voted, .fa_count { font-size:12px; font-family:Verdana, Arial, Helvetica, Sans-serif; display:inline-block !important; width:auto !important; float:none !important; transition:300ms; } .fa_voted, .fa_vote:hover { opacity:0.4 } .fa_voted { cursor:default } .fa_count { font-weight:bold; margin:0 3px; cursor:default; } .fa_positive { color:#4A0 } .fa_negative { color:#A44 } .fa_votebar, .fa_votebar_inner { background:#C44; height:3px; } .fa_votebar_inner { background:#4A0; transition:300ms; }

 Information:
Please Note that the CSS updates are not installed on the Hitskin settings so you will need to install them by hand if you want the updated skin.

A chat World Official Themes

by **APE** 2018-04-17, 23:36

I have added some hover over affects to the Navbar and make the links look more like buttons.

Screen shot of the update:

If you want this update please remove all the CSS files in your ACP and add this new code.

Updated CSS code:

Code:: .forabg { background-color: #181918; background-image: url(https://i58.servimg.com/u/f58/17/65/15/44/banner18.png); background-position: 0 0; background-repeat: repeat-x; border: 1px solid #c2bfbf; clear: both; margin-bottom: 4px; padding: 0 5px; border-radius: 5px; } a.forumtitle { text-shadow: 1px 1px 0px rgba(255, 255, 255, 1); } li.row { border: 1px solid #595656; border-radius: 5px; box-shadow: inset 0px 0px 10px rgba(0,0,0,0.5); background-color: #dbddde; } ul.topiclist dd { border-left: none; border-left-color: currentcolor; display: block; float: left; padding: 4px 0; padding-right: 0px; padding-left: 0px; } ul.topiclist li { display: block; margin-top: 5px; margin-bottom: 5px; margin-left: 5px; margin-right: 5px; } ul.forums { padding-top: 4px; padding-bottom: 4px; background-color: #2f302f; border-radius: 5px; border: 1px solid #595656; } li.header dd, li.header dt { color: #; font-family: Arial,Helvetica,sans-serif,Verdana,Arial,Helvetica,sans-serif; font-size: 1em; line-height: 1em; text-transform: uppercase; } /****NAV BAR******/ .navbar { clear: both; padding: 0 10px; background-color: #000 !important; } ul.navlinks { border-bottom: none !important; font-weight: 700; } #search-box #keywords, input.button2 { display: none !important;} #page-header a.mainmenu.fa_navactif, #page-header a.mainmenu:hover { background-color: #B6B6B6; } #page-header a.mainmenu { color: #2f302f; display: inline-block; font-family: sans-serif; height: 40px; line-height: 37px; outline: medium none; padding: 0 8px; transition-duration: 100ms; border: 1px solid #2f302f; border-radius: 5px; box-shadow: inset 0px 0px 10px rgba(0,0,0,0.5); margin-top: -2px; margin-bottom: -13px !important; background-color: #DBDDDE; font-size: 11px; font-weight: 900; } ul.linklist li a img { vertical-align: middle; margin-right: 4px; } /*****END NAVBAR CODE*****/ .module { background-color: #dbddde; color: #000; margin-bottom: 4px; overflow: hidden; padding: 0 10px; background-color: #d1d1d1; clear: both; padding: 0 10px; border-radius: 5px; box-shadow: inset 0px 0px 10px rgba(0,0,0,0.5); padding-top: 4px; padding-bottom: 4px; background-color: #2f302f; border-radius: 5px; border: 1px solid #c2bfbf; } .row1,.row2 { background-color: #c2c2c2; border-radius: 5px; border: 1px solid #e0dede; box-shadow: inset 0px 0px 10px rgba(0,0,0,0.5); } /****** CHAT BOX*****/ .row3 { background-color: #d1d1d1; border-radius: 5px; box-shadow: inset 0px 0px 10px rgba(0,0,0,0.5); } #cp-main .panel { background-color: #000; border-radius: 5px; box-shadow: inset 0px 0px 10px rgba(0,0,0,0.5); } /******POST PROFILE********/ .postprofile { border-color: #939393; border-radius: 5px; border: 1px solid #c2bfbf; box-shadow: inset 0px 0px 10px rgba(0,0,0,0.5); color: #787272; display: inline; float: right; margin: 5px 0 0; min-height: 80px; position: relative; width: 22%; word-wrap: break-word; padding-top: 19px; padding-bottom: 19px; } .postprofile dt { line-height: 1.2em; margin-left: 8px; margin-right: 8px; } .postprofile dd, .postprofile dt { line-height: 1.2em; margin-left: 8px; } .postprofile { text-align: center; } /****** reputation bar ******/ .fa_vote, .fa_voted, .fa_count { font-size:12px; font-family:Verdana, Arial, Helvetica, Sans-serif; display:inline-block !important; width:auto !important; float:none !important; transition:300ms; } .fa_voted, .fa_vote:hover { opacity:0.4 } .fa_voted { cursor:default } .fa_count { font-weight:bold; margin:0 3px; cursor:default; } .fa_positive { color:#4A0 } .fa_negative { color:#A44 } .fa_votebar, .fa_votebar_inner { background:#C44; height:3px; } .fa_votebar_inner { background:#4A0; transition:300ms; } /***** ads box*******/ #main .c864a53c { background-color: #000; color: #787272; margin-bottom: 4px; overflow: hidden; padding: 0 10px; }

Light and dark Grey skin by Ape

Light and dark Grey skin by Ape

Re: Light and dark Grey skin by Ape