Are looking to add custom code to your site via HTML editor? If so, this blog post will guide you through the steps to take and ensure the code is properly placed on your site.
Before adding your code to the site, make sure the section you want to customize has the provided HTML Text Editor which should look something like the screenshot below.
Please note: There are only certain sections or blocks on the site that provide this editor and where you can make these changes (such as HTML blocks in portal administration settings for example). Make sure you are logged in as administrator of the website when making them.
If you need to hire a developer for custom development services please contact sales@thrinacia.com (You can refer to this blog post regarding custom website UI changes: https://www.thrinacia.com/blog/post/websites-with-custom-changes)
Switching to the code view
Once you have located the HTML text editor, you need to switch to the code view in order for you to fully customize it. Check the screenshot below for reference. The arrow pointing to the button/code button on the screenshot will switch it to code view.
You may also add your CSS/JS code in this view. Just make sure they are wrapped with the appropriate <style> or <script> tags.
Please note: It would be a good idea to use a wrapper element or html tag and provide your code with an id/class, that way if you ever need to target these specific elements it will not interfere with other code. Alternatively, you can also separate your custom CSS/JS instead of adding it to the HTML text editor. Please refer to this blog post: https://www.thrinacia.com/blog/post/tips-on-customizing-your-thrinacia-atlas-instance-via-simple-css-js-code
Below is a sample code you can use for your banner html block:
<div class="banner-wrap">
<div class="banner-img"><img src="https://origin.thrinacia.com/api/static/images/portal/91/84/11/7DB7B18A-6165-11E9-9966-698ECE8206F8-image-0b40b534c3048f3b180d93b768623e90a90f5969ea48401a574ecc11853c9301.jpg" data-extension="jpg" data-id="15" data-name="F84F062C-5EBF-11E8-BD7A-F4C8CD8206F8-image-965707bd3eaf3120304aa666f2b59d8e987675f25149fd08605ab5fc1639d4d4.jpg" data-description="JPG JFIF Image File" data-resource_content_type="image" data-region_resource_id="15" data-resource_content_type_id="3" data-created="2019-04-17 16:06:54.074533-07" data-path_external="portal/91/84/11/7DB7B18A-6165-11E9-9966-698ECE8206F8-image-0b40b534c3048f3b180d93b768623e90a90f5969ea48401a574ecc11853c9301.jpg" data-modified="2019-04-17 16:06:54.074533-07" data-mime_type="image/jpeg" data-file_id="320" data-file_type_id="2" data-file_type="JPG JFIF Image" data-disabled="0" data-resource_type="file" class="fr-fic fr-dib"></div>
<div class="banner-content">
<h1 class="banner-title">Start exploring different possibilities!</h1>
</div>
</div>
<style>
.banner-wrap {
position: relative;
}
.banner-wrap .banner-img img {
margin: 0;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center center;
object-position: center center;
width: 100%;
height: 350px;
}
.banner-wrap .banner-content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding: 20px 16px;
}
.banner-wrap .banner-title {
text-align: center;
color: #fff;
}
/* Media query for mobile */
@media (max-width: 576px) {
.banner-wrap .banner-img img {
height: 200px;
}
.banner-wrap .banner-content {
position: static;
}
.banner-wrap .banner-title {
color: #000;
}
}
</style>
The code above should display the banner. On the desktop device it will look like this.
And on the mobile device it will show up like this.
Once you have your code ready, make sure to save your changes. You can also learn more about this whole by watching the video below.