![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png){kind=small}
![[community profile]](https://www.dreamwidth.org/img/silk/identity/community.png){kind=small}
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?
IT'S ALL JUST CSS
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.
MEDIA SCREENS VS BIG SCREENS
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. WE'RE FREE, THEY FIXED IT! Read more here. The rest of this section? Continue as is.
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) {
YOUR CSS HERE.
}
I'll shove an example from one of my layouts:
@media only screen and (min-width: 40em) {
#header {
background-color:#000000;
padding-bottom: 300px; /*image height*/
background-image: url('http://i.imgur.com/mqqiSTJ.jpg');
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...
FONT-SIZE: IT'S TIME FOR em
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.
CUSTOM FONTS FROM GOOGLE FONTS OR BRICK
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.
SPECIFIC PAGE CLASSES
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
TESTING YOUR LAYOUT WITHOUT MAKING TOO MANY TEST ACCOUNTS/COMMUNITIES
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.
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?
IT'S ALL JUST CSS
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.
MEDIA SCREENS VS BIG SCREENS
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.
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) {
YOUR CSS HERE.
}
I'll shove an example from one of my layouts:
@media only screen and (min-width: 40em) {
#header {
background-color:#000000;
padding-bottom: 300px; /*image height*/
background-image: url('http://i.imgur.com/mqqiSTJ.jpg');
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...
FONT-SIZE: IT'S TIME FOR em
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.
CUSTOM FONTS FROM GOOGLE FONTS OR BRICK
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.
SPECIFIC PAGE CLASSES
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
TESTING YOUR LAYOUT WITHOUT MAKING TOO MANY TEST ACCOUNTS/COMMUNITIES
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.
no subject
But I found your post very interesting :3 Reminded me many things and taught me others I didn't know! I don't focus on coding for mobiles, but it's nice to know one can actually do that.
Anyway I also wanted to ask, how do you get the base stylesheets for the themes? Because I remember once I tried coding for Five AM and couldn't get the style... it was many years ago so lol idk. Haha! I decided to just design and code for transmogrified and, occassionally, tabula rasa.
no subject
yeah all of mine was just through trial and error because I did the slack way of coding first since I SUCK which made me discover that it can be mobile responsive that way! Accidents help sometimes haha.
OKAY I did it the same way I remember someone over in LJ mentioned: I looked up the page source (not inspect element) and clicked the CSS style sheet it linked. The entire Five AM stylesheet showed up. The link is usually the one just above the custom code, so for this comm for example (which I have set to Tectonic but let's pretend), it's link rel="stylesheet" href="http://tofuhouse.dreamwidth.org/res/2390464/stylesheet?1449647853" type="text/css". So you just need to set an account to Five AM, and then get the CSS code by clicking the link, and then saving it :) Five AM's base is Tabula Rasa so it's not so different whooooo.
no subject
I used to do that too but I guess when I tried Five AM was in early stages so the stylesheet didn't really show correctly or it wasn't customizable or something? I remember trying and not being able lol. Who knows.
Thanks for the info!! It's been some time since I last coded anything, I want to try my hand at something new :3
no subject
Oh maybe!! cos yeah I only recently got into this a few months ago, so I'm pretty late in a way. So maybe they fixed that now!
Ahhhh, I'd totally love to see what you're gonna make!!!
no subject
Well, for being new to this you are already really good at it! I hope to be able to post something soon and see more of your designs too :3
no subject
AHHh thank you!! It's still hard to dish out what I got in mind since skills aren't all there yet, but more practice hehe. Ufufufu I'll try to make something too as I wait longingly for you :>
no subject
And now I feel bad for not listening to them anymore. But I still have an old 2005 poster from SHOXX magazine hanging on my wall :3 I love them so much.
And just so you know, you are the first person I talk to about Kagrra, in AGES. It's nice to be able to still talk to someone who liked them and felt the same *teary eye*
no subject
Oh man a poster, I'm jelly ah!!!
YEAH DITTO the last one was my friend who told me the news but we legit spoke of that right after and then couldn't handle it :'(