Custom Forum Theming 2: Electric Boogaloo

[Capt (Ret) Bazarnicki]

In honor of the new theme, and since this is apparently a thing I do, here we are again.

Note that this is not bitching about the design, as I'm sure some people like it, however I personally want some more muted colors since the blue feels too.. plastic-y? Toy-like? I dunno, whatever.

I present: 3d MRB Theme 3.0, Custom Muted Color Edition.

General Changes:

• Blues muted to blue-green, with 20% less saturation, and 2% darker.
• Some Text colors changed from a gray to white, adding 20% more lightness (giving it increased contrast with the background color, improving readability)
• Unread forum color brightened to increase visibility at a glance.

This all also has a nice byproduct of looking at the PM section make me less want to stab my eyes with a pencil.

Preview Images

 

 

*Enjoy this look at some non-opsec private messages with retired people!

 

How-To

1. Install Stylus for your browser:
   • Chrome: https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne
   • Firefox: https://addons.mozilla.org/firefox/addon/styl-us/
   • IE/Edge: Get a real browser.
2. Create a new style
   • Click the Add-on in your browser, then click Manage.
   • On the left side column "Installed Styles", look below Filters and above Options for the "Write new style" button.
3. Copy in the code below
   Spoiler

   
   .ipsButtonBar {
       background-color: #37474f;
   }
   
   .cWidgetComments .ipsContained {
       display: block;
   }
   
   a {
       color: #dedede;
   }
   
   .ipsItemStatus.ipsItemStatus_large, .ipsItemStatus:not( .ipsItemStatus_large ){
       color: #28aaff;
   }
   
   .ipsItemStatus.ipsItemStatus_read {
       color: #505769;
   }
   
   .ipsQuote_citation, .ipsSpoiler_header {
       background: #2b2d31;
   }
   
   .swiper-pagination-bullet-active, .swiper-pagination-bullet{
       background-color: #486675de;
   }
   
   .ipsApp .ipsButton_important, .ipsApp .ipsButton_primary, 
   .ipsApp.ipsApp_front .ipsTabs_activeItem, .ipsApp .ipsButton_overlaid:hover, .cCalendar td.cCalendar_today, .cCalendarWeek div.cCalendar_today, 
   .ipsNavBar_primary>ul>li.ipsNavBar_active>a, .ipsNavBar_primary.ipsNavBar_noSubBars>ul>li.ipsNavBar_active>a, .ipsNavBar_secondary>li.ipsNavBar_active a, #elUserNav:before, #elUserNav_mobile,
   .ipsAreaBackground_light .ipsButtonRow li>a:not( .ipsButtonRow_active ), .ipsAreaBackground_light .ipsButtonRow li>button:not( .ipsButtonRow_active ), .ipsAreaBackground_light .ipsButtonRow li>span:not( .ipsButtonRow_active ), .ipsButtonRow li>a, .ipsButtonRow li>button, .ipsButtonRow li>span, .ipsMemberCard_controls.ipsButton, .ipsCalendarDate, .ipsWidget .ipsCalendarDate, .eventStreamDate .ipsCalendarDate, .ipsRichEmbed .ipsCalendarDate, .eventStreamDate .ipsCalendarDate, .ipsRichEmbed .ipsCalendarDate, .ipsApp .ipsButton_link.ipsFollow, .ipsApp .ipsButton_link.ipsPromote, #elSearch #elSearchFilter,
   .ipsApp .ipsButton_light, .ipsApp .ipsButton_veryLight,
   a[data-mentionid],
   .ipsReact_button, .ipsReact_types ul, .ipsReact_reactCount, .ipsReact_name, body.ipsApp_noTouch .ipsReact_types:hover .ipsReact_button, body:not( .ipsApp_noTouch ) .ipsReact_types.ipsReact_types_active .ipsReact_button{
       background-color: #486675 !important;
   }
   
   .ipsCommentCount, .ipsCommentCount.ipsFaded, .cNexusActionBadge_off, .ipsAutocompleteMenu_item[data-selected], .ipsApp.ipsApp_front .ipsAutocompleteMenu, .ipsMenu_itemCount, .ipsSideMenu_itemCount, .ipsMenu_item:not( .ipsMenu_itemClicked ) a:hover .ipsMenu_itemCount, .ipsMenu_item:not( .ipsMenu_itemClicked ) button:hover .ipsMenu_itemCount, .ipsFollow .ipsCommentCount {
       background-color: #7599ab;
   }
   html[dir=ltr] .ipsFollow .ipsCommentCount:after, html[dir=ltr] .ipsCommentCount:after,
   html[dir=ltr] .ipsCommentCount.ipsFaded:after{
       border-color: transparent #7599ab transparent transparent;
   }
   .elUserNav_sep { border-right: 2px solid #4a6e80; }
   
   .ipsItemStatus:after {
       background-color: transparent !important;
   }
   
   #ipsLayout_footer, #ipsLayout_footer:before,
   .ipsComment, .cPost.ipsBox:not( .ipsBox_transparent ):not( .ipsModerated ),
   .ipsApp.ipsApp_front .ipsTabs_panel {
    	background-color: #353c40;
   }
   
   .cPost .ipsComment_content:before{
       border-color: transparent #353c40 transparent transparent;
   }
   
   .ipsApp.ipsApp_front .ipsType_richText, .ipsType_minorHeading, .ipsRichEmbed_itemTitle,
   .ipsDataItem_unread .ipsDataItem_title,
   .ipsReact_reactCount>span>span:last-child, .ipsReact_reactCount>a>span:last-child{
       color: #fff;
   }
   
   .ipsRichEmbed_itemTitle {
       font-weight: bold;
   }
   
   .ta-Footer,
   .ipsBox:not( .ipsBox_transparent):not( .ipsModerated), .cGalleryCat, .cNexusCategoryBlock, #elBlogHeader, #elEventHeader, #elBlogHeaderStats, #elEventHeader_details, #elClubHeader {
       background-color: #2a2c30;
   }

    

    

4. Set it to 3dmrbru.com
5. Name it
6. Save it enabled.
   
   
   
   Ignore all the warnings because you are a bad-ass Marine Raider who don't need no man.

 

And as long as stylish and the theme are turned on/enabled, you have the new theme colors.

As this only changes colors, it shouldn't break anything, however if it does muck something up or the theme ever updates/changes, just toggle off Stylish or the specific style itself and it will instantly switch back.

Remember that this is for my own personal preference, but I thought I'd share if anyone else was interested. If you want to muck with stuff on your own end and don't like my color choices, well just change the color values in this. Since the colors I choose actually flow well with a bunch of the already set colors, doing more drastic changes will require way more effort.

Cheers.

Edited July 16, 2018 by 1stLt Bazarnicki
Fuck Stylish, it's spyware crap now

[MSgt (Ret) Carter]

Oh my god thank you so much!

[LtCol (Ret) Makowski]

I will pass these suggestions on to @CW4 Whelan for a possible 2.1.1 Theme hotfix... *wink wink, nudge nudge Whelan* 

[Capt (Ret) Bazarnicki]

43 minutes ago, Maj Makowski said:

I will pass these suggestions on to @CW4 Whelan for a possible 2.1.1 Theme hotfix... *wink wink, nudge nudge Whelan* 

No problem Major, happy to help if its needed. Didn't pass it up myself because its very much down to personal preference and I don't want to just complain over colors.

[Cpl (Ret) VandeVord]

Thank you Baz! It eases the brain cancering of the new theme/layout.

[Capt (Ret) Jones]

Also missing the favicon!

 

 

 

Or is that just me?

[Maj (Ret) Ray]

Feedback is welcomed and appreciated. Also, if you absolutely, positively cannot stand it...

 

[HMCS (FMF) Benson]

5 minutes ago, Maj Ray said:

Feedback is welcomed and appreciated. Also, if you absolutely, positively cannot stand it...

 

I don't see a theme drop down anywhere

[Capt (Ret) Bazarnicki]

11 hours ago, SSgt Jones said:

Also missing the favicon!

 

 

 

Or is that just me?

Nope, I'm not getting any favicon on this end as well. Looking at the page source I don't see one defined either.

[Capt (Ret) Jones]

Using the forum's logo, I've used a generator to create a complete set of favicons to be used on pretty much all devices and browsers (as far as I know, at least). Link to the .zip will be below if you want to fiddle with them, @1stLt Bazarnicki . HTML will also be in the spoiler if need be.

 

Zip: https://drive.google.com/file/d/14CHW77-cxJ5RPqRJc8JNny_z6XHF_I5E/view?usp=sharing

 

Spoiler

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">

 

 

Edited June 23, 2018 by SSgt Jones

[Maj Whelan]

I updated the theme to the best of my abilities, seeing as I don't know HTML and had to keep looking up how to do things along the way, but hopefully the theme is less cancerous then it was before.

[K. Cooper]

I liked the blue tho

[K. Cooper]

just like put it red or something. make us all happy

[Maj Whelan]

6 minutes ago, LCpl Cooper said:

just like put it red or something. make us all happy

 

ill change it to a blank white and black theme

[Sgt (Ret) Chase]

I didn't mind it at all personally Whelan but this is also fine too. I do appreciate trying to change things up keep up the good work.

[GySgt Cole]

@CW4 Whelan I love this theme and my opinion is the most important so good job

[GySgt Van Dyke]

This is a nice compromise in my mind. Good job man.

[Capt (Ret) Bazarnicki]

If anyone is still using this, be aware the addon I was suggesting has recently come under fire for stealing your internet history and being kinda crap spyware in the last week or so.

I have updated the lead post with an open source alternative/fork of an older Stylish version before it became shitware, the new addon is called Stylus.

 

I do highly recommend switching over. It functions almost identically.

[Capt Koch]

5 minutes ago, 1stLt Bazarnicki said:

If anyone is still using this, be aware the addon I was suggesting has recently come under fire for stealing your internet history and being kinda crap spyware in the last week or so.

I have updated the lead post with an open source alternative/fork of an older Stylish version before it became shitware, the new addon is called Stylus.

 

I do highly recommend switching over. It functions almost identically.

can confirm this, we've been purging Stylish from 20k computers at work as if it were the plague