Unanswered topics in Get Satisfaction tagged with satisfaction faq

It's really quite easy to change the look-and-feel of your Help Center, though it may not be immediately obvious how to navigate the files. I'll try to make it simple to wrap your head around what's going on.

I'm going to assume you've downloaded and installed your Help Center, and it's running with all the "factory settings." I'll refer to the root directory as helpcenter. The standard issue theme is located in helpcenter/themes/default. It holds all the css and templates that are used. (Note that while there is an images directory in that path for theme-specific images, all basic images are contained in helpcenter/images)

You can customize the visual styling of your Help Center to an incredible degree with CSS alone. The base stylesheet is style.css, which styles the bread and butter components that you probably don't want to change, at least not to start. This stylesheet also links to "sprinkles_default.css" which contains styles for the elements that you're likely to want to change from a branding standpoint (colors, typography, header, sidebar, footer, forms). To quickly get a feel for what this stylesheet controls you can flip these two lines:

/*@import url('sprinkles_envy.css');*/
@import url('sprinkles_default.css');

Just uncomment the first line and comment out the second one. Now reload your Help Center to see the effects. Nifty, eh? Okay, now change it back so the following descriptions make sense.

If you're familiar with CSS you should recognize the landscape when you open up sprinkles_default.css. This isn't a CSS tutorial so I won't describe exactly how to achieve various effects, but it is reasonably well commented for finding your way around. However, the code at the top of the stylesheet bears some explanation.

In order to make it easy to change the layout and number of columns we borrowed code from Andy Skelton and Scott Allan Wallick's Sandbox Wordpress Theme. With their system all you need to do is uncomment the line that corresponds to the layout you want. So in the default setting we're using 2 columns with the sidebar on the right, shown below:

/* Two-column with sidebar on right */
@import url('templates/sandbox-layouts/2c-r.css');
/* Two-column with sidebar on left */
/*@import url('templates/sandbox-layouts/2c-l.css');*/
/* Three-column with sidebars on left */
/*@import url('templates/sandbox-layouts/3c-l.css');*/
/* Three-column with sidebars on right */
/*@import url('templates/sandbox-layouts/3c-r.css');*/
/* Three-column with content in the center */
/*@import url('templates/sandbox-layouts/3c-b.css');*/
/* One-column with content in the center */
/*@import url('templates/sandbox-layouts/1c-b.css');*/

To change this to three columns with two sidebars on the left you'd comment out the current line and uncomment this one:

@import url('templates/sandbox-layouts/3c-l.css');

This system works because the sidebar template (sidebar.t) breaks the sidebar content into two parts defined by ids called "primary" and "secondary". You could hack that template to further customize the layout.

You should be able to get dramatic effects with just editing this one CSS file.

-----
If you want to really edit the contents or structure of the pages you can create a whole new theme. You can start by copying the default theme, naming it something meaningful to you. You'd end up with something like this: helpcenter/themes/custom. In order to use this new theme rather than default, open up helpcenter/Sprinkles.php with a text editor and edit the path on this line:

$smarty->template_dir = $sprinkles_dir . '/themes/default/templates/';

In the case above we'd just change the word "default" to "custom".

The templates themselves use a PHP templating system called Smarty [http://smarty.net]. This allows us to keep the arcane php code out of the html, replacing it with the simpler Smarty code that is used inside curly brackets like this: {smarty_code}. There are templates for both pages and page objects like header, footer and sidebar. When a page object needs to be displayed inside a page template it is called with a bit of code that looks like this:

{include file="template_name.t"}

The template names match the url for the page you're on. So if you want to edit the contents or layout of http://help.YOURDOMAIN.com/helpstart.php you would edit themes/custom/helpstart.t and any page objects that are linked inside it.

When you see a reply you like or think is useful, you can click the "Mark as useful" link to give it a star.



Once a reply has received the required amout of stars it will be posted at the top of the conversation as a "People's Pick".