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.

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.

OnSugar Help

Themes on OnSugar

Creating and Editing a Theme