Code Recipes for Customizing Thrinacia Atlas Web UI

Here are some useful “Code Recipes” to use for customizing the Web UI of your Thrinacia Atlas CrowdFunding Platform. Before discussing the code, you should know how to access your files using SFTP.

Download all of the files, and start running a local server (we recommend you use gulp with node) so you can test the changes that you have made in the code.

Most of the UI changes will be done in the following file: angapp/custom/custom.css. If you would like to add custom Java Script, you can also do this in angapp/custom/custom.js.

The code recipes include:

  • Changing the CTA (call to action) in the banner from a Square button to Pill button.
  • Changing fonts
  • Adding a custom slider

Changing the CTA in the banner from Square button to Pill button

Below is the UI of the stock version of your Atlas CTA located in the main banner:

Selection_076

Here is what the CTA will look like as a Pill button.

Selection_075

Simply add the Snippet of code into the custom.css file found under angapp/custom directory or under src/custom directory if working with development version of the website:

.container.main-color.theme-button-4 .masthead-button {
    border-radius: 20px;
}

You are done! Upload the files back on to your website as needed if working with local version. If you are using custom development workflow then be sure to also execute “gulp build” before uploading the files back on to your live servers.

Adjusting the Fonts

First, add the link of your font to the index.html file.

Ex: <link href=”http://fonts,googleapis.com/css?family=lobster’ rel=’stylesheet’ type=’text/css'”>

To start changing the fonts, go to the folder with the text you want to change. Remember, all of the html files are in the views folder.

You can simply add the following to the opening tag of any text you want to use the font family on: style=”font-family: ‘lobster’, cursive; font-size: 16px;” For example: <div style=”font-family: ‘lobster’, cursive; font-size:16px;”>Text</div>

Upload the files back on to your live servers.

Adding custom slider

Here is the recipe for changing your main banner into a slider. For the slider, we will be using PgwSlider made with jQuery.

First, we need to go to the Main banner Source code within the Admin Dashboard. Go to Admin Dashboard –> Portal Settings –> Theme Settings, Scroll down until you see the Home Page Content section. Open the Main Banner, then click HTML Block, then click on the source code icon. From here, you can paste the following code:

<ul class="pgwSlider" webui-pgwslider> 
<li>
  <img src="http://placehold.it/1920x500" class="fr-dib" >
</li>

<li>
  <img src="http://placehold.it/1920x500" class="fr-dib" >
</li>

<li>
  <a href="https://google.ca" target="_blank" >
    <img src="http://placehold.it/1920x500" class="fr-dib" >
  </a>
</li>
</ul>

Once you have pasted the code, be sure to save. To change the images, simply paste your image source in between the quotes with the URL of the image you would like. For example: <img src=”your image URL goes here”.

To add arrows to the slider, so the user can switch between different photos, add the following HTML attribute: options, with the value: {displayControls:true, displayList:false} For example:

<ul class="pgwSlider" webui-pgwslider options="{displayControls:true, displayList:false}">

You can direct the users to a specified page, when the image is clicked on by adding an anchor tag around the list item. For example:

<li>
  <a href="https://google.ca" target="_blank" >
    <img src="http://placehold.it/1920x500" class="fr-dib" >
  </a>
</li>

When the user clicks on the image in the slider, they will be re-directed to the url that you set in the <a href=”your url here”

If you followed the recipe, your slider should look something like this:

pgwslider

Those are the recipes used to make your website customized.