Do you want that the selection of section and categories to be more pretty and comfortable? If so, then this tip is for you!
Install plugins, if you haven’t already
You will need to install 2 plugins that are bot_write_tab_customize and rah_external_output. After installing these plugins, here is what you need to do:
First Step
Go to Extensions > External Output > Create a new snippet name it as custom_menus.js and pase the next codes inside:
$(document).ready(function(){
// Custom section and category menus
// The sections and categories
var customMenu = new Array();
customMenu['sections'] = ['music','videos','news'];
customMenu['music_categories'] = ['chiptune','techno','trance'];
customMenu['videos_categories'] = ['live-sets','releases'];
// The output
for(var i in customMenu){
$('<div class="custom_menu '+i+'"><ul></ul></div>').insertBefore('p.title');
$(customMenu[i]).each(function(){
$('.custom_menu.'+i+' ul').append('<li><a href="#" class="' + this + '">' + this + '</a></li>');
});
}
// Set menus for category-1 or category-2
$('.music_categories').addClass('category1');
$('.videos_categories').addClass('category2');
// The Click
$('.custom_menu a').click(function(event){
event.preventDefault();
if($(this).parents('div').hasClass('sections')){
$('.custom_menu li').removeClass('active');
$('#section').val($(this).attr('class'));
$('#category-1, #category-2').val('');
$('#section, #category-1, #category-2').change();
} else {
$(this).parents('ul').find('li').removeClass('active');
}
if($(this).parents('div').hasClass('category1')){
$('#category-1').val($(this).attr('class')).change();
}
if($(this).parents('div').hasClass('category2')){
$('#category-2').val($(this).attr('class')).change();
}
$(this).parent().addClass('active');
return false;
});
// The Look
$('.custom_menu a').each(function(){
// Add an 'active' class to the selected section and category on page load.
if (
$(this).attr('class') == $('#section').val()
|| $(this).attr('class') == $('#category-1').val()
|| $(this).attr('class') == $('#category-2').val()
){
$(this).parent().addClass('active');
}
// Rename (Optional)
switch($(this).attr('class')){
case 'music': $(this).html('Good Music'); break;
case 'videos': $(this).html('Cool Videos'); break;
case 'news': $(this).html('Hot NEWS'); break;
}
});
// Hide categories-menus base on section
$('#section').change(function(){
$('.custom_menu.category1, .custom_menu.category2').hide();
if ($(this).val() == 'music'){
$('.music_categories').show();
}
if ($(this).val() == 'videos'){
$('.videos_categories').show();
}
}).change();
});Then click on Save.
Second step
Go to Presentation > Style > Create new style name it as custom_menus and pase the next codes inside:
body .custom_menu {
text-align:center;
margin-bottom:5px;
}
body .custom_menu ul, .custom_menu li {
list-style:none;
padding:0;
margin:0;
}
body .custom_menu li {
display:inline-block;
}
body .custom_menu a {
display:inline-block;
padding:5px 9px;
font-size:12px;
font-weight:bold;
text-transform:capitalize;
color:#663300;
background: #ffd83f;
background: -moz-linear-gradient(top, #ffd83f 0%, #ffd83f 50%, #ffcc33 51%, #ffcc33 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffd83f), color-stop(50%,#ffd83f), color-stop(51%,#ffcc33), color-stop(100%,#ffcc33));
background: -webkit-linear-gradient(top, #ffd83f 0%,#ffd83f 50%,#ffcc33 51%,#ffcc33 100%);
background: -o-linear-gradient(top, #ffd83f 0%,#ffd83f 50%,#ffcc33 51%,#ffcc33 100%);
background: -ms-linear-gradient(top, #ffd83f 0%,#ffd83f 50%,#ffcc33 51%,#ffcc33 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd83f', endColorstr='#ffcc33',GradientType=0 );
background: linear-gradient(top, #ffd83f 0%,#ffd83f 50%,#ffcc33 51%,#ffcc33 100%);
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
text-decoration:none;
-moz-box-shadow:1px 1px 2px #999;
-webkit-box-shadow:1px 1px 2px #999;
box-shadow:1px 1px 2px #999;
margin:1px 11px 6px 1px;
}
body .custom_menu a:hover {
background: #ffcc33;
background: -moz-linear-gradient(top, #ffcc33 0%, #ffcc33 49%, #ffd83f 50%, #ffd83f 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffcc33), color-stop(49%,#ffcc33), color-stop(50%,#ffd83f), color-stop(100%,#ffd83f));
background: -webkit-linear-gradient(top, #ffcc33 0%,#ffcc33 49%,#ffd83f 50%,#ffd83f 100%);
background: -o-linear-gradient(top, #ffcc33 0%,#ffcc33 49%,#ffd83f 50%,#ffd83f 100%);
background: -ms-linear-gradient(top, #ffcc33 0%,#ffcc33 49%,#ffd83f 50%,#ffd83f 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffcc33', endColorstr='#ffd83f',GradientType=0 );
background: linear-gradient(top, #ffcc33 0%,#ffcc33 49%,#ffd83f 50%,#ffd83f 100%);
-moz-box-shadow:1px 1px 2px #333;
-webkit-box-shadow:1px 1px 2px #333;
box-shadow:1px 1px 2px #333;
}
body .custom_menu a:focus, body .custom_menu li.active a {
color:#777;
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0%, #fffcf4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#fffcf4));
background: -webkit-linear-gradient(top, #ffffff 0%,#fffcf4 100%);
background: -o-linear-gradient(top, #ffffff 0%,#fffcf4 100%);
background: -ms-linear-gradient(top, #ffffff 0%,#fffcf4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fffcf4',GradientType=0 );
background: linear-gradient(top, #ffffff 0%,#fffcf4 100%);
border:1px solid #777;
-moz-box-shadow:0 0 3px #999;
-webkit-box-shadow:0 0 3px #999;
box-shadow:0 0 3px #999;
margin:0 10px 5px 0;
cursor:default;
}
body .custom_menu a:focus {
-moz-box-shadow:0 0 3px #777 inset;
-webkit-box-shadow:0 0 3px #777 inset;
box-shadow:0 0 3px #777 inset;
}Then click on Save.
Third step
Go to Extensions > bot_wtc then click on Additional js code Paste the following code Inside the small textarea that just opened:
<script type="text/javascript" src="../?rah_external_output=custom_menus.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="css.php?n=custom_menus" />Then click on Update.
Now you can go to the Write tab and you should see the new menus.
Fourth step
All left to do is to customize my demo code to change it to your sections and categories. For this go back to Extensions > External Output > custom_menus.js
Look for:
// The sections and categories
var customMenu = new Array();
customMenu['sections'] = ['music','videos','news'];then change the ‘music’,‘videos’,‘news’ to your own sections in the order you wish they to appear.
Look for:
customMenu['music_categories'] = ['chiptune','techno','trance'];
customMenu['videos_categories'] = ['live-sets','releases'];then change the names of the categories menus music_categories & videos_categories to names that you want. And change the categories names ‘chiptune’,‘techno’,‘trance’ to your own categories names.
You can add more and more categories menus by adding more lines below, but you can have only one sections menu which is the first line.
Look for:
// Set menus for category-1 or category-2
$('.music_categories').addClass('category1');
$('.videos_categories').addClass('category2');Here you need to set which categories menus that you created before should be assign to the Category 1 field and which to the Category 2 field (of course if you wish to then you can set all of them only to C1 or only to C2).
Look for:
// Rename (Optional)
switch($(this).attr('class')){
case 'music': $(this).html('Good Music'); break;
case 'videos': $(this).html('Cool Videos'); break;
case 'news': $(this).html('Hot NEWS'); break;
case 'games': $(this).html('Fun Games'); break;
}Here you can rename the sections and categories names as you want. If you don’t want to rename any then you can feel free to remove this code or comment it to future use.
Look for:
// Hide categories-menus base on section
$('#section').change(function(){
$('.custom_menu.category1, .custom_menu.category2').hide();if ($(this).val() == ‘music’){ $(‘.music_categories’).show(); }
if ($(this).val() == ‘videos’){ $(‘.videos_categories’).show(); } }).change();
Here we can hide/show categories base on sections, for example this take a look at this part:
if ($(this).val() == 'music'){
$('.music_categories').show();
}Here music is the section name, and music_categories is the categories menu name that we will show. You can add more base on sections codes below as you want to.
That’s it, you can click on Save
Fifth step
The last part is that if you like to hide the regular section and categories menus, then go to Extensions > bot_wtc – below “Item” in the select-box select the “Sort and Display” option, and below “Hide in:” click on “Section List” and click on “All” then on Update.
Extra
Yes you can change the code to automatically grab the sections and categories from the existing select-boxes, but I personally found it better to have more control by doing it manually with the above code.
Special thanks
Special thanks goes to redbot for helping me in this forum thread .
Video links
This time the videos are full tutorial and not only the results:
