Difference between revisions of "S2 Guide: Customization Area"

From Dreamwidth Notes
Jump to: navigation, search
(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 ...")
 
(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.</li>
+
* [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.  There is an option to use the existing stylesheet of the layout or not, a place to load a custom stylesheet (that is filtered through a proxy for safety), and a textarea you can put in CSS that will also be included in the layoutSimplified CSS and CSS only tracks will be making frequent use of this section!
+
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 areaThe 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:

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.