Continuing Education Company Logo

Guide of styles and class

Tables class and Id

ID for Sessions

This ID is used in the sessions section within the tabs. It is for the table that goes inside the accordion. It is important to keep in mind several things: the date should not be added inside the table but in the space where it says "date" in the sessions, you must always add a width of 100%, a special class is used for breaks, and don't add bold to the titles and item 1, as they already have it.

<table id="session-table" style="width:100%;"></table>

Example:

Title Title Title
Item 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vulputate dignissim ex, nec commodo eros pharetra et. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vulputate dignissim ex, nec commodo eros pharetra et.
Item 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vulputate dignissim ex, nec commodo eros pharetra et. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vulputate dignissim ex, nec commodo eros pharetra et.
10:00 am: BREAK***
Item 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vulputate dignissim ex, nec commodo eros pharetra et. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vulputate dignissim ex, nec commodo eros pharetra et.
Item 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vulputate dignissim ex, nec commodo eros pharetra et. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vulputate dignissim ex, nec commodo eros pharetra et.

*** This is the class for breaks. It is different because, if not done this way, it will not work for responsive versions. The class for the break is class="grey-bg", and you also have to use a colspan="#" with the number of columns that the table has. The code is:

<tr><td class="grey-bg" colspan="3">10:00 am: BREAK</td></tr>


Class: workshop-content-table

This class is used for workshops on a landing page, but it can be used elsewhere. The difference is that it has a title in the first row and a subtitle in the second row.

It is important to keep in mind several things: you must always add a width of 100%, and don't add bold to the titles and item 1, as they already have it.

<table class="workshop-content-table" style="width:100%;"></table>

Example:

Title Title Title Title
Subtitle Subtitle Subtitle Subtitle
Item 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Item 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Item 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.


Class course-content-table

This class is used for the content and speakers on the online courses, but it can be used elsewhere. The difference is that this one has only one main title.

It is important to keep in mind several things: you must always add a width of 100%, don't add bold to the titles and item 1, as they already have it. Also, if you create the table from scratch, you need to make sure that the first line has a colspan="#" with the number of columns that the table has.

<table class="course-content-table" style="width:100%;"></table>

Example:

Title
Item 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vulputate dignissim ex, nec commodo eros pharetra et. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vulputate dignissim ex, nec commodo eros pharetra et.
Item 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vulputate dignissim ex, nec commodo eros pharetra et. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vulputate dignissim ex, nec commodo eros pharetra et.
Item 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vulputate dignissim ex, nec commodo eros pharetra et. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vulputate dignissim ex, nec commodo eros pharetra et.
Item 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vulputate dignissim ex, nec commodo eros pharetra et. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vulputate dignissim ex, nec commodo eros pharetra et.


Class: webcast-calendar-table

This class is used for the webcast on a landing page, but it can be used elsewhere. There is not much different. It is important to keep in mind several things: you must always add a width of 100%, and don't add bold to the titles and item 1, as they already have it.

<table class="webcast-calendar-table" style="width:100%;"></table>

Example:

Title Title Title Title
Subtitle Subtitle Subtitle Subtitle
Item 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Item 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Item 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.



Modal video

The modal video is an option to make an image pop up as a video in almost full screen. First, you need to create a link (an <a></a> tag), then put the image inside the link. After that, go to the code view and add the following inside the <a> tag:

href="[modal]=#"

Where # represents the ID of the YouTube video. The ID is the last part of your YouTube link, which is always different. For example, in https://www.youtube.com/watch?v=jfKfPfyJRdk, the text in red is the video ID.

Example of the modal:



Styles for bottons

It uses only three different styles of buttons. These are classes that are applied to the <a> tag, and then you can add the URL in the href attribute. Alternatively, you can copy and paste the example of the button below and then use Command or Control + K to add the URL in the link field.

Blue Principal buttom 

Lorem ipsum dolor sit amet

White with blue border secondary buttom

Lorem ipsum dolor sit amet

Red buttom

Lorem ipsum dolor sit amet



For the Images

We can add any image anywhere, but we make some changes to the images for consistency that you can follow if you want:

  1. Adding a Border Radius: If you insert an image in a WYSIWYG editor, it should have a border-radius: 9px;. You can add it in the HTML viewer like this: style="border-radius: 9px;".

  2. Full Width Images: If you insert an image in a WYSIWYG editor that you want to take the full width of the space (for example, in a tab), you need to use style="width:100%;". I recommend that these images are more like banners so they don't take up too much space.

  3. Small Format Images: If you want to add a small image that mixes with the text, you can use the following code: style="float: right; border-radius: 9px; max-width: 250px; margin: 0 0 20px 20px;".

  4. Stacked Images: If you want to place two images, one on top of the other, you can put both inside a <div style="float: right;"></div> in the HTML view and add a space (</br>) between the images.

Subscribe to our Newsletter and stay up to date with Conferences and our best deals

Suscribe