FreeVPS Dark: Suggestions & Feedback
#1
I am creating this thread to report bugs and suggestions for the theme 'FreeVPS Dark' until they can be fixed or dismissed by the staff.

Mobile bug
FreeVPS Dark: Move stats to the bottom
FreeVPS Dark: shoutbox text unreadable
Board Statistics & User Legend
[DISMISSED] Fix emoticons

Also @Lux mentioned in the shoutbox that she wanted to add some custom CSS to this theme.
Reply
#2
A little updated. I marked the emoticons (not emojis) as dismissed because we simply currently have no solution. I added a note for people who wish to help to the last post though. Topic is closed for now. I did some research but couldn't find animated Skype emoticons with transparent background. Only normal PNG ones without animation.
Reply
#3
I use my desktop to access the forum. Tried the dark theme - it's a very nice clean and compact design, I like the blue contrast, but my eyes couldn't adjust. Fonts are a little small, although when one opens the posts they the fonts are OK size.

I was looking for the theme selector in the dark theme and had to search for it because it wasn't in the same spot as the other themes. Not a biggie of course as now I know, but just some feedback.
Reply
#4
Let's leave this open for a while. I'll hopefully make a few custom css to make it look pleasing to my eyes within this week before I leave for my holidays. *Hoping it could be added*

Just threw in some stuffs, I did not install the theme to test. Just used the chrome's debug tool. Soooo, there might be some bugs.
Would be great to send me a copy of the theme (with freevps edits).

@admin

Code:
body {
    background: #0b0b0b;
    color: rgb(141, 141, 141);
    text-align: center;
    line-height: 1.5;
    margin: 0;
    font-size: 13px;
    overflow-y: scroll;
}

#container {
    font-size: 13px;
    color: #b1b1b1;
    text-align: left;
    line-height: 1.55;
    margin: 0;
    text-size-adjust: 100%;
    word-wrap: break-word;
}

#content {
    width: auto !important;
    padding: 0;
    overflow: hidden;
}

.wrapper {
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
    min-width: auto;
}

// best to change the logo text to the logo image.
a.logo {
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    display: inline-block;
    padding: 23px 12px;
    color: #fff !important;
}

nav ul li a {
    transition: all 150ms linear;
    display: inline-block;
    padding: 27px 10px;
    margin: 0;
    font-size: 11px;
    color: #fff !important;
    font-weight: 700;
    text-transform: uppercase;
}

#welcome_block {
    padding: 10px;
    margin: 0 0 20px 0;
    width: 100%;
    min-width: auto;
    max-width: 100%;
    background: #34373c;
    border-bottom: 1px solid #494b4e;
    //or
    background: rgb(18, 98, 152);
    border-bottom: 1px solid #227ebb;
    //end or
    box-shadow: inset 0px 0px 20px rgba(0, 0, 0, 0.25);
    color: #fff;
}

.navigation {
    color: #ececec;
    font-size: 11px;
    background: transparent;
    padding: 10px;
    border-radius: 0px;
    color: #363636;
    font-size: 12px;
    margin: 0px 0px 15px 0px;
}

.post.classic {
    padding-top: 0px;
}

.thead {
    color: #ffffff;
    font-size: 1.5em;
    font-weight: 800;
    padding: 10px;
    margin: 0px;
    background: #111113;
    border-radius: 0px;
    border-bottom: 1px solid #313131;
    -moz-border-radius: 2px 2px 0px 0px;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
}

.post .post_head {
    font-size: 11px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgb(55, 55, 55);
    margin-bottom: 4px;
}

.post_body {
    font-size: 13px;
    line-height: 1.5em;
    padding: 12px 0;
}

.post_content .signature {
    width: 100%;
    text-align: right;
    margin: 10px 0px 0px;
    padding: 10px 0px 5px;
    border-top: 1px dashed #202020;
    box-sizing: border-box;
}

.tborder {
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    background: #0b0b0b;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
    margin-top: 20px;
    border: 1px solid rgba(0, 0, 0, .075);
    border-radius: 3px;
}
Tall image removed by mod.
Wordpress Web Design, Wordpress News
Reply
#5
This are some CSS changes I did. (I'm using Stylish extension on chrome to show how it looks like. (And to use my changes lol))

This is for the shoutbox. (Preview: https://snapr.pw/i/85bca142b9.png)
Spoiler: show
Code:
#shoutbox input.text {
    background-color: #2a2a2a;
    color: #BBB;
    border: 1px solid #3c3c3c;
}
#shoutbox .text {
    color:#BBB;
}
All pages. The user details dropdown. (Preview: https://snapr.pw/i/d6142e0cf9.png)
Spoiler: show
Code:
.user_panel {
   background-color:#292929;
   border: 10px;
   border-color: #000;
}

.user_panel a {
   color:white !important;
}

.user_panel a:hover {
   color:#34495e !important;
}
And the crappy CSS I made for the newreply page. (Preview: https://snapr.pw/i/46479c19e8.png)
Spoiler: show
Code:
/*SCEditor*/
.sceditor-container {
    border: 1px solid #3c3c3c;
   background-color: #2a2a2a;
}
.sceditor-container > html, body, p, code:before, table {
   color:white !important;
}
.sceditor-container > iframe {
   background-color: #2a2a2a;
}
.sceditor-container > .sceditor-toolbar {
   background-color: #3c3c3c;
   border-bottom: 1px solid #3c3c3c;
}
code {
    background-color: #3c3c3c;
    border-color: #2a2a2a;
}

P.S. The spoilers needs a class or something. I can't modify it.

EDIT:
If you have the stylish extension, the userstyle is available here: https://userstyles.org/styles/137210/fre...stom-fixes
Reply
#6
[Image: LWCMXPP.png]

[Image: WWhleav.jpg]
I had to make the .post.classic .post_controls have the display: none (please remove this). I'd recommend that the post_controls be taken outside of <div class="post_content">.

I do not know how to upload the css as same as conan did, but here's it.

Code:
body {
    background: #0b0b0b;
    color: rgb(141, 141, 141);
    text-align: center;
    line-height: 1.5;
    margin: 0;
    font-size: 13px;
    overflow-y: scroll;
}
#container {
    font-size: 13px;
    color: #b1b1b1;
    text-align: left;
    line-height: 1.55;
    margin: 0;
    word-wrap: break-word;
}
#content {
    width: auto !important;
    padding: 0;
    overflow: hidden;
}
.wrapper {
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
}
a.logo {
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    display: inline-block;
    padding: 23px 12px;
    color: #fff !important;
}
nav ul li a {
    transition: all 150ms linear;
    display: inline-block;
    padding: 27px 10px;
    margin: 0;
    font-size: 11px;
    color: #fff !important;
    font-weight: 700;
    text-transform: uppercase;
}
#welcome_block {
    padding: 10px;
    margin: 0 0 20px 0;
    width: 100%;
    background: #34373c;
    border-bottom: 1px solid #494b4e;
    background: rgb(18, 98, 152);
    border-bottom: 1px solid #227ebb;
    box-shadow: inset 0px 0px 20px rgba(0, 0, 0, 0.25);
    color: #ffffff!important;
}

#welcome_block a {
    color: #ffffff;
    text-decoration: underline;
    transition: all 0.5s ease;
    background: rgba(0, 0, 0, 0.2);
    padding: 3px 6px;
    text-decoration: none
}
    
.navigation {
    color: #ececec;
    font-size: 11px;
    background: transparent;
    padding: 10px;
    border-radius: 0px;
    color: #363636;
    font-size: 12px;
    margin: 0px 0px 15px 0px;
}
.post.classic {
    padding-top: 0px;
}
.thead {
    color: #ffffff;
    font-size: 1.5em;
    font-weight: 800;
    padding: 10px;
    margin: 0px;
    background: #111113;
    border-radius: 0px;
    border-bottom: 1px solid #313131;
    -moz-border-radius: 2px 2px 0px 0px;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
}
.post .post_head {
    font-size: 11px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgb(55, 55, 55);
    margin-bottom: 4px;
}
.post_body {
    font-size: 13px;
    line-height: 1.5em;
    padding: 12px 0;
}
.post_content .signature {
    width: 100%;
    text-align: right;
    margin: 10px 0px 0px;
    padding: 10px 0px 5px;
    border-top: 1px dashed #202020;
    box-sizing: border-box;
}
.tborder {
    /*
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    background: #0b0b0b;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
    margin-top: 20px;
    border-radius: 3px;
    */
    background: transparent;
    border: 0px;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
    margin-top: 20px;
    border: 1px solid rgba(0,0,0,.075);
    border-radius: 3px;
}
a:hover, a:active {
    color: #ffffff;
    text-decoration: none;
}
a.button:hover, .pagination a:hover {
    background: #116197;
}
table {
    color: #a2a2a2;
    font-size: 12px;
}
.drop_go_page {
    background: #000000;
    padding: 5px 10px;
    border: 0;
    background: #111113;
    border-radius: 0px;
    border-bottom: 1px solid #313131;
    -moz-border-radius: 2px 2px 0px 0px;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
}
.post.classic .post_author {
    width: 23%;
    float: left;
    position: relative;
    margin: 0px;
    padding: 20px 10px;
    background: #101010;
    border-right: 1px solid #202020;
    border-top: 0;
    border-bottom: 0;
    box-sizing: border-box;
}


.post.classic .post_content {
    width: 77%;
    float: left;
    margin: 0px;
    padding: 10px;
    box-sizing: border-box;
}

.post.classic .post_content a:hover {
    text-decoration: underline;
}
.tcat {
    background: rgba(10, 10, 10, 0);
    color: #fff;
    padding: 10px;
    font-size: 11px;
}

.tfoot {
    padding: 6px;
    background: #161616;
    color: #464646;
    border-top: 1px solid #202020;
}

td.tfoot div {
    padding: 5px 10px;
}
td.tfoot div.float_right {
    padding: 0;
}
.trow2 {
    background: #161616;
    border-top: 1px solid #202020;
    box-shadow: inset 0px -1px 0px #101010;
}
.trow1 {
    background: #121212;
    border-top: 1px solid #202020;
    box-shadow: inset 0px -1px 0px #101010;
}
.post.classic {
    padding-top: 0px;
    width: 100%;
    margin: 10px 0px;
    padding: 0px;
    display: flex;
    background: #0b0b0b;
    -moz-border-radius: 2px;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
    margin-top: 20px;
    border: 1px solid rgba(0,0,0,.075);
}

.post.classic .post_controls {
display: none;
}
button, input.button {
    font-family: 'Asap', sans-serif;
    font-size: 13px;
    color: #464646;
    padding: 3px 5px;
    background: #101010;
    border: 1px solid #202020;
    border-radius: 2px;
    -moz-border-radius: 2px;
    box-shadow: 0px 0px 1px #000000;
    transition: all 0.5s ease;
}
button:hover, input.button:hover {
    cursor: pointer;
    color: #969696;
    background: #161616;
    transition: all 0.5s ease;
    border: 1px solid #202020;
}
button, input.button {
    color: #fff;
}

div.error {
    padding: 10px;
    border: 2px solid #b41111;
    background: rgba(180, 17, 17, 0.15);
    font-size: 12px;
    color: #fff;
}

div.error p em {
    text-transform: uppercase;
}


.sceditor-toolbar {
    overflow: hidden;
    padding: 2px 2px 1px;
    background: #101010;
    border-bottom: 1px solid #202020;
    line-height: 0;
    -webkit-border-radius: 2px 2px 0 0;
    -moz-border-radius: 2px 2px 0 0;
    border-radius: 2px 2px 0 0;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    box-shadow: inset 0px 0px 1px #000000;
}

.sceditor-container {
    position: relative;
    background: #101010;
    border: 1px solid #202020;
    padding: 0 4px;
    font-size: 13px;
    color: #464646;
    line-height: 1;
    font-weight: bold;
    z-index: 1001;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    box-shadow: 0px 0px 1px #000000;
    width: 100% !important;
}

.sceditor-container, .sceditor-container div, div.sceditor-dropdown, div.sceditor-dropdown div {
    padding: 0;
    margin: 0;
    z-index: 3;
}

.sceditor-container iframe, .sceditor-container textarea {
    border: 0;
    outline: 0;
    font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #464646;
    padding: 4px;
    margin: 5px;
    resize: none;
    background: #101010;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 99% !important;
}

div.sceditor-resize-cover {
    position: absolute;
    top: 0;
    left: 0;
    background: #000;
    width: 100%;
    height: 100%;
    z-index: 2;
    opacity: .3;
}

.ie6 div.sceditor-resize-cover, .ie7 div.sceditor-resize-cover, .ie8 div.sceditor-resize-cover {
    background: #101010;
}

.sceditor-container.ie6 {
    overflow: hidden;
}

div.sceditor-grip {
    overflow: hidden;
    width: 10px;
    height: 10px;
    cursor: pointer;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 3;
}
.sceditor-container {
    padding:  0 4px;
    overflow:  hidden;
}
.sceditor-container .sceditor-toolbar,  .sceditor-container iframe,  .sceditor-container textarea  {
    margin:  0 -4px;
}

.trow_sep {
    background: rgb(18, 98, 152);
    border-bottom: 1px solid #227ebb;
    box-shadow: inset 0px 0px 20px rgba(0, 0, 0, 0.25);
    color: #ffffff!important;
    }
    
.theme {
margin: 20px 0;
}

#shoutbox {
    background: transparent;
    border: 0px;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
    margin-top: 20px;
    border: 1px solid rgba(0,0,0,.075);
    border-radius: 3px;
}

#shoutbox input.text {
    background-color: #2a2a2a;
    color: #BBB;
    border: 1px solid #3c3c3c;
    width: 93%;
}
#shoutbox input.submit {
    width: 7%;
}

input[type="submit"] {
    border: solid 1px #32a2eb;
    -moz-box-shadow: 0px 0px 2px rgba(0,0,0,1.0);
    color: #ffffff;
    background: #2980b9;
    font-size: 14px;
    text-transform: uppercase;
}

#shoutbox .text {
    color:#BBB;
}

#shoutbox .entry:nth-child(even) {
    background-color: rgba(20, 20, 20, 0.5);
}

.whos {
    background: #0b0b0b;
    border-radius: 0;
    padding: 10px;
}

.user_panel {
    background-color: #000000;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.05);
    width: 18%;
    border-radius: 0;
    color: #fff;
}

span.user_panel_title {
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 400;
    color: #126298;
    border-bottom: 1px solid #116196;
    padding: 10px;
    display: block;
    margin-bottom: 10px;
}

.user_panel li a {
color: #fff!important;
}

.user_panel li a:hover {
color: #3498db!important;
}

nav ul li a:hover {
    color: #3498db !important;
}

.codeblock code {
color: #fff;
}
Tall image removed by mod.
Wordpress Web Design, Wordpress News
Reply
#7
@Lux
First, I recommend that you put those screenshots in a spoiler.

Second, I made your fixes available for stylish Cheese https://userstyles.org/styles/137252/fre...xes-by-lux (PM me if you want this taken down though)

Regarding your CSS fixes, it seems like the signature stuff are on right align by default. If that's an intended output, I don't really recommend that as the default option.

The content div is also too small on my 1600x900 monitor. The current width is pretty fine IMHO.

EDIT:
Hovering over links in spoilers also turns the text to white. Can't see it as the spoilers are white.
Reply




Users browsing this thread: 1 Guest(s)