Last active
August 15, 2023 13:10
-
-
Save hiddenpearls/839a05d300f372f9fa9b34f34b1b4390 to your computer and use it in GitHub Desktop.
Analytify dashboard sections on frontend as shortcodes
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<style> | |
.analytify_status_box_wraper { | |
border: 1px solid #e2e5e8; | |
margin-bottom: 20px; | |
background: #fff; | |
line-height: 1.5; | |
font-family: 'Roboto', sans-serif; | |
color: #848484; | |
font-size: 14px; | |
} | |
.analytify_status_box_wraper * { | |
-webkit-box-sizing: border-box; | |
-moz-box-sizing: border-box; | |
box-sizing: border-box; | |
} | |
.analytify_status_header { | |
border-bottom: 1px solid #e2e5e8; | |
background: #f9fafa; | |
padding: 20px 20px; | |
position: relative; | |
text-align: left; | |
} | |
.analytify_wraper h3 { | |
color: #444444; | |
font-size: 18px; | |
font-family: 'Roboto Slab', serif; | |
line-height: 1.2; | |
margin: 0; | |
font-weight: 400; | |
} | |
.analytify_status_footer { | |
border-top: 1px solid #e2e5e8; | |
background: #f9fafa; | |
padding: 15px 20px; | |
} | |
.analytify_general_status_boxes_wraper { | |
padding-bottom: 20px; | |
text-align: left; | |
} | |
.analytify_general_status_box { | |
width: calc(33% - 24px); | |
margin: 20px 0px 0px 20px; | |
border: 1px solid #e2e5e8; | |
background: #fff; | |
display: inline-block; | |
text-align: center; | |
position: relative; | |
padding: 20px 20px 50px; | |
vertical-align: top; | |
font-size: 14px; | |
} | |
.analytify_general_status_box h4 { | |
position: relative; | |
font-weight: 700; | |
color: #848484; | |
font-size: 14px; | |
text-transform: uppercase; | |
} | |
.analytify_general_status_box h4:after { | |
display: block; | |
max-width: 100px; | |
height: 1px; | |
background: #e2e5e8; | |
content: ""; | |
margin: 7px auto 10px; | |
} | |
.analytify_general_stats_value { | |
font-size: 48px; | |
color: #444444; | |
font-weight: 100; | |
} | |
.analytify_wraper p { | |
font-size: 14px; | |
line-height: 1.5; | |
margin: 0; | |
} | |
.analytify_general_status_footer_info { | |
position: absolute; | |
bottom: 0px; | |
left: 0px; | |
background: #f2f2f2; | |
text-align: center; | |
border-top: 1px solid #e2e5e8; | |
width: 100%; | |
padding: 10px; | |
font-size: 11px; | |
color: #00c853; | |
} | |
.analytify_status_footer p { | |
position: relative; | |
display: inline-block; | |
padding: 3px 0px 3px 37px; | |
} | |
.analytify_status_footer p span { | |
color: #fa5825; | |
} | |
@media screen and (max-width: 768px) { | |
.analytify_general_status_box { | |
width: calc(50% - 24px); | |
} | |
.analytify_general_status_boxes_wraper { | |
padding-right: 20px; | |
} | |
} | |
@media screen and (max-width: 639px) { | |
.analytify_general_status_box { | |
width: calc(100% - 24px); | |
} | |
} | |
</style> | |
<div class="analytify_status_box_wraper"> | |
<div class="analytify_status_header"> | |
<h3>General Statistics</h3> | |
</div> | |
<div class="analytify_general_status_boxes_wraper"> | |
<div class="analytify_general_status_box"> | |
<h4>Sessions</h4> | |
<div class="analytify_general_stats_value">[analytify-stats metrics="sessions" permission_view=""]</div> | |
Total number of Sessions within the date range. A session is the period time a user is actively engaged with your website. app. etc. | |
</div> | |
<div class="analytify_general_status_box"> | |
<h4>Visitors</h4> | |
<div class="analytify_general_stats_value">[analytify-stats metrics="totalUsers" permission_view=""]</div> | |
Users that have had at least one session within the selected date range. Includes both new and returning users. | |
</div> | |
<div class="analytify_general_status_box"> | |
<h4>Page views</h4> | |
<div class="analytify_general_stats_value">[analytify-stats metrics="screenPageViews" permission_view=""]</div> | |
Pageviews is the total number of pages viewed. Repeated views of a single page are counted. | |
</div> | |
</div> | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Does this work now?