Jump to content
Tobii

Minimalistic Forum Theme (Stylus)

Recommended Posts

APB forum minimal v2

asM0VmS.jpg

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

Pae75Ap.png

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

 

CSS

 

 

.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 by Tobii
removed stylish link and added stylus instead.
  • Like 18
  • Thanks 7

Share this post


Link to post
Share on other sites

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.

  • Like 2

Share this post


Link to post
Share on other sites

Everyone should use this WTH

 

 

 

5 minutes ago, Tobii said:

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

  • Change the APB logo to the Dexheads logo :classic_wink:

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 by ❤BR)))❤
  • Thanks 1

Share this post


Link to post
Share on other sites
9 minutes ago, ❤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.

Share this post


Link to post
Share on other sites
7 minutes ago, 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 by ❤BR)))❤

Share this post


Link to post
Share on other sites
1 minute ago, ❤BR)))❤ said:

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

I forgot how bad white themes are.

Share this post


Link to post
Share on other sites
Just now, NotZombieBiscuit said:

I forgot how bad white themes are.

It's not white though

Share this post


Link to post
Share on other sites
Just now, ❤BR)))❤ said:

It's not white though

I changed the stuff to light colours

Share this post


Link to post
Share on other sites
17 minutes ago, ❤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.

Share this post


Link to post
Share on other sites
2 minutes ago, NotZombieBiscuit said:

I changed the stuff to light colours

Oh 😄 Well yeah - that's what happens then

 

Enjoy this screenshot: qfqlCcM.png

Share this post


Link to post
Share on other sites
11 minutes ago, 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 by ❤BR)))❤

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
==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.

Share this post


Link to post
Share on other sites
==29/05/2018==
Minor fixes.

Still finding more stuff to change in random places.

Share this post


Link to post
Share on other sites

Ah, that's better.

Thanks.

Share this post


Link to post
Share on other sites

This is good

 

*Immediately deletes minimalist logo*
Better

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...