Overview

With the release of Jamroom 3.1, a new module was created to allow your users the ability to "customize" their Artist or Member profiles by using a built in Style Editor.  The Style Editor allows the User to modify the look of their profile by changing colors, images and backgrounds, which in turn creates a custom CSS File that is used by their profile.  Also - your users can then "Share" their customizations for other profiles to use.  The ability to create Custom Styles, Share Custom Styles and Use Custom Styles can all be turned on/off on a per Jamroom Quota basis (Jamroom Quota Config -> Site Themes Section).

Requirements

The Jamroom Custom Profile editor is part of the Jamroom Power Pack - you will not see the options for enabling/disabling Custom Style options in your Jamroom Quota config if you do not have the Jamroom Power Pack installed.

Working knowledge of CSS and how it is applied to HTML is helpful, although not required.

CSS Config File

In order for Jamroom to know the features of your profile theme that you would like to allow your artists to customize, the Profile Theme must provide a CSS Config File that tells Jamroom the CSS selectors in your default profile CSS file that the user can "override" with a custom selector.

The CSS Config file is called config_css.cfg, and must be located in the theme template directory - i.e:

jamroom/themes/Sage/config_css.cfg

The contents of this config file will look familiar to anyone that has edited a "INI" file before - here's an example (very simple) config_css.cfg file:

This is a VERY simple config_css.cfg file - it only defines one CSS selector that can be overridden - the "body" selector.  You can see the definition of the selector is made within the square brackets:

[body]

This tells Jamroom that the resulting customized CSS that is entered into this section will override the "body" selector in the Sage.css file (as an example):

The first line of the [body]config section defines the "Text" that the user will see to the left of the Custom Editor section for the body tag:

tag_text    = "Page Background"

The second line of the [body] config section defines the CSS selector type that the entry corresponds to:

css_form    = "element"

Valid values for the css_form config option are:

• element - this tells the Custom Profile editor that the CSS Selector that is being overridden in the profiles CSS file is an HTML element - i.e. body, div.  This should be used when the selector in your CSS file is NOT a CSS class
• class - this is the "default" css_form, and tells the Custom Profile Editor that the CSS Selector is a CSS class - i.e. ".header" (note the leading period)
• For more details on CSS selectors and how they are used, please reference "CSS Structure and Rules".
• The Custom Profile editor does not support CSS "ID" Selectors at this time.

The third line of the [body] config section defines the CSS options the User can customize in relation to this CSS Selector:

css_options = "bg_image,bg_image_fixed,bg_image_no_repeat,bg_position,bg_color"

Only the options that are listed here will be shown in the "Simple Editor View" - this allows you to restrict the options that are presented to the user in the Custom Profile Editor.  In our example here, the [body] config section controls the "background" of the page - therefore we do not need to show font or border options in this section.

Valid css_options are:

• bg_image - specify a Background Image
• bg_image_fixed - check box on whether the defined background image should "scroll" when the viewer scrolls the page, or stay stationary
• bg_image_no_repeat - check box on whether the background image should be tiled, or only shown 1 time
• bg_position - check box that if checked will "center" the background image
• bg_color - color selector to all the selecting of a background color
• border_color - color selector to all the selection of a border color
• border_style - drop down selector allow selection of border style
• border_width - drop down selector allowing selection of border width
• font_family - drop down selector allow selection of Font Family (font face)
• font_size - drop down list allowing selection of font size
• font_color - color selector to allow choosing a font color
• font_align - drop down selector allowing to select a font alignment
• font_normal - check box to force font face "normal" (i.e. remove bold or italics)
• font_italic - check box to allow selecting italic font
• font_bold - check box to allow selecting bold font
• font_underline - check box to allow adding underline to font
• font_overline - check box to allow adding overline to font
• font_blink - check box to allow adding a blink to the font
• font_line-through - check box to allow a strike-through on the font
• font_small_caps - check box to transform font into small caps
• font_uppercase - check box to force font to uppercase
• font_lowercase - check box to force font to lowercase

The fourth (and optional) line of the [body] config section defines the "titles" that will be given to each section:

css_tags    = "Image URL,Image Fixed,Image No-Repeat,Image Centered,Background Color"

These css_tags must be in the exact same order as the css_options, otherwise the tags will not appear corresponding to the proper css_option.

If you are running a multilingual Jamroom site, and would like to have the css_tags show up in the language the veiwer has selected in their Profile, you can use language "key words" instead of text, and Jamroom will use the appropriate $language entry as found in the language file.  For example, if your css_tags line looked like this:

css_tags    = "language_css_1,language_css_2,language_css_3,language_css_4,language_css_5"

Then the Tags that would be used would correspond to the following entries in the jamroom/language/english.lang.php file (or whatever language the user is using):

$language['css'][1] = 'Image URL';
$language['css'][2] = 'Image Fixed';
$language['css'][3] = 'Image No-Repeat';
$language['css'][4] = 'Image Centered';
$language['css'][5] = 'Background Color';

When the user clicks on the "Customize Your Site" link in the artist/member menu, they would in turn see this:

As you can see, the [body] config section has created a Custom Editor "section" that lets the user define what has been allowed.

You will want to create a config section for each CSS selector that you want your users to be able to customize within your Profile Theme.

Updating your Profile Theme's Header Templates

There is one last piece that now must be put in place for your profile to "see" that it now allows customizations, and to include any custom CSS File that is created.  This is handled by the {jr_custom_skin} Template function:

You will need to add this code into your theme_header.tpl file (or whatever your profile theme's header template is called) - you will also need to add it in wherever there is a <head> section in any of your templates (i.e. lyrics, info popups) - basically anywhere there is "start of the page" HTML.  Here's the theme_header.tpl file from the Jamroom "Sage" theme as an example:

If you do not add the {jr_custom_skin} template function, the custom style will not work.