|
|
| (47 intermediate revisions by 2 users not shown) |
| Line 1: |
Line 1: |
| − | = How Do I File a New Bug? =
| + | #REDIRECT [[Newbie_Guide:_How_to_Patch_Styles_and_Themes]] |
| − | | + | |
| − | * In Bugzilla, click on New. Select Dreamwidth Development. In Component, select Style System. Enter a Summary and a Description. Mention style and author(s) in the summary. If you're patching a color theme, add author names and submission URLs to the description. If you're patching a style, mention the style name, the number of themes it has, the name of the default theme, the author's name and the submission URL.
| + | |
| − | | + | |
| − | * 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 <code>~/dw/cvs/dw-free/bin/upgrading/s2layers/</code>
| + | |
| − | | + | |
| − | * Theme and layout .s2 files are in <code>~/dw/cvs/dw-free/bin/upgrading/s2layers/STYLENAME/</code> or <code>~/dw/cvs/dw-nonfree/bin/upgrading/s2layers/STYLENAME/</code>
| + | |
| − | | + | |
| − | * .pm style files are in <code>~/dw/cvs/dw-free/cgi-bin/LJ/S2Theme/</code> or <code>~/dw/cvs/dw-nonfree/bin/upgrading/s2layers/LAYERNAME/</code>
| + | |
| − | | + | |
| − | * S2Theme.pm is in <code>~/dw/cvs/dw-free/cgi-bin/LJ/</code>
| + | |
| − | | + | |
| − | * S2Theme_local.pm is in <code>~/dw/cvs/dw-nonfree/cgi-bin/LJ/</code>
| + | |
| − | | + | |
| − | * s2layers.dat is in <code>~/dw/cvs/dw-free/bin/upgrading/</code>
| + | |
| − | | + | |
| − | * s2layers-local.dat is in <code>~/dw/cvs/dw-nonfree/bin/upgrading/</code>
| + | |
| − | | + | |
| − | | + | |
| − | = Dw-free or dw-nonfree? =
| + | |
| − | | + | |
| − | * To be usable on the site, third party images must be obtained from a site which explicitly allows storage on one's own server, commercial use, and use in website templates, or the designer must have acquired a written permission from the image owner and included it in their [[CLA|Contributor Licensing Agreement]]. If this isn't the case, images must be replaced or removed from the style/theme.
| + | |
| − | | + | |
| − | * Styles go to dw-nonfree if Dreamwidth can use them but can't redistribute/sublicense them.
| + | |
| − | | + | |
| − | * Themes go to local files in dw-nonfree if they contain images Dreamwidth can use but can't redistribute/sublicense.
| + | |
| − | | + | |
| − | * Themes go to local files in dw-nonfree if the base style is already in dw-nonfree. This the case for Transmogrified and Sunday Morning themes.
| + | |
| − | | + | |
| − | | + | |
| − | = Adding a New Style =
| + | |
| − | | + | |
| − | == Edit s2layers.dat ==
| + | |
| − | | + | |
| − | * If the style goes to dw-nonfree, edit <code>s2layers-local.dat</code> instead.
| + | |
| − | | + | |
| − | * If this is a new Core2 layout, add:
| + | |
| − | <syntaxhighlight lang="perl">
| + | |
| − | stylename/layout layout core2
| + | |
| − | stylename/themes theme+ stylename/layout
| + | |
| − | </syntaxhighlight>
| + | |
| − | | + | |
| − | * If this is a child of Tabula Rasa, add:
| + | |
| − | <syntaxhighlight lang="perl">
| + | |
| − | stylename/layout layout(core2base/layout) core2
| + | |
| − | stylename/themes theme+ stylename/layout
| + | |
| − | </syntaxhighlight>
| + | |
| − | | + | |
| − | | + | |
| − | == Edit S2Theme.pm ==
| + | |
| − | | + | |
| − | * If the default theme goes to dw-nonfree, edit <code>S2Theme_local.pm</code> instead.
| + | |
| − | | + | |
| − | * Scroll down to <code>%default_themes</code> and add the style and default theme:
| + | |
| − | <syntaxhighlight lang="perl">
| + | |
| − | layoutname => 'stylename/defaulttheme',
| + | |
| − | </syntaxhighlight>
| + | |
| − | | + | |
| − | | + | |
| − | == Create STYLENAME.pm ==
| + | |
| − | | + | |
| − | * Create STYLENAME.pm in <code>~/dw/cvs/dw-free/cgi-bin/LJ/S2Theme/</code> or <code>~/dw/cvs/dw-nonfree/cgi-bin/LJ/S2Theme/</code>.
| + | |
| − | | + | |
| − | * Add:
| + | |
| − | <syntaxhighlight lang="perl">
| + | |
| − | package LJ::S2Theme::layoutname;
| + | |
| − | use base qw( LJ::S2Theme );
| + | |
| − | use strict;
| + | |
| − | | + | |
| − | 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" }
| + | |
| − | | + | |
| − | 1;
| + | |
| − | </syntaxhighlight>
| + | |
| − | | + | |
| − | Remove layout options that don't apply to the style.
| + | |
| − | | + | |
| − | | + | |
| − | == Create the STYLENAME directory ==
| + | |
| − | | + | |
| − | * Create a directory with the name of the style in <code>~/dw/cvs/dw-free/bin/upgrading/s2layers/</code> or <code>~/dw/cvs/dw-nonfree/bin/upgrading/s2layers/</code>.
| + | |
| − | | + | |
| − | | + | |
| − | == Create layout.s2 ==
| + | |
| − | | + | |
| − | * In the directory you've created, create a file named <code>layout.s2</code>. Add:
| + | |
| − | <syntaxhighlight lang="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" } ];
| + | |
| − | </syntaxhighlight>
| + | |
| − | | + | |
| − | * Make sure to respect the designer's wishes concerning capitalization and that layerinfo author_name and layout_authors match.
| + | |
| − | | + | |
| − | * If the designer doesn't want their name to be displayed as a username, use this instead:
| + | |
| − | <syntaxhighlight lang="s2">
| + | |
| − | set layout_authors = [ { "name" => "someuser" } ];
| + | |
| − | </syntaxhighlight>
| + | |
| − | | + | |
| − | * If there are resources to credit, add them:
| + | |
| − | <syntaxhighlight lang="s2">
| + | |
| − | set layout_resources = [ { "name" => "Name", "url" => "http://URL" } ];
| + | |
| − | </syntaxhighlight>
| + | |
| − | | + | |
| − | * Add the style code.
| + | |
| − | | + | |
| − | * If the style has custom properties, they should be sorted into existing groups (presentation, colors, fonts, images, modules, text, other) by appending <code>_child</code> to the group name. For example:
| + | |
| − | <syntaxhighlight lang="s2">
| + | |
| − | propgroup images_child
| + | |
| − | property string image_module_list { des = "Module list image"; }
| + | |
| − | </syntaxhighlight>
| + | |
| − | | + | |
| − | * If a module has more or fewer available positions than other modules, you can customize the sections it can be set to by using <code>_override</code>. For example:
| + | |
| − | <syntaxhighlight lang="s2">
| + | |
| − | 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";
| + | |
| − | </syntaxhighlight>
| + | |
| − | | + | |
| − | : Don't forget to make sure it's printed correctly when set to every position, possibly by editing <code>function Page::print() { }</code>.
| + | |
| − | | + | |
| − | | + | |
| − | == Check layout.s2 ==
| + | |
| − | | + | |
| − | * No tabs or trailing spaces.
| + | |
| − | | + | |
| − | * No empty properties (S2 or CSS).
| + | |
| − | | + | |
| − | * No hardcoded colors, fonts or text except shadows or <code>:before</code>/<code>:after</code> characters.
| + | |
| − | | + | |
| − | * No redundant code (S2 or CSS).
| + | |
| − | | + | |
| − | * Format CSS to be easily readable and editable. Selectors should be listed in the order they're displayed on the screen, divided into sections thanks to comments, properly indented and spaced out; properties should be listed alphabetically:
| + | |
| − | <syntaxhighlight lang="css">
| + | |
| − | /* Modules
| + | |
| − | ***************************************************************************/
| + | |
| − | | + | |
| − | .entry, .comment {
| + | |
| − | margin: 2em .5em;
| + | |
| − | padding: 2em;
| + | |
| − | }
| + | |
| − | </syntaxhighlight>
| + | |
| − | | + | |
| − | * Remove leading zeros from decimals (.5em instead of 0.5em).
| + | |
| − | | + | |
| − | * Format CSS to use [http://www.scriptiny.com/2008/04/css-shorthand-cheat-sheet/ shorthand] whenever possible:
| + | |
| − | <syntaxhighlight lang="css">
| + | |
| − | border: 1px solid $*color_module_border;
| + | |
| − | border-top: none;
| + | |
| − | list-style: square inside url($*image_list_bullet);
| + | |
| − | margin: 2em .5em 1em;
| + | |
| − | </syntaxhighlight>
| + | |
| − | | + | |
| − | instead of:
| + | |
| − | <syntaxhighlight lang="css">
| + | |
| − | border-bottom: 1px solid $*color_module_border;
| + | |
| − | border-left: 1px solid $*color_module_border;
| + | |
| − | border-right: 1px solid $*color_module_border;
| + | |
| − | list-style-image: url($*image_list_bullet);
| + | |
| − | list-style-position: inside;
| + | |
| − | list-style-type: square;
| + | |
| − | margin-bottom: 1em;
| + | |
| − | margin-left: .5em;
| + | |
| − | margin-right: .5em;
| + | |
| − | margin-top: 2em;
| + | |
| − | </syntaxhighlight>
| + | |
| − | | + | |
| − | * Group selectors whenever possible.
| + | |
| − | | + | |
| − | | + | |
| − | == Create themes.s2 ==
| + | |
| − | | + | |
| − | * In the style directory you've created or the existing directory, create a file named <code>themes.s2</code>.
| + | |
| − | | + | |
| − | * If some themes go to dw-nonfree, create <code>themes-local.s2</code> in dw-nonfree as well.
| + | |
| − | | + | |
| − | * Follow the steps outlined in [[#Adding a New Color Theme|the next section]].
| + | |
| − | | + | |
| − | | + | |
| − | = Adding a New Color Theme =
| + | |
| − | | + | |
| − | | + | |
| − | == Edit themes.s2 ==
| + | |
| − | | + | |
| − | * If the theme goes to dw-nonfree, edit <code>themes-local.s2</code> instead.
| + | |
| − | | + | |
| − | * Make sure the color theme has the right header. As Afuna explained [http://dw-dev-training.dreamwidth.org/9656.html here] in <dwcomm>dw_dev_training</dwcomm>, it should look like this:
| + | |
| − | <syntaxhighlight lang="s2">
| + | |
| − | #NEWLAYER: layoutname/themename
| + | |
| − | layerinfo type = "theme";
| + | |
| − | layerinfo name = "Theme Name";
| + | |
| − | layerinfo redist_uniq = "layoutname/themename";
| + | |
| − | layerinfo author_name = "someuser";
| + | |
| − | </syntaxhighlight>
| + | |
| − | | + | |
| − | * If the color theme author is not the style author, add this this line below, separated by a blank line:
| + | |
| − | <syntaxhighlight lang="s2">
| + | |
| − | set theme_authors = [ { "name" => "someuser", "type" => "user" } ];
| + | |
| − | </syntaxhighlight>
| + | |
| − | | + | |
| − | * Make sure to respect the designer's wishes concerning capitalization and that layerinfo author_name and theme_authors match..
| + | |
| − | | + | |
| − | * If the designer doesn't want their name to be displayed as a username, use this instead:
| + | |
| − | <syntaxhighlight lang="s2">
| + | |
| − | set theme_authors = [ { "name" => "someuser" } ];
| + | |
| − | </syntaxhighlight>
| + | |
| − | | + | |
| − | * If there are resources to credit, add them:
| + | |
| − | <syntaxhighlight lang="s2">
| + | |
| − | set layout_resources = [ { "name" => "Name", "url" => "http://URL" } ];
| + | |
| − | </syntaxhighlight>
| + | |
| − | | + | |
| − | : If there were already resources credited in the style, don't forget to add them again.
| + | |
| − | | + | |
| − | * If the theme has any images, name them like this: <code>themename_imagename.xxx</code>. Keep the image name used in other themes if there are any.
| + | |
| − | | + | |
| − | : If there's only one image, give it the theme name: <code>themename.xxx</code>
| + | |
| − | | + | |
| − | : If the theme has generic images used in other themes, simply use <code>imagename.xxx</code>.
| + | |
| − | | + | |
| − | : In the theme, use <code>layoutname/themename_imagename.xxx</code>, <code>layoutname/themename.xxx</code> or <code>layoutname/imagename.xxx</code> as the URL.
| + | |
| − | | + | |
| − | * If you need to add theme-specific CSS, use:
| + | |
| − | <syntaxhighlight lang="s2">
| + | |
| − | function Page::print_theme_stylesheet() {
| + | |
| − | """
| + | |
| − | CSS HERE
| + | |
| − | """;
| + | |
| − | }</syntaxhighlight>
| + | |
| − | | + | |
| − | * Make sure to add the theme code in the right place: themes should be alphabetically sorted.
| + | |
| − | | + | |
| − | | + | |
| − | == Check your theme file ==
| + | |
| − | | + | |
| − | * No tabs or trailing spaces.
| + | |
| − | | + | |
| − | * No empty properties (S2 or CSS).
| + | |
| − | | + | |
| − | * No hardcoded colors in <code>print_theme_stylesheet()</code> unless the designer has used a non-safe combination (color_entry_background over color_page_text vs color_entry_background over color_entry_text) or colors which aren't used elsewhere.
| + | |
| − | | + | |
| − | * Use shorthand for color codes whenever possible (#555 instead of #555555; #abc instead of #aabbcc).
| + | |
| − | | + | |
| − | * Sort properties into categories. Possible categories are: Presentation, Page Colors, Entry Colors, Module Colors, Images and Fonts. Use these headers to separate each category:
| + | |
| − | <syntaxhighlight lang="s2">
| + | |
| − | ##===============================
| + | |
| − | ## Page Colors
| + | |
| − | ##===============================
| + | |
| − | </syntaxhighlight>
| + | |
| − | | + | |
| − | * Properties should be sorted alphabetically into each category, but sometimes logic should prevail. For example, generic properties such as color_page_background go before specific properties such as color_header_background. Look at other themes to keep the same order.
| + | |
| − | | + | |
| − | * Format CSS to be easily readable and editable: use indents and spaces, list properties alphabetically, use [http://www.scriptiny.com/2008/04/css-shorthand-cheat-sheet/ shorthand] whenever possible.
| + | |
| − | | + | |
| − | * Each theme file must be separated by two blank lines. Leave one blank line after the last theme in the file.
| + | |
| − | | + | |
| − | * If you see another theme which needs editing, do it in another patch.
| + | |
| − | | + | |
| − | | + | |
| − | = Adding New Files to your Patch =
| + | |
| − | | + | |
| − | * Type <code>hg addremove</code> if this patch adds or delete files then <code>hg refresh</code>.
| + | |
| − | | + | |
| − | * If you're adding images, don't forget to zip them, attach them to your bug and set them to review ? and commit ?.
| + | |
| − | | + | |
| − | | + | |
| − | = Test, Test and Test =
| + | |
| − | | + | |
| − | * In Customize, make sure everything is correctly listed and named. For styles, also make sure you can select the page layouts working with your style, and customize your style.
| + | |
| − | | + | |
| − | * On your test account, check colors on all pages. Don't forget hover and visited links, comment subjects, bottom links, reply boxes and drop-down menus on comment pages, contextual pop-ups, the navigation strip. For styles, also make sure all types of layouts, all pages, all sorts of entries and comments are displayed correctly and do so in various screen resolutions and font sizes. Don't forget to check community journals too.
| + | |
| − | | + | |
| − | | + | |
| − | = Preview Pictures =
| + | |
| − | | + | |
| − | * To make preview pictures, you need to take a screenshot of the Recent Pages of your test account. This account needs to have two or three dummy entries with dummy titles and a [[Dreamwidth_Icons|generic Dreamwidth icon]] (or the no-userpic default graphic), no navigation strip, and generally few sidebar modules and no footer modules. Lorem Ipsum generators and screenshot browser extensions may help you with that.
| + | |
| − | | + | |
| − | * It is best if you take your screenshot when your screen is set to a size of 1280x800 pixels as this is the most common resolution used by Dreamwidth users. A good font size is between 14 pixels and 16 pixels.
| + | |
| − | | + | |
| − | * Screenshots must then be resized to 150x114 pixels. If doing so distorts the image, you need to either edit the original screenshot in a photo editor program or edit your journal until your screenshot can be resized without any distortion.
| + | |
| − | | + | |
| − | * If you can't do preview pictures mention it on the bug so that someone can do them for you. You can also ask for help at <dwcomm>dreamscapes</dwcomm>.
| + | |
| − | | + | |
| − | * A few tips:
| + | |
| − | | + | |
| − | : Look at the previews for other themes in the same style; this will generally give you a good idea of the modules you should display, the number of entries you should have and how long they should be to get a good screenshot.
| + | |
| − | | + | |
| − | : Quick ways to get or lose a few more pixels: add or remove line breaks, tags and metadata in entries; display the tags module as a list or as a cloud; changing your browser's minimum font size; resizing the pic to the correct width then cropping it to make it the correct height (one or two 'missing' pixels aren't noticeable at this scale).
| + | |
| − | | + | |
| − | : It might be a good idea to create accounts specifically for making previews --one per style-- so that you don't lose your set-up.
| + | |
| − | | + | |
| − | : If your photo editor program has scripting functions, you can use them to automate resizing and saving.
| + | |
| − | | + | |
| − | | + | |
| − | [[Category:Development]]
| + | |
| − | [[Category:Styles]]
| + | |
| − | [[Category:Getting Started]] | + | |
