Markdown gives you the power to add your own style to managed content areas, program descriptions, and more!
This article will cover both basic and advanced uses of markdown, including applying HTML structure and style classes to style your content to match other parts of the system.
Basic Markdown
Most places on your RideAmigos platform that support markdown content will display the built-in editor shown above. The editor provides a number of shortcuts for common markdown styles and a preview tool so that you can get a sense of how your content will appear. The editor helps apply most markdown styles, but here's an overview of how markdown styles work:
Emphasis
**bold** *italics* ~~strikethrough~~
Headers
# Big header ## Medium header ### Small header #### Tiny header
Lists
* Generic list item * Generic list item * Generic list item 1. Numbered list item 2. Numbered list item 3. Numbered list item
Links
[Text to display](http://www.example.com)
Quotes
> This is a quote. > It can span multiple lines!
Images Note - you'll need to upload your image somewhere publicly accessible in order to reference it!
Tables
| Column 1 | Column 2 | Column 3 | | -------- | -------- | -------- | | John | Doe | Male | | Mary | Smith | Female | Or without aligning the columns... | Column 1 | Column 2 | Column 3 | | -------- | -------- | -------- | | John | Doe | Male | | Mary | Smith | Female |
Advanced Style using HTML and Classes
In addition to markdown syntax, most content areas also allow you to use HTML and style classes to apply styling to your content. This allows you to match other parts of your site or create advanced layouts of your own.
Links
While markdown does a decent job for creating links, there are times that it is advantageous to use HTML instead. The tag used for creating links is <a> as seen below:
<a href="https://www.example.com" target="_blank">This is my link text.</a>
One key reason to use HTML instead of markdown for links is to specify when you want your link to open in a new tab instead of redirecting the current page. The example above also includes the 'target' attribute that enables this behavior. Just include target="_blank" within your opening <a> tag and the link will open in a new tab.
Link tags are often also used as wrappers around other types of content, such as buttons or images, to make those objects into clickable links.
Images
Another helpful HTML tool is the <img> tag.
The most basic HTML image reference is just a single <img> tag with the 'src=' attribute defining the URL of your image:
<img src="https://placekitten.com/g/300/300"/>
Setting an image to a specific width
<img src="https://placekitten.com/g/600/600" width="200"/>
One of the top reasons to use an <img> tag instead of using markdown for images is so you can resize images to fit within a particular area. This helps solve a common headache since image resizing isn't possible using markdown, which requires you to resize your image before uploading it.
The code above sets the maximum width of the image to 200 pixels. The image will also automatically resize the height to maintain the correct aspect ratio.
Setting an image to fill container width
<img src="https://placekitten.com/g/600/600" width="100%"/>
<img src="https://placekitten.com/g/600/600" class="w-100"/>
Sometimes you want your image to automatically resize to fill whatever width is available in the content container without having to guess how many pixels wide that should be.
The code above shows two ways you can set the width to 100%.
The first one uses the same width attribute as above, just with a percentage. Note you can use this same method to set the size to other percentages, too!
The second example shows using a built-in class, 'w-100', which can be used on both images and other kinds of content to match the horizontal width to the parent container.
Using 'alt' text for accessibility
<img src="https://placekitten.com/g/600/600" class="w-100" alt="Cute Kitten"/>
The "alt=" attribute is used to provide alternate text to describe your image for users who access your content through screen readers or other assistive devices.
Best practice for accessibility is to ensure all your images use alt tags to describe their content and purpose.
Links + Images
<a href="https://gogallatin.org/s/big-sky-sno" target="_blank">
<img src="https://placekitten.com/g/600/600" class="w-100" alt="Cute Kitten"/>
</a>
To create an image that links to another page, just insert your <img> code where you would normally place text when creating a link.
Advanced Text Formatting
While markdown lets you apply basic styles to your content, sometimes you want to get just a little fancier. If that's your desire, we've got you covered.
First let's cover some basic tags used for defining different types of text content:
<h1>This is a big header, best for page titles</h1>
<h2>This is a large header, best for heading main content areas</h2>
<h3>This is a medium header, best for heading secondary content</h3>
<h4>This is a small header, best for things like widgets and smaller content areas</h4>
<p>This is a paragraph.</p>
<p>This is another paragraph.
It can take up multiple lines and be as long as you want
and when the system displays it the formatting will just be one, beautiful paragraph
up to the point you insert the close paragraph tag.</p>
<p>Here is a paragraph <span>that has a special span within it.</span> The paragraph controls
the main formatting but the span can apply special formatting to certain portions. </p>
Of the 4 header levels you're most likely to use levels 2 through 4, depending on what type of content you're managing or creating. If RideAmigos has done any preliminary setup for you and selected a header size for a specific location we recommend not changing it.
The built-in editor will automatically create paragraphs even if you don't use paragraph tags, but sometimes it's helpful to manually define them, particularly if you want to apply a special style to a particular paragraph.
Spans are great for styling specific words or phrases within paragraphs.
All of these tags allow you to apply styling classes that can change the color or styling. To add a class, just add class="class-name" as part of the opening tag, like this:
<h4 class="text-primary">This is primary-colored header</h4>
<p class="fs-16">This is a paragraph using 16-point font</p>
Here's a list of some supported text-styling classes:
| text-primary |
Set text color to primary site color |
| text-success | Site success color, often a shade of green |
| text-warning | Site warning color, often a shade of orange |
| text-danger |
Site danger color, often a shade of red |
| fs-10, fs-12, fs-14, fs-16, fs-18, fs-20 | Specify a specific font size in pixels. Default is 12 for most content areas. |
Any of these can be used on any text tags, though it's generally not a good idea to specify tiny text for headers or make entire paragraphs of content custom text colors.
Text alignment & inheriting formats using Div containers
To change the alignment of your text areas you'll need to wrap them in a <div> tags. A <div> tag is normally just an invisible container when there are no classes applied to it.
<div>
<h4>This is a header</h4>
<p>And this is a paragraph.</p>
</div>
However, when you apply classes to such wrapper divs they can impact all of the content contained within. For example, wrapper divs can be used to set the alignment and font size for all of the content that appears within them:
<div class="text-center fs-18">
<p>Follow us on Facebook!</p>
<img src="./customer/example/img/logo-facebook.png" alt="logo-facebook" width="100"/>
<p>Like and follow our <a href="https://www.facebook.com/example/" target="_blank">Facebook
page</a> for tips, news, updates, and more!</p>
</div>
In this example of a Facebook widget the font size is set to 18 and all content (2 paragraphs and an image) are all set to center-aligned.
You can use text-center, text-left, and text-right to set content alignment via a container div.
Dashboard Widgets
Putting all of these concepts together gives you the knowledge to create and manage dashboard widget content!
Basic dashboard widget content can be created and managed using markdown, but with a little HTML confidence you can manage more sophisticated content, too.
Basic Widget Layout
The same styling features RideAmigos uses under-the-hood can give you complete control over your custom content widgets.
<div class="panel-heading panel-title text-center">
CMS Example Widget
</div>
<div class="panel-body">
This is an example of content object within a dashboard widget.
</div>
The first <div> used here includes styling classes that create the header portion of the widget, where the title lives. You can see text-center is used to ensure the title is centered.
We suggest not making your widget title too long, as widget titles that take up two lines look a little odd.
The second <div> creates the body of your widget, where your main content goes.
You can put whatever content you like in the body, including images, buttons, links, and more.
Buttons
Here's an example of a button that is commonly used across RideAmigos sites. This HTML code can be inserted directly into your content editor.
<a href="https://www.example.com" target="_blank">
<div class="btn btn-block btn-default">
<h4 class="text-primary">BUTTON TEXT</h4>
</div>
</a>
This code makes a button that looks something like this:
You can see the <a> tag serving as a wrapper around our entire button code to make it a link.
Here, the <div> tag's classes style this into block-level button. This means that it will take up all available horizontal space inside its container. If you remove the 'btn-block' class, the button will only be wide enough to fit the text inside.
Finally, the <h4> tag - which creates small heading text - has the class 'text-primary'. This turns the text the default text highlight color from your site. Other classes that refer to the theme colors used elsewhere on your site include text-success, text-warning, and text-danger.
If you want a stack of multiple buttons in your sidebar widget, all you need to do is just copy/paste the code above multiple times and edit each button to your liking!
Banner Images
Many customers request banner images (aka hero images) to appear across the top of their dashboard or within the left or right columns of widgets. These work similarly to other widgets but without the panel-header or panel-body classes.
<a href="https://help.rideamigos.com" target="_blank">
<img src="./customer/demo/img/demo-hero-image.jpg" class="w-100 br-5" alt="dashboard hero image"/>
</a>
In this example of a banner image we see an <a> tag that makes the banner clickable. Inside is an <img> tag that defines the properties of the banner image.
To change the page the link opens, modify the code where <a href="https://yoururl.com" ...
To change the image displayed, modify the code where <img src="https://yoururl.com" ...
You can also see we're using the w-100 class to set the image width to 100%. The br-5 class sets the border radius of the image to 5 pixels, which gives the image rounded corners to match other dashboard widgets.
Other Layout Classes
RideAmigos also has many other custom helper classes that you may see referenced if we've helped set up your content. These are typically used to fine-tune spacing between objects. If you need to change the margin, padding, or other layout attributes within content you're working on, reach out to the helpdesk and we can provide you with assistance. If you need some other custom styling class to apply to your content, reach out and we can probably help with that, too.