OnSugar Help

Themes on OnSugar

Allison — Mon, 16 Mar 2009 17:20:00 -0700

You have a number of options when creating themes on OnSugar. You can...

Choose a theme from over 40 OnSugar default themes
Customize an OnSugar default theme
Create your own theme, either from scratch or by making a copy of an existing theme

Choose an OnSugar default theme for your blog:

1. Click the "Themes" link in your site dropdown menu.
2. Next, click on the "Featured" tab to see the OnSugar default themes.
3. Click "Set" to apply that theme to your blog.

What are the different tabs in the theme editor?
You’ll notice there are 5 different tabs on the theme view. These are:

Active: This tab shows you what theme you're currently using.
Featured: This tab displays the Featured OnSugar default themes.
Shared: This tab displays shared themes created by the OnSugar community.
Yours: This tab displays themes you've created or copied. (Advanced)
Create: This tab allows you to create a theme from scratch. (Advanced)

Customizing an existing OnSugar theme
Many of our OnSugar default themes are marked “Customizable” This means that you can easily change the fonts, colors, graphics and more aspects of the theme, without delving into the CSS. 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.

Customize a Theme:

1. Select "Themes" from your site dropdown menu
By default you’ll see the active theme for your blog. If you’re on the OnSugar default theme, you’ll see the Customizations panel immediately to the left. If not, you’ll need to go the “Featured” tab and select a theme that has the “Customizable” label on it by clicking “Set.”

2. Make changes to the theme
Change colors, fonts, upload your own graphics and more. You can see all these changes in the live preview to your right.

3. Click “Save” at the bottom of the customization panel to save your changes.

Creating your own theme
There are two ways to create your own theme on OnSugar; you may copy an existing OnSugar theme and create a new theme from that, or you may create one from scratch.

To Copy a Theme:

1. Click the “Copy” link from beneath the theme description.
A copy of that theme will then appear under the “Yours” tab.

2. Click “Edit” beneath the description of the theme.
In the theme editor view, you’ll see 5 tabs, a picture icon and a pink arrow. The 5 tabs are:

Info: This tab displays your theme name, description, thumbnail, and shared settings. There is also a link here to add customization attributes to your theme.
CSS: All of your CSS additions or edits will be done here.
Page: This tab contains the page template. You can add third party analytics code, meta tags, etc. here.
Comments: This tab contains the template for how comments are displayed.
Post: This tab contains the template for the individual post.

3. Make desired changes and click "Save"

To Create a Theme from Scratch:
Click the "Create" tab on the far right hand side of the top menu.

Directly uploading graphics for your theme:
If you’d like to directly upload graphics for your theme, click the picture icon to the right of the Post tab. Once you upload your image, you will see a popup with the image URL that you can then cut and paste into your theme template.

Expanding the CSS editing window:
If you’d like to expand your CSS window for editing, click the pink arrow on the far left side of the theme tabs.

Please see our template tags page for a list of all theme attributes on OnSugar.

Manage Your Widgets

sabs — Wed, 22 Oct 2008 16:21:15 -0700

What are widgets?
Widgets are content boxes you can add to your side column. By default, each OnSugar site comes with About Me, Followers, Latest Headlines, Popular Posts, and Latest Comments. You can edit these and/or add additional widgets to your site from the widget management page. To access that, click on the "Widgets" link in your site's drop down menu.

How do I add a widget?
To add a widget, click on the type you would like to add on the left hand column of the page labeled, "Available." Once you do this, your widget will be added to the right hand column, "Active." The added widget will also immediately appear on your site.

How do I remove a widget?
To remove a widget, click the “x” next to the widget you’d like to remove. Please note that if you used the "Text or HTML" widget to create a widget, removing it will delete it completely.

How do I rearrange my widgets?
To rearrange your widgets, simply drag and drop the boxes into the "Active" column.

When I add a widget, it asks me how many I want displayed. What does that mean?
Many of the pre-made widgets we provide publish a list of items such as latest comments, latest headlines, etc. You can edit how many of those items show up by entering a number. For example, if you choose 5 on latest headlines, then your 5 latest headlines will show up. If you don't enter a number, 10 items will appear by default.

How many widgets can I add to my site?
You can add as many widgets as you'd like!

When I create my own Text or Html widget, do I have to give it a title?
You do not have to give your widget a title. This is especially handy when adding images or ads.

How do I embed a widget from someplace else?
To embed a widget from somewhere else, click the "Text or HTML" widget in the Available column. Then before pasting the code into place, click on the "switch to Raw HTML" link below the rich text editor. This will toggle the content, and you will see your post's code. Paste the html embed code here, hit save, then drag your widget into place.

I put widgets into Column 2, but they’re not showing up on my site. What is happening?
In order for the second column of widgets to appear on your site, you need to be using a theme that accommodates it. In the featured themes section, any theme marked “3 Column” will be able to accommodate both columns.

How do I add Column 2 to my custom theme?
If you’re an advanced theme developer, you’ll want to know that the second sidebar can be called with {$sidebar2}.

Creating and Editing a Theme

sabs — Fri, 20 Jun 2008 16:51:24 -0700

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.

Select and Customize a Theme

sabs — Fri, 20 Jun 2008 16:24:42 -0700

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.

Advanced Theme Tip: User Customization

sabs — Wed, 18 Jun 2008 11:06:38 -0700

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.