S2 Guide: Customization Area

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.

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.