Lewd 3.0 | lawli edition

by seel

seel
flat is justice
Pumpkin
Posts: 1,240
Threads: 41
Joined: Oct 2015
Reputation: 13
01-17-2016, 11:33 PM (This post was last modified: 01-19-2016, 06:42 AM by seel.)
#35199 (1)
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:
[Image: 687474703a2f2f692e6e6967676572732e70772f...592e706e67]

Forum View:
[Image: 687474703a2f2f692e6e6967676572732e70772f...762e706e67]

Postbit:
[Image: 687474703a2f2f692e6e6967676572732e70772f...642e706e67]

Postbit w/ New Default Avatar:
[Image: 687474703a2f2f692e6e6967676572732e70772f...452e706e67]

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.is 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:
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.is */
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;
}

[+] 6 users love seel's post
tn5421
Sharing: For a better tomorrow
Torrents
Posts: 1,370
Threads: 36
Joined: May 2015
Reputation: 10
01-17-2016, 11:39 PM
#35200 (2)
Thanks, I'm liking it so far. Looks a lot better than my amateur attempt at styling.

my sc2 replays&info | my osu stuff | my steam | my HB
Do you like to read or write fanfiction?  Then please check out my usergroup.
Melancholy
すけべ
Admin
Posts: 3,871
Threads: 213
Joined: Jul 2014
Reputation: 60
01-17-2016, 11:40 PM
#35201 (3)
might steal some of what you've done and include it in the actual theme ;3

tn5421
Sharing: For a better tomorrow
Torrents
Posts: 1,370
Threads: 36
Joined: May 2015
Reputation: 10
01-17-2016, 11:44 PM
#35202 (4)
I decided to disable the scrollbar bits and keep the rest.

(my lame attempt if you're interested: https://lewd.sx/t/css-customization-for-flat-theme)

my sc2 replays&info | my osu stuff | my steam | my HB
Do you like to read or write fanfiction?  Then please check out my usergroup.
seel
flat is justice
Pumpkin
Posts: 1,240
Threads: 41
Joined: Oct 2015
Reputation: 13
01-17-2016, 11:53 PM (This post was last modified: 01-17-2016, 11:53 PM by seel.)
#35205 (5)
>>35201
> might steal some of what you've done and include it in the actual theme ;3

Feel free to. 

>>35202
> I decided to disable the scrollbar bits and keep the rest.
>  
>  (my lame attempt if you're interested: https://lewd.sx/t/css-customization-for-flat-theme)

No attempt is ever lame, so long as you like the outcome :)

seel
flat is justice
Pumpkin
Posts: 1,240
Threads: 41
Joined: Oct 2015
Reputation: 13
01-18-2016, 09:13 AM
#35233 (6)
Few new things:
- pomf.is 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

Gonna keep working on the Reputation page, and see how it turns out.

Melancholy
すけべ
Admin
Posts: 3,871
Threads: 213
Joined: Jul 2014
Reputation: 60
01-18-2016, 08:05 PM
#35276 (7)
>>35233
> Gonna keep working on the Reputation page, and see how it turns out.

the reputation page will be completely re-worked

nerd
the nigga ya love to hate
Nyandere
Posts: 761
Threads: 40
Joined: Jul 2015
Reputation: 18
01-18-2016, 08:30 PM
#35278 (8)
trying this out right now, loving it. great work!

tn5421
Sharing: For a better tomorrow
Torrents
Posts: 1,370
Threads: 36
Joined: May 2015
Reputation: 10
01-19-2016, 03:53 AM
#35303 (9)
I'll keep updating my stylesheet as you push updates.

my sc2 replays&info | my osu stuff | my steam | my HB
Do you like to read or write fanfiction?  Then please check out my usergroup.
tn5421
Sharing: For a better tomorrow
Torrents
Posts: 1,370
Threads: 36
Joined: May 2015
Reputation: 10
01-19-2016, 04:06 AM
#35305 (10)
You forgot a lot of semicolons, @loli.

http://pastebin.com/RUVLRvjJ

Fixed there. Please update the OP <3

my sc2 replays&info | my osu stuff | my steam | my HB
Do you like to read or write fanfiction?  Then please check out my usergroup.
seel
flat is justice
Pumpkin
Posts: 1,240
Threads: 41
Joined: Oct 2015
Reputation: 13
01-19-2016, 06:44 AM
#35311 (11)
(01-18-2016, 08:05 PM)Senpai Wrote: >>35233
> Gonna keep working on the Reputation page, and see how it turns out.

the reputation page will be completely re-worked

Please shoot down more of my dreams Senpai ; - ; Thanks for letting me know though, I guess I won't continue with it, and just leave it how it is.
(01-19-2016, 04:06 AM)tn5421 Wrote: You forgot a lot of semicolons, @loli.

http://pastebin.com/RUVLRvjJ

Fixed there. Please update the OP <3

Yeah I'm a shitter when it comes to remembering to put a semicolon at the end. Thanks for fixing em for me <3

Utsutsu
is ded
Aykko
Posts: 187
Threads: 1
Joined: Jul 2015
Reputation: 11
01-19-2016, 08:41 AM
#35320 (12)
Damn, looks pretty good if I say so myself D:
Melancholy
すけべ
Admin
Posts: 3,871
Threads: 213
Joined: Jul 2014
Reputation: 60
01-19-2016, 02:54 PM
#35350 (13)
>>35311
> Please shoot down more of my dreams Senpai ; - ;

the html for the pm message will drastically change too ;3

seel
flat is justice
Pumpkin
Posts: 1,240
Threads: 41
Joined: Oct 2015
Reputation: 13
01-19-2016, 03:59 PM
#35360 (14)
(01-19-2016, 02:54 PM)Senpai Wrote: >>35311
> Please shoot down more of my dreams Senpai ; - ;

the html for the pm message will drastically change too ;3

I haven't touched the PM Message, I only touched the notification. Only reason I even touched it was because it was completely broken.

Melancholy
すけべ
Admin
Posts: 3,871
Threads: 213
Joined: Jul 2014
Reputation: 60
01-19-2016, 05:09 PM
#35364 (15)
(01-19-2016, 03:59 PM)loli Wrote:
(01-19-2016, 02:54 PM)Senpai Wrote: >>35311
> Please shoot down more of my dreams Senpai ; - ;

the html for the pm message will drastically change too ;3

I haven't touched the PM Message, I only touched the notification. Only reason I even touched it was because it was completely broken.
by pm message, i mean the notification ;3

Lokorfi
Waifu
Posts: 2,669
Threads: 30
Joined: Feb 2015
Reputation: 32
01-20-2016, 04:16 PM
#35432 (16)
I must say, this is very impressive work. Keep up the good deeds!

tn5421
Sharing: For a better tomorrow
Torrents
Posts: 1,370
Threads: 36
Joined: May 2015
Reputation: 10
02-29-2016, 07:01 PM (This post was last modified: 02-29-2016, 08:25 PM by tn5421.)
#37232 (17)
With the release of the new theme, I feel that this thread needs to be brought to light.

Also, fixed the text color not being right.

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 & New Reply*/

.form input[type="text"]:focus,
.form input[type="password"]:focus,
.form textarea:focus {
    border-color: #c0392b;
    color: #000; /* changed from #fff to #000 as it makes text white-on-white in the preview text editor */
    outline: 0;
}
.form input[type="text"], .form input[type="password"], .form textarea {
        background-color: #fff; /* adding to remove inconsistiency in quickreply and newreply */
        color: #000;  /* This has to stay here, otherwise the color will revert to white. */
}
/* 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.is */

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;
}
tbody {
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit;
}
table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: grey;
}

Lewd 3.0 LAWLI v0.2.2

my sc2 replays&info | my osu stuff | my steam | my HB
Do you like to read or write fanfiction?  Then please check out my usergroup.
tn5421
Sharing: For a better tomorrow
Torrents
Posts: 1,370
Threads: 36
Joined: May 2015
Reputation: 10
06-14-2016, 12:37 AM
#42880 (18)
Bringing this up so I don't lose it again.

my sc2 replays&info | my osu stuff | my steam | my HB
Do you like to read or write fanfiction?  Then please check out my usergroup.
RX14
Chibi Hentai Master
Optimist
Posts: 506
Threads: 5
Joined: Nov 2015
Reputation: 2
06-14-2016, 05:40 AM
#42887 (19)
Have you tried using bookmarks instead of pointless bumping?

[Image: 68747470733a2f2f6177772e6d6f652f683731666e372e706e67]
English animemester
[+] 1 user loves RX14's post
seel
flat is justice
Pumpkin
Posts: 1,240
Threads: 41
Joined: Oct 2015
Reputation: 13
06-15-2016, 03:05 AM
#42949 (20)
(06-14-2016, 05:40 AM)RX14 Wrote: Have you tried using bookmarks instead of pointless bumping?

It's not pointless. I forgot about this ugly gem. :^)

tn5421
Sharing: For a better tomorrow
Torrents
Posts: 1,370
Threads: 36
Joined: May 2015
Reputation: 10
06-16-2016, 01:18 AM
#43013 (21)
The forum doesn't offer a bookmark solution that doesn't spam my email, and I don't want to waste real bookmark space on this.

my sc2 replays&info | my osu stuff | my steam | my HB
Do you like to read or write fanfiction?  Then please check out my usergroup.