Customize JKHub to your liking!

[Daedra]

I will show you a small tutorial on how to manipulate JKHub to customize to how you like (color only).

 

Preview of how this will look:

 

 

You can pick any color too, you are not limited.

 

 

First you will want to install an addon for your Internet Browser called Stylish.

 

The icon looks like this: 

 

Install that, then visit your JKHub Forums page.

 

Go to the menu and choose write a new style for jkhub.org:

 

 

 

Then give it a name in the "name" section. Just call it "JKHub Color".

 

Then copy and paste this code in the bottom (clear the default text first) :

 

 

 

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("jkhub.org") {

  #search, .bar.altbar, #statusHook h3, #jkhsub h2, .ccsBase .ccsBlockTitle, p.citation, .post_block h3, .messenger_content h3, .messenger_utilities .ipsSideBlock h3, #invite_more h3, #folder_list h3, #space_allowance h3, #message_search h3, .popupInner h3, .maintitle:hover .toggle, .maintitle .toggle, .ccsBase .ccsBlockTitle, .general_box h3, #branding #navContainer, #index_stats .ipsSideBlock h3, .bar, .maintitle, .ipsLayout .ipsLayout_left h4, .tutstrip, .header {
    background-color: #FF0303 !important;
 
}

 

 

 

It will look like this:

 

 

Then click the "Save" button at the top left.

 

Then you can activate it any time by checking it:

 

 

 

To alter the color to whatever you want, right click on the option and choose edit:

 

 

Then just change the color tag to whatever color you want then click save:

 

 

Now you can enjoy browsing JKHub with different color! (all effects are purely client side).

 

 

Here is an update:

 

Code:

 

 

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("jkhub.org") {

  #search, .bar.altbar, #statusHook h3, #jkhsub h2, .ccsBase .ccsBlockTitle, p.citation, .post_block h3, .messenger_content h3, .messenger_utilities .ipsSideBlock h3, #invite_more h3, #folder_list h3, #space_allowance h3, #message_search h3, .popupInner h3, .maintitle:hover .toggle, .maintitle .toggle, .ccsBase .ccsBlockTitle, .general_box h3, #branding #navContainer, #index_stats .ipsSideBlock h3, .bar, .maintitle, .ipsLayout .ipsLayout_left h4, .tutstrip, .header {
    background-color: #F00 !important;
  }
 
.rating, .breadcrumb.bottom li, h2.ipsType_pagetitle, h1.ipsType_pagetitle, .breadcrumb.bottom li a, #articlePrevNext li a, #articlePrevNext li, h3.bar, ul.post_controls a, h2.ipsType_pagetitle, h2.ipsType_pagetitle, .topic_buttons li.non_button a, #index_stats .ipsSideBlock h3, .pagination.no_pages span, p.citation, body .ip, p.posted_info, .ipsFilterbar li a, #footer .skin_copyright a, #footer .skin_xf_copyright, #index_stats, .ipsType_pagedesc.forum_rules, .ipsType_pagedesc.forum_rules a, h2.ipsType_pagetitle, #footer li a, #footer a, .ipsSideBlock h3, .maintitle a, .maintitle, #board_stats li, .general_box h3, .general_box h3 a, #idm_categories > li.selected a, .ipsFilterbar li, .ipsFilterbar li a, .ipsFilterbar li a:hover, a#moderator_toggle, .breadcrumb li .nav_sep, #admin_bar a, #tutCopyright, #tutCopyright a, #user_info_cell, #user_info_cell .desc.lighter, #user_info_cell .nickname, .ipsBox_withphoto .desc, .ipsBox_withphoto .desc a, .ccsBase .ccsBlockTitle, .header, .header a, .ipsLayout .ipsLayout_left h4, .topic_controls .ipsPad_top_slimmer.right a, .input_submit, .input_submit alt, .input_submit:hover, .input_submit.alt:hover, .alt.poll .desc, h3.bar a, .topic_controls .ipsPad_top_slimmer.right, #review_topic, .formcopy, .formcopy a, .usercp_body .ipb_table th a, #jkhsub a:hover {
    color: #FF6868;
    text-shadow: 0px 1px 0px #000;
}

#user_navigation a, #community_app_menu > li > a {
    padding: 19px 10px;
    line-height: 55px;
    height: 55px;
    color: #FF6868;
    font-weight: bold;
    font-size: 13px;
    text-shadow: none;
}
 
.tableFade .fadeStats, .tableFade .fadeLastPost, .tableFade .fadeLastPostIcon {
    transition: all 250ms ease 0s;
    color: #FF6868 !important;
}
    
html, body {
    color: #FF6868;
}
    
.calendar_date_select .cds_buttons a, ul.mini_pagination li a, .pagination .back a, .pagination .forward a, .pagination .pages li, .pagination .back a, .pagination .forward a, .post_id a, ul.post_controls a, ul.post_controls li a, a, .miscwrap a, #mlist_content a, .post_id a, .post_id.right.ipsType_small.desc.blend_links a, #topic_summary .post_block h3 a, .post_block .post_wrap h3 a, .post_block.feature_box .ipsPad_top.desc a {
    color: #FF6868;
    text-decoration: none;
    text-shadow: 0px 1px 0px #FFF;
}
    
.ip.desc.lighter.ipsText_smaller, #board_stats, .value, .fn.nickname, ._sbcollapsable, .status_list p.index_status_update, #articleHeader h1, .ip.right.ipsType_small, .ipsBox_container h1, .ipsBox_container h2, .posted_info.desc.lighter.ipsType_small, .published, #rating_text.desc, #rate_text.desc.lighter, .calendar_date_select, .miscwrap, .ipsPad.clearfix.member_entry .desc, #search_options_menucontent, #topic_summary .post_body .posted_info {
    color: #F00;
    text-shadow: none;
}

#secondaryNav a {
    color: #FF6868;
    height: 30px;
    outline: 0px none;
    line-height: 30px;
}
    
.tableFade .fadeStats a, .tableFade .fadeLastPost a, .tableFade .fadeLastPostIcon a {
    transition: all 250ms ease 0s;
    color: #BE8B8B !important;
}
    
#board_stats .value {
    color: #F00;
    font-weight: bold;
}
    
#search_options {
    color: #FF6868;
    transition: all 200ms ease-in-out 0s;
}
    
#search_options {
    background-position: 0px -127px;
    background-color: #6E4141;
    background-repeat: repeat-x;
    box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.1) inset;
    color: rgba(255, 255, 255, 0.7);
    text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);
}
    
#main_search {
    color: #FF6868;
}
    
}

 

 

 

Preview:

[Sentra]

Ew.

[Daedra]

Ew.

 

It may not be to everyones taste but at least it is something different for those who may enjoy a slight appearance change.

[Daedra]

So i'm working on an update and here's what I have (Light Side of the Force)

 

[Daedra]

And the dark side..

 

[Sentra]

Red text, gosh, pls no.

[Daedra]

Red text, gosh, pls no.

 

There are options to change it to any color you desire, you can easily experiment with those things. You could just keep the text black or anything you want.

 

I would not release anything that forces someone to use a color they dislike.

[Daedra]

Here is the new code to use

 

 

 

 

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("jkhub.org") {

  #search, .bar.altbar, #statusHook h3, #jkhsub h2, .ccsBase .ccsBlockTitle, p.citation, .post_block h3, .messenger_content h3, .messenger_utilities .ipsSideBlock h3, #invite_more h3, #folder_list h3, #space_allowance h3, #message_search h3, .popupInner h3, .maintitle:hover .toggle, .maintitle .toggle, .ccsBase .ccsBlockTitle, .general_box h3, #branding #navContainer, #index_stats .ipsSideBlock h3, .bar, .maintitle, .ipsLayout .ipsLayout_left h4, .tutstrip, .header {
    background-color: #F00 !important;
  }
 
.rating, .breadcrumb.bottom li, h2.ipsType_pagetitle, h1.ipsType_pagetitle, .breadcrumb.bottom li a, #articlePrevNext li a, #articlePrevNext li, h3.bar, ul.post_controls a, h2.ipsType_pagetitle, h2.ipsType_pagetitle, .topic_buttons li.non_button a, #index_stats .ipsSideBlock h3, .pagination.no_pages span, p.citation, body .ip, p.posted_info, .ipsFilterbar li a, #footer .skin_copyright a, #footer .skin_xf_copyright, #index_stats, .ipsType_pagedesc.forum_rules, .ipsType_pagedesc.forum_rules a, h2.ipsType_pagetitle, #footer li a, #footer a, .ipsSideBlock h3, .maintitle a, .maintitle, #board_stats li, .general_box h3, .general_box h3 a, #idm_categories > li.selected a, .ipsFilterbar li, .ipsFilterbar li a, .ipsFilterbar li a:hover, a#moderator_toggle, .breadcrumb li .nav_sep, #admin_bar a, #tutCopyright, #tutCopyright a, #user_info_cell, #user_info_cell .desc.lighter, #user_info_cell .nickname, .ipsBox_withphoto .desc, .ipsBox_withphoto .desc a, .ccsBase .ccsBlockTitle, .header, .header a, .ipsLayout .ipsLayout_left h4, .topic_controls .ipsPad_top_slimmer.right a, .input_submit, .input_submit alt, .input_submit:hover, .input_submit.alt:hover, .alt.poll .desc, h3.bar a, .topic_controls .ipsPad_top_slimmer.right, #review_topic, .formcopy, .formcopy a, .usercp_body .ipb_table th a, #jkhsub a:hover {
    color: #FF6868;
    text-shadow: 0px 1px 0px #000;
}

#user_navigation a, #community_app_menu > li > a {
    padding: 19px 10px;
    line-height: 55px;
    height: 55px;
    color: #FF6868;
    font-weight: bold;
    font-size: 13px;
    text-shadow: none;
}
 
.tableFade .fadeStats, .tableFade .fadeLastPost, .tableFade .fadeLastPostIcon {
    transition: all 250ms ease 0s;
    color: #FF6868 !important;
}
    
html, body {
    color: #FF6868;
}
    
.calendar_date_select .cds_buttons a, ul.mini_pagination li a, .pagination .back a, .pagination .forward a, .pagination .pages li, .pagination .back a, .pagination .forward a, .post_id a, ul.post_controls a, ul.post_controls li a, a, .miscwrap a, #mlist_content a, .post_id a, .post_id.right.ipsType_small.desc.blend_links a, #topic_summary .post_block h3 a, .post_block .post_wrap h3 a, .post_block.feature_box .ipsPad_top.desc a {
    color: #FF6868;
    text-decoration: none;
    text-shadow: 0px 1px 0px #FFF;
}
    
.ip.desc.lighter.ipsText_smaller, #board_stats, .value, .fn.nickname, ._sbcollapsable, .status_list p.index_status_update, #articleHeader h1, .ip.right.ipsType_small, .ipsBox_container h1, .ipsBox_container h2, .posted_info.desc.lighter.ipsType_small, .published, #rating_text.desc, #rate_text.desc.lighter, .calendar_date_select, .miscwrap, .ipsPad.clearfix.member_entry .desc, #search_options_menucontent, #topic_summary .post_body .posted_info {
    color: #F00;
    text-shadow: none;
}

#secondaryNav a {
    color: #FF6868;
    height: 30px;
    outline: 0px none;
    line-height: 30px;
}
    
.tableFade .fadeStats a, .tableFade .fadeLastPost a, .tableFade .fadeLastPostIcon a {
    transition: all 250ms ease 0s;
    color: #BE8B8B !important;
}
    
#board_stats .value {
    color: #F00;
    font-weight: bold;
}
    
#search_options {
    color: #FF6868;
    transition: all 200ms ease-in-out 0s;
}
    
#search_options {
    background-position: 0px -127px;
    background-color: #6E4141;
    background-repeat: repeat-x;
    box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.1) inset;
    color: rgba(255, 255, 255, 0.7);
    text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);
}
    
#main_search {
    color: #FF6868;
}
    
}

 

 

 

[Nozyspy]

Thats a rather cool idea, thanks for sharing!