$( 'Enter in html tags and text' ).insertAfter( "selector" );

Example: $( '<p>Test</p>' ).insertAfter( ".inner" );

$( 'Enter in html tags and text' ).appendTo( "selector" );

Example: $( '<p>Test</p>' ).appendTo( ".inner" );

$( 'Enter in html tags and text' ).insertBefore( "selector" );

Example: $( '<p>Test</p>' ).insertBefore( ".inner" );

$( 'Enter in html tags and text' ).prependTo( "selector" );

Example: $( '<p>Test</p>' ).prependTo( ".inner" );

Anchor tags are used to jump to a section of the website page. To do this, you can hyperlink a word or button at the top of the page, like the Departments page, and it will go to a section on that page by scrolling up or down.

Example:

Hyperlink you click: <a href="#billing">Billing</a>h

Where it goes to: <div id="billing"></div> or <a name="billing"></a>

This effect is to make the transition a little smoother from the top of the page to that section of the page you want to go to.  You can speed up or slow down the speed by changing the 500 number.  The smaller the number the faster it is.  

The screen is broken into 12 parts. Our dashboard has a class of col-md-6 which would divide the section into half of that available screen. For example:

div<div class="col-md-6">
<p style="text-align: center;">January 2018 Workshop Seminar Part 1</p>
<p style="text-align: center;"><iframe width="560" height="315" src="https://www.youtube.com/embed/VxOjoQ0QkRw" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe></p>
</div>
<div class="col-md-6">
<p style="text-align: center;">January 2018 Workshop Seminar Part 2</p>
<p style="text-align: center;"><iframe width="560" height="315" src="https://www.youtube.com/embed/1IsT9Dl03yo" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe></p>
</div>

First create the class with CSS, then you can use the class for any section.  Change the width to be whatever width that you would like.  This is the same coding that is used on the Dashboard Intro.  

Best example: If you need to manually code out a column that is mobile responsible, here is another way:

Please place the code in the respective places.

https://support.gospacecraft.com/hc/en-us/articles/202694610-How-can-I-set-a-Video-to-autoplay-on-my-page-

Add ?autoplay=1 to the end of the video source in the iframe code.
(i.e. <iframe src="https://player.vimeo.com/video/161181924?autoplay=1" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>).

For YouTube videos, add ?rel=0;&autoplay=1 to the iframe source.
(i.e. <iframe width="560" height="315" src="https://www.youtube.com/embed/iG9CE55wbtY?rel=0;&autoplay=1" frameborder="0" allowfullscreen></iframe>)

Please place the code in the respective places.

.responsiveImg {
width: 100%;
height: auto;
}

1) In a RTE section, upload the image as an attachment instead of as an image
2) pull the https or http address from the source code of the attachment you just uploaded. There should be "media" somewhere in that url, just a way for you to know you've uploaded it correctly
3) put that https or http into an image tag surrounded with div tags so <div class="full-teamImage"><img src="https-here" width="100%"></div>
4) delete anything else you have in that RTE source code
5) Go to the Custom CSS
6) add the following
.homepage #section_0 .container {
width: 100%;
}
.homepage #section_0 div {
line-height: 0;
}

<script>
$(document).ready( function() {
$(Page.Heros.__slideshowInterval = 9000);
});
</script>

Please place the code in the respective places.

https://drive.google.com/uc?export=download&id=FILE_ID

https://www.labnol.org/internet/direct-links-for-google-drive/28356/

<div class="video-container"><p style="text-align: center;"> <video width="800" height="450" controls="controls">
<source src="https://www.dropbox.com/s/ldf4304jewgy2ph/Tyrone%20French%2030Sec%20TV%20%281%29.mp4?raw=1" type="video/mp4" />
</video></p>
</div>

First, create a share link to the video, then modify the link by changing the ?dl=0 at the end to ?raw=1

Follow these steps.

If you would like to embed a map on the website, you can either go to google maps and click on share and get the emebd code or go to https://www.embedgooglemap.net/.

To embed Google Slides, open up the slideshow and click on file.  Then, click on Publish to Web.  Choose the embed option and hit publish.  Grab the embed code and place it anywhere on your site.  If you update the Google Slides file then it will be updated on the website as well.

Example: <div class="video-container"><p style="text-align: center;"><iframe src="https://docs.google.com/presentation/d/e/2PACX-1vSn0b0A2yvHwYSEpTYjStxjLnh4E_6D4_7FQBtbJ_DeSQGewpmZ_8CRwlqiw_0c1_ltrW7ZI60e6-Jo/embed?start=false&amp;loop=false&amp;delayms=3000" frameborder="0" width="960" height="569" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe></p></div>

<p style="text-align: center;"><iframe width="100%" height="1200px" src="//static.fmgsuite.com/media/documents/743ec3ef-0403-4533-80ec-ac096280de3c.pdf"></iframe></p>

<style>

footer a[href*="mailto"] { display: none; }

</style>

Instructions:

1. Add the addition emails to the emailArr variable by making sure the individual emails end with a starting/ending quotation. Example "email@example.com".
2. Also comma separate the individual emails. Example "email1@example.com" , "email2@example.com ".
3. Add as many emails as you need.
4. Place the code below in the ADD ADVANCED FOOTER HTML of the CMS. Website > Design > Access to website's <head> > ADD ADVANCED FOOTER HTML.  

<script type="text/javascript" src="https://fmg-websites-custom.s3.amazonaws.com/confluence_code_snippets/add_emails_contact_footer/script.js">

//SPACE

</script>

<script type="text/javascript">

   //Enter Emails Here

   var emailArr = ['email1@example.com', 'email2@example.com', 'email3@example.com', 'email4@example.com'];

   appendEmails(emailArr);

</script>

<script>setTimeout(function(){$('footer .quickLinks').remove();
$('footer .container aside .wrapper .contact').css("width","100%"); }, 500);</script>

For Moonlight (will create gap between Contact Info and Disclosure): 

<script>

$(function() {

var oldSrc = 'http://fmg-websites-custom.s3.amazonaws.com/348157-bonine/resources/map.pdf';

var newSrc = '//static.fmgsuite.com/media/documents/f84e65c9-30e8-4ff4-99a2-260a7e979f9d.pdf';

$('a[href="' + oldSrc + '"]').attr('href', newSrc);

});

</script>

<script>

$(function() {

var oldSrc = '//static.fmgsuite.com/media/images/9601a48c-ab2c-4cb1-b2fe-f052d633b7bb.jpg';

var newSrc = '//static.fmgsuite.com/media/images/25c34a49-4797-405d-abfa-21a94fa49a7f.jpg';

$('img[src="' + oldSrc + '"]').attr('src', newSrc);

});

</script>

To only replace text within a specific field please do the following:
$('selector').text('Enter Text Here');

To replace an item entirely:
$('selector').replaceWith('Enter in html tag and text here');

$('.hero-container').insertAfter('#section_1');

To fix some rotator spacing issues:
<style>
@media (min-width: 992px) {
#hero .heroImages,
#hero .heroDesc {
margin-top: 25px;
}
}
</style>

To edit the information that shows up while sharing a link on social media, you would need to edit the meta data in the advanced header of the website. This would set all tag information to be the same for every page of their website.

Most common edit would be to change the image:  <meta property="og:image" content="insert image to be the thumbnail" />

Further help.

Facebook

Google+

Linkedin

Twitter

<!-- 16:9 aspect ratio for widescreen-->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>