Although the 3.0 theme is still a work in progress, I figured I'd get a head start on making it look how I wanna look. Please keep in mind that all changes are purely for my tastes. If you use this, and don't like an element then it is up to you to remove it. I don't know CSS very fluently and thus things may be done poorly, or completely wrong -- if that is the case feel free to point it out. The more I learn the better, but in its current state it works for me.
Tested on: Chrome
Screenshots:
[spoiler]
Index:
Loading Image
Forum View:
Loading Image
Postbit:
Loading Image
Postbit w/ New Default Avatar:
Loading Image
[/spoiler]
What I've Done:
- Lots of color changing. Pink was too much so I switched it to a red (http://flatuicolors.com/).
- Online/Offline image in postbit was using mybb default, switched to flat variant.
- Collapse button for forum categories was using mybb default, switched to flat variant.
- Jump to first unread post button was using mybb default, switched to flat variant.
- Jump to page number button was using mybb default, switched to flat variant.
- Sticky thread background color was ugly, switched it for a dark blue.
- Unread PM notification was broken, fixed it.
- Chrome Scrollbar was adjusted from default to something that goes with the theme.
- Default avatar was updated. Originally didn't fit max size, and was bland. Updated to an image that fits forum mascot, and interests.
- Reputation Positive/Negative has been updated with green/red colors.
- Pomf.io Button set to theme red
- Search bar background to make it more visible
- Preliminary changes to Reputation page
- Fixed Code Tags
- Spoiler Tags still broken, but have a background now to distinguish they are in fact spoilers
Code:
/*Main stuff*/
header .main h1 span {
color: #c0392b;
}
a {
color: #fff;
}
span.icon-heart {
color:#c0392b;
}
#breadcrumbs {
background-color: #c0392b;
}
.interaction button {
background: #c0392b;
}
header .main nav ul li a:hover {
color: #c0392b;
}
ul.row.stuck1 {
background: #34495e!important;
}
header .network section .welcomeblock a.unread {
color: #c0392b;
}
div#pm_notice.pm_alert {
text-align: center;
color: #aaa;
background-color: #34495e;
display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
padding: 5px 20px;
margin-bottom: 15px;
font-size: 14px;
}
div#pm_notice.pm_alert img[src*="dismiss_notice.png"] {
display: none;
}
input.search {
background: #1B1C1D;
}
/*Quick Reply*/
.form input[type="text"]:focus, .form input[type="password"]:focus, .form textarea:focus {
border-color: #c0392b;
color: #fff;
outline: 0;
}
/* Online/Offline Image */
img[src*="buddy_online.png"] {
content: url("https://i.imgur.com/B9p9ljN.png")
}
img[src*="buddy_offline.png"] {
content: url("https://i.imgur.com/BqnVGYf.png");
}
/* Default Avatar */
img[src*="cached/098919b52f87dc7a872decf1fbe9e427a7e87495.png"] {
content: url("https://i.imgur.com/jjzTnn9.png");
width: 150px;
height: 150px;
}
td.trow2 img[src*="cached/098919b52f87dc7a872decf1fbe9e427a7e87495.png"] {
content: url("https://i.imgur.com/jjzTnn9.png");
width: 70px;
height: 70px;
}
td.trow1 img[src*="cached/098919b52f87dc7a872decf1fbe9e427a7e87495.png"] {
content: url("https://i.imgur.com/jjzTnn9.png");
width: 70px;
height: 70px;
}
/*Random Forum Elements*/
img[src*="arrow_down.png"] {
content: url("https://i.imgur.com/76Z6kym.png");
}
img[src*="jump.png"] {
content: url("https://i.imgur.com/22aPaHQ.png");
width: 11px;
height: 11px;
}
img[src*="collapse.png"] {
content: url("https://i.imgur.com/Qb4O1kk.png");
}
img[src*="collapse_collapsed.png"] {
content: url("https://i.imgur.com/vVUkpUY.png");
}
/*Chrome Scrollbar*/
::-webkit-scrollbar {
height: 12px;
width: 12px;
background: #181818;
}
::-webkit-scrollbar-thumb {
background: #C0392B;
-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
}
::-webkit-scrollbar-corner {
background: #181818;
}
/*Code BB*/
.codeblock{
background:#181818;
padding:4px;
color:#C8D9C8;
}
.codeblock .title{
border-bottom:1px solid #222;
font-weight:bold;
margin:4px 0;
}
.codeblock code{
overflow:auto;
height:auto;
max-height:200px;
display:block;
font-family:Monaco,Consolas,Courier,monospace;
font-size:13px;
}
/*Spoiler BB - Still Broken*/
.spoiler{
background:rgba(0,0,0,0.2);
padding:10px;
}
.spoiler h4{
line-height:1;
margin:0;
background:rgba(0,0,0,0.1);
padding:5px;
cursor:pointer;
}
.spoiler > div{
margin-top:10px;
}
.spoiler.nsfw{
background:rgba(255,0,0,0.1);
}
.spoiler.nsfw h4{
background:rgba(255,0,0,0.1);
}
/* Pomf.io */
body .upload .button {
background:#222;
border:1px solid #c0392b;
color:#fff;
cursor:pointer;
display:inline-block;
font-size:27px;
padding:28px 48px;
text-shadow:0;
text-decoration:none;
transition:.5s;
}
body .upload .button:hover {
background:#c0392b;
}
/* Reputation */
.trow_reputation_positive {
border-left: 4px solid #27A360;
}
.trow_reputation_negative {
border-left: 4px solid #C0392B;
}
.trow_reputation_neutral {
border-left: 4px solid #252525;
}
.trow1,.trow2{
padding:10px;
}
.trow1,.trow2{
background:#222;
border-top:1px solid #151515;
}
.smalltext {
font-size: 14px;
}
a.postbit_report {
display:none;
}
strong.reputation_positive {
color: #2ecc71;
}
strong.reputation_negative {
color: #e74c3c;
}
span.smalltext.reputation_positive {
color: #23cc71;
}
span.smalltext.reputation_negative {
color: #e74c3c;
}