Minimalistic Forum Theme (Stylus)

Tobii · May 26, 2018

APB forum minimal v2

Download here: https://userstyles.org/styles/160519/apb-forum-minimal-v2

You need Stylus for this to work.

Change settings by clicking this button after installing the theme

CTRL + F5 should force the theme to show the "Update style" button so you can make changes without reinstalling the theme.

CSS

Reveal hidden contents

.logo img {
    max-height: inherit;
    max-width: 100%;
    background-image: url(https://i.imgur.com/OxITU1D.png);
    background-repeat: no-repeat;
    background-position: bottom;
    padding-bottom: 21px;
    padding-top: 6px;
}
.nav-bar-wrap {
    background: #333!important;
    padding-left: 0px!important;
    padding-right: 0px!important;
    position: fixed;
    z-index: 100!important;
    top: 0!important;
    left: 0!important;
    width: 100%!important;
    box-shadow: 0px 1px 0px 0px #222222!important;
    border-radius: 0!important;
}
#ipsLayout_header header {
    margin: 75px 0 0 0!important;
}
.ipsfocus_bg1 .background-fade-image:before,
.ipsfocus_bg1 .ipsType_sectionTitle:before,
.ipsfocus_bg1 .ipsfocus-blur:before {
	background-image: none!important;
}
body.ipsApp,
.ipsApp .ipsType_sectionTitle:before,
.ipsApp .ipsfocus-blur:before {
	background-color: #222!important;
}
.background-fade {
	display: none!important;
}
li.cUserNav_icon.ipsfocus-toggleBgPicker {
    display: none!important;
}
.focus-topic-compact .focus-topic .cPost.ipsBox:before {
    background-image: none!important;
}
.cPost:before, #ipsLayout_body .cAuthorPane_mobile {
    background-image: none !important;
}

.ipsButtonBar {
	background: #333!important;
	box-shadow: none!important;
}
.ipsApp .ipsBreadcrumb {
	color: #fff!important;
	background: #444!important;
	border-radius: 0!important;
	box-shadow: none!important;
}
.ipsBox,
.ipsPageHeader,
.focus-topic-compact .focus-topic,
.ipsPager,
.ipsWidget,
.ipsBox_alt,
.focus-picker,
.ipsfocus_megaFooter {
	box-shadow: none!important;
	border-radius: 0!important;
}
.ipsfocus-blur {
	border-radius: 0!important;
}
.ipsfocus-blur:after,
.ipsType_sectionTitle:after {
	background: #333!important;
	border-radius: 0px!important;
	box-shadow: none!important;
}
html[dir="ltr"] .ipsNavBar_primary > ul > li,
html[dir="ltr"] .ipsNavBar_secondary > li,
html[dir="rtl"] .ipsNavBar_primary > ul > li,
html[dir="rtl"] .ipsNavBar_secondary > li {
	border-right: none!important;
}
.ipsNavBar_primary > ul > li[data-active],
.ipsNavBar_primary > ul > li[data-active] {
	border-top: none!important;
	border-left: none!important;
	border-right: none!important;
}
.ipsNavBar_primary > ul > li[data-active],
.ipsNavBar_primary > ul > li[data-active] {
	background-image: none!important;
	background: #333!important;
}
.ipsNavBar_primary > ul > li:hover,
.ipsNavBar_primary > ul > li:hover {
	background-image: none!important;
	background: rgba(255, 255, 255, .3)!important;
}
div#elSearch {
	background: #444!important;
	border-radius: 0px!important;
	box-shadow: none!important;
	color: rgba(255, 255, 255, 1)!important;
}
#elSearchExpanded {
	border-radius: 0!important;
	box-shadow: none!important;
	color: #747b7f!important;
	background: #111!important;
	border-color: #111!important;
}
.focus-social-inherit .ipsfocus_social a:not(:hover) {
	background-color: #444!important;
	background-image: none!important;
	border-radius: 0!important;
	box-shadow: none!important;
}
.focus-social-inherit .ipsfocus_social a:hover {
	background-image: none!important;
	border-radius: 0!important;
	box-shadow: none!important;
}
.ipsfocus_social a:after {
	border: none!important;
	box-shadow: none!important;
}
.ipsApp .ipsButton,
.ipsApp .ipsToolList .ipsButton_link,
.ipsApp .ipsButton_link.ipsButton_link_secondary,
.ipsApp .ipsButton_link,
.ipsApp .ipsButton:active,
.ipsApp .ipsButton_active {
	border: none!important;
	border-radius: 0!important;
}
.ipsType_sectionTitle {
	border-radius: 0!important;
}
.ipsApp .ipsButton_important {
	background-color: #444!important;
	background-image: none !important;
}
.ipsApp .ipsButtonBar .ipsPagination .ipsPagination_page a,
.ipsApp .ipsButtonBar .ipsPagination .ipsPagination_next a,
.ipsApp .ipsButtonBar .ipsPagination .ipsPagination_prev a,
.ipsApp .ipsButtonBar .ipsPagination .ipsPagination_first a,
.ipsApp .ipsButtonBar .ipsPagination .ipsPagination_last a,
.ipsButtonBar .ipsButtonRow li > a,
.ipsButtonBar .ipsButtonRow li > button,
.ipsButtonBar .ipsButtonRow li > span {
	border-radius: 0!important;
}
html[dir="ltr"] .ipsButtonRow li:first-child > a,
html[dir="ltr"] .ipsButtonRow li:first-child > button,
html[dir="ltr"] .ipsButtonRow li:first-child > span {
	border-top-right-radius: 0px!important;
	border-bottom-right-radius: 0px!important;
}
html[dir="ltr"] .ipsButtonRow li:last-child > a,
html[dir="ltr"] .ipsButtonRow li:last-child > button,
html[dir="ltr"] .ipsButtonRow li:last-child > span {
	margin-left: 0!important;
	border-top-left-radius: 0px!important;
	border-bottom-left-radius: 0px!important;
}
.cShareLink,
.ipsBadge.ipsBadge_icon,
.ipsBadge.ipsBadge_icon.ipsBadge_small {
	border-radius: 0px!important;
}
.ipsPagination.ipsPagination_mini a {
	border-radius: 0px!important;
}
.ipsTags .ipsTag,
.ipsTag_prefix {
	border-radius: 0px 0px 0px 0!important;
}
.ipsWidget.ipsWidget_vertical .ipsWidget_title,
.ipsWidget.ipsWidget_horizontal .ipsWidget_title {
	background: #333!important;
	box-shadow: none!important;
	border-radius: 0!important;
}
.ipsCommentCount {
	border-radius: 0px!important;
}
.cForumList .ipsDataItem_unread .ipsDataItem_title:before,
.cForumGrid_unread .ipsPhotoPanel h3 a:before {
	border-radius: 0px!important;
}
.ipsNavBar_secondary {
	background-image: none!important;
	background-repeat: repeat!important;
	box-shadow: none!important;
	border-radius: 0!important;
}
.ipsMenu,
.ipsHovercard {
	box-shadow: none!important;
	border-radius: 0!important;
}
.cPost:before {
	left: 0px!important;
	right: 0px!important;
}
.cPost:before,
#ipsLayout_body .cAuthorPane_mobile {
	background-image: none !important;
	background: #444 !important;
	border-bottom: 1px solid #555!important;
	border-top: 1px solid #555!important;
}
.cPost:first-of-type:before {
	border-radius: 0!important;
	border-top: 1px solid #555!important;
	border-bottom: 1px solid #555!important;
	background: #444!important;
}
.ipsButtonBar {
	border-radius: 0!important;
}
button.ipsButton.ipsButton_light.ipsButton_verySmall.ipsButton_narrow.cMultiQuote.ipsHide {
	background-color: #444!important;
	border-radius: 0!important;
	background-image: none!important;
	box-shadow: none!important;
	border: none!important;
}
.ipsfocus_bg1.focus-post-buttons .cTopic .ipsItemControls .ipsComment_controls a {
	background-color: #444!important;
	border-radius: 0!important;
	background-image: none!important;
	box-shadow: none!important;
	border: none!important;
}
.cTopic .ipsUserPhoto_large img,
.cTopic img.ipsUserPhoto_large,
.cTopic .ipsUserPhoto_large:after {
	width: 150px!important;
	height: 150px!important;
	border: none!important;
}
.ipsReact_button {
	border-radius: 0px!important;
	border: none!important;
}
.ipsReact .ipsReact_types ul.ipsReact_hover {
	border-radius: 0px!important;
	border: none!important;
}
.ipsReact .ipsReact_types ul.ipsReact_hoverout {
	border-radius: 0px!important;
	border: none!important;
}
body.ipsApp_noTouch .ipsReact_types:hover .ipsReact_button,
body:not( .ipsApp_noTouch) .ipsReact_types.ipsReact_types_active .ipsReact_button {
	border: none!important;
	box-shadow: none!important;
	background: #191919!important;
}
.ipsReact_types ul {
	background: #191919!important;
	border: 0!important;
}
.ipsReact_reactCount span:first-child {
	padding: 0 5px 0px 3px!important;
}
.ipsReact_reactCount {
	border-radius: 0px!important;
}
.ipsApp .ipsBreadcrumb,
.ipsApp .ipsfocus_social a {
	text-shadow: none!important;
}
.ipsBreadcrumb > ul[data-role="breadcrumbList"] li > a:before {
	top: 0!important;
	transform: skewX(0deg)!important;
}
.ipsBreadcrumb > ul[data-role="breadcrumbList"] li > a:before,
.ipsBreadcrumb > ul[data-role="breadcrumbList"] li > a:after {
	color: #555!important;
	border-color: transparent!important;
}
.ipsBreadcrumb > ul[data-role="breadcrumbList"] li > a:after {
	top: 50%!important;
	transform: skewX(0deg)!important;
}
.ipsUserPhoto:before {
    box-shadow: none!important;
}
.ipsUserPhoto:after {
	border: none!important;
}
html .ipsApp .ipsBox:not(.ipsWidget) .ipsBox,
html .ipsApp .ipsTabs_panels .ipsBox,
html .ipsApp .ipsDialog > div .ipsBox {
	border-radius: 0px!important;
	border: none!important;
}
html .ipsApp .ipsBox .ipsBox .ipsWidget_title,
html .ipsApp .ipsTabs_panels .ipsBox .ipsWidget_title,
html .ipsApp .ipsBox .ipsBox .ipsType_sectionTitle,
html .ipsApp .ipsTabs_panels .ipsBox .ipsType_sectionTitle {
	background: #555!important;
	border: none!important;
	border-radius: 0!important;
}
.ipsButton_split {
	border-radius: 0px!important;
}
.cProfileRepScore {
	border-radius: 0px!important;
}
.ipsImage_thumbnailed {
	border: none!important;
}
.ipsMessage {
    box-shadow: none!important;
}
.ipsTooltip {
    border-radius: 0px!important;
}
a[data-mentionid] {
    border-radius: 0px!important;
}
.ipsBox > .ipsType_sectionTitle, .ipsBox.cForumRow > .ipsType_sectionTitle {
    margin: 0px!important;
}
.ipsQuote, .ipsCode, .ipsSpoiler, .ipsStyle_spoiler {
    border-radius: 0px!important;
}
.cAnnouncementsContent {
    display: none!important;
}	
.ipsLayout_container {
    margin-bottom: 10px!important;
}
.ipsCommentUnreadSeperator {
    border-radius: 0px!important;
}
#elAjaxLoading {
    border-radius: 0px;
}
#ipsLayout_footer {
    display:none!important;
}
.ipsRichEmbed_header {
    border-radius: 0px!important;
}
div[data-ipseditor] {
    border: none!important;
}
.cke .cke_top {
    border-bottom: none!important;
}
.cPost .ipsComment_meta a:hover {
    color: #999!important;
}
.cPost .ipsComment_meta a {
    text-shadow: none!important;
}
.cPost .cAuthorPane .cAuthorPane_author a:hover {
    color: #999!important;
}
.ipsfocus_bg1.focus-post-buttons .cTopic .ipsItemControls .ipsComment_controls .ipsButton {
    background-color: #222!important;
}
.focus-post-buttons .cTopic .ipsItemControls .ipsComment_controls .ipsButton {
    box-shadow: none!important;
}
.cke_wysiwyg_div.cke_reset.cke_enable_context_menu.cke_editable.cke_editable_themed.cke_contents_ltr {
    border-left: 1px solid #191919!important;
    border-right: 1px solid #191919!important;
}
.ipsApp .ipsField_autocomplete, .ipsApp textarea, .ipsApp input[type="text"], .ipsApp input[type="password"], .ipsApp input[type="datetime"], .ipsApp input[type="datetime-local"], .ipsApp input[type="date"], .ipsApp input[type="month"], .ipsApp input[type="time"], .ipsApp input[type="week"], .ipsApp input[type="number"], .ipsApp input[type="email"], .ipsApp input[type="url"], .ipsApp input[type="search"], .ipsApp input[type="tel"], .ipsApp .ipsToolbox input, .ipsApp .ipsToolbox select, .ipsApp .ipsToolbox textarea {
    background-image: none!important;
    box-shadow: none!important;
    border-radius: 0!important;
}
iframe.ipsEmbed_finishedLoading[data-embedContent] {
    background-color: transparent!important;
    border-color: transparent!important;
    border-radius: 0px!important;
    border: none!important;
    background-image: none!important;
}
iframe.ipsEmbed_finishedLoading[data-embedContent] {
    border-color: transparent!important;
}
button.ipsButton.ipsButton_medium.ipsButton_primary.ipsButton_fullWidth:focus {
    outline: none!important;
}
button.ipsButton.ipsButton_primary:focus {
    outline: none!important;
}
.embedly-card-hug {
    background-color: white!important;
}
.ipsApp .ipsComment .ipsComment_header {
    box-shadow: none!important;
    border-radius: 0px!important;
}

Notes from latest update:
==26/05/2018==
Release and changes/fixes.
Background can be toggled.
Announcement can be toggled.

==27/05/2018==
You can now toggle the navbar to follow as you scroll down the page.

==28/05/2018==
Minor fixes and changes, 99% of everything should have sharp corners instead of round.
Added customer logo that's on by default but can be disabled.

==29/05/2018==
Minor fixes.

==07/06/2018==
Custom logo is now off by default.

==21/06/2018==
You can enable the old fonts.

Edited July 5, 2018 by Tobii
removed stylish link and added stylus instead.

NotZombieBiscuit · May 26, 2018

Actually makes the forums usable.

Kevkof · May 26, 2018

ah, glorious plain grey. much easier on the eyes. Thanks for the fast coding @Tobii

Tobii · May 26, 2018

Updated it a bit.

You can show/hide the announcement and show/hide the background image.

I also removed the footer.

Suggestions are welcome and let me know if you find any issues.

Dexem · May 26, 2018

Everyone should use this WTH

On 5/26/2018 at 12:42 PM, Tobii said:

Suggestions are welcome and let me know if you find any issues.

Change the APB logo to the Dexheads logo

swft · May 26, 2018

Pretty good, thanks for making this.

Speedz · May 26, 2018

Thank you, sir.

Shini · May 26, 2018

very neat I like.

Thank you

Tobii · May 27, 2018

==27/05/2018==
You can now toggle the navbar to follow as you scroll down the page.

neophobia · May 27, 2018

I created a customizable version of this (for light/more colorful versions):

https://userstyles.org/styles/160572/apb-forum-minimal-customizable

You can also choose own images as background...

(However since some elements don't have a default background set and I ahd to make some changes it might mess up some small things)

Edited May 27, 2018 by ❤BR)))❤

NotZombieBiscuit · May 27, 2018

On 5/27/2018 at 2:00 PM, ❤BR)))❤ said:

I created a customizable version of this (for light/more colorful versions):

https://userstyles.org/styles/160572/apb-forum-minimal-customizable

You can also choose own images as background...

(However since some elements don't have a default background set and I ahd to make some changes it might mess up some small things)

Jesus Christ. My eyes.

neophobia · May 27, 2018

On 5/27/2018 at 2:10 PM, NotZombieBiscuit said:

Jesus Christ. My eyes.

Wha? Looks the same as Toobiis for if you leave it at default...

Okay no, I broke something with the quote buttons since i wanted to make them gray instead of white (the bar has the same color now)

Fixed now

Edited May 27, 2018 by ❤BR)))❤

NotZombieBiscuit · May 27, 2018

On 5/27/2018 at 2:12 PM, ❤BR)))❤ said:

Wha? Looks the same as Toobiis for if you leave it at default...

I forgot how bad white themes are.

neophobia · May 27, 2018

On 5/27/2018 at 2:14 PM, NotZombieBiscuit said:

I forgot how bad white themes are.

It's not white though

NotZombieBiscuit · May 27, 2018

On 5/27/2018 at 2:14 PM, ❤BR)))❤ said:

It's not white though

I changed the stuff to light colours

Tobii · May 27, 2018

On 5/27/2018 at 2:00 PM, ❤BR)))❤ said:

I created a customizable version of this (for light/more colorful versions):

https://userstyles.org/styles/160572/apb-forum-minimal-customizable

You can also choose own images as background...

(However since some elements don't have a default background set and I ahd to make some changes it might mess up some small things)

CTRL + F5 should allow you to make changes and then hit the update style button.

No need to remove the theme.

neophobia · May 27, 2018

On 5/27/2018 at 2:15 PM, NotZombieBiscuit said:

I changed the stuff to light colours

Oh Well yeah - that's what happens then

Enjoy this screenshot:

neophobia · May 27, 2018

On 5/27/2018 at 2:18 PM, Tobii said:

CTRL + F5 should allow you to make changes and then hit the update style button.

No need to remove the theme.

Doing the unforgivable sin but actually doubleposting:

I added a bit for the edit/quotebar now too, the buttons are not white anymore. Just added

.ipsItemControls > ul > li > a, .ipsItemControls > button

Ah damn, how did you do that the website actually starts below the navbar? - Edit: nvm got it, easierr than expected

Edited May 27, 2018 by ❤BR)))❤

Ketog · May 27, 2018

Since kevkof made me discover stylish , i can't not use it , i was using his theme for the older forums , and now there's your style for this new forum .

I love it ! much easier for the eyes , a good and simple plain grey , good stuff tobii

Tobii · May 27, 2018

==28/05/2018==
Minor fixes and changes, 99% of everything should have sharp corners instead of round.
Added customer logo that's on by default but can be disabled.

Tobii · May 29, 2018

==29/05/2018==
Minor fixes.

Still finding more stuff to change in random places.

InkieTheSauzeGod · May 29, 2018

Thank you 'o handsome Pølse

Cr0 · May 29, 2018

Ah, that's better.

Thanks.

Kiida · June 4, 2018

Thanks bae

Zoehh · June 7, 2018

This is good

*Immediately deletes minimalist logo*
Better

Minimalistic Forum Theme (Stylus)

Recommended Posts

Tobii 347

Share this post

Link to post

Share on other sites

NotZombieBiscuit 3146

Share this post

Link to post

Share on other sites

Kevkof 807

Share this post

Link to post

Share on other sites

Tobii 347

Share this post

Link to post

Share on other sites

Dexem 57

Share this post

Link to post

Share on other sites

swft 356

Share this post

Link to post

Share on other sites

Speedz 147

Share this post

Link to post

Share on other sites

Shini 251

Share this post

Link to post

Share on other sites

Tobii 347

Share this post

Link to post

Share on other sites

neophobia 216

Share this post

Link to post

Share on other sites

NotZombieBiscuit 3146

Share this post

Link to post

Share on other sites

neophobia 216

Share this post

Link to post

Share on other sites

NotZombieBiscuit 3146

Share this post

Link to post

Share on other sites

neophobia 216

Share this post

Link to post

Share on other sites

NotZombieBiscuit 3146

Share this post

Link to post

Share on other sites

Tobii 347

Share this post

Link to post

Share on other sites

neophobia 216

Share this post

Link to post

Share on other sites

neophobia 216

Share this post

Link to post

Share on other sites

Ketog 1034

Share this post

Link to post

Share on other sites

Tobii 347

Share this post