Documentation

To enable the auto-nav dropdown on your site:

  1. There are two Page Attributes that install with the "Playful" theme (Dashboard>Pages & Themes > Attributes):
    • Has Subpage — any page that has pages under it that you want to display
      • As you create pages in the Sitemap, go to each page that has sub pages under it, such as the "blog" page in the sample content installation
      • Select "Properties"

sitemap_properties.jpg

      • Click on the Attribute "Has Subpage" under Dropdown

has_subpage.jpg

    • Sub Level — any page that is a child page
      • As you create pages in the Sitemap go to each page that is a sub-level page and click on it
      • Select "Properties"
      • Click on the Attribute "Sub Level" under Dropdown

sub_level.jpg

2.  Visit any page on your site and put it in edit mode

    • Click on the main navigation menu
    • Select "Edit"
    • Make sure that "Sub Pages to Display" and "Sub Page levels" are set to "Display All" 
    • Save to close the dialogue box

edit_autonav.jpg

3.  Click "Custom Template" at the bottom of the menu that appears

    • Select Dropdown from the list
    • Hit "Save" to close the dialogue box 

custom_template.jpg

4.  Under the edit menu, hit "Publish my Edits"

publish.jpg

 

Customizing Text Elements:

  • Install Playful into your Concrete5 install (Dashboard > Extend Concrete5>Add Functionality)
  • There are several pre-canned colors set to match the theme available in the in-context editor under the "Style" toolbar menu: 
  1. Red
  2. Purple
  3. Blue
  4. Green
  5. Coral
  6. Lavendar
  7. Orange Yellow 
  8. Bold
  9. Fancy

customize2.jpg

  • Bold and Fancy are set to special google fonts, but can be altered for color and font in the Customize menu found in:
    • Dashboard > Pages and Themes > Themes

customize1.jpg

  • In this menu you can customize the body font colors, link colors, the colors for headings 1, 2, 3, 4, 5 and 6 Site Name color and even change the hover color that shows when a user moves their mouse over the Site Name. 
    • You can apply headings 1-6 and paragraph styles in the in-context editor under the "Format" toolbar menu.


Customizing Text Elements:

  • Install Playful into your Concrete5 install (Dashboard > Extend Concrete5>Add Functionality)
  • There are several pre-canned colors set to match the theme available in the in-context editor under the "Style" toolbar menu: 
    1. Red
    2. Purple
    3. Blue
    4. Green
    5. Coral
    6. Lavendar
    7. Orange Yellow 
    8. Bold
    9. Fancy

customize2.jpg

  • Bold and Fancy are set to special google fonts, but can be altered for color and font in the Customize menu found in:
    • Dashboard > Pages and Themes > Themes

customize1.jpg

    • In this menu you can customize the body font colors, link colors, the colors for headings 1, 2, 3, 4, 5 and 6 Site Name color and even change the hover color that shows when a user moves their mouse over the Site Name. 
      • You can apply headings 1-6 and paragraph styles in the in-context editor under the "Format" toolbar menu.

 

If your Site Name is not displaying in the center:

  • Go to: Dashboard > Stacks and Blocks > Stacks > Site Name

customize3.jpg

  • Click the block there and select "Edit"
  • Select the text
  • Hit the "center" toolbar button

center_paragraph.jpg

  • Click "Save" to close the Editing Box
  • Click "Approve Changes" in the upper right of the Stack Box

To use an image instead of your Site Name:

  • Go to: Dashboard > Stacks and Blocks > Stacks > Site Name 
  • Click the block there and select "Edit"
  • Delete the text site name
  • Hit the "center" toolbar button

center_paragraph.jpg

  • Hit "Add Image" in the toolbar  
  • Once the file manager is open select "Choose File" and use the dialogue box to locate the file on your computer.  Once you've chosen the right file select "Upload File".
    • The target file size should be roughly 140 pixels in width and 60 pixels in height
  • Click "Save" to close the Editing Box
  • Click "Approve Changes" in the upper right of the Stack Box
 

This stack is global so when you return to your website the content should be in place on all pages.

 

To add social icons to your site as seen in the demo:

  • Go to: Dashboard > Stacks and Blocks > Stacks > Social Icons
  • Click "Add Block"
  • Add a "Content" block to the stack
  • Click "Add Image" in the upper left of the toolbar and click the checkbox next to the icons that you want to add.
  • In the "With Selected" dropdown select "Choose"

with_selected.jpg

  • Move the images so that they are in a single file column
  • Click on the first icon (it should highlight yellow) and click the "Insert Link" button on the bottom of the toolbar

add_link.jpg

  • Fill out the dialogue box that opens and hit "Insert"
  • Repeat for all of the icons that you are adding
  • Click "Add" to close the content editor and then hit "Approve Changes" in the Social Icon Stack Box
    • This stack is global so when you return to your website those icons should be in place and clickable on all pages.