For those of you that are interested in going above and beyond regular CSS when you create an OnSugar theme, here are some fancier options.
User Customization
Adding user customization to your theme gives users to ability to change the default attributes of your theme, like fonts, colors, etc. The default OnSugar theme, for example, is fully customizable.
To add user customization to your theme, either create a new theme, or click edit on the theme you’re currently building. In the Info tab, click “Make this theme customizable.” This will pop-open a window where you will define those attributes you’d like to be customizable, also known as xml customizations.
What format should my customizations be in?
When the box pops open you need to make sure your xml looks like this:
<customization>
<attribute id="commenticon" selector=".postmetadata li.postcomments a" type="background" label="Date Bubble" value="image=url(http://media.onsugar.com/files/upl1/29/297176/24_2008/icon_comments.gif)" width="17" height="14" uisection="Main"/>
<attribute id="link_color" selector="a, a:hover, a:visited, .header small" type="color" label="Links" value="#E93B91" uisection="Main"/>
<attribute id="header_text" selector=".header h1, .header h1 a:link, .header h1 a:visited, .header h1 a:hover, .header h1 a" type="font" label="Header Text" value="size=22px;face=Trebuchet;color=#ffffff;bold=true; italic=false" uisection="Header"/>
<attribute id="blog_title" selector="#header a" type="link" label="Site Title" value="face=Georgia;size=60px;color=#333333;visitedcolor=#333333;hovercolor=#333333; hoverunderline=true; visitedunderline=false" uisection="Main"/></customization>
Each attribute line controls a different color, font, etc. You can add as many as you need. The above code shows examples of the four main types.
What does each value in the attribute line control?
- Id: Each line must have a unique id. This can be whatever you’d like, however you cannot have any spaces.
- Selector: These are the css controls you are allowing folks to overwrite with customizations. You can put as many selectors into the field as necessary, be sure to separate each one with a comma. Note, you must not have any extra spaces in this field, else your customizations will not appear to work.
- Type: These are different attributes you can change. You can choose from "color", "background-color", "border-color", "background", "font", and "link".
- Label: This is what the user will see. You can only use alphanumberic characters and spaces (no %, & or -, etc.). Attributes do not need to have unique labels.
- Value: Each type has a different set of values. These are the default ones for your theme.
- Color, Background-Color, and Border-Color: The value is in a hex value, including the # sign. Example: value="#FF0000"
- Background: The value is either a background image, or a hex value, including the # sign. Example: value="image=url(http://www.onsugar.com/image.gif)"
- Font: The value for font is a semicolon-separated set of key value pairs. The order is not important, and all key values are optional. Read more about possible font values below.*
- Link: This is how you change the link fonts, as well as colors for various hover states. Read more about possible link values below.
- Width and Height: Optional, mostly used when setting a background image size. Omitting width and height will allow user to select any size image. Keeping them in will force them to use a similarly-proportioned image.
- UiSecton: This is an optional field to help organize your attributes. If you want all Footer colors to go together you could use the syntax: uisection="Footer" - All attributes tagged with the same uisection will be grouped together.
What are the font value choices?
The value for fonts can be broken into the following parts, and need to be separated by a semicolon.
- Size: Insert a size in px. The default is 12px
- Face: Select from Arial, Arial Black, Comic Sans, Courier, Georgia, Lucida Console, Lucida Grande, Palatino, Tahoma, Times, Trebuchet, Verdana. The default is Arial.
- Color: A css hex value, including # sign, or none (which means transparent)
- Bold: Choose true or false, the default is false.
- Italic: Choose true or false, the default is false.
Here is an example of font value: value="size=22px;face=Trebuchet;color=#ffffff;bold=true; italic=false"
What are the link value choices?
The value for links are the same as the above font link choices, but with several additional choices. They are:
- Visitedcolor: A css hex value, including # sign, default is black.
- Visitedunderline: Choose true or false, the default is false.
- Hovercolor: A css hex value, including # sign, default is black.
- Hoverunderline: Choose true or false, the default is false.
Here is an example of font value: value="face=Georgia;size=60px;color=#333333;visitedcolor=#333333;hovercolor=#333333; hoverunderline=true; visitedunderline=false"
How do I change the order the attributes appear in the customizer?
The fields always go Colors, Backgrounds, then Fonts. Then they display in the order they are written. To adjust the order inside each category, simply rearrange your attribute code.
Will these customizable variables override things marked !important?
No. Please note, if you have a css selector that has been marked !important in your css code, the customizations will not override the setting. To ensure your customizations work, make sure you remove the !important.
I am able to use the customizer, but the changes don't show up until I hit save. Why is that?
To ensure that you see your customizations as they happen, make sure that there are not any spaces in your values. For example if you have selector="a " - you will not be able to see the changes until you save. To fix the problem remove the extra space between the a and the ".
My background image isn't repeating, why is that?
To repeat controls are set in the actual css. If you would like the background to repeat, you will have to make sure that the position and repeat status are set to your liking on that end. It is not something the customizer can control.
