Newbie Guide for People Patching Styles

How Do I File a New Bug?

• In Bugzilla, click on New. Select Dreamwidth Development. In Component, select Style System. Enter a Summary and a Description. Mention style and theme names in the summary if needed. If you're adding a style or a color theme, indicate style name, theme name(s), the name of the author and the Dreamscapes submission URL in the description.

• Click on Show Advanced Fields. Set Initial State to ASSIGNED and enter your Bugzilla e-mail address in Assign To.

Where Are Style Files?

• core2.s2 is in ~/dw/cs/dw-free/bin/upgrading/s2layers/

• Theme and layout .s2 files are in ~/dw/cs/dw-free/bin/upgrading/s2layers/LAYERNAME/ or ~/dw/cs/dw-nonfree/bin/upgrading/s2layers/LAYERNAME/

• .pm layout files are in ~/dw/cvs/dw-free/cgi-bin/LJ/S2Theme/ or ~/dw/cs/dw-nonfree/bin/upgrading/s2layers/LAYERNAME/

• S2Theme.pm is in ~/dw/cvs/dw-free/cgi-bin/LJ/

• S2Theme_local.pm is in ~/dw/cvs/dw-nonfree/cgi-bin/LJ/

• s2layers.dat is in ~/dw/cs/dw-free/bin/upgrading/

• s2layers-local.dat is in ~/dw/cs/dw-nonfree/bin/upgrading/

Adding a New Style

Edit s2layers.dat

• If this is a new Core2 layout, add:

layoutname/layout          layout          core2
layoutname/themes          theme+          layoutname/layout

• If this is a child of Tabula Rasa, add:

layoutname/layout          layout(core2base/layout)    core2
layoutname/themes          theme+                      layoutname/layout

Edit S2Theme.pm

• Scroll down to %default_themes and add the layout and default theme:

layoutname => 'layoutname/defaulttheme',

Create LAYOUTNAME.pm

• Create LAYOUTNAME.pm in ~/dw/cvs/dw-free/cgi-bin/LJ/S2Theme/.

• Add:

package LJ::S2Theme::layoutname;
use base qw( LJ::S2Theme );
 
sub layouts { ( "1" => "one-column", "2l" => "two-columns-left", "2r" => "two-columns-right", "3" => "three-columns-sides", "3r" => "three-columns-right", "3l" => "three-columns-left" ) }
sub layout_prop { "layout_type" }
 
sub designer { "name" }
 
1;

Remove display options that don't apply to the layout, of course.

Create the LAYOUTNAME directory

• Create a directory with the name of the layout in ~/dw/cs/dw-free/bin/upgrading/s2layers/ or ~/dw/cs/dw-nonfree/bin/upgrading/s2layers/.

Create layout.s2

• In the directory you've created, create a file named layout.s2.

layerinfo type = "layout";
layerinfo name = "layoutname";
layerinfo redist_uniq = "layoutname/layout";
layerinfo author_name = "someuser";
layerinfo lang = "en";
 
set layout_authors = [ { "name" => "someuser", "type" => "user" } ];

• Add the layout code.

• If the layout has custom properties, they should be sorted into existing groups (presentation, colors, fonts, images, modules, text, other) by appending _child to the group name. For example:

propgroup images_child
    property string image_module_list { des = "Module list image"; }

• If a module has more or fewer available positions than other modules, you can customize the sections it can be set to by using _override. For example:

    property string module_navlinks_section_override {
       values = "none|(none)|header|Header|one|Group One|two|Group Two";
       grouped = 1;
       }
 
set grouped_property_override = { "module_navlinks_section" => "module_navlinks_section_override" };
 
set module_navlinks_section = "header";

Of course, you need to make sure it's printed correctly when set to every position, possibly by editing function Page::print() { }.

Check layout.s2

• No tabs or trailing spaces.

• No empty properties (S2 or CSS).

• No hardcoded colors, fonts or text except shadows or :before/:after text/characters.

• No redundant code (S2 or CSS).

• CSS must be into a readable format, with proper indents and spaces.

• CSS must be in a logical order. You can add section comments.

Create themes.s2

• In the directory you've created, create a file named themes.s2.

• Follow the steps outlined in the next section.

Adding a New Color Theme

Edit themes.s2

• Make sure the color theme has the right header. As Afuna explained here in dw_dev_training, it should look like this:

#NEWLAYER: layoutname/themename
layerinfo type = "theme";
layerinfo name = "Theme Name";
layerinfo redist_uniq = "layoutname/themename";
layerinfo author_name = "someuser";

• If the color theme author is not the style author, add this this line below, separated by a blank line:

set layout_authors = [ { "name" => "someuser", "type" => "user" } ];

• If the theme has any images, name them like this: themename_imagename.xxx. Keep the image name used in other themes if there are any.

If there's only one image, give it the theme name: themename.xxx

If the theme has generic images used in other themes, simply use imagename.xxx.

In the theme, use layoutname/themename_imagename.xxx, layoutname/themename.xxx or layoutname/imagename.xxx as the URL.

• If you need to add theme-specific CSS, use:

function Page::print_theme_stylesheet() {
    """
    CSS HERE
    """;
}

• Make sure to add the theme code in the right place (themes should be alphabetically sorted).

Check themes.s2

• No tabs or trailing spaces.

• No empty properties (S2 or CSS).

• No hardcoded colors in print_theme_stylesheet() if possible.

• Use shorthand for color codes whenever possible (#666 instead of #666666; #abc instead of #aabbcc).

• Sort properties into categories using these headers:

##===============================
## Page Colors
##===============================

Colors are sorted into three categories: Page Colors, Entry Colors and Module Colors.

Other categories are Images and Fonts.

• Additional CSS must be into a readable format, with proper indents and spaces, and a logical order.

• Each theme file must be separated by two blank lines. Leave one blank line after the last theme in the file.

Edit LAYOUTNAME.pm

You must include the theme into the general layout file. Otherwise, people wouldn't be able to select it at Customize.

• Find the correct place in the file so that themes stay alphabetically sorted.

• Add the following code:

package LJ::S2Theme::layoutname::themename;
use base qw( LJ::S2Theme::layoutname );
sub cats { qw() }

• If the color theme author is not the style author, add this line:

sub designer { "someuser" }

On PuTTY

• Type hg addremove if this patch adds or delete files then hg refresh.

On your Dreamhack

• Test, test and test. Make sure styles/themes are correctly listed in Customize and that names are correct. Make sure you can select the layouts working with your style. Make sure you can customize your style. On your test account, check general colors and link colors for themes. For styles, make sure all types of layouts, all pages, all sorts of entries and comments display correctly and display correctly in various screen resolutions and font sizes. Also make sure community journals look fine.

• Make preview pictures if you can. Their size is 150x114 pixels. You may need to add/edit/remove entries, add/edit/remove modules, change screen resolution and font size so that your screen cap can be resized to this exact size.

On Bugzilla

• Don't forget to zip images and attach them to your bug if there are any. Also set them to review ? and commit ?

• If you can't do the preview pictures mention it so that someone can do them for you.