Can I create my own theme?
You can create a theme by clicking on the “Create” tab on the top of the Themes Page. When you click “Create” you will then add all of your theme settings first.  Once you add your settings and click "Save Theme," you will then be taken to our custom CSS editor. Here you can edit your css, page template, post template and comment display.

What are the different tabs in the theme editor?
The tab are Info, CSS, Page, Comment, and Post

• Info: This shows the theme name, description, thumbnail, and shared settings.
• CSS: All of your CSS additions or edits can be done here.
• Page: Here is where you can edit the page template. This is where you can add third party analytics code, meta tags, etc.
• Comment: Here is where you can find the template for how comments are displayed.
• Post: This is where the individual post template is. Here you can change how your content is being displayed.

How do I upload an image for my templates (advanced)?
To upload an image, click on the yellow icon next to the Post tab. Here you can upload your image like you would for a post. Once you have it selected, instead of seeing the image, you will see a popup with the image url. You can then cut/paste this into your theme templates.

Can I customize one of the featured themes?
You can do basic customizations by setting themes that are marked Customizable. If you'd like to customize themes that are not marked customizable, you will first need to make your own copy. Once you do, you can then "Edit" it as you see fit.

None of the themes have a “Edit” link on them, what do I do?
In order to customize a theme, you need to have one that belongs to you. You can do this by creating a new theme, or copying an existing one. To copy a theme click on the "Copy" link in the theme information.

Can I share my theme with other users?
You can share your theme with other users, just make sure that the “Share Theme” box is checked when you save the theme. Sharing your theme means that others will be able to copy it.

I don’t want other users to have access to my theme. Can I stop others from using it?
You can decide to stop allowing others to use your theme by unchecking the “Share Theme” box on the Theme Edit page.

How can I make my theme a featured theme?
If you think your theme is feature worthy, drop us a line at help@onsugar.com. We're always looking for new themes to share with everyone.

How do I change my theme?
You can change your layout by clicking on the “Themes” link in your site dropdown menu. You will then choose your desired theme and click “Set” to start using that theme.

What are the different tabs on the theme page?
The tabs are Active, Featured, Shared, Yours, and Create.

• Active shows you what them you're currently using.
• Featured showcases themes that we’ve selected. These themes will never be deleted and will always be shared.
• Shared are themes that other onSugar members have created and shared. You must copy these before you can use them.
• Yours are themes that you’ve created or copied.
• The Create tab will allow you to make a theme from scratch.

Can I customize my theme?
Many of our themes have the ability for basic customization (colors, fonts, etc.). When selecting a theme, find one that has the "Customizable" gray bar across the image.

How do I customize my theme?
Once you've selected a customizable theme, click "Set." Once you do, you will see color and font selectors on the left hand side. Note: Each customizable theme has different options. Some allow you to change everything, while others only allow you to add headers and change colors. The different options will appear in the left hand side of the customizable theme. Be sure to hit "Save" in order to have your changes stick.

I want to do more than the basic customizations. What should I do?
For more advanced customizations, please see our post on Creating a Theme.

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.