Tips on customizing your Thrinacia Atlas instance via simple CSS/JS code

Hi there, did you know you could make simple UI/UX changes via custom CSS or even custom JS on your Thrinacia Atlas Web UI? In this blog post I will show you how to do that.

First off, you’ll need to SFTP into your web site instance. You can find your SFTP login credentials in the wiki tab in your project page on the nexus website which should look something like the code below:

Next, open FileZilla, (or any preferred SFTP software of your choice) and copy and paste the following information into the appropriate fields:
Host
Username
Password
Port 22 (SFTP Port)

If you’re having trouble with the above, there is nothing to worry about. You can refer to this blog post here.

Next, you will locate the angapp/custom/ folder. This is where all your custom folders and content should be. If you need another folder to suit your requirements, don’t hesitate to add one in such as for fonts or images:

Once there, just add your desired CSS or JS changes to the respective files. Remember, CSS changes go into custom.css and JS changes go into custom.js file. Don’t forget to save the updated files though (using SFTP) to see the changes reflect on the live website.

Here’s a first example: Say you want to hide the ‘Optional’ text from the Basics campaign creation step. Simply add the following code snippet into your custom.css file.

campaign-basics-form .optional-text {
  display:none !important;
}

NOTE: You might want to add !important to the css rule to increase its priority. Otherwise it may get ignored by the browser. And that’s all there is to it, now you can check your change on live website.

Some other examples to get you going are below.

Changing backers/amount raised on campaign page example

Now let’s say you wanted this look to be changed to the screenshot below, just add the CSS code below the screenshot.

 

html body.container .mainbody-wrap .background-wrap #campaign-tabs .campaign-info .funding-wrap .ui.funding-info.list .item-backer {
    width: 40%;
    display: inline-block;
    word-break: break-word;
}
html body.container .mainbody-wrap .background-wrap #campaign-tabs .campaign-info .funding-wrap .ui.funding-info.list .item-backer .item-value {
    border-right: 1px solid #ddd;
    padding: 0 6px;
}

html body.container .mainbody-wrap .background-wrap #campaign-tabs .campaign-info .funding-wrap .ui.funding-info.list .item-backer .item-label {
    border-right: 1px solid #ddd;
    padding: 0 6px;
}

html body.container .mainbody-wrap .background-wrap #campaign-tabs .campaign-info .funding-wrap .ui.funding-info.list .item-funded {
    width: 59%;
    display: inline-block;
    word-break: break-word;
}

html body.container .mainbody-wrap .background-wrap #campaign-tabs .campaign-info .funding-wrap .ui.funding-info.list .item-funded .item-value {
    padding: 0 60px;
}

Hiding the search bar example

#main-nav-campaign-search {
    display: none !important; 
}

Changing paragraph fonts example

Step 1 – upload custom font files into /custom/font/ folder

Step 2 – set the font face and specify the font css rules

@font-face {
  font-family: "National";
  src: url('/custom/fonts/National-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "National";
  src: url('/custom/fonts/National-Medium.otf') format('opentype');
  font-style: normal;
}

html body p {
  letter-spacing: -0.4px;
  font-size: 18px;
  color: #1a1a1a;
  font-family: "National";
  line-height: 1.5;
  font-weight: 300;
}

Changing footer social link styles example

Let’s say you want that look to be changed to the screenshot below, just add the CSS code below the screenshot.

#footer-wrapper #socialicons-wrap .social-icon .social-link i.icon {
  background: transparent !important;
  color: #1a1a1a !important;
  width: auto !important;
  height: auto !important;
  padding: 0 10px !important;
}

Update button style example

Let’s say you want that look to be changed to the screenshot below, just add the CSS code below the screenshot.

#campaign-details #campaign-header .campaign-top-header .campaign-top-header-bottom .embed-campaign, #campaign-details #campaign-header .campaign-top-header .campaign-top-header-bottom .share-campaign {
    border: 2px solid #00b5ad;
    color: #00b5ad;
    background: transparent;
}

Changing Explore page style example

Let’s say you want that look to be changed to the screenshot below, just add the CSS code below the screenshot.

body#explore .explore-actions .category-select {
    cursor: pointer;
    border: 2px solid #00b5ad;
    color: #00b5ad;
    font-weight: bold;
    background: #FFFFFF;
    border-radius: 4px;
    padding: 15px 20px;
    display: inline-block;
    margin: 5px;
}
body#explore .explore-actions {
    padding: 60px 0;
}
html body .campaign-thumb .campaign-card .campaign-desc {
    overflow: hidden;
    margin-bottom: 3em;
}
html body .campaign-thumb .campaign-card .feat-indicator, html body .campaign-thumb .campaign-card .recent-indicator {
    border-radius: 0;
    z-index: 1;
}

That’s it, hopefully these examples can help you with some basic customizations for your Thrinacia Atlas CrowdFunding instance.