Docs

Installation Intructions

  1. If you bought this theme through your dashboard go to step 2. Otherwise, unzip this file in your site's packages/ directory.
  2. Login to your site as an administrator.
  3. Find the "Add Functionality" page in your dashboard.
  4. Find this package in the list of packages awaiting installation.
  5. Click the "install" button.

Logo

The Logo is set using content block. It could also be set using image block.

Image Background

To change Image Background: homepage -> gear icon -> custom attributes -> change the Image Background in the bottom part

Page Title Background

To change Page Title Background: homepage -> gear icon -> custom attributes -> change the Page Title Background in the bottom part

Footer Background

To change Footer Background: homepage -> gear icon -> custom attributes -> change the Footer Background in the bottom part

Autonav Block Custom Templates

Use an "Autonav" block, then choose the desired template under design & custom template => gear icon => custom template

  • cosmos_arrow_list_menu
  • cosmos_circle_arrow_menu
  • cosmos_collapsible
  • cosmos_collapsible_v2
  • cosmos_menu
  • cosmos_tree_menu

Conversation Block Custom Template

Use a "Conversation" block, then choose the desired template under design & custom template => gear icon => custom template

  • cosmos_core_conversation

FAQ Block Custom Templates

Use an "FAQ" block, then choose the desired template under design & custom template => gear icon => custom template

  • cosmos_faq_collapsible
  • cosmos_faq_scroll

Feature Block Custom Templates

Use a "Feature" block, then choose the desired template under design & custom template => gear icon => custom template

  • cosmos_circle_fill
  • cosmos_circle_fill_vertical
  • cosmos_circle_outline
  • cosmos_circle_outline_vertical
  • cosmos_feature_vertical
  • cosmos_hexagon_outline
  • cosmos_hexagon_outline_vertical

Form Block Custom Template

Use a "Form" block, then choose the desired template under design & custom template => gear icon => custom template

  • cosmos_form
  • cosmos_formv2
  • cosmos_newsletter_form

Image Block Custom Templates

Use an "Image" block, then choose the desired template under design & custom template => gear icon => custom template

  • cosmos_icon_link_bottom_to_top
  • cosmos_icon_link_left_to_right
  • cosmos_icon_link_right_to_left
  • cosmos_icon_link_top_to_bottom

Image Slider Block Custom Templates

Use an "Image Slider" block, then choose the desired template under design & custom template => gear icon => custom template

  • cosmos_animate_slider
  • cosmos_thumbnail_slider

Pagelist Block Custom Templates

Use a "Pagelist" block, then choose the desired template under design & custom template => gear icon => custom template

*Note: Use Thumbnail in custom attributes for the images (page settings => attributes => thumbnail)

  • cosmos_3column_img_hover
  • cosmos_4column_carousel_list
  • cosmos_4column_list
  • cosmos_arrow_list
  • cosmos_card_list
  • cosmos_circle_arrow_list
  • cosmos_hexagon_icon
  • cosmos_main_list
  • cosmos_name_list
  • cosmos_porfolio_list
  • cosmos_sidebar_list
  • cosmos_slide_item_list
  • cosmos_slide_itemv2_list

Search Block Custom Template

Use a "Search" block, then choose the desired template under design & custom template => gear icon => custom template

  • cosmos_icon_inside
  • cosmos_searchbar

Share This Page Block Custom Template

Use a "Share This Page" block, then choose the desired template under design & custom template => gear icon => custom template

  • cosmos_share_this_page

Social Links Block Custom Templates

Use a "Social Links" block, then choose the desired template under design & custom template => gear icon => custom template

  • cosmos_social_icon_circle
  • cosmos_social_icon_flat
  • cosmos_social_icon_rounded
  • cosmos_social_links

Tags Block Custom Template

Use a "Tags" block, then choose the desired template under design & custom template => gear icon => custom template

  • cosmos_tags

Datasouth Custom Blocks and Its Custom Templates

  • ds_faq_alternate
    • alternate_collapsible
    • alternate_expand
    • tab_content
  • ds_multiple_testimonial
    • fourcolumn_about
    • testimonial_slider
  • ds_typing_text

Call To Action Button

Simply add a class "btn-cosmos-ctm box md" on your <a>; or <button> tag.
Example:

<a href="#" class="btn-cosmos-ctm box md" >Test Button</a>

For more information about theme colour customisation, go to this document page: Click here

Top