Difference between revisions of "S2 Guide: Customization Area"
From Dreamwidth Notes
Foxfirefey (Talk | contribs) (Created page with "The customization area was made so that people would be able to modify and adjust their style, without knowing about CSS or HTML. It's the responsibility of S2 layout makers to ...") |
Foxfirefey (Talk | contribs) (→Custom CSS) |
||
| (2 intermediate revisions by 2 users not shown) | |||
| Line 3: | Line 3: | ||
The customization area has two main areas: | The customization area has two main areas: | ||
| − | * [http://www.dreamwidth.org/customize/ The theme selection area] -- lets users browse and preview available premade styles and themes. | + | * [http://www.dreamwidth.org/customize/ The theme selection area] -- lets users browse and preview available premade styles and themes. |
* [http://www.dreamwidth.org/customize/options The customization wizard] -- layouts can define different aspects that can be customized in this wizard, like colors. | * [http://www.dreamwidth.org/customize/options The customization wizard] -- layouts can define different aspects that can be customized in this wizard, like colors. | ||
| Line 20: | Line 20: | ||
===[http://www.dreamwidth.org/customize/options?group=presentation Presentation]=== | ===[http://www.dreamwidth.org/customize/options?group=presentation Presentation]=== | ||
| + | |||
| + | Examples of presentation options include: | ||
| + | |||
| + | * Entry icons on the right or left side of the entry | ||
| + | * Metadata before or after the entry content | ||
| + | * Show entry pages in the journal style instead of the site style | ||
| + | * Use custom reading list colors | ||
| + | * User interaction links, entry management links, or comment management links as text or icons | ||
| + | * Entry and comment date/time formats | ||
===[http://www.dreamwidth.org/customize/options?group=colors Colors]=== | ===[http://www.dreamwidth.org/customize/options?group=colors Colors]=== | ||
| Line 43: | Line 52: | ||
The modules include: | The modules include: | ||
| − | * Basic Journal Info | + | * Basic Journal Info -- Lets the user to display their default icon, the display name of the journal, and link to website; can unselect any items as well |
* Navigation -- the navigation links to different pages on the journal | * Navigation -- the navigation links to different pages on the journal | ||
| − | * Custom Text | + | * Custom Text -- Lets the user put in some custom content to put into their side bar |
| − | * Calendar | + | * Calendar -- Displays the latest month from the archive, in a table or a horizontal format |
| − | * Page Summary | + | * Page Summary -- On pages displaying entries, lists quick links to each entry on the page |
| − | * Recent active entries | + | * Recent active entries -- Displays a list of the entries in the journal that have most recently received comments |
* Tags -- If there are tags, lists them out. User can set the limit for number of tags to show and the display type (multilevel, cloud, or list) | * Tags -- If there are tags, lists them out. User can set the limit for number of tags to show and the display type (multilevel, cloud, or list) | ||
* Link List -- Displays the links in the journal's link list; only displays if they exist | * Link List -- Displays the links in the journal's link list; only displays if they exist | ||
* Syndication -- Displays links to the Atom and RSS feeds for the journal, only displays on the recent page | * Syndication -- Displays links to the Atom and RSS feeds for the journal, only displays on the recent page | ||
* Style Credit | * Style Credit | ||
| − | * Search -- A search box for searching a journal or community using the search feature. Only shows | + | * Search -- A search box for searching a journal or community using the search feature. Only shows if you can use the feature. |
* Time Loaded -- Displays the time the page was loaded | * Time Loaded -- Displays the time the page was loaded | ||
* Powered By -- Gives a shout out to Dreamwidth | * Powered By -- Gives a shout out to Dreamwidth | ||
| Line 67: | Line 76: | ||
===[http://www.dreamwidth.org/customize/options?group=customcss Custom CSS]=== | ===[http://www.dreamwidth.org/customize/options?group=customcss Custom CSS]=== | ||
| − | This section is where you can add custom CSS. | + | This section is where you can add custom CSS. Several options are involved: |
| + | |||
| + | * <b>Use layout's stylesheet(s)</b> -- This lets you include the base stylesheet of the layout. If you uncheck this box, you'll want to put ALL of the CSS you'll need into a custom stylesheet URL or the "Use embedded CSS" section. | ||
| + | * <b>Custom stylesheet URL</b> -- You can put a URL here that will be used for the style's CSS. Note that it does not end up used directly: it is filtered through a proxy for safe content. There's also some caching involved, so don't use this if you're making frequent changes and wanting them to show up immediately. | ||
| + | * <b>Use embedded CSS</b> -- You can directly put CSS into this text area. The contents will be filtered for safe content. This option is independent of the "Custom stylesheet URL" option--you can use them both at the same time. | ||
[[Category: S2 Guide]] | [[Category: S2 Guide]] | ||
Latest revision as of 04:37, 21 May 2011
The customization area was made so that people would be able to modify and adjust their style, without knowing about CSS or HTML. It's the responsibility of S2 layout makers to try and give their layout good customization options!
The customization area has two main areas:
- The theme selection area -- lets users browse and preview available premade styles and themes.
- The customization wizard -- layouts can define different aspects that can be customized in this wizard, like colors.
Contents
Customization Wizard Sections
Page Setup
Page setup selection is available at the bottom of the theme selection and the customization area. The current options (not available in all layouts) are:
- One column, no sidebars
- Two columns, right sidebar
- Two columns, left sidebar
- Three columns, sidebar on either side
- Three columns, sidebars on the left
- Three columns, sidebars on the right
Presentation
Examples of presentation options include:
- Entry icons on the right or left side of the entry
- Metadata before or after the entry content
- Show entry pages in the journal style instead of the site style
- Use custom reading list colors
- User interaction links, entry management links, or comment management links as text or icons
- Entry and comment date/time formats
Colors
This section lets users change the colors of their theme--backgrounds, foregrounds, and borders!
Fonts
This section lets users define what fonts they'll be using and what sizes they are.
Images
This section lets users add custom background images to their layout. This can include page backgrounds, backgrounds to the header (with an option to make sure the header will be high enough for the banner), backgrounds to modules, and backgrounds to entries.
You can specify the way each image tiles and basic positions, like "top right" or "center left".
Modules
Modules can be put into different areas of the layout, which can vary.
They do have a limitation currently in that there's only one of each type--that means there's only one Text Box module.
The modules include:
- Basic Journal Info -- Lets the user to display their default icon, the display name of the journal, and link to website; can unselect any items as well
- Navigation -- the navigation links to different pages on the journal
- Custom Text -- Lets the user put in some custom content to put into their side bar
- Calendar -- Displays the latest month from the archive, in a table or a horizontal format
- Page Summary -- On pages displaying entries, lists quick links to each entry on the page
- Recent active entries -- Displays a list of the entries in the journal that have most recently received comments
- Tags -- If there are tags, lists them out. User can set the limit for number of tags to show and the display type (multilevel, cloud, or list)
- Link List -- Displays the links in the journal's link list; only displays if they exist
- Syndication -- Displays links to the Atom and RSS feeds for the journal, only displays on the recent page
- Style Credit
- Search -- A search box for searching a journal or community using the search feature. Only shows if you can use the feature.
- Time Loaded -- Displays the time the page was loaded
- Powered By -- Gives a shout out to Dreamwidth
Text
This section lets you change the text label of a lot of things, like the titles to navigation and interaction links and the contents of the text module.
Links List
This section lets you define the links you want to go into the link list module.
Custom CSS
This section is where you can add custom CSS. Several options are involved:
- Use layout's stylesheet(s) -- This lets you include the base stylesheet of the layout. If you uncheck this box, you'll want to put ALL of the CSS you'll need into a custom stylesheet URL or the "Use embedded CSS" section.
- Custom stylesheet URL -- You can put a URL here that will be used for the style's CSS. Note that it does not end up used directly: it is filtered through a proxy for safe content. There's also some caching involved, so don't use this if you're making frequent changes and wanting them to show up immediately.
- Use embedded CSS -- You can directly put CSS into this text area. The contents will be filtered for safe content. This option is independent of the "Custom stylesheet URL" option--you can use them both at the same time.
