The author of this page is the webmaster for the Sierra Club Suwannee St. Johns Group. Do not edit this page. Send your suggestions to the webmaster in the form of an email.

Contents

• Purposes
• How to copy HTML code snippets
• Styles and Classes
  • Pre-defined, Bootstrap
  • Colors
• Hyperlinks
• Layout
  • Float
  • Flexbox
• Images
• Media
  • Video
• Error Checking
  • Broken Links, HTML Errors, Spelling
• More Webmaster Tips
• Search and Replace, Entity Codes, Features Request Form

Related Pages

This page is for advanced webmasters.
We are assuming that you already know the basics for How to Author a Blog Post and How to Author Anything.

Purposes

1. Webmaster tips.
2. To provide snippets for common HTML code - that can be copied from here, and then pasted/edited in web pages that you author.
3. To provide a 'cheat sheet' to view and understand how some common HTML styles and elements are used.

How to copy HTML code snippets

1. Click the 'HTML' button (above)
2. Find the snippet of code that you want to copy
3. Copy it
4. Open the 'HTML' editing window for the page that you author. (by clicking the 'HTML' button there)
   (Tip: It is always a good idea to save a backup Version of your page - that you can revert back to if you need to start over)
5. Find the place in the code where you want to insert the snippet
6. Paste
7. Edit the snippet (following the training or tips found along with the snippet on this page)
8. Test

Styles and Classes

Pre-defined Style Classes — Dropdown

Sierra Club has provided a (very) limited number of pre-defined style classes that can be applied by using the 'Styles' dropdown list in Drupal.

Some classes are intended to be applied to an entire paragraph. So (for instance), when you want to apply the 'Indent' class, you need to first select the entire paragraph.

We have requested a copy of this CSS style sheet, so that we see the details of which styles are affected in what ways for each class. +++

More Sierra Club Style Classes

Here are some links to Sierra Club training pages for style classes:

• Sierra Club Style Guide
• Sierra Club Brand Style Guide

Caution: Some of the things in these trainings are not available to Entity webmasters (like us).

Bootstrap Style Classes

Bootstrap is open source code that provides style classes that are shared by hundreds of thousands of websites. 

Online training for Bootstrap 3.3.5 

You can use any of the standard classes in the Bootstrap 3 CSS library, with the following caveats:

• Bootstrap is written using HTML5. The Sierra Club website uses XML. There are small differences in coding that Drupal usually (but not always) corrects for.
• It is a smart idea to compare a class in the Bootstrap 3.3.5 libary to the same class in the Bootstrap 4.1 library. Some classes were modified, deprecated, or eliminated in version 4.
• Although Drupal 8 supports Bootstrap 4, Sierra Club will continue using Bootstrap 3. 
• +++ I am currently proposing to Sierra Club Drupal Support the idea of linking to a temporary CSS style sheet that can duplicate the most commonly-used Bootstrap 4 classes (mostly for margins and padding, but also d-block and some other useful new classes).
  If that idea is rejected, then you can always hand-roll styles for margins and padding, but it is sooo much slower, and will be harder to convert when Sierra Club eventually migrates to Bootstrap 4, and (here's the real kicker...) Drupal sometimes wipes out "auto-corrects" your hand-rolled styles.

Colors

Colors are more difficult than they should be in the Drupal interface.

The only way to edit colors is by using the HTML editor. 
Example: style="color:#DF2700;"

Here are the approved Sierra Club colors: https://www.sierraclub.org/styleguide/colors

Most common: Orange-Red: #DF2700

I also often use a color red that is similar but easier to remember: #c00000

+++ Drupal bug: The only way to apply a hand-rolled style (such as color) is to also apply one of Drupal's pre-defined style classes (from the dropdown menu). 

For example: <span style="color:#DF2700;">text</span> WILL NOT WORK — (Drupal will auto-delete your hand-rolled HTML code)
 <span class="large" style="color:#DF2700;">text</span> WILL WORK — as shown here: text that correctly displays color

@@@ Tech question for Drupal Support: Drupal even stripped the above code when I used <span class="normal" 
I am now testing with <span class="large" 

And just to make things more confusing, styles without an accompanying class will appear to work correctly in Preview mode, but won't actually work when you publish the page.

Hyperlinks

Hyperlinks are more difficult than they should be in the Drupal interface.

+++ Drupal provides no way to browse existing pages in our site, so you need to know 1) the exact filename that you're linking to, and 2) the relative path.

Tip for relative paths: Blog posts have default filepath in the format of https://www.sierraclub.org/florida/suwannee-stjohns/blog/2021/12/blog-post-title, while most web pages have default filepath https://www.sierraclub.org/florida/suwannee-stjohns/page-name. So when linking to a web page from a blog post, a relative path would be similar to ../../../blog-title-youre-linking-to. (In other words... go back 3 folder levels.)

Drupal provides no broken link checking, so you're on your own to double-check that your links work!!! See error checking.

When linking to a page outside of our own site, be sure to select the hyperlink option to 'Open In New Window (_blank)'. 

Layout

Float

When you insert an image to float, you might want to resize it. (If it is too big, it won't float.)

+++ Not sure why Drupal "auto-corrects" to encase images within a paragraph. So you need to apply classes and styles to the surrounding paragraph, rather than to the image itself.

Select the image (or whatever you want to float), then from the Styles dropdown box (above), select either 'float left' or 'float right'.
+++ It seems to have a bug that adds and extra paragraph when you do this, so you need to use HTML editor to manually delete that.

+++ I'm not sure why style classes 'float with margin' don't work.

Bootstrap 3.x doesn't have the margin and padding classes that were added in 4.1, but you can optionally use the HTML editor to manually add hand-rolled styles, like style="margin: 12px;" or "padding-left: 12px;"

Optionally use HTML editor to add 
<div style="clear: both;"></div>
to define the place where paragraphs should stop wrapping alongside the floating object.

+++ I'm not sure why the style class 'clear floats' doesn't work... Also not sure why it "auto-corrects" to add a space within the empty div - thereby adding unwanted vertical space between elements.

Bootstrap Flexbox Grid

(for advanced web authors only)

See Flex cheat sheet

and Bootstrap Flex utilities (this training is for Bootstrap v4.1. Sierra Club Drupal is still on v3.x)

The following flexbox starter code has been well-tested in Bootstrap 4.1. In 3.x, it seems to still work - but only by adding class 'clearfix' to the outer div.

I also needed to strip my usual code for d-block, mx-auto and px-0, because Bootstrap 3.x doesn't support those 4.1 features.
+++ I am currently proposing to Drupal Support the idea of linking to a temporary CSS style sheet that can duplicate the most commonly-used Bootstrap 4 classes (mostly for margins and padding). 
If that idea is rejected, then you can always hand-roll styles for margins and padding, but it is sooo much slower, and will be harder to convert when Sierra Club eventually migrates to Bootstrap 4, and (here's the real kicker...) Drupal sometimes wipes out "auto-corrects" your hand-rolled styles.

Flexbox starter code to copy

This paragraph is below the flexbox.

Images

In addition to the instructions on our authoring page... 
we can contact rebekah.cousins@sierraclub.org with any questions about the canto image library,
and can seek funding for Sierra Club to purchase rights to stock images that we might not want to purchase just for our own site.

Media

Embedded YouTube Video

Notice that when you play the video, YouTube does not present the user with options to follow "similar" videos (that distract the user to stray away from our Sierra Club site).

Instructions:

1. From the HTML souce code, copy and paste this code snippet to your page.
2. Replace 11-character video number in URL. (Right after /embed/ and before the question mark)
3. Edit video title.
4. Test.

@@@Video Title

 Error Checking

Drupal provides very little help for error checking, so we need to use external error-checking services.

Ignore the many errors found in page sections that you cannot edit.
+++ It would be nice if Sierra Club webmaster could clean up many of these errors.

Broken Link Checker

Use an external broken link checker, such as https://validator.w3.org/checklink.  (Don't check any of the boxes)

HTML Error Checker

Use an external HTML error checker, such as https://validator.w3.org/

Spell Checker

Use an external HTML error checker, such as https://www.online-spellcheck.com/spell-check-url

More Webmaster Tips

Search and Replace

Copy and paste HTML source code to and from Notepad.

Entity Codes

Entity codes web page: https://community.sierraclub.org/page/entity-codesfrip-codes

SSJ Entity Code: 3305

SSJ Entity ID: 643082

Club Entity (for Events Calendar): 3305-Suwannee-St Johns Group

Activity Entity (for Events Calendar): 32163 @@@ +++

SalesForce Preference ID: FLSUWAN

Redirects

https://www.sierraclub.org/florida/ssj is shorter path that will resolve to the longer https://www.sierraclub.org/florida/suwannee-stjohns

Features Request form 

https://docs.google.com/forms/d/e/1FAIpQLSegnwKhSLRsdK9JYphvRcRch-5VuEZc7P2WOJNEDa_Ehl3qIA/viewform

(to report bugs and/or request new features such as helpful new style classes)