Views: 8,818,989 Home | Forums | Uploader | Wiki | Object databases | IRC
Rules/FAQ | Memberlist | Calendar | Stats | Online users | Last posts | Search
10-18-18 08:48 PM
Guest:

0 users reading A few tips regarding post layouts | 1 bot

Main - Announcements - A few tips regarding post layouts New reply

Pages: 1 2
StapleButter
Posted on 06-23-14 08:42 PM (rev. 2 of 06-23-14 08:42 PM) Link | #43007
❶ I figured this would be common sense, but apparently it's not the case. When editing your layout, check your profile to make sure it doesn't look like utter shit and that YOUR POSTS ARE READABLE. Layouts breaking this rule will be modified or removed in whatever way I deem acceptable.


❷ Do not check 'Apply layout to whole post box' unless you have a layout that customizes your post's sidebars (.sidebarX, .topbarX_1, .topbarX_2). The result is UGLY.


❸ Be careful with custom fonts, namely:

• no bullshit font-family rules. Read how to use CSS fonts before trying.
• if using fonts that aren't available on all systems, be sure to provide fallback fonts (font-family: 'BlargFont', 'Arial', sans-serif; for example).
• if using external fonts, it is highly recommended you upload them on our uploader. Some browsers enforce the same-origin policy when retrieving font files, meaning that font files hosted on an external domain will be ignored.

This is an example of result of badly coded custom fonts:

(only given as an example, not to pick on that particular user. Besides the layout has since been fixed.)

In this specific case, a non-standard font is used, and no fallbacks are provided. The browser selects the universal default, Times New Roman. It's ugly. It's tiny.

You don't want to inflict that to people reading your posts.

Neither do I. I'm sick of seeing Times New Roman because people can't be assed to make proper CSS font rules.


❹ Please put some effort into making a pleasant layout. I'm kinda sick of seeing layouts that are just a fixed background applied on the whole post table. It looks cheap, can cause readability problems depending on the background chosen, and fixed backgrounds can cause lag.


❺ As said above, avoid fixed backgrounds unless your cool effect absolutely depends on them. Fixed backgrounds require the browser to redraw the page when you scroll, which can lag less performant machines, and is also prone to display problems especially on mobile devices.


❻ This is not related to layouts, but please refrain from altering your profile's background and just the background. On some themes, it doesn't work well. If you really want to customize your profile, either make a full theme, or don't mess with the page background.


NEVER apply text-align:center; to topbarX_2. It would center the 'Link | Quote | etc' links and look dumb. And be unpractical.


Thank you.

____________________
NSMBHD - Kafuka - Jul

communism

Lunarius
Posted on 06-24-14 01:56 AM Link | #43010
Posted by StapleButter
This is an example of result of badly coded custom fonts:


In this specific case, a non-standard font is used, and no fallbacks are provided. The browser selects the universal default, Times New Roman. It's ugly. It's tiny.

You don't want to inflict that to people reading your posts.

Neither do I. I'm sick of seeing Times New Roman because people can't be assed to make proper CSS font.


Something tells me you are picking on me… but I could be wrong. Anyways, I DO know the main CSS font families. I don't like any of them, so I just pick a custom one that only affects me. Since this will cause an issue to everyone, I might as well stick to the shitty fonts, and avoid future complaints. What do you think I should use? Courier New?




<Silvreus>I am a random person…
<Silvreus>With a random personality…
<Silvreus>With a random life…
<Silvreus>How fun. :P



Anthe
Posted on 06-24-14 08:45 AM Link | #43013
What about Comic Sans?

____________________
[image]

StapleButter
Posted on 06-24-14 09:21 AM (rev. 2 of 06-24-14 09:23 AM) Link | #43014
No, no, no, no. Don't take it personally. Feel free to stick to nonstandard fonts, but please add fallback fonts that don't look like shit. Even if you don't like any of them, it'll still be better than Times New Roman.

I was showing your layout as an example of how Times New Roman completely wastes an otherwise good layout.

____________________
NSMBHD - Kafuka - Jul

communism

Lunarius
Posted on 06-24-14 11:32 AM Link | #43017
Posted by StapleButter
No, no, no, no. Don't take it personally. Feel free to stick to nonstandard fonts, but please add fallback fonts that don't look like shit. Even if you don't like any of them, it'll still be better than Times New Roman.

I was showing your layout as an example of how Times New Roman completely wastes an otherwise good layout.


I never did take it personally. I knew I was doing something wrong. When you mean “fallback fonts,” do you mean like this…?

font-family: "Courier New", "Monospace", "Arial";

I know what it does. If the first font is not available, then it uses the other font, correct? All I need to do is add this, and all is good.




<Silvreus>I am a random person…
<Silvreus>With a random personality…
<Silvreus>With a random life…
<Silvreus>How fun. :P



StapleButter
Posted on 06-24-14 11:33 AM Link | #43018
Exactly.

I recommend you ensure that it looks decent with the fallback fonts, too. Especially if you're using fonts that require weird sizes to be readable.

____________________
NSMBHD - Kafuka - Jul

communism

PixelDimension
Posted on 06-26-14 09:33 PM (rev. 3 of 06-26-14 09:35 PM) Link | #43138
My (probably bad) attempt at a layout doesn't seem to be working...I'm not very good with CSS so could someone tell me what I'm doing wrong please?


<style>.topbar551_1{border-color:gold;text-align:center;}.topbar551_2{border-color:gold}.sidebar551{text-align:center;border-color:gold;}.mainbar551{border-color:gold}.table551{background:url(http://www.hdwallsource.com/img/2014/9/simple-backgrounds-17276-17832-hd-wallpapers.jpg);color:black;}</style>

Thanks! :)

EDIT: I don't know what that "wbr" thing is. It doesn't show up if I try to edit the post.

StapleButter
Posted on 06-26-14 09:36 PM Link | #43139
The <wbr> is because of some lame code I need to remove.


For your layout to work, you need to build the CSS from the ground up. Just specifying a border color isn't going to work, you also need a border width and style.

____________________
NSMBHD - Kafuka - Jul

communism

shibboleet
Posted on 06-26-14 10:00 PM Link | #43145
The background derps up a bit on the right, too. You might want to fix that as well.

____________________
a

StapleButter
Posted on 06-26-14 10:09 PM Link | #43146
MrRean you might wanna fix your font family rules. I'm seeing Times New Roman.

____________________
NSMBHD - Kafuka - Jul

communism

shibboleet
Posted on 06-26-14 10:35 PM Link | #43147
...where? I don't see it. It uses
font-family: "Droid sans Sans";


____________________
a

NWPlayer123
Posted on 06-26-14 11:14 PM Link | #43148
Posted by Luigi
...where? I don't see it. It uses
font-family: "Droid sans Sans";

Did you literally not read any of this thread?
Posted by StapleButter
if using fonts that aren't available on all systems, be sure to provide fallback fonts (font-family: 'BlargFont', 'Arial', sans-serif; for example).
• if using external fonts, it is highly recommended you upload them on our uploader. Some browsers enforce the same-origin policy when retrieving font files, meaning that font files hosted on an external domain will be ignored.

This is an example of result of badly coded custom fonts:
-snip-
(only given as an example, not to pick on that particular user. Besides the layout has since been fixed.)

In this specific case, a non-standard font is used, and no fallbacks are provided. The browser selects the universal default, Times New Roman. It's ugly. It's tiny.

You don't want to inflict that to people reading your posts.

Neither do I. I'm sick of seeing Times New Roman because people can't be assed to make proper CSS font rules.


____________________
"I hate playing musical chats" ~ Quote of the month

shibboleet
Posted on 06-27-14 10:30 AM Link | #43160
Droid Sans is on every computer. I don't see why SB doesn't have it. Weird.

Either way, I changed it. (Plus, you didn't have to state it the way you did.)

____________________
a

StapleButter
Posted on 06-27-14 10:43 AM Link | #43161
Exactly NWP, didn't I tell you to not be that hard on people?

____________________
NSMBHD - Kafuka - Jul

communism

Luigifan2010
Posted on 07-27-14 11:31 AM (rev. 2 of 07-27-14 11:33 AM) Link | #44901
I've got a question regarding mine. I copied my layout from a previous blarg forum but it doesn't seem my backgrounds, or topbar/sidebar css has changed. I've updated my ID so it reads say ".topbar609_2" (my user ID here) but it still hasn't changed. I can send my CSS and such if needed.

EDIT: nevermind! it seems to have fixed itself

____________________
Hey you! Why don't you join my forums? Click here to join!

StapleButter
Posted on 07-31-14 05:20 PM (rev. 3 of 08-24-14 11:28 PM) Link | #45169
Take into account that if you use external CSS files, the browser cache will probably get in the way when you try to modify your CSS. In case of doubt, Ctrl+F5.


Also, a tip I didn't mention about tables, rounded borders (border-radius) and backgrounds. Typically, giving the table a rounded border and the table cells a background will result in the background leaking from the table:


There are two solutions. First one is to apply the backgrounds to the table itself and not its cells if possible.


(applying background and borders to the cells also works, but can be more involved depending on the nature of the table. Also note that border-collapse:collapse; helps managing table borders but breaks border-radius)

Second one is to use overflow:hidden; on the table. But you have to be aware about the implications of this.



____________________
NSMBHD - Kafuka - Jul

communism

Jamie
Posted on 08-20-14 03:13 PM Link | #46981
Why is TNR even the default fallback anyway?
Shouldn't AWESOME or Arial be default fall-back (also wouldn't people with browsers which won't display any fonts other than ones installed on client's PC see TNR anyway ??)

StapleButter
Posted on 08-24-14 11:28 PM Link | #47163
I guess you can change it by tweaking your browser's default CSS stylesheet.

Unless it's a hardcoded default.

____________________
NSMBHD - Kafuka - Jul

communism

Tarek701
Posted on 08-30-14 06:17 AM Link | #47537
Mine should be okay.

colingordo
(post deleted) #47571
Pages: 1 2

Main - Announcements - A few tips regarding post layouts New reply

Page rendered in 0.034 seconds. (2048KB of memory used)
MySQL - queries: 27, rows: 230/230, time: 0.020 seconds.
[powered by Acmlm] Acmlmboard 2.064 (2018-07-20)
© 2005-2008 Acmlm, Xkeeper, blackhole89 et al.