saga: (dategumi || FOR GONDOOOOR)
saga ([personal profile] saga) wrote in [community profile] tofuhouse2015-09-15 02:29 am
Entry tags:

basic layout coding notes

I'm compiling a list of things I went through, tips, etc for getting started on coding a layout in Dreamwidth. It seems daunting at first, but actually it's not half bad. In fact, it's much easier for me to pick up on than it was while I was back at Livejournal. Whoa! (I was really bad at livejournal layouts, so this is actually saying something.)

This will also help with editing pre-existing custom codes already available for your use (should the original creator allow it) so that the layout will be tailored to you! This also answers one question: why the heck do I always overlap on another stylesheet instead of making one from scratch?

Like Livejournal, Dreamwidth just uses CSS, no html whatsoever. Unlike livejournal and a lot of other sites, almost all of Dreamwidth's styles uses the same id and class names. So if you can code one for one style, you can code for most of them. Inspect Element in all browsers is your friend when looking for id and classes. Manipulating the same set of names for almost all styles gives you a lot of freedom in creating a layout cos you just pick one style that has the cosmetic appearance you wanna manipulate and go for it. Which pretty much means you'll end up with what you want in your head most of the time.

By the way, CSS3 is A+ in this apparently. Don't look at me though I actually suck at CSS3.

Anyway, if you're from livejournal and you totally ROCKED AT IT, here are the equivalents I found are quite similar to the popular Flexible Squares, Mixit, Smooth Sailing. Unlike LJ, you needed to learn afresh for all three. You only need to know one of the following to code all of them cos of the similar id and class names. No joke, I've copypasted all my original layouts to continue make new ones in different styles. Whut?
Flexible Squares + Mixit: Five AM
Smooth Sailing: Tectonic (Can also work for Flexible Squares and Mixit)
Again, these are similar only cos of a cosmetic level. And why I know this is cos I did the big boo boo of translating old LJ layouts I liked into these styles for DW use. I left credit everywhere though!! (It's also great practice)

The two most flexible to edit from scratch at Tabula Rasa and Transmogrified. The latter actually needs you to learn a new set of names. Another I've seen is popular for starting from scratch is Basic Boxes, and because of its unique features, Blanket.

One of the things we a lot now is that we access websites off our phone. Unfortunately, DW doesn't have a responsive mobile site or app. FORTUNATELY, with the power of css we can still mess with that. There's only one thing you have to make sure of.

Don't uncheck "Use layout's stylesheet(s)" in Custom CSS. The reason for this is that the base css for whatever layout you chose to use will resize itself in mobile, or it can be coded on top of it to do that. However, if you do uncheck it, even if you use the exact same original style sheet code copy/pasted into "Use embedded CSS", it won't work. I know it's actually really weird, but try it out yourself to understand. I hear there's a way to code it in, but I have not been able to find it yet cos it's really a DW thing.

The pros is that editing an already set up css is easier than coding one from scratch. The cons is that now you're loading two stylesheets instead of one.

How to do? Basically, you're gonna code "two" different layouts into one stylesheet. It doesn't have to be in order, but it's recommended, especially if you stack background images to set banners or something.

1. Whatever part of that exact piece of code (for example, the sidebar), add the CSS code to what you want it to look like in a big screen between these:

@media only screen and (min-width: A-NUMBER-IN-EM-OR-PX) {

I'll shove an example from one of my layouts:

@media only screen and (min-width: 40em) {
#header {
padding-bottom: 300px; /*image height*/
background-image: url('');
background-repeat: no-repeat;
background-position: bottom center;

The reason this works is that as soon as your screen goes below a certain width, that code doesn't work anymore.

2. Know what you want the mobile site to look like. Code that like you would any css stylesheet, so no need for fancy brackets because you don't need a minimum width.
--- To be careful though, write in a top down approach: the final look you want something should be below the other. So I usually recommend coding the "mobile" version before the "full site" version, except when I shove things at the top for easy editing haha.

Speaking of mobile friendly...

Back in the day, we use px or pt for our fonts. Lately, we actually can't, because of two reasons: huge monitors and tiny monitors. I'm one of those who uses both kinds: 27inch screen, 13inch laptop, and my phone, and then you also got people who use a tablet too. Basically, px and pt can be nightmare on my 27 inch and the phone, especially when you want to use smaller fonts. Basically, with too many different resolutions nowadays, hard-coding a font size can be pretty tough.

On the other hand, em is created to automatically scale and translate on all screensizes. It's really amazing. There is a a conversion from px to em and vice versa, but honestly you don't actually need to care about it if you're using it for just fonts. For layout aesthetics like padding and margin, it's perfectly fine to still use pixels, so I have found. I use a mixture of both em and pixels for padding and margins, pixels and percentages for widths and heights (it's way better to use pixels in this case because more accurate, and percentages for screen sizes), and em for fonts.

Anyway, your default font size is 1em. If you want it smaller, go into decimals: 0.5em, 0.25em, 0.7em, etc. Want bigger? 2em, 2.5em, 5.1em, and so on. It looks awful now cos numbers!! But your eyes will love you for it. For proper conversion, here's a site.

A note though, em is very relative and flexible to each other as well, especially in Dreamwidth when it has default sized fonts on its own too. Sometimes your 0.8em isn't an 0.8em, and you have to change it. If you want something hard and definite, then yeah, use px. But try to keep it a minimum.

You can set custom fonts from anywhere that has the font uploaded using @font-face. Google Fonts should be the easiest since you can use it straight from there, I just don't use external fonts (normally) since it might put more pressure on phone data since font files can be pretty big (and I already use images for backgrounds, so) >You can make a list of fonts off google and just insert it in as an "External Stylesheet" in Custom CSS section anyway. You can still put more than one font in this way too.

There's also Brick, which clone some Google Fonts and other open source fonts like Linux Libertine, that aren't available on Google Fonts but are still open for net use. Brick clones the fonts so that it renders fonts online better, which it actually does on my PC/Windows, as for my Macbook the difference is minimal.

Alternatively, if you want to put the @font-face directly into your CSS code, follow this article. It's very easy! Short story: the link Google gives you, put that in the address bar, and it will show you the @font-face css you copy/paste into your code. This also works for Brick.

This is a little more complicated (or I think just longer to code) but if you wanna code for specific pages instead of a common layout, these are some of the class names you use:
Recent (your main journal page): .page-recent
Read (Member Posts in communities): .page-read
Archives: .page-archives
Archives-Within Month View: .page-month
Archives-Within Day View: .page-day
Tags: .page-tags
Custom Icon Page: .page-icons
Custom Entry/Comment Page: .page-entry

There are many accounts and communities available at your disposal. And sometimes making more makes you even lazier. I actually use a grand total of one account and that's just to make the layout, but for me to test communities, friends pages, comment pages, I go to other communities because of this nifty set of settings:
1. With the account you have your layout on: Account Settings -> Display
2. Scroll down to the following:
Entry Pages: Shown to You -> When viewing entry pages (including yours), use this style: My Own Style
Icon Pages: Shown to You -> When viewing icons pages (including yours), use this style: My Own Style
Journal Pages: Shown to You -> When viewing journals (including yours), use this style: My Own Style
3. Go to communities and check their appearance, click on full entries to get a 2nd opinion on how your comments look, etc.
4. Change it back once you're done (or not, depending on if you want to. I change it back and forth.)

I might add more simple things I find, I'm still pretty n00b at this myself so shhh.

Post a comment in response:

Anonymous( )Anonymous This account has disabled anonymous posting.
OpenID( )OpenID You can comment on this post while signed in with an account from many other sites, once you have confirmed your email address. Sign in using OpenID.
Account name:
If you don't have an account you can create one now.
HTML doesn't work in the subject.


Notice: This account is set to log the IP addresses of everyone who comments.
Links will be displayed as unclickable URLs to help prevent spam.