Webmaster Training

BSA Style Guide   |   SHAC Style Guide   |    Log-in/Submit Content   

Content Editor   |   Hints  |  Cut, Copy, Paste  |   Find and Replace   |   Links   |   Buttons  |   Images   |   Tables 

   Embedding Videos   |    Templates    |    Online Registration Forms and Surveys

Calendar (Event Calendar Pro)   |    Maps  |     Newsletter   |    Polls  |    Slide Show

BSA Style guide

Source: Language of Scouting

Avoid unnecessary capitalization. When in doubt, don’t capitalize.

  • Activities. Do not capitalize “pow wow,” “camporee,” “jamboree,” unless the reference is to a specific event: Midland District Pow Wow, South Central Camporee, the 1997 National Scout Jamboree
  • Groups. Do not capitalize pack, den, troop, patrol, ship, crew, district, council, lodge unless the reference is specific: Pack 10, Den 5, Troop 6, Fox Patrol, Ship 2, Skyline District, Sam Houston Area Council.
  • Titles of Office. Do not capitalize district executive, committee chairs or other titles unless they precede the name: District Executive Thorpe is working with other district executives; she is the council’s Scout executive. Exceptions are the top unit leader: Scoutmaster, Cubmaster, Crew Advisor and Skipper.

Always use official BSA terminology. Match the capitalization and terminology as listed in the Language of Scouting or to scouting.org.

Additional resources:

 

      
BSA: Language of Scouting

 


BSA Branding Guide

SHAC Style guide

  • Every page should begin with a basic description - think new Lion parent. Write all content as if the person reading it has zero background knowledge about the topic. 
  • Place the date and location at the top of the page.
  • Keep content current. Update webpages immediately following an event.
  • Always place the year after the date (July 1, 2019).
  • Write dates July 1, 2018 (not July 1st, 2019).
  • At first mention of an acronym, write it out as well to explain its full meaning the first time used (e.g., DE, SHAC, NYLT, JOTI).
  • Avoid symbols and abbreviations (e.g., Tues, @, &).
  • Do not use copyrighted materials.
  • Links are not underlined (e.g., Camping, Tiger Cubs)
  • Use only one space after a period (e.g., Cub Scouting)
  • Graphics should not have white background (e.g., BALOO graphic)
  • DO NOT WRITE IN CAPITAL LETTERS.
  • Spelling errors make us all look BAD!!
  • Place contact information at the bottom of every page.
  • Do not use Oxford comma (also known as serial comma).
  • Maintain website style (fonts, size, style).
  • Do not place council or national information on district websites, rather write a short description and link to the council or national webpage.
  • Do not download council or national forms to the district page, rather link to the forms (e.g., medical form, Guide to Safe Scouting)
  • Do not create or link to outside forms or surveys (e.g., Google docs). These can be created on the website.
  • Keep writing style formal (avoid flippant comments, unnecessary words, ambiguity, sarcasm, and sentences that are too complex).

 

      
Do not use .jpegs with white background


Graphics should be .png or .gif with transparent background

  • Avoid writing in personal language (e.g., pronouns). For example, do not say..."you need to register by 1/1/18."  Instead, say "participants need to register by...". Avoid personal judgement words (e.g., I think, I feel). State facts. Use 3rd person or "it." 
  • Activity pages should be very detailed. List everything a parent needs to know (who, what, when, where). Also, list what to bring, tentative schedule, rules, events and program details.
  • Downloadable leader's guides are not permitted on the website. All information that leaders and parents need to know is to be included on the event webpage. Confusing communications occur when information in leader's guides (printed or as a web link) conflicts with content on the event webpage. Portable document format (.pdf) documents are a fixed-layout designed for desktop devices but are difficult to use on mobile devices, usually requiring zooming in and panning around. Half of our website visitors are mobile users and don’t want the hassle of looking at something that doesn’t fit their screens. Furthermore, PDFs require downloading before viewing. This is already a barrier for desktop users, but for mobile users, downloading files can be a difficult task with the amount of time it takes to download in areas with slow internet speeds and the fact that downloading uses up valuable mobile data allowances leading users to abandon reading the important information before even beginning. The goal is to get users to read the important event details and not cause users to experience unnecessary friction. 
  • If a question and answer style is needed, a frequently asked template can be added (e.g., NYLT).
  • Templates can be used on pages with a lot of content to make the web page appear less daunting: frequently asked questions (e.g., NYLT), tabs (e.g., Training Schedule), accordion (e.g., Program Guide).

Communicating Links

  • Use the URL www.samhoustonbsa.org for non-Scouters (e.g., recruiting new Scouts or FOS).   www.shacbsa.org can be used with those familiar to Scouting.
  • Give out direct URLs in literature (e.g., www.shacbsa.org/community-service-day instead of www.samhoustonbsa.org)
  • Multiple URLs can be set up to point to same page (e.g., www.shacbsa.org/bovay-scout-ranch and www.shacbsa.org/bovay).  This is helpful to have shorter URLs for promotional purposes.

Social Media and Additional Websites

  • Additional websites cannot be created for district or council programs or events (e.g., separate day camp website). 
  • The district executive and council marketing chair is to be provided the administrative password to all district social media accounts. At least two volunteers must have access to post. The council is to have administrative access.

Log-in, Submitting Content

  • Log in: Go to the "Sign in" page under the "Resource" tab or go to www.<insert website URL>/admin (e.g., www.shacbsa.org/admin)
     
  • Edit Pages:  

    Note: Some pages are in sections and there may be more than one Edit button on a page
     
  • Step 1: Save changes (scroll to bottom of page): 
     
  • Step 2: Submit pages for approval / publishing:  

= Cancel Content Changes (delete draft version)
 = Request approval for this draft content instance
= This content has edits in progress but has not yet been submitted for approval 

Content Editor

The content editor is much like common word processors. The most common practices are introduced below.

 

Editor Interface

The editor provides a clean and simple user interface. If you are familiar with desktop word processors like Microsoft Word or OpenOffice.org Writer, you will quickly see that using an online text editor is just as easy and intuitive.

Interface Structure

The figure below shows main building blocks of the editor:


The interface of the editor 

The editor consists of five main parts:

  • Toolbar – the section at the top of the editor containing grouped menu buttons that give you access to various functions of the editor.
  • Editing Area – the space below the toolbar where you type your text and add media.
  • Context Menu – a small pop-up menu with shortcuts to most common operations available for the object, visible after a right mouse button click or pressing the Application/Menu key on your keyboard.
  • Elements Path – the section at the bottom of the editor displaying information about the HTML elements of the document (advanced feature).
  • Dialog Windows – small pop-up windows that appear when you use some of the editor's functions and are opened by clicking the toolbar buttons.

Resizing and Maximizing the Editor

ITo resize the editor interface, click and drag the  resizing grip in the bottom right-hand corner of the editor.

To make writing more convenient, maximize the editor interface in the browser window. To maximize the editor, click the  toolbar button, the editor interface will fill the browser window and stretch to its borders. To return to the default view and minimize the editor, press the same button again. 

Cut, Copy and Paste

Among the most common editing operations are cutting, copying, and pasting text. The editor not only supports these operations, but also makes it possible to affect the formatting of the pasted text and even paste a Microsoft Word formatted fragment.

Because the cut, copy and paste functions need access to the clipboard of your operating system, some Internet browsers either block it when called from the toolbar, or ask you to explicitly agree to that. Should accessing the clipboard by clicking the respective cut, copy and paste buttons from the toolbar or context menu options be blocked, you can always perform these operations with keyboard shortcuts.

Cut

To cut a text fragment, start with selecting it. When the text is selected, cut it using one of the following methods:

  1. Press the  button on the toolbar.
  2. Open the context menu for the selected fragment by pressing the right mouse button, the Menu/Application key, or the Shift+F10 keyboard shortcut, and choose the Cut command.
  3. Use the Ctrl+X shortcut on your keyboard. Note this method works even when the browser blocks the toolbar's access to the clipboard, so this is the most reliable way of cutting the text.

Copy

To copy a text fragment, start with selecting it. When the text is selected, copy it using one of the following methods:

  1. Press the  button on the toolbar.
  2. Open the editor context menu for the selected fragment by pressing the right mouse button, the Menu/Application key, or the Shift+F10 keyboard shortcut, and choose the Copy command.
  3. Use the Ctrl+C shortcut on your keyboard. Note this method works even when the browser blocks toolbar's access to the clipboard, so this is the most reliable way of copying the text. 

Paste

To paste a text fragment, start with cutting it or copying from another source. Depending on the security settings of your browser, either paste directly from the clipboard or use the Paste dialog window.

  1. Click the  button on the toolbar.
  2. Open the context menu for the selected fragment by pressing the right mouse button, the Menu/Application key, or the Shift+F10 keyboard shortcut, and choose the Paste command.
  3. Use the Ctrl+V shortcut on your keyboard. Note this method works even when the browser blocks the toolbar's access to the clipboard, so this is the most reliable way of pasting the text.

If direct access to clipboard is blocked, you will be asked to paste the text into the Paste dialog window using the Ctrl+V keyboard shortcut.

Paste dialog window 

Paste from Word

The editor allows the ability to preserve basic formatting when pasting a text fragment from Microsoft Word. To achieve this, copy the text in a Word document and paste it using one of the following methods:

  • Press the  button on the toolbar.
  • Use the Ctrl+V shortcut on your keyboard. Note this method works even when the browser blocks the toolbar's access to the clipboard, so this is the most reliable way of pasting the text.

Paste as Plain Text

To paste text that is already formatted text, but without preserving the formatting, paste it as plain text. To achieve this, copy the formatted text and press the  button on the toolbar. If the browser blocks the toolbar's access to clipboard, a Paste as Plain Text dialog window will appear to paste the fragment into the text box using the Ctrl+V keyboard shortcut.

Once pasted into the document, the text will lose all its formatting and you will be able to style it using toolbar options. 


Paste as Plain Text dialog window 

Find and Replace

The Find and Replace features allow the ability to quickly search the text as well as retain its consistency. They also make editing the text easier since you can batch change multiple occurrences of a phrase with just one mouse click instead of manually finding and modifying each one of them.

Since both are closely related, they are implemented as one dialog window with two tabs that let you switch between the Find and Replace option.

Note that because the default position of the dialog window is on top of the document in the editor, you might need to drag the Find and Replace window in order to see the highlighted terms.

Find

To find a word or a phrase on a page, in a quick and efficient manner, use the Find command.

To open the appropriate dialog window, press the  button on the editor toolbar.

  • Find what – is the text field where you enter the word or phrase that you want to find.
  • Match case – checking this option limits the search operation to words whose case matches the spelling (uppercase and lowercase letters) given in the search field. This means that the search becomes case-sensitive.
    Example: When Match case is checked and the search term is: "option", you will find all instances of "option" with this exact spelling but not when the word is spelled "Option" or "OPTION."
  • Match whole word – checking this option limits the search operation to whole words.
    Example: When Match whole word is checked and the search term is: "option", you will find all instances of "option", but not the words "optional" or "options."
  • Match cyclic – checking this option means that after reaching the end of the document, the search continues from the beginning of the text. This option is checked by default.


Enter the search term and select the options, press the Find button and the editor will highlight the first occurrence of the term in the text, starting from the current position of the cursor in text and going down. If you want to jump to the next occurrence of the term in the text, press the Find button again.


The Find tab in the Find and Replace window 

Replace

If you want to quickly find a word or phrase in your document and replace it, use the Replace command. To open the appropriate dialog window, press the  button on the editor toolbar.

The Replace tab consists of a search field, a replace field and a few options to refine the operation. Here is the overview of all Replace tab elements:

  • Find what – is the text field where you enter the word or phrase that you want replace in the document.
  • Replace with – is the text field where you enter the word or phrase that will replace the search term in the document.
  • Match case – checking this option limits the search and replace operation to words whose case matches the spelling (uppercase and lowercase letters) given in the search field. This means that the search and replace becomes case-sensitive.

    Example: When Match case is checked and the search term is: "option", you will find and replace all instances of "option" with this exact spelling, but not when the word is spelled "Option" or "OPTION."

  • Match whole word – checking this option limits the search and replace operation to whole words.

    Example: When Match whole word is checked and the search term is: "option", you will find and replace all instances of "option", but not the words "optional" or "options."

  • Match cyclic – checking this option means that after reaching the end of the document, the search and replace continues from the beginning of the text. This option is checked by default.


The Replace tab in the Find and Replace window 

After you enter the search term as well as the replace term and select the options, press the Replace button. The editor will highlight the first occurrence of the term in the text, starting from the current position of the cursor in text and going down. If you want to replace the highlighted term, click the Replace button once more. Then, if you want to jump to the next occurrence of the term in the text, press the Replace button again.

You can also replace all occurrences of the search term in the document in one go. In order to do that, press the Replace All button. The editor will then replace all occurrences in the whole document at once and display a pop-up window with the result of the operation.


The result of the Replace operation 

Text Selection

When you want to apply a formatting method to a larger text fragment, you can select it. The editor supports a few selection methods that you can use.

Selecting All Document Contents

To select all contents of the document, click inside editing area and press the  toolbar button. All document elements, including text, images, or tables, will become highlighted. You can now apply whatever action you wish to the selected content.

Alternatively, use the Ctrl+A keyboard shortcut to select everything inside the editing area.         

Selecting all document contents 

Selecting a Document Fragment 

A popular way to select document fragments is to use your mouse. Keeping the left mouse button pressed, drag your mouse over the document content that you want to select. The selection process will finish, when you release the mouse button. A document fragment selected with your mouse will become highlighted.

You can also select individual words by double-clicking them.

Note that a document fragment can also be selected with your keyboard.

  • Using Shift+Arrow lets you select the text by letters and the Ctrl+Shift+Arrow — by words.
  • The Shift+Home combination selects the text from the cursor to the start of the current line, while the
  • Shift+End — from the cursor to the end of the current line.
  • The combination of Ctrl+Shift and the Home or End keys let you select the text from the cursor to the beginning or end of the document, respectively.

The Shift+PgDn and Shift+PgUp shortcuts select a text fragment of approximately the length of the editing area starting from the cursor and going down and up the text, respectively.


Selecting a document fragment 

Selecting HTML Elements

Another method to select document contents is to use the editor elements path to highlight the HTML building blocks of the document. To use this feature, click an element's name on the elements path with your mouse. You can also use the Alt+F11 keyboard shortcut to enter the elements path, and then navigate between the elements with the Tab and Shift+Tab (or Left and Right Arrow) keys. To select an element with your keyboard, use the Enter or Space keys.

The elements path is an advanced feature that requires some basic understanding of HTML. The same effect can always be achieved by selecting the text directly in the editing area with your mouse or keyboard.


Selecting an HTML element with elements path 

Removing Format

The editor makes it easy to not only change the style of your text, but it also makes it equally easy to remove these styles.

To remove text styling applied to the document text, select the text fragment and press the  toolbar button. All text styling will be removed and the text will be displayed in the default font.

The figure to the right shows a sample text with some styling — typeface, font size, colors — applied.


Sample text formatted with odd styles 

After selecting the text and use the Remove Format function, all text styling is gone and the text is displayed with default paragraph formatting.

Note that this applies to style properties that are applied to the HTML source. This category includes most text styling methods as described in the Text Styling section (without paragraph format) as well as text alignment and indentation. 


Sample text with styles removed 

Links

The Link feature is a powerful option to add documents (e.g., pdf), link to websites, link to an email address, create hyperlinks and link within a page (to an anchor).

Insert a document

  1. Highlight the text that the link is to be assigned.
  2. Click the  button on the toolbar, or use the Ctrl+L keyboard shortcut.
  3. On the Link Info tab, select Link Type: URL
  4. Click the Browse Server button.
  5. Under File Broswer, browse through the folders and select (click on) the appropriate folder to upload the document.
  6. Click on Select File.
  7. Locate the document on your computer.
  8. Click Upload.
  9. Under File Browser, browse through the file folders and click on the file, the click Select button under “Preview” on the right of the window.
  10. Click on the Target tab and select New Window (_blank)
  11. Click OK. 

 

Example of Link with New Window and Link without New Window


Link Info tab of the Link window for the URL link type 


File Browser window when browsing for a link 

Link to Email

  1. Highlight the text that the link is to be assigned.
  2. Click the  button on the toolbar, or use the Ctrl+L keyboard shortcut.
  3. On the Link Info tab, select Link Type: E-mail
  4. Type in Email Address, address of the recipient of the email (e.g., myname@example.com).
  5. Optional: type in Message Subject (the text will be pasted into the subject line of the email message) and Message Body (text will be pasted into the email message as its content).
  6. Click OK.


Link Info tab of the Link window for the E-mail link type 

Link to a website

  1. Highlight the text that the link is to be assigned.
  2. Click the  button on the toolbar, or use the Ctrl+L keyboard shortcut.
  3. Select Link Type: URL
  4. Select protocol type (choose between: http://, https://, ftp://, news://, or <other>)
  5. Type in URL of website (e.g., www.scouting.org).
  6. Optional: Click on the Target Tab and select new Window.
  7. Click OK.

Notes: If you link to an external address, use the absolute path (e.g., www.scouting.org). If the resource is located on the same server, you can use a relative path that omits the domain name and starts with a slash (e.g., /scout-fair).  If linking from a microsite to the SHAC site, use the absolute path.


Link Info tab of the Link window for the URL link type 

 

Buttons

  1. Create a link to a document or website.
  2. Highlight the text that the link is to be assigned.
  3. Click on Styles.  Select button color.

It's probably best to stick with the green button.

Examples:      Register for Ten Commandments Hike       Scout Fair Leader's Guide       More

Note: making changes to buttons can be difficult after initial making them.  Ask for help, if needed.

 

Removing a Link

Removing a link is just as easy as adding it. When the cursor is placed in a link, the  button on the toolbar becomes active. Pressing the button removes the link and leaves plain text. Alternatively you can also open the element's context menu by pressing the right mouse button or using the Menu/Application key on your keyboard, and choose the Unlink command.

Link within a Page (to an anchor)

Step 1: Add an anchors
  1. To insert an anchor, left click on area of the page where the anchor should be placed.
  2. Press the  button on the toolbar.
  3. Enter a name for the anchor in the Anchor Name text box.
  4. Click OK, the  icon will appear in the document.

After adding an anchor, it will be visible to select it from the drop-down lists of the Link Info tab.

Hint:  Place an anchor on the row above.  The  icon can only be seen in edit mode.


Anchor Properties dialog window 

 

 

Step 2: Link to Anchor

You can now create a link to your anchor with the  button. The link will take the reader of your document to the section marked with the anchor.

  1. Highlight the text that the link is to be assigned.
  2. Click the  button on the toolbar, or use the Ctrl+L keyboard shortcut.
  3. On the Link Info tab, select Link Type: Link to anchor in the text
  4. The Anchor Name has a drop-down list containing all the names of the anchors that have been established in the document.
  5. Click OK.

Hint: You can link to an anchor from another page by using the page name followed by # and the anchor name (e.g., www.shacbsa.org/family-camping#Bovay)


Link Info tab of the Link window for the Link to Anchor in the text link type 

Removing an Anchor
Removing an anchor is just as easy as adding it. When the cursor is placed in an anchor, the Remove Anchor context menu command becomes available. Open the element's context menu by pressing the right mouse button or using the Menu/Application key on the keyboard, and choose the Remove Anchor command. This option removes the anchor from the document and leaves plain text.


Remove Anchor context menu command available for an anchor 

Insert Images

To insert an image, click the  button on the toolbar. On Image Properties dialog window set configuration options that define image source, its size, display properties, or other advanced properties. 

Image Info

The Image Info tab is the default tab that opens after pressing the  button on the toolbar. Images can be configured.
  • URL – the web address of the image.
  • Alternative Text – a short textual description of the image that tells users with assistive devices (like screen readers) what the image is about. Always provide your images with meaningful alternative text in order to make it accessible to users with disabilities..
  • Width – the width of the image in pixels. By default this is the size of the original image.
  • Height – the height of the image in pixels. By default this is the size of the original image.
  • Border – the size of the solid border around the image in pixels.
  • HSpace – the horizontal spacing (or margin) between the image border (if present) or the image itself and other document elements that surround the image, in pixels.
  • VSpace – the vertical spacing (or margin) between the image border (if present) or the image itself and other document elements that surround the image, in pixels.
  • Align – the alignment of the image in the document. Available options are Right and Left.
  • Preview – a preliminary view of the selected image formatted according to the options chosen on the left.


►Do not use copyrighted graphics
►Do not put graphics in tables
►Only use Scouting graphics
►Pay attention to the graphic sizes


Image Info tab of the Image Properties window 

 

 

Upload Image

Step 1: Browse Server
  1. Click the  button on the toolbar
  2. To upload an image, click on Browse
  3. Under File Browser, browse through the folders and select (click on) the appropriate folder to upload the image.
  4. Click on Browse.
  5. Locate the image on your computer.
  6. Click Upload 


Image Browser window when browsing for an Image 

Step 2: Selecting an Image

  1. To select an image, browse through the folders under File Browser and select the image
  2. Click the Select button under “Preview” on the right of the window. 


Image Browser window with the “cub-scout-characters-small.png” image selected 

Step 3: Adjust Image

  1. Make sure the lock is closed (to keep the height and width ratio)
  2. If a smaller image size is needed, type in a smaller number:
  • Use 55 – 75 width is good for (e.g., www.shacbsa.org/activities)
  • Use 75 – 125 for articles on a home page
  • Use 125 – 300+ for pages devoted to an event
  1. Set the alignment, if needed
    Hints: do not make a graphic bigger than the default size. Do not make a graphic significantly smaller than the default size.

www.communications.shacbsa.org/graphics

Image Links

The Link tab lets you assign a link to an image inserted into the document, effectively converting the image into a clickable link. The link can point to any kind of
object available in the Internet, like a simple URL address, a PDF document, or an online video.
 
This might prove especially useful if, for example, you want to add a thumbnail that would lead the reader of your document to a full-size copy of the image or add a company logo and point to its website.
 
The Link tab of the Image Properties window functions similar to the Link Info tab of the Link Properties window. See Links and E-Mail for more information.
 
If you want to edit an image that is connected to a link, use the context menu and choose the Image Properties option. The Image Properties window will let you modify both the image and the link that it is pointing to. If you double click such image instead, you will open the Link dialog window that will only allow you to edit the link properties and not the image itself. 


Link tab of the Image Properties window 

Advanced Image Properties

The Advanced tab allows for additional image options such as assign it an ID, a class, a longer description, a tooltip, or CSS style properties. It is meant for advanced users with knowledge of HTML as well as CSS, and gives nearly endless possibilities as far as the presentation of the image is concerned.
  1. Add white border around pictures:
  2. Right click on the picture
  3. Click on Image properties
  4. Click on the Advanced Tab
  5. Under Stylesheets Classes, type: framedelement
  6. Click OK


Advanced tab of the Image Properties window 

Tables

To insert an image:
  1. Click the button on the toolbar.
  2. Select the number of rows and columns.
  3. Set the table width: pixels (up to 900) or percent (e.g., 100%)
  4. Border size can be set (e.g., 0 ) 

Table Properties Right click on Table to see options:

Table Properties
Row Options
Cell Options
Column Options
Advanced table feature: To create a table as seen on www.shacbsa.org/membership-contacts:
  1. Right click on the table
  2. Click on Table Properties
  3. Click on Advanced Tab
  4. Under Style Sheet Classes, type: table table-bordered
   
   
   


►Only use tables for data
►Do not put graphics in tables

 

Embedding videos

  1. To embed a video, click the button on the toolbar.
  2. Then type in the URL.
Examples: www.shacbsa.org/fun-with-son
www.oa.shacbsa.org/noac 


►Only embed videso from approved sources (e.g., SHAC YouTube page, BSA YouTube page)
►Do not use videos with copyrighted music

Features

Templates

A Content Template is a feature that lets the structure of the content and preserve consistency across multiple pages to be controlled. Templates are pre-defined, ready-made content with layout, text formatting and styling as well as other elements.

To use one of the templates, press the  button on the toolbar. Since creating and adding new templates is an advanced feature, please contact the council webmaster if you need assistance.

Examples:
Each template listed in the window contains a title, an image presenting the schematic outline of the template as well as its description.
 
In order to select a template, choose it from the list in the Content Templates dialog window and click once. The dialog window will close and the selected template will be applied to the document.
 
The Content Templates dialog window contains only one configuration option: Replace actual contents.
 
Leaving it checked means that the inserted template will also replace the content entered previously into the editor window, deleting it in the process. This is a potentially destructive operation, so if you unintentionally remove the text using this option, you can always revert this operation by pressing the button
on the toolbar or the Ctrl+Z shortcut on your keyboard.
 
If you leave the Replace actual contents option unchecked, the template will be inserted in the current position of the cursor in the document. 

Html code for Divs

<div class="row">
  <div class="grid_6 grid">
    <div class="well">

 

\

 

 

 

Div 1 content

Div 2 content
Source (Html code):

<div class="row">
<div class="grid_5">
<p class="AlignCenter">Div 1 content<br />
</div>

<div class="grid_5">
<p>Div 2 content</p>
</div>
</div> 

Grey Box

Grey Box

Source (Html code):

<div class="row">
<div class="grid_10 grid">
<div class="visual-box">

<h2>Grey Box</h2>

</div>
</div>
</div>

Indented Grey Box

 

Indented box

Source (Html code):

<div class="row">
<div class="grid_1">&nbsp;</div>

<div class="grid_9 grid">
<div class="visual-box">
<h2>Grey Box</h2>
</div>
</div>


Two Grey Boxes

 
 



Grey box 1

 



Gray box 2



Source (Html code):

<div class="grid_1">&nbsp;</div>

<div class="row">
<div class="grid_1">&nbsp;</div>

<div class="grid_4 grid">

<p class="visual-box">Grey box</p>
</div>

<div class="grid_1">&nbsp;</div>

<div class="grid_4 grid">

<p class="visual-box">Grey box</p>

</div>
</div>

 

 

Registration Box

Registration instructions

 

Early
Registration
(Before 3/1/20)

Registration
(after 3/1/20)

Onsite
 
Adults      
Youth (ages 14-18)      
Lunch (optional)      


<h2>Registration Box</h2>

<div class="row">
<div class="grid_5 grid">
<p>Registration instructions</p>
</div>

<div class="grid_5 grid">
<div class="visual-box">
<table align="center" border="0" cellpadding="1" cellspacing="1" style="width: 400px;">
    <tbody>
        <tr>
            <td>&nbsp;</td>
            <td class="AlignCenter" style="vertical-align: top;">
            <h4>Early<br />
            Registration<br />
            <span class="font-60">(Before 3/1/20)</span></h4>
            </td>
            <td class="AlignCenter" style="vertical-align: top;">
            <h4>Registration<br />
            <span class="font-60">(after 3/1/20)</span></h4>
            </td>
            <td class="AlignCenter" style="vertical-align: top;">
            <h4>Onsite<br />
            &nbsp;</h4>
            </td>
        </tr>
        <tr>
            <td>Adults</td>
            <td class="AlignCenter">&nbsp;</td>
            <td class="AlignCenter">&nbsp;</td>
            <td class="AlignCenter">&nbsp;</td>
        </tr>
        <tr>
            <td>Youth&nbsp;<span class="font-60">(ages 14-18)</span></td>
            <td class="AlignCenter">&nbsp;</td>
            <td class="AlignCenter">&nbsp;</td>
            <td class="AlignCenter">&nbsp;</td>
        </tr>
        <tr>
            <td>Lunch <span class="font-60">(optional)</span></td>
            <td class="AlignCenter">&nbsp;</td>
            <td class="AlignCenter">&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </tbody>
</table>
</div>
</div>
</div>

 

Form Feature

Advanced feature:  CSS class: grid_8 autowidth

First, Middle, Last, Suffix: col-xs-10 col-md-5 and col-xs-2 col-md-1     Email / Phone: col-xs-6     City/State/Zip: city: col-xs-6, state: col-xs-3, zip: col-xs-6

<div class="alert alert-success"><b>Success!</b> Your registration has completed successfully. Thank you for your interest, we'll be in touch with you soon to provide information about current news and activities.</div>

 

Hints

  • Use Cntrl + Enter when you only need a single space after a line.  Use Enter when ending a section of similar font size
  • Copy the source (html) code before saving if you have worked really hard on page.  Click on Source, then Ctrl+A and Ctrl+C, then paste into notepad to save.
  • Don't delete the red flag  when editing 
  • Watch for <divs>

Recent Webmaster Announcements

Units Page

Make sure to update your units page is updated with accurate unit leader and commissioner contact information, feeder elementary school and troop meeting nights. Ask your commissioner team for help in gathering this information.  Feeder elementary schools are important as this will show up in google searches when parents are trying to locate which pack to join.  Plus accurate feeder schools can help serve as the official source for turf wars that occur when a volunteer tries to recruit at schools not assigned to their unit.

Friendly Reminder - There are two steps to publish a page:

  1. After editing a page, save the changes by clicking on Update Draft at the bottom of page: 
     
  2. Submit the page for publishing by clicking on the check mark ( = Request approval for this draft content instance) between the Settings and Edit button at the top of the page: 

Newsletters

Did you know that the district websites have a newsletter feature already set up and ready to go? There is a link on the home page that directs Scouters to the communications page to sign up. There is a "Send a Newsletter" page under resources that provides a link and instructions on sending newsletters. Contact Darlene if you have any questions.

Training Pages

We have a new "What to Bring" to training page.  Please ask your district training chair to review the list. Note: a medical form is always required to be on the list of things to bring.

Eagle Scout pages

We have two new forms (look at the advancement page under resources):

  • Request district representative for Eagle Scout Board of Review
  • Request a district meeting for an Eagle Scout project review 

These pages can currently only be viewed by webmasters.  Please ask your district advancement chair if they would like these pages turned on. This was announced at Council Coordinated. The forms can be emailed to the advancement chair and/or the advancement committee.  Have the advancement chair check out https://big-cypress.shacbsa.org/request-eagle-scout-board-of-review and https://big-cypress.shacbsa.org/request-eagle-scout-project-review as examples.  We can customize the forms with additional specific instructions if needed.

 

♦ An event must be presented at least seven times before it sounds important.
♦ Remember KISMIF (Keep it simple, make it fun) can also mean “Keep it secret, make it fail.”
♦ "A flyer or sign is not an ask. An ask is a personal connection." -Gary Butler
♦ "We have to use technology to get youth away from technology and outdoors."-Steve Deitz
♦ "It is more important than ever to deliver great Scouting experiences." -Stephen Medlicott