Custom Forum Theming

[Capt (Ret) Bazarnicki]

Considering the feedback of other members that the forum theme is a bit... bland [1] [2] [3], I decided to make my own client side theme using a chrome add-on called Stylish.

Here are some screenshots. It's still a bit WIP but I like it better already.

Give me some feedback and let me know what you all think. I want some more feedback to maybe improve it in ways I'm just not thinking about. If there is interest I can polish it up a bit more and post the code you would put into the add-on.

[Capt (Ret) Koch]

We're actually already talking about making our own theme entirely (Morgan and I), something you'd be interested in working on? You'll get the access you need, obviously.

[Sgt (Ret) Livingston]

Mind showing me how you did this?

[Capt (Ret) Bazarnicki]

Sure I'd help out. I just wanted to share some "what it could look like" type images since i bothered to make it for myself anyways.

[Capt (Ret) Bazarnicki]

Just now, 2ndLt Livingston said:

Mind showing me how you did this?

https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe?hl=en

And then if you know CSS, you just... change it. Haha. It lives on top of the current CSS so its not destructive, and only what you change will change, you dont start from scratch.

[Sgt (Ret) Livingston]

Just now, Sgt Bazarnicki said:

https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe?hl=en

And then if you know CSS, you just... change it. Haha. It lives on top of the current CSS so its not destructive, and only what you change will change, you dont start from scratch.

what if someone didnt know how to CSS... you know just so they would know.....

[Capt (Ret) Bazarnicki]

Just now, 2ndLt Livingston said:

what if someone didnt know how to CSS... you know just so they would know.....

Well you could find a guide on CSS. Its not super hard, but I'm biased as a professional web developer, so I unno. There is quite a bit you need to learn otherwise you won't know the extent of what you can do or not.

[MSgt (Ret) Wolfe]

Post the code??? 

[Capt (Ret) Dale]

22 hours ago, Sgt Bazarnicki said:

Well you could find a guide on CSS. Its not super hard, but I'm biased as a professional web developer, so I unno. There is quite a bit you need to learn otherwise you won't know the extent of what you can do or not.

[Capt (Ret) Bazarnicki]

7 hours ago, SSgt Wolfe said:

Post the code??? 

Okay. Its not complete, and some things may or may not be a bit funky, so don't say i didn't warn you.
 

.ipsWidget.ipsWidget_horizontal .ipsWidget_title,
.ipsWidget.ipsWidget_vertical .ipsWidget_title {
    color: #e2e2e2;
    background: #232739;
}
.ipsType_sectionTitle {
    color: #e3e3e3;
    background: #232739;
}
.ipsType_sectionTitle a {
    color: #e3e3e3;
}
.ipsBox:not( .ipsBox_transparent):not( .ipsModerated) {
    background: #13161f;
}
.ipsNavBar_primary {
    background: rgba(29, 33, 53, 0.8);
    box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    padding: 5px;
}
.ipsDataList {
    background: #13161f;
}
#ipsLayout_contentWrapper {
    margin-top: 10px;
}
.ipsBreadcrumb.ipsBreadcrumb_top {
    background: rgba(29, 33, 53, 0.8);
    box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    padding: 10px 10px;
    margin-bottom: 5px;
}

.ipsFollow {
	margin-top:10px;
    margin-right:10px;
}

#ipsLayout_header header {
    background: rgba(29, 33, 53, 0.8);
    box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    padding: 10px 10px;
    margin-bottom: 5px;
}

.ipsPhotoPanel {
    background: rgba(29, 33, 53, 0.8);
    box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    padding: 10px 10px;
}
.ipsApp .ipsButton_important {
    background: rgba(29, 33, 53, 0.8);
}

.ipsApp .ipsButton_important:hover {
    background: rgba(26, 39, 46, 0.8);
}

.ipsApp .ipsButton {
    border-radius: 5px;
    background: rgba(29, 33, 53, 0.8);
    box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.2);
    color: #ffffff;
}

.ipsPager {
    border-radius: 5px;
    background: rgba(29, 33, 53, 0.8);
    box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.2);
    color: #ffffff;
}
body {
    background-image: url('http://i.imgur.com/EnBmX4L.jpg');
}

Use at your own risk.

[Capt Hito]

Is there a way to make this change on Mozilla?

Edited December 14, 2016 by Sgt Hito

[SSgt (Ret) Miles]

1 hour ago, Sgt Hito said:

Is there a way to make this change on Mozilla?

https://addons.mozilla.org/en-US/firefox/addon/stylish/

https://userstyles.org/help/stylish_firefox