Hi,
This is our first post as we just started developing using aware IM and its cool!!
How do we use
https://adminlte.io/themes/AdminLTE/index2.html 4 boxes on top right? CPU traffic etc.
https://adminlte.io/themes/AdminLTE/index.html total orders etc.
how to build admin lte top 4 right hand side boxes in aware
-
- Posts: 370
- Joined: Sat Apr 28, 2018 3:33 am
- Location: India
- Contact:
-
- Posts: 2391
- Joined: Mon Jul 02, 2012 12:24 am
- Location: Ulaanbaatar, Mongolia
Re: how to build admin lte top 4 right hand side boxes in aw
To get you started.....
In a Visual Perspective created Nested Responsive Panels for each of your boxes.
Set each to type od Static html.
From you demo.... inspect..grab this bit... (I have changed the Gear Icon to FontAwesome)
<div class="info-box">
<span class="info-box-icon bg-aqua"><i class="fa fa-gear fa-2x"></i></span>
<div class="info-box-content">
<span class="info-box-text">CPU Traffic</span>
<span class="info-box-number">90<small>%</small></span>
</div>
<!-- /.info-box-content -->
</div>
Now create a css file called, say, style.css with the following in it.... (which I grabbed from an inspect from your sample site.
.info-box {
display: block;
min-height: 90px;
background: #fff;
width: 100%;
box-shadow: 0 1px 1px rgba(0,0,0,0.1);
border-radius: 2px;
margin-bottom: 15px;
}
.info-box-icon {
border-top-left-radius: 2px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 2px;
display: block;
float: left;
height: 90px;
width: 90px;
text-align: center;
font-size: 45px;
line-height: 90px;
background: rgba(0,0,0,0.2);
}
.bg-aqua, .callout.callout-info, .alert-info, .label-info, .modal-info .modal-body {
background-color: #00c0ef !important;
}
.info-box-content {
padding: 5px 10px;
margin-left: 90px;
}
.info-box-text {
text-transform: uppercase;
}
.info-box-number {
display: block;
font-weight: bold;
font-size: 18px;
}
In the folder C:\AwareIM\Tomcat\AwareIM\Custom\CSS create a folder EXACTLY the same name as your Business Space and put your style.css file in there.
Put under test and try out.
If you know html and css you can style this any way you want.
Additionally, If you want any data from the application to be displayed then wrap the data in << >> and so long as the instance of the BO is in context then it will show... ie... in your example
assuming you have a Value in, for example SystemSettings.MyValue or LoggedInRegularUser.MyValue...
<<SystemSettings.MyValue>> would go where your static 90 is.
In a Visual Perspective created Nested Responsive Panels for each of your boxes.
Set each to type od Static html.
From you demo.... inspect..grab this bit... (I have changed the Gear Icon to FontAwesome)
<div class="info-box">
<span class="info-box-icon bg-aqua"><i class="fa fa-gear fa-2x"></i></span>
<div class="info-box-content">
<span class="info-box-text">CPU Traffic</span>
<span class="info-box-number">90<small>%</small></span>
</div>
<!-- /.info-box-content -->
</div>
Now create a css file called, say, style.css with the following in it.... (which I grabbed from an inspect from your sample site.
.info-box {
display: block;
min-height: 90px;
background: #fff;
width: 100%;
box-shadow: 0 1px 1px rgba(0,0,0,0.1);
border-radius: 2px;
margin-bottom: 15px;
}
.info-box-icon {
border-top-left-radius: 2px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 2px;
display: block;
float: left;
height: 90px;
width: 90px;
text-align: center;
font-size: 45px;
line-height: 90px;
background: rgba(0,0,0,0.2);
}
.bg-aqua, .callout.callout-info, .alert-info, .label-info, .modal-info .modal-body {
background-color: #00c0ef !important;
}
.info-box-content {
padding: 5px 10px;
margin-left: 90px;
}
.info-box-text {
text-transform: uppercase;
}
.info-box-number {
display: block;
font-weight: bold;
font-size: 18px;
}
In the folder C:\AwareIM\Tomcat\AwareIM\Custom\CSS create a folder EXACTLY the same name as your Business Space and put your style.css file in there.
Put under test and try out.
If you know html and css you can style this any way you want.
Additionally, If you want any data from the application to be displayed then wrap the data in << >> and so long as the instance of the BO is in context then it will show... ie... in your example
assuming you have a Value in, for example SystemSettings.MyValue or LoggedInRegularUser.MyValue...
<<SystemSettings.MyValue>> would go where your static 90 is.
Cheers,
Mark
_________________
AwareIM 6.0, 8.7, 8.8, 9.0 , MariaDB, Windows 10, Ubuntu Linux. Theme: Default, Browser: Arc
Upcloud, Obsidian....
Mark
_________________
AwareIM 6.0, 8.7, 8.8, 9.0 , MariaDB, Windows 10, Ubuntu Linux. Theme: Default, Browser: Arc
Upcloud, Obsidian....
-
- Posts: 370
- Joined: Sat Apr 28, 2018 3:33 am
- Location: India
- Contact:
Re: how to build admin lte top 4 right hand side boxes in aw
Super!! Thank you!
-
- Posts: 370
- Joined: Sat Apr 28, 2018 3:33 am
- Location: India
- Contact:
Re: how to build admin lte top 4 right hand side boxes in aw
Everything worked perfectly fine based on the inputs! Thanks. Now I have admin lte template.
Re: how to build admin lte top 4 right hand side boxes in aw
can u post some pics of your dashboards?
thx
thx
Click Here to see a collection of my tips & hacks on this forum. Or search for "JaymerTip" in the search bar at the top.
Jaymer
Aware Programming & Consulting - Tampa FL
Jaymer
Aware Programming & Consulting - Tampa FL