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.
[Image: img.php?userid=19870&txt=1]
Thanks to FREEVPS.us and HostUS for VPS 16
Thanks to @NoUptime for the lovely VPS
#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.
Si enim fallor, sum. Nam qui non est, utique nec falli potest. Ac per hoc sum, si fallor. Quia ergo sum, si fallor, quomodo esse me fallor, quando certum est me esse, si fallor?
#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.
#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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
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;
}

#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:
1
2
3
4
5
6
7
8
#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:
1
2
3
4
5
6
7
8
9
10
11
12
13
.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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/*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
[Image: img.php?v2=1&userid=14657&txt=1]
Want to use this image? 
Spoiler: show
1 VPS (Post counter image): https://7ob.pw/FreeVPS/img.php?userid={userid}
1 VPS (Post counter page): https://7ob.pw/FreeVPS/?userid={userid}
2 VPS (Post counter image): https://7ob.pw/FreeVPS/img.php?v2=1&userid={userid}
2 VPS (Post counter page): https://7ob.pw/FreeVPS/?v2=1&userid={userid}
Thanks to the FreeVPS Staff! Thanks also to FuzzyHosts & ZXPlay for their great VPS!
I don't like writing. expect only 1-2 sentences from me. My real join date is 2013-02-03 btw :p
Spoiler: show
FuzzyHosts (VPS 2)
http://tny.im/7Ol
BitAccel VPS (FreeDomain.Club)
http://tny.im/26w

Old VPS:
BoneVM VPS (Old VPS 8)
http://tny.im/26v
GalaxyHostPlus (VPS 9)
http://tny.im/7Oj

Mobile 3G (Morning Speed)
http://tny.im/7Ok
[Image: d.php]
#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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
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;
}

#7
@Lux
First, I recommend that you put those screenshots in a spoiler.

Second, I made your fixes available for stylish Laugh 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.
[Image: img.php?v2=1&userid=14657&txt=1]
Want to use this image? 
Spoiler: show
1 VPS (Post counter image): https://7ob.pw/FreeVPS/img.php?userid={userid}
1 VPS (Post counter page): https://7ob.pw/FreeVPS/?userid={userid}
2 VPS (Post counter image): https://7ob.pw/FreeVPS/img.php?v2=1&userid={userid}
2 VPS (Post counter page): https://7ob.pw/FreeVPS/?v2=1&userid={userid}
Thanks to the FreeVPS Staff! Thanks also to FuzzyHosts & ZXPlay for their great VPS!
I don't like writing. expect only 1-2 sentences from me. My real join date is 2013-02-03 btw :p
Spoiler: show
FuzzyHosts (VPS 2)
http://tny.im/7Ol
BitAccel VPS (FreeDomain.Club)
http://tny.im/26w

Old VPS:
BoneVM VPS (Old VPS 8)
http://tny.im/26v
GalaxyHostPlus (VPS 9)
http://tny.im/7Oj

Mobile 3G (Morning Speed)
http://tny.im/7Ok
[Image: d.php]




Users browsing this thread: 2 Guest(s)

Switch to mobile version

Sponsors: FuzzyHosts - Ftpit - ZXPlay - GalaxyHostPlus - Verelox- HostUS - HostMada - Host4Fun - Evolution-Host - NodeBlade - HostDare


BitCoin donations: 1DQxbstaTb5SWk6QC2gFeQUTFR64JX4cEo