Note: This tutorial is for designers who appreciate full control over their design on a front-end code level. If you would rather stick to photoshop or fireworks mockups, we can take your documents and do the code for you. However if you're comfortable with HTML and CSS, the following information is all you need to know to design a Servee-integrated site.
Servee was built to get out of the designer's way and let you code how you want to. However because of the transparency of the admin interface, there are a couple of minor requirements in how you build your markup and CSS structure. Following these two guidelines will ensure a seamless experience for your clients as they edit their site content.
You can pull this into your main CSS file with an @import command or a link in the head of the markup. Either way, that file does two things. First, it is pulled into the transparent i-frame that the text editor places on the content areas of your site. This ensures that when your clients are editing their site, it looks just like the live version of their site.
The second thing this file does is populate the Styles drop-down choices from the text editor. This menu pulls the styles from the standard block-level elements, and it also pulls all of the classes from the typography.css file on a contextual basis depending on the items you wish to apply styles to. For example, say you have the following code in your typography.css page:
p.green{ ... }
h2.red{ ... }
.yellow{ ... }
Then if you have paragraph text selected, .green and .yellow will appear in the styles menu, but not red. if you have an H2 selected, red and yellow will appear, but not green. Either way, all of these styles will be displayed correctly in the content area of your site so that it looks just like the live version. If you have classes that you don't want to muddy the Styles menu with, simply put them in your screen.css file.
If you have a reset.css file, that will be pulled into the text editor i-frame as well.
This is good standard practice for SEO anyway, but we make it a requirement. If you must use images, that can be achieved with image replacement and a little bit of jquery to add classes to individual menu items. (For an example of this, view source on this page. Both the tabs at the top and the subnav in the sidebar are built dynamically in ULs).
Also note that Servee doesn't require you to use just one navigation menu. This is a feature that many of our competetors don't offer without a lot of workarounds. If you want to build a top-level menu on the top of the site, and a second- and third-level menu in the sidebar, you can. For an example of this, check out the sidebar on this site.
Your markup is ready for Servee. You should know though that we push a couple of things into your header automatically. Every Servee site comes linked with the google code instance of JQuery, as well as the JQuery plugin Thickbox. You can override Thickbox with any other javascript or flash image gallery, but we have it installed as a default.
Step two: Get into the FTP.When you set up your servee site, you created a username and password. In addition to getting you into yoursite.com/admin, this username and password combination gets you into the FTP backend of your site. Lets take a look at the file structure:
1. Templates: This is where your templates are stored. You can save over our default template or create as many other folders as you want.
2. Resources: If you upload files using the Servee File Manager or Media Dialog, this is where they go. Each image that is uploaded also has an associated thumbnail.
3. DisplayRules: This is where our micro-templates (called display rules) go. You can use a template for different kinds of pages. Depending on the type of page (standard, blog, or calendar, for example), different content is displayed. These rules describe those displays. We'll discuss how to edit displary rules later.
4. Everything else: Variables.php and index.php are required, but created dynamcially. You don't need to worry about those. The admin folder is just an alias to our system, and you don't have access to edit any of that. Favicon.ico ... is a favicon. You're welcome to replace it (You can turn a gif or png to a favicon here.)
To follow along with this section, download the default template for your site. I'll explain what each tag does, and you can then add them to your own design. First, lets look at the body of the document:
This document uses all of the available Servee content tags, but the only one that is absolutely necessary is the page: content tag (E.). You can recognize a servee tag by the "carrot-percent" wrapper. The other optional tags in this document provide additional flexibility within the admin interface:
A. site: root. Use this tag to display the raw URL of the site root. This tag is especially useful when designing a template to be used across multiple sites. You can use this tag when working on a temporary URL so you don't have to change your markup when it goes live. (All sites are initially set up as temporary URLs, like yoursite.sites.servee.com, so you can build the site and push it to a live domain later.)
B. site: name. When you set up a site, you can give it a name in the advanced admin section of Servee. Until that is set, the name of your site is "Change me in the settings!" Once you have named your site, you can use that tag anywhere on your site. Again, this is mostly useful when using a template across multiple sites.
C. site: navigation. This tag has some very versatile display options which we will discuss more thoroughly in a later post. When presented in its default form shown here, it displays the navigation of the site as a multi-tiered unordered list, with an ID of "navigation" and a class of "nav."
D. location: sidebar (and F. location: footer). Locations are places where you want to give your clients the ability to edit content on a template-level instead of just on a page-level. In this case, I want to give the ability to edit the sidebar text and footer text. Rather than put all of that information right in the template, I've added this location so it can be entered using the template editor of Servee. You can name these whatever you want (for example, location: anotherName), and you can have as many locations in your template as you need.
E. page: content. This is where the main content of your site goes. The text editor will retrieve typography.css and reset.css from the root directory of the template, and then stretch to fill the space alotted in the containing block-level element. (In this case, it's div id='content'.)
Now, lets take a look at the <head> of the document:
The only Servee tags used here are page: title (A.) and site: name (B.). These have been placed in the title attribute of the page. This is so the title of each page is dynamically created and page-specific, just how search engines like it. The page title is pulled from the headline field on each content page, so that can be changed at any time.
Otherwise, this particular site uses the navigation Jquery plugin Superfish, and lines 7-14 (C.) show that option.
Finally, if title and subtitle fields are left blank in the content pages, Line 15 (D.) will remove the empty tags that they leave behind.
As far as the templates go, that's all there is to it. From here, there are default options to display blogs, calendars, and image galleries. If you'd like to learn how to edit those, continue to step four.
Take a look around your default site setup (or see this one). Notice that pages display content differently. Blogs look different from calendars, which look different from standard pages. We have a basic set of defaults for blogs and calendars, but you can edit these however you want. For a good example of very customized blog and calendar display options, visit akroncitycouncil.org:
Technically, this is a normal blog page. It contains the main 'news' blog in the content area (A.), but the sidebar contains displays for several calendars (B. and C.) and a second blog, the 'featured councilperson.' They all display very differently:
A. The homepage displays the first paragraph of the two most recent posts, and then three more headlines in a smaller font.
B. The Council Meetings calendar displays the time and date, and adds a 'redtext' class to the date.
C. The Committee Meetings calendar displays the above, and also the name of the meeting that is to take place.
D. The "Featured Councilperson" blog preview displays a preview image, along with the name and ward of the council member. This spot displays a random post on each page refresh.
All of these things are possible with Servee Display Rules. If you already have the markup done, you're halfway there.
First, lets recreate the main blog page display rule on the Akron City Council homepage. Static markup for that section looks like this:
<div class="clearfix postWrap">
<p class="articleDate">07/29/2009</p>
<h3><a href="http://www.akroncitycouncil.org/News/entry/Voters_to_decide_if_mayoral_recall_threshold_too_low/">Voters to decide if mayoral recall threshold too low</a></h3>
<p>On November 3, Akron voters will be asked to decide if anyone seeking to remove a mayor from office should take on a heavier burden to prove that a recall truly is the will of the people.</p>
</div><div class="clearfix postWrap">
<p class="articleDate">07/29/2009</p><h3 class="list"><a href="http://www.akroncitycouncil.org/News/entry/Tennis_courts_pavilion_to_replace_basketball_courts_at_Firestone_Park_Community_Center/">Tennis courts, pavilion to replace basketball courts at Firestone Park Community Center</a></h3>
<p>Ward 7 - The basketball courts at the Firestone Park Community center will be gone for good, but in their place will be refurbished tennis courts and a new outdoor pavilion on the community center grounds.</p>
</div><div class="clearfix">
<p class="articleDate">07/29/2009</p>
<h6 class="endTease-sm"><a href="http://www.akroncitycouncil.org/News/entry/Council_puts_the_brakes_on_longer_trucks/">Council puts the brakes on longer trucks</a></h6>
</div><div class="clearfix">
<p class="articleDate">07/21/2009</p>
<h6 class="endTease-sm"><a href="http://www.akroncitycouncil.org/News/entry/Council_poised_to_let_voters_decide_on_raising_recall_requirements/">Council poised to let voters decide on raising recall requirements</a></h6>
</div><div class="clearfix">
<p class="articleDate">07/21/2009</p>
<h6 class="endTease-sm"><a href="http://www.akroncitycouncil.org/News/entry/Council_to_give_up_raises_amid_city_budget_woes/">Council to give up raises amid city budget woes</a></h6>
</div><p class="endTease-sm"><a href="/News/archive/">News Archives</a></p>
Copy this markup to your clipboard. From here If you'd like to work in your normal code editor, you're welcome to. All of these files are located in the displayRules folder of your FTP backend. However, there's an easier way that doesn't involve learning more tags. Go to the advanced editor of your site, and click on "Blog Rules" (A.).
This is the Display Rule Editor. Choose the display rule you wish to edit (B.). If you would like to create a new rule, choose "new rule" and give it a new title (C.) For now, choose "Homepage headlines display.html."
Display rules have slightly different markup from normal Servee tags. Instead of a carrot-percent, display rules use " {% -- %} " wrappers. Each of the blog properties (E.) are a small bit of info that can be displayed in your blog. The rule shown here uses the permalink, title, and teaser properties. In English, the above rule says "Display all blog titles in an H4 element, make the headline link to an article, and display the first paragraph of the article as teaser text."
To make this more complicated like the city council site, delete the contents from that window and paste in the static markup from the Akron City Council homepage.
Now for the first entry, replace the actual content with the appropriate Servee tags, so that this:
<div class="clearfix postWrap">
<p class="articleDate">07/29/2009</p><h3><a href="http://www.akroncitycouncil.org/News/entry/Voters_to_decide_if_mayoral_recall_threshold_too_low/">Voters to decide if mayoral recall threshold too low</a></h3>
<p>On November 3, Akron voters will be asked to decide if anyone seeking to remove a mayor from office should take on a heavier burden to prove that a recall truly is the will of the people.</p>
</div>
becomes this:
<div class="clearfix postWrap">
<p class="articleDate">{% publishTime "d/j/Y" %}</p>
<h3><a href="{% permalink %}">{% title %}</a></h3>
{% teaser "1pp" %}
</div>
Take a look at the date ( {% publishTime %} ). You can format the date in any format. "d/j/Y" is the format displayed on the Akron City Council site, but you can create any date or time combination using this standard timestamp reference. Otherwise, you can change the {% teaser "1pp" %} tag to any number of paragraphs.
Next, since there will be different displays for different blog entries, wrap a labeled comment around the code that you have so far. This will tell the blog preview where one entry ends and the next one begins. Since you want the same display twice, copy it:
<!--entry 1-->
<div class="clearfix postWrap">
<p class="articleDate">{% publishTime "Y-m-d" %}</p>
<h3><a href="{% permalink %}">{% title %}</a></h3>
{% teaser "1pp" %}
</div>
<!-- end entry 1--><!--entry 2-->
<div class="clearfix postWrap">
<p class="articleDate">{% publishTime "Y-m-d" %}</p>
<h3><a href="{% permalink %}">{% title %}</a></h3>
{% teaser "1pp" %}
</div>
<!-- end entry 2-->
The last three entries are the same, so we'll wrap one of those with a comment labeled "entry n." This allows us to define how many entries are displayed elsewhere. To finish it off, we'll put a link to the archives at the bottom, below all of the entries. Your final display rule will look like this:
<!--entry 1-->
<div class="clearfix postWrap">
<p class="articleDate">{% publishTime "Y-m-d" %}</p>
<h3><a href="{% permalink %}">{% title %}</a></h3>
{% teaser "1pp" %}
</div>
<!-- end entry 1--><!--entry 2-->
<div class="clearfix postWrap">
<p class="articleDate">{% publishTime "Y-m-d" %}</p>
<h3><a href="{% permalink %}">{% title %}</a></h3>
{% teaser "1pp" %}
</div>
<!-- end entry 2--><!--entry n-->
<div class="clearfix">
<p class="articleDate">{% publishTime "Y-m-d" %}</p>
<h6 class="endTease-sm"><a href="{% permalink %}">{% title %}</a></h6>
</div>
<!-- end entry n--><p class="endTease-sm"><a href="/News/archive/">News Archives</a></p>
Click "Save Snippet." Now you have a display rule. This process is the same whether you are creating displays for blogs, calendars, image galleries, or standard content pages.
Now that you have a display rule, go back to the blog page on the admin side of your site. In your content area, you'll see a line of code that looks like this:
blog: newest. show=3, blog ident=Blog, display rule=List display
This is where you can change additional options regarding how the blog displays. We have left these options out of the display rules so that your clients can change the number of blog entries that display at any given time. In English, the code above says "Display a blog: Show the newest entry as the first on the list. Only show the three latest entries. Show entries in the blog with the URL '/Blog,' and use the display rule 'List Display.'"
To use your rule, type in "Homepage headlines display" in place of "List display." Click Publish Edits, and check out your results on the live site.
That's it! If you have any questions, feel free to contact us directly. We're happy to help.