Jump to content
Forum rules
Tobii

Minimalistic Forum Theme (Stylus)

By Tobii, in Breakwater Galleria (Creations/Fan Art)

Recommended Posts

Tobii    346

Tobii
Posted (edited)

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

Tobii    346

Tobii
Posted

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

Dexem    57

Dexem
Posted

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

Tobii    346

Tobii
Posted

==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

neophobia    216

neophobia
Posted (edited)

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

NotZombieBiscuit    3146

NotZombieBiscuit
Posted
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

neophobia    216

neophobia
Posted (edited)
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

NotZombieBiscuit    3146

NotZombieBiscuit
Posted
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

neophobia    216

neophobia
Posted
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

NotZombieBiscuit    3146

NotZombieBiscuit
Posted
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

Tobii    346

Tobii
Posted
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

neophobia    216

neophobia
Posted
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

neophobia    216

neophobia
Posted (edited)
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

Ketog    1031

Ketog
Posted

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

Tobii    346

Tobii
Posted 
==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

Tobii    346

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

Still finding more stuff to change in random places.

Share this post

Link to post
Share on other sites

Cr0    328

Cr0
Posted

Ah, that's better.

Thanks.

Share this post

Link to post
Share on other sites

Zoehh    33

Zoehh
Posted

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.

×
Go To Topic Listing

  • Recently Browsing   0 members

    No registered users viewing this page.

Privacy Policy | Forum Rules | Code Of Conduct
×
×
  • Create New...