Skip to content. Skip to main navigation.

Help with the Boy Scout Troop Template

The html pages are well-commented, so finding which parts to edit is easy.

Three layouts

There are three layouts, a home page, a content page, and a wide page that has no sidebar. Make a copy of contentpage.html and save as a filename you want to use (e.g. troop-news.html) for a regular page. Do the same for content-full.html to make a page without a sidebar.

Images Warning

The theme is responsive (changes to fit the device on which it is displayed). When adding image DO NOT GIVE IMAGES A HEIGHT OR WIDTH or you will break the mobile page. In the CSS stylesheet images are given a maximum width of 100% for small screens (like smartphones), but if your images has a width of 750px it will display larger than the screen. Check all of your pages on a mobile phone to see if you have made a mistake.

HTML 5 and CSS3

The site is HTML5. If you are unfamiliar with HTML5, please read up on it. It is not complicated, but you should be aware of the semantic tags.

The HTML contains no style information; that is completely in the CSS stylesheet. Be careful if you add an inline style because several page elements are changed by the media queries in the style sheet. An inline style may override the stylesheet and cause your page to break on tablets or smartphones. Check all your pages on your phone and tablet.


This code:

<p class="skip"><a accesskey="C" href="#wrapper">Skip to content</a>. <a accesskey="N" href="#nav">Skip to main navigation</a>.</p>

is an attempt to make the site accessible to non-visual browsers. Please do not remove it.

Feel Free

Feel free to change or add to anything in this template. If you do not mind, I do ask you leave the link at the bottom of the page.

Get this Scout Troop Website Template.