CMS Made Simple (CMSMS) Quick Reference Guide

For times-up.org Version 1.0 - by Roger M., January 2007. Editorial support: Patty H., Hannah B.
CMSMS is free opensource CMS (content management system) software that utilizes PHP scripting and a MySQL database. No knowledge of HTML (the coding that builds webpages) is necessary to edit or add content to the website - though a little is helpful. Intermediate computer skills are required for working on the website. CMSMS website: http://www.cmsmadesimple.org CMSMS user documentation: http://wiki.cmsmadesimple.org/index.php/User_Handbook Times-up.org administration login page: http://times-up.org/admin IMPORTANT: Mac users should use Mozilla Firefox browser to edit the site. It's best to use the latest version of whichever browser you choose when editing the website. TIP: Once logged in to Admin, you can use the Firefox "tabs" feature to open several copies of the admin interface in order to access several things at once. Also, open up a tab or additional browser window to view the Times Up "front end" (actual website) so that you can see the changes on the page you are working on. (You must "reload/refresh" the page each time changes are applied in order to see them). IMPORTANT: Remember to LOG OUT when finished working on the site. This guide is in three sections: 1) Editing and Creating pages 2) Times Up Home Page 3) Advanced Admin Functions

1) Editing and Creating pages:

Except for the gallery and calendar, the website's pages are found in the admin "content" section: content >> pages. The gallery and calendar are not covered in this guide. Upon opening the "Current Pages" page you will see the page list for the entire site with its main section landing pages, sub-section landing pages and subsequent individual pages. (A "landing" page is the main/first page of a section or sub-section). There are links at the bottom of the list that allow you to expand or collapse the entire list for easier viewing. Notice the numbers to the left of each page title. They can help you see how pages and sections are grouped. To view pages within a section, click on the right pointing triangle to the left of the section landing page title to expand the list. One of the main advantages of CMSMS is that it very easy to keep the site content organized. One can create as many sections and levels of subsections as desired in which to sort pages and it's very easy to move pages and sections around. When adding a new page to an area of the site it will be added at the bottom of that section of the list. You can then move it up in the order with the blue arrows in the "move" column of the page list or use the fancy drag-and-move feature reachable by clicking on the "Reorder Pages" link at the top or bottom of the page list.

Publishing and Un-Publishing a page:

A page or home page news item is only visible to the public when it is "active" - a step that takes place when creating a page, OR by checking the "active" icon next to the item in the page list (content >> pages). IMPORTANT: It isn't necessary to delete an item when removing it from public view. You can simply de-activate it (or, in the case of news items switch it to "draft"), thus leaving it in the database for possible further use and refinement.

Edit an existing page:

Find the page in the page list and click on its title to open it and arrive at the "Edit Content" page. Down the page a bit you should see the page's content inside the " WYSIWYG *" editing window. (*"what you see is what you get" - a term used for helpful software). The WYSIWYG editor has many features. Hover the mouse cursor over the various buttons and text should pop up to tell you what each does. Refer to the creating a page section below for more information on working on pages. TIP: see the note below under "Main Tab" regarding the "apply" button.

Creating a page:
Remember: There is extensive instruction and documentation at http://cmsmadesimple.org. Click the "help" link at the top of the "Edit Content" or any other admin page to be taken directly to the specific information regarding that page. To create a new page click the "Add New Content" link at the top or bottom of the list of pages. You will arrive at the "Add New Content" page. Below are the page attributes you'll need to address. Upon the opening of the " Add New Content " page notice the 3 tabs near the top left of the page: - "Main" tab: Where the bulk of the page building gets done. - "Options" tab: Where a few important, more technical aspects of the page are addressed. - "Preview" tab: Where you can preview your page before it is "active" (published). Options tab: "Active" checkbox: You may un-check this box to keep the page not visible to the public while you work on it even after you've hit the "submit" or "apply" button. "Show in Menu" checkbox: There are some active pages that may cause confusion if shown in the site navigation (such as the search result page), in which case this box is unchecked. "Page Alias" field: IMPORTANT. This will be the distinct part of a page's URL. (Example: The "your-page" part of "index.php?page=your-page"). By default, upon submitting the page the CMS will take your page title text from the "main" tab, make it all lower case, and put dashes between the words to create this URL. But if your title text is rather long, it's better for you to enter a shorter version here manually. The page alias should be all lower case with dashes between words if there is more than one word. Example: critical-mass. ALSO IMPORTANT: Pages in the "PRESS CENTER" section follow a very specific naming convention for the page alias. Please study the various types of press pages and their alias conventions and follow their example. An easy way to see these URLs is to go to the Site Map (a link at the very bottom of the site) and hover the mouse over the Press page links to see the URL show up in the status bar at the bottom of your browser. (You may need to turn the status bar feature on in your browser preferences). "Metadata" field: You may leave this field blank. You may construct custom meta tags for your page here, but this is not necessary.
2

"Description" field: You may leave this blank, as there is already a default page title attribute. If you know what you're doing, filling in a custom title attribute may help with the page's search engine optimization. "Tab Index" and "Access Key" fields: You may leave these blank. See the CMSMS site for more info on these.

Preview tab: Use this tab to preview your page if is not "active" (live). Once the page is active it is better to have a separate browser window (or tab if using Firefox) open to view the live page because it's a much more convenient way to work and the site formatting is more likely to be complete.

Main tab:
This is where you build your page. NOTE: When done creating your page click the "Submit" button at the top or bottom of the "Add New Content" page to save your work. But when revising the page it is more convenient to use the "Apply" button to apply your changes because this leaves the "Edit Content page" open while you check the page. That way you don't have to re-enter the Edit Content page if you want to make additional changes. "Content Type" pulldown menu: The default selection is "content" which is used for creating all pages and is what you'll use 99% of the time. "Link", "SectionHeader", "Separator" all refer to creating elements that appear in the website's navigation menus (left side and bottom of site). "Link" is used when wanting to insert a link in the navigation that points to a pre-existing page or file. "SectionHeader" and "Separator" are non-clickable menu elements. "Title" field: This is the large title text that will appear just above the content of your new page. It is also the text used to identify the page in the long content list on admin "pages" page. Keep it brief. "Menu Text" field: KEEP THIS text BRIEF, yet informative. This is the text that appears in the website's left side menu. Use "title case" - capitalize first letter of each word (only). ONLY first level pages with no "parent" use all caps. IMPORTANT: Menu text for the "Press Center" section pages follows a specific protocol. Study their text in the menu and follow their example. "Parent" pulldown menu: choose the section/subsection under which the page belongs. The page will be added after any pre-existing pages in that section and automatically appear in the site navigation menus if "Show in Menu" is checked on the "Options" tab. You many re-order the pages after the page has been created as described earlier. "Template" pulldown menu: - main: All your pages will use this template unless you're creating a new section or sub-section. - home: You'll never use this template. It's a one-time template that builds the homepage. - landing: For new section or subsection pages only. It will automatically insert an automated section menu on the page below whatever content you include. - press_release: For press release pages only. (Not for "press coverage" or other pages). Inserts the Times Up press release header above the content you enter. - search_res: You'll never use this template. It's a one-time template that builds the search results page. "Content": Depending on your user preferences setting there will be either a WYSIWYG editor requiring no HTML knowledge to use or an empty text entry field in which to enter raw HTML
3

The WYSIWYG editor:

The WYSIWYG editor works much like MSWord or similar programs. Hover the mouse cursor over each button to see text pop up that will describe its function. The WYSIWYG can be turned off under: my preferences >> user preferences - but don't do this if you are using a shared login use the "source" feature instead (see below). See http://wiki.fckeditor.net/UsersGuide for more detailed information on the WYSIWYG editor than is offered here. IMPORTANT: a lot of the WYSIWYG features/buttons will get you in trouble if you don't understand what they are for. It's best to keep things simple. NOTE: Please avoid the "Insert Horizontal Line" option. They are so ugly! VERY IMPORTANT: The website's formatting and layout is organized in a central "stylesheet." which gives the site a unified feel. This makes the site look good and keeps it easier to follow. It's best to not apply a lot of formatting (text sizes and colors etc) - keep things simple! Remember that you may not see all the formatting that's being applied to the page until you preview it on the public site. There is some CSS stylesheet info below in section 3 for advanced users. The "Source" button allows you to toggle between editing the raw HTML code and using the WYSIWYG. IMPORTANT: When copying and pasting text, "plain text" is best. Content from MSWord and other such sources have hidden formatting that could mess things up for you. One way to create plain text is to first "clean" the content by first pasting it into a plain text program such as "notepad" on a PC or "simpletext" on a Mac. Fortunately the WYSIWYG has a "paste as plain text" button in the top row, so you can clean the text with that. Right next to that button it has a "Paste From Word" button that might work ok for you as well. It seems to clean up the MSWord content and keep essential formatting with out creating too much of a mess (in the HTML coding). The "Remove Format" button (eraser icon in top row) will strip unwanted formatting (bold, type size etc) from text that you highlight. Creating links: In the 3rd row of buttons is the very handy "Insert/Edit CMSMS link" button (orange on top with links in a chain). After highlighting the text that you want to link, you can click on this button and get a pulldown menu that allows you to link to any page within the site. Right next to that button is the generic "Insert/Edit link" and "Remove link" buttons. Highlight some text to apply them. REMEMBER: when creating links to outside websites, click on the "target" tab of the link pop up window and chose "New Window (_blank)" from the pulldown menu. Creating anchor links (links within a page): Highlight the targeted text on the page and then click the "Insert/Edit anchor" button (looks like an anchor). Create a "name" (any short word with no spaces) for the targeted text. Click "ok." Then highlight the text that you want people to click on in order to jump to that target area and click the "Insert/Edit link" button. Chose "Anchor on this page" from the "Link Type" pulldown menu. Then select the targeted area's 'name' from the "By Anchor Name" pulldown menu. Click "ok." Inserting images: (IMPORTANT: also read "image file guidelines" section below). Place the mouse cursor within the page text where you'll want to insert an image. If you want the image to sit to left of right of the content with the text "wrapping" around it, place the cursor at the beginning of the section of text that will be wrapping around the picture. Click on the "Insert/Edit image" button. (To the right of the anchor button). The "image properties" box pops up with 4 tabs. We start with the features on the "Image info" tab. - "URL": All the images from the old Times Up site are organized into directories and found by clicking the "browse server" button. The direct filepath to an image is: uploads/images/specific_directory/specific_image.jpg
4

IMPORTANT: If you are going to upload a new image(s) to use on your page, click the "browse server" button and use the upload feature at the bottom of that window. (Do not use the "Upload" tab in the image properties window). Image files need to properly named (see "image file naming" below). ALL images should go into a directory (see "Image directory organization" below). For some advanced users, Images are also uploaded using the admin "Image Manager" feature (below in section 3). - "Alternative text": A brief text description of the image. - "Width" and Height": These will have been filled in if you selected an image on the server. These dimensions should always be the actual image dimensions. Do not use these to resize an image. That should be done by editing the actual image. - "Border": Leave blank. - "Hspace", "VSpace": If after previewing the page you decide that the image needs some space between it and the text, these set the distance in pixels on the sides and top/bottom of the image (horizontal, vertical). 3 or 4 is plenty. (Also see CSS info in section 3). - "Align": Wraps the text around the image. "Right" sets the image to the right of the nearby text, "Left" to the left. Those are the main choices. Things can get messy with the other options. (Also see CSS info in section 3). - "Preview": This little window gives you an approximate preview of the image within the text. - "Link" tab: The 2nd of the 4 tabs within the image-editing window allows you to make the image clickable to another image (like when this image is a "thumbnail" linking to the full-size image), another page, or a file. Enter the URL if you know it or click the "Browse Server" button and then the "Resource Type" pulldown menu at top left to find something within the site to link the image to. The "Target" for links that go outside the site should be set to "New Window (_blank)." - "Upload" tab: DONT USE. Upload images as described above. - "Advanced" tab: Ignore all this unless you surely know what you're doing. Captions under images: This is a bit tricky. It involves working in with the raw HTML code to wrap the image "tag" with a <div> tag that references the site stylesheet. See "CSS (Stylesheet) Information" in the "advanced" section 3 below.

Image file guidelines:

IMPORTANT stuff here. Images embedded in the Times Up website pages need to not exceed certain widths (height is not as big an issue). They should be "optimized" for the web at 72dpi using PhotoShop, FireWorks or similar program. If a large image is to be displayed, it should be linked to from a smaller "thumbnail" version. Homepage images: The width of an image in the "Recent Updates" area of the homepage work best when 250 pixels or less wide (280 max) to allow text to wrap nicely around them. Other site page images: There's more room for images on the other pages of the site but it's best to keep the images within a 300 pixel width if you want text to wrap around it nicely. If you want to show off a nice big image, use a smaller thumbnail version on the page that links to the full size image. If you're not wrapping text around the image it can be as wide as 500 pixels or so.
5

Image file naming: Before you upload image files, you need to name them properly. Try to keep the name short. Use all small case letters and use underscores or dashes instead of spaces between words. In the interest of making image files easier to find once in a directory on the server, name them so they line up in a logical alphabetical order. Using a date prefix followed by a descriptive word or abbreviation works really well. When uploading a related series of image files, an additional number helps too. Use a zero in front of single digits to keep the files in order. For example, here are possible file names for a set of Critical Mass pictures: 2007-01-26_cm_01.jpg, 2007-01-26_cm_02.jpg, 2007-01-26_cm_03.jpg 2007-01-26_cm_10.jpg, 2007-01-26_cm_11.jpg etc. If using a thumbnail/full size image pair, give each file the same name with some sort of suffix for one of them. Example: 2007-01-26_cm_01.jpg , 2007-01-26_cm_01_full.jpg

Image directory (folder) organization:

IMPORTANT: If you're uploading more than just a few related pictures, go ahead and create a new directory (folder) for them. As with file naming, use all lowercase letters in the directory name but NO spaces, (Use underscores or dashes if you want to separate words in the directory name). In order to organize things even more, the directory can be inside a pre-existing directory. For example right now we have only one "critical_mass" image directory. Inside that directory we could create additional directories to sort the pictures by month, or maybe just by year.

2) Times Up Home Page (Not all CMS users have access to this area).
Updating the home page "Recent Updates" items: The items is the area are found in the "news" section of admin: content >> news. For information on the content editor see "The WYSIWYG Editor" section above.

Edit an existing news item Click on an item title to open it. You can pare down the list of items that you are viewing by selecting a specific category in the pulldown menu towards the top of the page.

Add new news item by clicking "add article." "Title": Keep it brief. We've been using all caps. This is the title text that appears above the item. Pick a "Category" that is a subcategory of the "Home" category (ex: "Home | Events'). Create a new home sub-category if you like in the "Categories" Tab of the News admin page. "Summary": If you want brief intro text to appear on the homepage followed by a "more" link to the full item, put the intro text in the "Summary" field and the rest of the item content in the "Content" field. "Content": IMPORTANT. If the entire item is brief and you want it all to appear on the home page, leave the summary field empty and enter everything into the "Content" field. "Post Date": This is the date that will appear towards the upper left of the news item. Set it to whatever you want it to be.
6

"Status" pulldown menu: "published" means the public will see it, "draft" means they won't. "Start Date": IMPORTANT. The Start Date determines the order in which items appear in the "recent updates" area of the homepage and elsewhere. Newer dates list at the top. You can adjust the hours/minutes etc of the date to order items that share the same date. Check the "Use Expiration Date" box if you want the item to automatically disappear from the site on a date that you set. The item will be de-activated (set to "draft"), but remain in the database.

Archive a news item: Open up the item by clicking on its title and select "archive" as its category. If there's no content in the "Summary" field, enter a small amount of text there. (It can come from the text in the "Content" field). If there's a large amount of text in the "Summary" field, move all but a small amount of it into the "Content" field. Upon saving, this item will be viewable in the "News Archive" page linked to in the Times Up navigation menus. The small amount of text you entered into the "summary" field will be followed by a "more" link to the rest of the text.

Other sections of the homepage are edited in the actual page called "home" reachable in the "content" section of admin: content >> pages >> HOME The introductory text above the "Recent Updates" section page is editable in the "Content" field. The content for the "Other News" section (below "Recent Updates and the donate button) is editable in the "Home_other_news" field.

Yet other parts of the homepage in the left and right columns are "Global Content Blocks" - modular bits, some of which are editable under: Content >> Global Content Blocks (see below). Most of the people reading this guide will not have access to this area. If you do have access, be very careful with Global Content Blocks, as they are used site wide.

3) Advanced Admin Functions

Don't worry if stuff in this section doesn't make sense to you. Most of us won't need it. Image Manager and File Manager: Most Times Up site editors will upload images through the "Add New Content" or "Edit Content" page as described above and will not see these features when they log in to the site admin area. For more advanced site editors this is another way to upload images and other files such as PDFs, MSWord documents, and media files. In addition, the "Image Manager" features a rudimentary image editor though it's best to edit and optimize images off-line before uploading. These sections of the site admin are found under "Content." PLEASE apply the "Image file guidelines" above when uploading and organizing files. Notice that all images to be accessed by the site editors should be in a subdirectory of the "images" directory of the "File Manager." The "Image Manager" takes you directly to that area. The direct filepath to an image is: uploads/images/specific_directory/specific_img.jpg

CSS (stylesheet) information:

The CMSMS stylesheets are not 'static' files. They are stored in the database and applied to page templates via PHP scripting. Because one can't download the stylesheet as a formatting option reference, some key styles are listed here.

IMPORTANT NOTE: <h2> header tags will always produce text accompanied by a light gray border decoration (like the "Recent Updates:" header on the Times Up homepage), so dont use <h2> tags except for important section beginnings. caption, caption_left, caption_rt: These are classes that are applied to a <div> tag in order to align an image to the left, right or neither and insert a caption in small gray text below it (need to follow the image with a <br> tag). These classes also put a bit of padding around the image Example (from http://times-up.org/index.php?page=folds-up-ride): <div class="caption_rt"> <img width="108" height="169" alt="Strida" src="uploads/images/rides/foldsup_strida_sm.jpg" title="Strida" /><br> <i>When parked, the Strida<br> becomes sculpture.</i> </div> textlg: A class that can be applied to <p>, <div>, <span> or any other tag to create 15px size text (the site default text size is 12px). textsm: A class that can applied the same way as textlg to create slightly smaller (11px) text. ltgreen: A class that can be applied to an HTML table cell (<td>) in order to give a green background as seen down the page on http://times-up.org/index.php?page=folds-up-ride lside, rside: Classes that may applied to left and right aligned images respectively to provide some padding instead of setting hspace/vspace. TIP: You can apply this style to an image via the "Stylesheet Classes" field in the WYSIWYG "Image Insert/Edit" feature's "Advanced" tab. All other CSS effects: Check the HTML source code on the page that contains the style that you want.

Page Templates:
The page templates (main, landing press_release etc) set up the layout of the site pages. These are complex and are only accessible to the main site designer(s). You will not see the template editing feature in the admin section.

Global Content Blocks, Tags, User Defined Tags:

Only advanced users will see these features in the admin section. They are primarily applied to page templates, though some may be applied within the page content. They work the way includes work on any dynamic website. "Global Content Blocks" (under "Content") are bits of HTML code available to pages site wide. "Tags" and "User Defined Tags" (under "Extensions") are bits of PHP code that are available in the same way as Global Content Blocks except various "parameters" may be involved as well. These items are embedded with a special tag that uses curly brackets. For example: {global_content name='press_release_top'} - is the Global Content Block that puts the nice little heading on the press releases. {menu template='a_navigation_footer' number_of_levels='1'} - is a Tag that loads the navigation menu at the bottom of each page. Clicking on a Tag title in the list of tags (under "Extensions") brings up an instruction page for that tag. See the http://cmsms.org for more information on content blocks and tags.
8