02 ragin' cms intermediate user guide
TRANSCRIPT
Ragin’ CMS is the official content management system for the University
of Louisiana at Lafayette. This guide will provide you with information for
enhancing your basic website with spotlight features.
Ragin’ CMS Admin Guide Intermediate Taking it to the next level
R a g i n ’ C M S S i t e A d m i n i s t r a t o r G u i d e - I n t e r m e d i a t e
Page 1
Contents Ragin’ CMS Intermediate ..................................................................................................................................... 2
Adding a top image ........................................................................................................................................... 2
Part one: Uploading your image .................................................................................................................... 2
Part two: Adding the image to your page ...................................................................................................... 3
Adding a centerpiece ........................................................................................................................................ 3
Part one: Uploading your image(s) ................................................................................................................ 4
Part two: Creating the centerpiece block ....................................................................................................... 5
Part three: Adding the centerpiece to your page ........................................................................................... 5
Editing the centerpiece ..................................................................................................................................... 6
Adding a slideshow ........................................................................................................................................... 6
Resizing a picture using Sumo Paint ............................................................................................................. 6
Part one: Uploading your image(s) ................................................................................................................ 7
Part two: Creating the slideshow ................................................................................................................... 8
Part three: Adding the slideshow to your page .............................................................................................. 8
Editing a slideshow ........................................................................................................................................... 9
Adding a toolbox/link list ................................................................................................................................... 9
Part one: Creating the toolbox/link list ........................................................................................................... 9
Part two: Adding the toolbox/link list to your page ....................................................................................... 10
Editing the toolbox/link list ............................................................................................................................... 10
Accordion menu .............................................................................................................................................. 10
Resizing a picture using Sumo Paint ........................................................................................................... 10
Part one: Creating the accordion menu ....................................................................................................... 11
Part two: Adding the accordion menu to your page .................................................................................... 11
Editing the accordion menu ............................................................................................................................ 12
Troubleshooting .................................................................................................................................................. 12
R a g i n ’ C M S S i t e A d m i n i s t r a t o r G u i d e - I n t e r m e d i a t e
Page 2
Ragin’ CMS Intermediate Congratulations on completing the Ragin’ CMS basic training. Now that you know how to add basic content, you are ready to take your site to the next level. This guide will assist you in adding all of the extras that enhance the functionality and aesthetics of your site.
Adding a top image Photographs are a great way to add visual interest to your site if used properly. However, low quality, irrelevant pictures can negatively affect the integrity and appeal of your site. Whenever possible, use professional photos. You will only be able to add a limited number of pictures to your site, so choose wisely. You will need to submit your photograph(s) to Communications and Marketing for proper sizing and formatting. You can contact them at [email protected] or (337) 482-6397.
Part one: Uploading your image 1. In the admin toolbar, hover your cursor over Content. 2. Pull your cursor down, and place it over Add content. 3. Click on Top Image (Block).
4. Type the name of the picture in the Title box. 5. Click on Select media to locate your image. 6. Click Browse and locate the image on your computer.
7. Click Open. 8. Click Submit. 9. Click Save.
6.
7.
8.
9.
R a g i n ’ C M S S i t e A d m i n i s t r a t o r G u i d e - I n t e r m e d i a t e
Page 3
Part two: Adding the image to your page 1. In the admin toolbar, hover your cursor over Structure. 2. Pull your cursor down, and click on Blocks. 3. Scroll down until you see the image that you uploaded. 4. Click on Configure.
5. Type “<none>” in the Block title box. 6. Scroll down to Ragin Cajun Sub-Site Theme (default theme) and click the drop down arrow. 7. Select Feature Area (Hero). 8. Select your preferences under the Show block on specific pages.
• The home page is “<front>.” • A main link page would be “content/nameofthepage.” • Putting “*” after the name of a page will include any of the subpages in that page.
For example if you didn’t want the picture to show on About Us or any of its subpages, you would click the radial button (dot) next to “All pages except those listed” and type “content/about-us*” in the box.
9. Click Save block.
Adding a centerpiece A centerpiece should be treated as the “crown jewel” of your homepage. It gives you an opportunity to maximize the visual interest of your homepage and display the most relevant information your office/department has to offer. You can add a single image or create a slideshow. To maintain maximum impact, centerpieces should be used sparingly and therefore can only be used on a homepage. Keep in mind that a portion of the image will be covered by the headline and body text, so you will want to select a picture that is centered to the right. You will need to submit your photograph(s) to Communications and Marketing for proper sizing and formatting. You can contact them at [email protected] or (337) 482-6397.
This image will appear on all pages except for the homepage and the commencement page/subpages.
R a g i n ’ C M S S i t e A d m i n i s t r a t o r G u i d e - I n t e r m e d i a t e
Page 4
Part one: Uploading your image(s) 1. In the admin toolbar, hover your cursor over Content. 2. Pull your cursor down, and place it over Add content. 3. Click on Centerpiece Slide (Subsite).
4. Type the name of the picture in the Title box. It is a good practice to add “-slide” at the end of the title
so that it will be easy to locate later. The title will not show on the centerpiece.
5. Type your text in the Headline box. This should be short and will appear in the red banner to the left of
your picture. 6. Enter any details related to the picture in the Body box.
Headline
Body
R a g i n ’ C M S S i t e A d m i n i s t r a t o r G u i d e - I n t e r m e d i a t e
Page 5
7. Click on Select media to locate your image. 8. Click browse and locate the image on your computer. 9. Click Open. 10. Click Submit. 11. Click Save.
Repeat this process until you have the desired number of slides (maximum of five).
Part two: Creating the centerpiece block 1. In the admin toolbar, hover your cursor over Content. 2. Pull your cursor down, and place it over Add content. 3. Click on Centerpiece for Subsites (Block). 4. Enter a specific slideshow title in the Title box. 5. In the Slides text box, begin typing the name of a slide you created earlier (If you named your slide with
“-slide” at the end, you can type “slide” into the text box, and all of your slides will appear for selection.) 6. Click on the desired slide title when it appears. 7. Click Add another item, and repeat the process for the rest of your slides. 8. If you would like to reorder the slides, click on the compass arrow next to the slide title and drag the
slide to your desired location.
9. Check the box next to Cycle. 10. Set your desired cycle time. 11. Click Save.
Part three: Adding the centerpiece to your page 1. In the admin toolbar, hover your cursor over Structure. 2. Pull your cursor down, and click on Blocks. 3. Scroll down until you see the centerpiece that you created. 4. Click on Configure. 5. Type “<none>” in the Block title box. 6. Scroll down to Ragin Cajun Sub-Site Theme (default theme) and click the drop down arrow.
7.
8.
9.
8.
9.
R a g i n ’ C M S S i t e A d m i n i s t r a t o r G u i d e - I n t e r m e d i a t e
Page 6
7. Select Feature Area (Hero). 8. Under the Show block on specific pages, select “Only the listed pages.” 9. Type “<front>” in the text box. 10. Click Save block.
Editing the centerpiece 1. Click on the sprocket icon in the top right corner of the centerpiece
2. Select Edit. 3. Delete, add, and reorder slides as desired and make any necessary adjustments to your cycling
preferences. 4. Click Save.
Adding a slideshow Slideshows can be set to appear in the secondary sidebar area to the right of the page content and are another way to dynamically display information. You can include a maximum of ten slides in the slideshow. You do not need to submit these photos to Communication and Marketing. You will need to size your photos to 230 pixels x 153 pixels. To do this, you can use an editing program such as Sumo Paint (available for free at www.sumopaint.com) or Adobe Photoshop.
Resizing a picture using Sumo Paint 1. Go to http://www.sumopaint.com/app/. 2. Select Open file from computer. 3. Select your picture and click Open. 4. Click Image in the top toolbar.
5. Select Image Size.
R a g i n ’ C M S S i t e A d m i n i s t r a t o r G u i d e - I n t e r m e d i a t e
Page 7
6. Set the width to 230 and the height to 153. 7. Click OK. 8. Click File in the top toolbar. 9. Click “Save to my computer.” 10. Name the file and select a PNG or JPG format. 11. Click Save.
Part one: Uploading your image(s) 1. In the admin toolbar, hover your cursor over Content. 2. Pull your cursor down, and place it over Add content. 3. Click on General Purpose Slide.
4. Type the name of the picture in the Title box. It is a good practice to add “-slide” at the end of the title
so that it will be easy to locate later. The title will not show on the slideshow. 5. Type your text in the Headline box. This should be short and will appear below the picture. 6. Enter any details related to the picture in the Body box.
7. Click on Select media to locate your image. 8. Click Browse and locate the image on your computer. 9. Click Open. 10. Click Submit. 11. Click Save.
Repeat this process until you have the desired number of slides (maximum of ten).
Headline
Body
R a g i n ’ C M S S i t e A d m i n i s t r a t o r G u i d e - I n t e r m e d i a t e
Page 8
Part two: Creating the slideshow 1. In the admin toolbar, hover your cursor over Content. 2. Pull your cursor down, and place it over Add content. 3. Click on Slideshow Small (Block). 4. Enter a specific slideshow title in the Title box. 5. In the Slides text box, begin typing the name of a slide you created earlier (If you named your slide with
“-slide” at the end, you can type “slide” into the text box, and all of your slides will appear for selection.) 6. Click on the desired slide’s title when it appears. 7. Click Add another item, and repeat the process for the rest of your slides. 8. If you would like to reorder the slides, click on the compass arrow next to the slide title and drag the
slide to your desired location.
9. If you want the slides to automatically cycle through, check the box next to Cycle. 10. Set your desired cycle time. 11. Click Save.
Part three: Adding the slideshow to your page 1. In the admin toolbar, hover your cursor over Structure. 2. Pull your cursor down, and click on Blocks. 3. Scroll down until you see the slideshow that you created. 4. Click on Configure. 5. Type “<none>” in the Block title box.
6. Scroll down to Ragin Cajun Sub-Site Theme (default theme) and click the drop down arrow. 7. Select Sidebar Second. 8. Select your preferences under the Show block on specific pages.
a. The home page is “<front>.” b. A main link page would be “content/nameofthepage.” c. Putting “*” after the name of a page will include any of the subpages in that page.
For example if you didn’t want the picture to show on About Us or any of its subpages, you would click the radial button (dot) next to “All pages except those listed” and type “content/about-us*” in the box.
9. Click Save block.
R a g i n ’ C M S S i t e A d m i n i s t r a t o r G u i d e - I n t e r m e d i a t e
Page 9
Editing a slideshow 1. Click on the sprocket icon in the top right corner of the slideshow.
2. Select Edit. 3. Delete, add, and reorder slides as desired and make any necessary adjustments to your cycling
preferences. 4. Click Save.
Adding a toolbox/link list Depending on your office/department, you may have information on your site that is accessed frequently. You can create a toolbox or link list to help users easily find commonly requested information. You will want to use these sparingly and only for your most important links.
Part one: Creating the toolbox/link list 1. In the admin toolbar, hover your cursor over Content. 2. Pull your cursor down, and place it over Add content. 3. Click on Link List (Block). 4. The text you enter in the Title box will display above the link list. 5. Enter your link title and URL.
6. Click Add another item to add more links (maximum of eight). 7. If you would like to reorder the slides, click on the compass arrow next to the slide title and drag the
slide to your desired location. 8. Click Save.
R a g i n ’ C M S S i t e A d m i n i s t r a t o r G u i d e - I n t e r m e d i a t e
Page 10
Part two: Adding the toolbox/link list to your page 1. In the admin toolbar, hover your cursor over Structure. 2. Pull your cursor down, and click on Blocks. 3. Scroll down until you see the link list that you created. 4. Click on Configure. 5. Type “<none>” in the Block title box. 6. Scroll down to Ragin Cajun Sub-Site Theme (default theme) and click the drop down arrow. 7. Select Sidebar Second. 8. Select your preferences under the Show block on specific pages.
a. The home page is “<front>.” b. A main link page would be “content/nameofthepage.” c. Putting “*” after the name of a page will include any of the subpages in that page.
For example if you didn’t want the picture to show on About Us or any of its subpages, you would click the radial button (dot) next to “All pages except those listed” and type “content/about-us*” in the box.
9. Click Save block.
Editing the toolbox/link list 1. Click on the sprocket icon in the top right corner of the toolbox/link list. 2. Select Edit. 3. Delete, add, edit, and reorder links as desired. 4. Click Save.
Accordion menu Accordion menus are another interactive way to display information. Tabs will appear stacked, but when you click on one, the box will expand (like an accordion) and display a picture, links, and more text. You can include a maximum of 5 tabs. Just like with other features, you will want to use the accordion menu sparingly to maintain effectiveness. You do not need to submit these photos to Communication and Marketing. You will need to size your photos to 165 pixels x 110 pixels. To do this, you can use an editing program such as Sumo Paint (available for free at www.sumopaint.com) or Adobe Photoshop.
Resizing a picture using Sumo Paint 1. Go to http://www.sumopaint.com/app/. 2. Select Open file from computer. 3. Select your picture and click Open. 4. Click Image in the top toolbar.
5. Select Image Size.
R a g i n ’ C M S S i t e A d m i n i s t r a t o r G u i d e - I n t e r m e d i a t e
Page 11
6. Set the width to 165 px and the height to 110 px. 7. Click OK. 8. Click File in the top toolbar. 9. Click “Save to my computer.” 10. Name the file and select a PNG or JPG format. 11. Click Save.
Part one: Creating the accordion menu 1. In the admin toolbar, hover your cursor over Content. 2. Pull your cursor down, and place it over Add content. 3. Click on Accordion Menu (Block). 4. The text you enter in the Title box will display above the menu. 5. The Tab Title should be short and specific. 6. Enter your Tab Body text and include hyperlinks to pertinent information.
7. If desired, you can include a link below your text instead of hyperlinking information. To do this, add a
link title (i.e. More Info) and URL in the Tab Link section. 8. Click on Select media to locate your image. 9. Click Browse and locate the image on your computer. 10. Click Open. 11. Click Submit. 12. Click Save. 13. Click on Add another item to add another tab. Repeat this process until you have created your desired
number of tabs (maximum of five). 14. Click Save.
Part two: Adding the accordion menu to your page 1. In the admin toolbar, hover your cursor over Structure. 2. Pull your cursor down, and click on Blocks. 3. Scroll down until you see the accordion menu that you created. 4. Click on Configure. 5. Type “<none>” in the Block title box. 6. Scroll down to Ragin Cajun Sub-Site Theme (default theme) and click the drop down arrow. 7. Select Sidebar Second.
Hyperlink
R a g i n ’ C M S S i t e A d m i n i s t r a t o r G u i d e - I n t e r m e d i a t e
Page 12
8. Select your preferences under the Show block on specific pages. a. The home page is “<front>.” b. A main link page would be “content/nameofthepage.” c. Putting “*” after the name of a page will include any of the subpages in that page.
For example if you didn’t want the picture to show on About Us or any of its subpages, you would click the radial button (dot) next to “All pages except those listed” and type “content/about-us*” in the box.
9. Click Save block.
Editing the accordion menu 1. Click on the sprocket icon in the top right corner of the menu. 2. Select Edit.
3. Delete, add, edit, and reorder tabs as desired. 4. Click Save.
Troubleshooting Technical assistance: [email protected] or (337) 482-5516.
Content and branding assistance: [email protected] or (337) 482-6397.