Webmaster Manual

Page Layouts
Editing Sections
URL Path Settings
Revisions
WYSIWYG Editor
Taming Text
Using Color
Working with Images
Linking


Best Practices:

  • Keep file sizes as small as possible to facilitate short load times – a larger image can always be linked from a preview image.
  • It’s better to present than to merely link; i.e., let the user see the reading list onscreen and also provide a link to a printable version rather than just linking a pdf.
  • Aim for consistency, clarity, and convenience (digestible pages, etc).
  • Crosslink freely.
Printer-friendly versionPrinter-friendly version Share this

 Areas of the TLA Web

TLA Webmasters

  • Chairs and designated webmasters of each unit have a unique login to share as needed.
  • With the login comes a responsibility and capability for updating/adding pages on group sites.
  • Editing/revising is an online process accomplished through a Drupal CMS interface.

CMS LOGIN INSTRUCTIONS

Once logged in, your unit acronym and longevity information will replace the login input fields. Click on Home directly below the TxLA logo at top left for access to a special Content Management System (CMS) view of the TLA homepage.

In the upper left corner of the homepage you will see a My Group Pages widget provifing a snapshot of your group’s pages. You can view or edit from this widget. Click on View my Group Pages for a complete list of the pages on your group site. Once at the My Group Pages console, you can Create a Group Page as well as view (click on the Title of the page), Edit, or Delete group pages.

Page Layouts

The images below depict the locations of the different content areas: Logo, Menu, Featured Image, Tab Content, Body Content, and Right Column. You may choose which layout elements you want to use for your site. You might want to vary the layouts for internal pages or special content pages on your site.

SRT: Logo plus Tab & Body Content TASL: Logo, Menu, Body, & Right Column 2x2 Reading List: Logo, Menu, Featured Image,
Body, & Right Column

Editing Sections


Clicking on the View tab displays a page as it would look from the public user perspective. Normal users, however, will not see the page control bar. The Edit tab allows you to modify the contents of the page. Always save a page after editing before you use the View tab.

The Clone tab duplicates the page to create a new page. This handy feature allows you to add pages that perpetuate your site’s menus, tabs, etc. You may, of course, remove or add content features from the cloned pages. Additional information relevant to cloning is contained in the URL Path Settings section.

Click on the Edit tab to edit the contents of the page. The first field presented is for the Title of the page. The second field is the Body. The body field typically contains most of your content.

On the left side of the “Group” page templates are spaces for a Logo and a Menu. To upload a logo, simply click the Browse button and follow the prompts. For best results start with a square logo. The maximum file size for this space is 128 MB. A medium to high quality jpeg 2 inches square at 100 dpi would meet this specification.

The Menu is a pre-styled section of the page that consists of a set of links. The links consist of a Title, which can be whatever you want, and a URL, which is the destination page. The URL can be in two formats:

  • External Link (not on txla.org): http://www.google.com: make sure you include the FULL URL including the http:// part.
  • Internal Link (on txla.org): http://www.txla.org/groups/ATRT
    The link will be the part AFTER http://www.txla.org/; so for the above link, you would put: “groups/ATRT.”
    There is no leading slash.

Note: To reorder Menu items, hold down your mouse on the + at the left end of a title bar and drag.

The next section is the Right Column. This is an optional section that resides directly right of the Body.
The column is 200 pixels wide, so graphics inserted in that area need to be sized accordingly.

Note: The Right Column can affect the flow of content in the Body section.

The Featured Image section allows you to add a large image above the Body section. The dimensions should be 510x250 pixels. A graphic of a different aspect ratio (height to width relationship) will be cropped.

The Tabs section allows for multiple content areas to be added to the page with tabs to switch between them. This section includes Tab Labels, which are the titles of the tabs, and the Tabs content areas. The tab labels should be kept short, and using too many tabs can adversely affect the overall page layout. Be sure to enter content in the same order as you create the labels. The first label will appear over the content entered in the first box, etc. This is especially important to remember when reordering the tabs (by dragging at the + symbols). Labels and content must be re-ordered separately. EXAMPLE

Note: For newly created tab labels and content, it is a good idea to save the page before reordering as this feature has proven a bit “playful.”

URL Path Settings

The URL alias allows you to create an easy to remember URL for a page. The URL alias for a group page is made up of the group acronym followed by the purpose of the page. 

When setting the alias for a page, you need to preface it with groups/. For example, the homepage of the Automation & Technology Round Table (whose acronym is ATRT) is aliased groups/ATRT. To create an officers page for that group, you would uncheck Automatic alias on a newly-cloned page and enter groups/ATRT-officers in the URL path settings box. This convention is essential to keep the site organized and promote good SEO (search engine optimization). The acronym for your group is embedded in the aliases of pages already on your site as well as in your group’s webmaster login.

Note: It is a good idea when cloning a page to immediately rename (title) the page and enter the alias. If you fail to alias a page, automatic aliasing is the default, which will include the entire page title separated by hyphens.

On occasion, a page will inexplicably lose its alias and revert to automatic aliasing. This glitch, of course, breaks links to that page. Go to your unit webmaster widget to find the page and restore the desired alias.

Revisions

In order to maintain backups of work done on each group page, the TLA CMS enforces Revisions for your pages. On a newly created page, the revision tab will appear once the page has been saved. Each time an existing page is edited and saved, another revision is created. Entering a Log message is optional but useful in helping to recall the intention of a particular revision.

If you need to revert to an older version of a page, click the Revisions tab in the page control bar. It will list all of the revisions according to the date/time created. Using the revert link will copy the selected earlier revision to become the current page. Note: Reverting to an earlier revision will create a new revision rather than deleting any pages from the queue.

WYSIWYG Editing

Body, Right Column, and Tab Content areas have a WYSIWYG (what-you-see-is-what-you-get) editing interface that creates html code as you format text, insert images, add hyperlinks, etc. You can let your cursor hover over an icon to discover that icon’s function. Many of the icons will be familiar from other text editing applications.

Taming Text

Cleaning up or removing formatting after pasting content into an editing window from a document or an html page can be tricky. Pre-formatted text sometimes brings along code that is difficult to overwrite in the WYSIWYG environment. This is especially true if the text is already in tabular form. Creating a new table for your text is often more efficient than inserting one from an outside source.

Note: A table wider than the template-specified area may overrun the live space or affect layout in other content areas.

Using a simple text editor – such as BBEdit, TextEdit, or Notepad – as an intermediary between your content source and the editing interface has proven helpful. The Paste as plain text and Paste from Word functions are also useful approaches as is the Remove formatting scrubber. If you know html, you can Disable rich text (at the left below the editing box) or click on HTML in the icon array to produce a window where you can edit the code. This is often the best way to weed out tenacious formatting.

Using Color

If you wish to add color for headings or accent text, highlight the text, click on the expansion arrow next to the Select text color icon, and choose from the color blocks. If you click on More colors, a color picker will appear. To use the blue prevalent on the TLA site, enter 336699 in the Color box at page bottom, then click Apply. #ead788 is a close match for the yellow. The automatic text color is not a TRUE BLACK; the DARK DEFAULT can be restored by scrubbing and reformating. Background and border colors for tables are specified via the Advanced tab in the Insert/Edit Table and Table Cell Properties dialogue boxes.

Note: Insert/Edit Table also allows you to modify an existing one.

Working with Images

When inserting or editing an image, use the Appearance tab to fine-tune the sizing, add a border, etc. Prepare your graphics for the Web before uploading them. Resolution should be no more than 100 dpi, and the dimensions should be close to the target size – the height and width that will appear on the page. Image formats should be jpg, gif, or png. 72 dpi is the display resolution of the Web, and putting oversized and/or high-resolution graphics on the site will adversely affect page-loading time. To insert an image from your computer, follow the upload instructions in the next section. Linking to a file already in your group’s image folder is covered under the last topic in this document, Linking within the Site.

Uploading Files

Images are uploaded using the Insert/edit image icon; documents are uploaded using the Insert/edit link icon. Once the dialogue box is open, the process is basically the same whether uploading graphics or other files. You will usually be browsing to a place on your own computer, and multiple files may be uploaded at a time.

You will use the Browse icon to the right of the Link URL or Image URL box.

There is a convention and structure for uploading your group’s documents and images. The directory structure for your uploads will be sites/tla/files/groups/your-group-folder. The primary folder for your group will be identified by the group’s acronym. 

Inside your group’s folder will be a subfolder for images (jpg, png, gif) and one for docs (doc, rtf, pdf, etc). If your group has a compelling need for additional folders, request them through the TLA webmaster.

Here’s an example of how a CRT webmaster would upload a doc to the 2x2 site:

  1. After highlighting the appropriate text in the editing box, click the Insert/Edit Link icon, and then click the Browse icon to the right of the Link URL box to access the upload site.
  2. Select the appropriate destination folder on the upload site (2x2/docs, in this example).

    Note: If replacing a file, be sure the new file conserves the filename so the old file can be overwritten.

  3. Click the Upload bar at the top left of the File Browser. The Browse button that appears allows access to files on your own computer.

  4. Highlight the file and click Open.
  5. Then click Upload.
  6. The filename will then appear in the folder. Double click on it or on the filename that displays below the file listing
  7. The last step in the upload process is to click Insert at the bottom of the original Insert/Edit Link box. But before inserting the file, be sure to select Open in new window (_blank) as the Target in the dialogue box, so folks won’t unintentionally leave the TLA site upon opening and then closing a linked document.
  8. Now save the page.

Linking within the Site

To link to a file already in your group’s docs or images folder, you would only need to select and insert the file when you arrive at the File Browser

The WYSIWIG editor also has an icon that lets you browse to a page within the site. Be sure you’re in the Nodes tab of this search feature. Enter a word or two from the title of the page you‘re looking for in the Title box. For Type selection, you will choose Group if the page is part of one of the TLA group sites. Then click Apply and the search results allow you to insert a link to the desired page.

There are other Type options. Select <Any> if you’re unsure. Most of the Association pages are built on Resource or Page templates.


Thanks for the time and effort you contribute to keep the TLA website dynamic and up-to-date. We’re delighted that TLA chairs & webmasters have direct access to their pages on the site, and we hope you enjoy shaping your group's pages through the CMS interface. If your pages tend to be complex, you may encounter a few  eccentricities while webmastering your group site. Don't hesitate to share any “best practices” or troubleshooting tips you learn along the way. Please email me if you need assistance.

Mary Ann Emerson

maryanne@txla.org

Created on Jul 25, 2010 | Last updated July 09, 2015