styling dw

[cimorene]

I read a couple of people's tutorials about how to copy and paste the code wholesale from public lj layers and styles, but the thing is that most of those styles are either rejects because they're unwieldy and ugly, or because they have, like, zero functionality. For me, a full tag list is a must in a journal style, which left very few options. I decided to see what I could do with Negatives, the current dw default style, since it's already up to date with the updated core2 version of S2 (thread-expanding functionality, tracking, hover menus, etc). (I'm posting this here because I honestly have no idea where you'd put such things on DW. I get the idea that there might not be any amateur style communities yet.)

First, without any knowledge of CSS, .

1. CSS-less theme-layer creation for noobs

(Unfortunately, you can't completely get rid of the lines and boxes with this method, because "theme_fgcolor" sets the text colour for entries and the fat box that outlines the entries at the same time, as far as I can tell. Also, I make no guarantees and don't sue me, etc. Also, you probably don't want to ask me too many questions because I probably don't know. This isn't the method I actually use now, or have used in the last like, 5 years for my journal, so I might have forgotten how it works.)

At the Your Layers page in the Advanced Customization area, you need to create a layout-specific layer based on Negatives. Then edit the layer and give it a name.

Here is the public layer page for the theme. You see the current colour scheme under "Properties Set". Open this in another tab for reference.

In the main box of your theme layer, under the name part, paste these commands. (Go ahead and delete any ones you don't want to change.)

Colour settings:

set theme_bgcolor = "#99CC33";
set theme_fgcolor = "#591d17";
set entry_link_color = "#f80360";
set entry_link_color_hover = "#f80360";
set entry_link_color_visited = "#f80360";
set entry_border="";
set linklist_link = "#f80360";
set linklist_link_hover = "#f80360";
set linklist_hover_background = "";
set linklist_hover_underline ="#f80360";
set navigation_background ="";
set navigation_link = "#f80360";
set navigation_link_hover = "#f80360";
set middle_background = "#ffffff";
set middle_edge = "";
set entry_background = "";
set comments_link_color = "#f80360";
set comments_link_color_hover="#f80360";
set metadata_color = "#f80360";
set minical_color="#591d17";
set minical_back = "";
set minical_hover = "#f80360";

Other settings:

set text_comments_heading = "«Comments»";
set display_ljtag = false;
set enable_subjecticons = true;
set font_base ="Verdana";
set font_fallback = "sans-serif";
set entry_management_links = "text";
set comment_management_links = "text";

I don't know what the rest of those do. If you do, go to town! If not, you can ignore them. For "font_base", you want to enter the name of the one default font, and for "font_fallback" you want a font type such as "serif", "sans-serif", or "script". Obviously, "text_comments_heading" is the text at the bottom of your entry where the comment section starts.

After you Save & Compile the layer, you'll need to go back to Advanced Customization and then navigate to Your Styles. Create a new style and select Negatives as the layout and your new layer as the theme layer. You don't need to select anything for user layer. Save the style and use it, and that should work. (Again, though, if it doesn't... sorry.)






2. New layout layer with CSS, for those who know it

Here is the public layer page for the theme. Open the raw source or the sytax highlighted source and paste into the plain text editor or html editor of your choice. (Don't use a word processor, or you'll probably get unfortunate word processor artifacts.) The stylesheet is sort of in the middle of it, and you want to make all your changes to it without getting rid of the stuff around it that makes the layout actually work, obviously. There are some layout features hard-coded into the style, especially borders of various widths on all kinds of fields. You can get rid of the outlines and double-lines by setting all borders to "0px" or deleting their lines. You can change every colour manually in the stylesheet, obviously, but there are a lot of places that refer back to the colours set at the top of the layer in the #Border Color section, so it's probably best to do it there. It took me some trial and error to find all the bits of hard-coded things and change them around.

You can also manually set the fonts in a few places. It's easy to set the navigation, sidebar, and subject line fonts individually.

At the Your Layers page in the Advanced Customization area, you need to create a top-level layer. Choose "layout" as the type. Then paste the entire content of your html/text-editor into the layer and Save&Compile. Then, as with the other method, go back to Advanced Customization, create a style, add your new layer to it, and put it in use.

Comments

[copracat]

Where did you find the link to pay for your account?

[copracat]

Never mind! Worked out what you did for myself.

None of my icons match your layout!

[cimorene]

I know. :( I wish there were a way to turn off the custom comment pages! I'm in love with the beautiful white and grey of the comment pages in the style you're using.

[copracat]

I have unticked the comment pages setting on this page:
http://www.dreamwidth.org/manage/settings/?cat=display

Does that help? Hmm. No probably not, as it will give you plain site comment pages.

[cimorene]

No, that just gives you the setting of the journals you visit... apparently. At least, it didn't affect how my entries display. Dammit.

[denise]

In the layout layer, add:

set use_journalstyle_entry_page=false;

(I hate custom comment pages SO FREAKING MUCH.)

We'll have more styles added as quickly as possible, too!

[cimorene]

Oh, thank you! I totally should've figured that out.

[stromatolite]

Could you elaborate on how to do this for a complete n00b? I'm using one of the standard styles, and when I go into advanced customization I don't have any layers at all.

[denise]

Oh, God, I am so out of my depth with the style stuff. Best thing to do would be to check with support, where someone who isn't a complete idiot with the style system can answer.

[cimorene]

Advanced Customization only stores layers that you personally have created, so you wouldn't have any if you're just using a standard style. Those styles are not "your" layers because they are stored elsewhere on the site and they're the same for everybody who uses them. You can't edit them. This is why the tutorial in this post starts with creating a new layer to paste the commands into.

Many styles will have a simple option to turn custom comment pages off on the Customization page, but you can always do it the way described in this post: 1) creating a layout-specific "wizard" layer based on the style you're using at the Your Layers page 2) paste in the line "set use_journalstyle_entry_page=false;" and add a name inside the "" on the second line 3) Edit your in-use style from the Your Styles page and add the new layer to it.

[emmuzka.livejournal.com]

I could actually pay money for someone to set the perfect layout for my future DW account. Which is sad because I used to know how to write some basic html and generally wasn't afraid of doing manual tinkering on settings. and now I'm a total failboat when it comes to that.

[cimorene]

Probably won't be necessary. They're planning to have the point-and-click journal customisation wizard live by Open Beta.

[mamadeb]

Thank you!

I now have a VERY pretty layout.

[cimorene]

I'm glad it was helpful!

[lian]

Thank you, I fumbled around a bit (I tend to fugde the obvious things), but your guide was really useful. I appreciate your posting it!

[cimorene]

Cool; glad it helped!

[ladycat]

I have kind of a silly question: what happens when you are stupid playing with things you don't understand and you apparently delete the Negatives layer?

I can apply it. It's what I'm looking at right now when I look at my circle. But when I go to layers, the only thing there is zesty.

Halp? Or do you know who I should be Halping to?

[cimorene]

Wow! Hahhaha, um, I really have no idea what you did. But rest assured, you didn't delete Negatives. If you copy-pasted the contents of Negatives into a new layer and then accidentally deleted part of it, you can just go back to the public Negatives layer, click 'view raw source code' or whatever the exact wording is, copy it again and paste it back in.

Remember, in order for the colour-change method (Method #1) to work, after you've clicked save & compile on your new layer, you have to go back to Your Styles, create and name a new style, and add Negatives as the layout layer and your new layer as the theme layer to it!

But whatever you've done wrong, it's easy to fix by just going back to the regular Customize page and clicking on Negatives again to apply it.

[mmeg]

Oh wow, thank you for this (the first part, that is). My journal doesn't totally make me sad to look at now.

I still wish I had things like this nice clean entry page, but I suspect that is beyond me. So for that I will wait for the nice wizard to be ready.

[cimorene]

It's totally easy to give yourself the standard site entry page - denise gave the command that you just need to post anywhere in any custom layer a thread above I think.

[cimorene]

http://cimorene.dreamwidth.org/2626582.html?thread=8222742#t8222742 yeah, there. If you've changed the colours you must already have created the layer. Just put that line in there somewhere.

[mmeg]

Hooray! That totally worked. Thanks, I thought from the comment you had to have a layout layer, but it works in the theme layer too.

[longtimegone]

this is SUPER USEFUL. Thank you so much!

[nafs]

I followed seperis here. Very helpful, thank you :D