Integrity Training - Homepage Category Card Generator Instructions

Visit this link to open code generator:
http://stoneriverelearning.androidapptraining.com/codegen/intergritytraining/categorycards
On each step, please wait till page loads fully.

  • Firefox browser is used while creating this video.
  • Please note that, you cannot go back to previous step. All you have to do is reload page and re-start from step 1.
  • Vidoes don't have audio.
  • If videos don't work for you, just download it with link below it and watch on your computer.

Step 1: Remove Inactive or Removed Category Cards.

  • In this step, it automatically compares categories on homepage with categories on teachable.
  • After comparing, it shows if there are any category cards on homepage for disabled or removed categories.
  • It is up to you if you want to keep the card or you want to remove it.
  • If you want to delete, delete cards or just skip this step and click on Next/Skip.

Watch this video to know how it works.

Your browser does not support the video tag. Download Video

Step 2: Edit & Append New Cards

  • In this step, it again automatically compares categories on homepage with categories on teachable.
  • After comparing, it shows if there are any new category cards those are not on Homepage but on teachable.
  • If there is no new category found, you can directly skip this step by clicking on 'Skip'.
  • If you see category/categories, then edit it according to your need. Watch video to understand how to edit category cards.
    1. Icon: Please visit this website to choose icon:
      https://fontawesome.com/icons?d=gallery
    2. Change Name: Use it only if you want to change category card title. Leave blank if there is no change.
    3. Overlay Color: This is a color picker. By default, it selects random color as backgound color for category cards. Alternatively, you can choose any color as category card background color. Make sure you choose darker shade on which text will be visible.
    4. Background Image: This is category card backgound image. Make sure you enter image url correctly in this box.
    5. Change Button: Once you make all above changes, hit 'Change' button for that perticular category card. It will apply changes. If you think you want to change something, change it and hit 'Change' button again.
  • Once you are done, click on 'Next' button.

 

Your browser does not support the video tag. Download Video

 

For your convinience, here is one more video for other 2 cards.

 

Your browser does not support the video tag. Download Video

Step 3: Order cards

  • In this step, you can arrange cards by drag drop method.
  • You may face slow drag, but don't drop until you are on correct spot.
  • Once you are done, click on 'Next' button.

Watch this video to know how it works.

Your browser does not support the video tag. Download Video

Step 4: Select columns per row

  • In this step, number of columns you want.
  • Once you are done, click on 'Next' button.

Watch this video to know how it works.

Your browser does not support the video tag. Download Video

Step 5: Generate Code and copy-paste on website

  • Please be careful while doing this step. Pay attention to file you are editing in Power Editor. If you edit any other page than the one told in video, it can mess up any other page on website or can result in something not expected.
  • Please login to IT admin before completing this step in another browser tab.
  • Once you login to admin, go to Site -> Power Editor from right sidebar.
  • Once you are in Power Editor, click on search bar and type featured in search box. It will show block_featured_courses file in folder tree. Click on it. It will open file in black editor on right side.
  • Select all code in that file, and copy-paste it in any text editor like Notepad. This will be back of this file so you can restore if something goes wrong.
  • Now in file editor, select all code and delete it.
  • Go back to code generator tab. Copy the code generated.
  • And then again go to power editor tab in browser and paste code in file editor.
  • Paste code only when you double check the file you are editing in Power editor is
    pages/partials/block_featured_courses
    It displays name of file you are editing just above file editor.
  • Once you paste code, click on Save button at top
  • Open website in one more browser tab, and check if applied changes took place.

Watch this video to know how it works.

Your browser does not support the video tag. Download Video

Other uses of this code generator

  • You can use this code generator when you just want to reorder category cards.
  • You can use this code generator when you just want to change number of columns.
  • Or you can do both - change order & number of columns.
  • You just have to skip unwanted steps and re-generate code according to your need.

Watch this video to know how it works.

Your browser does not support the video tag. Download Video