CSS Cheatsheet for TagOn Agency

Shared by TagOn agency user: Jeff A. Brigman

 

The following CSS snippets are intended to be a work-around to styling your Agency login for clients and the client dashboard area.

Due to how these are added (in the footer), it will cause them to load last and as such result in a noticeable jumping or blip change when the page loads.
Unfortunately there is no way to fix this as there is only one way to apply them at this time.

Some changes will only be visible when logged in as the Client and not as the Agency.

The following CSS styles must be added to “Default Agency Settings” –> “Custom Embed Codes”.

 

Change Login Page Background Color

<style>
/* Client Login Background Color Only */
div.all-wrapper.menu-side.with-pattern {
background-color: #113542;
}
</style>
OR
<style>
/* Client Background Color Everywhere */
body::before {
background-color: #113542;
}
</style>
**** The first CSS changes the background to only the login page, the second
one changes it everywhere. In most cases you won’t see the second one except
mostly in mobile view.

 

Add Background Image to Login Page

<style>
div.all-wrapper.menu-side.with-pattern {
background-image: url(https://yourdomain.com/yourcustompic.jpg);
}
</style>

 

Change Client Dashboard Background Color

<style>
/* Client Dashboard Background Color */
.content-w {
background-color: #113542;
}
</style>

To add both a login and client dashboard background color change, you would
combine them into one like this.
<style>
body::before{
background:linear-gradient(#113542,#0095C3);
}
.content-w{
background-color: #113542;
}
</style>

 

Client Dashboard: Change Font Color “Create a Shortened URL”

<style>
/*Client Dashboard Create Link Font Color and Border */
.collapseURLForm.mb-4.p-2{
color:#113552;
border-top: 0px;
}
</style>

 

Client Dashboard: Larger Logo on Mobile”

<style>
/* Changes Mobile Logo Size */
.menu-mobile .mm-logo-buttons-w .mm-logo img {
width: 200px;
}
</style>

 

Client Dashboard: Change Color of Menu Icons

/* Client Dashboard Side Menu Icon Color */
.menu-w ul.main-menu>li .icon-w {
color: #113542;
}
.menu-mobile ul.main-menu>li .icon-w {
color: #113542;
}

 

Client Dashboard: Change Color & Thickness of Status Bars

/* Client Status Bar Used Amount */
.os-progress-bar.blue .bar-level-3, .os-progress-bar.primary .bar-level-3 {
background-color: #e20000;
}
/* Client Status Bar Remaining Amount */
.os-progress-bar.blue .bar-level-2, .os-progress-bar.primary .bar-level-2 {
background-color: #24b314;
}
/* Client Status Bar Height */
.os-progress-bar .bar-level-2, .os-progress-bar .bar-level-3 {
height: 10px;
}

 

 

Client Dashboard: Mobile Menu Icon Color and Font Weight (boldness)

/* Mobile Dropdown Menu Icon Color and Font Weight */
.os-icon.os-icon-hamburger-menu-1 {
font-weight: 900;
color: #113542;
}

 

All of this combined would look like this:

<style>
/* Background Color Everywhere */
body::before{
background:linear-gradient(#113542,#0095C3);
}
/* Client Dashboard Background Color */
.content-w{
background-color: #113542;
}
/*Client Dashboard Create Link Font Color and Border */
.collapseURLForm.mb-4.p-2{
color:#113552;
border-top: 0px;
}
/* Changes Mobile Logo Size */
.menu-mobile .mm-logo-buttons-w .mm-logo img {
width: 200px;
}
/* Client Dashboard Menu Icon Color */
.menu-w ul.main-menu>li .icon-w {
color: #113542;
}
.menu-mobile ul.main-menu>li .icon-w {
color: #113542;
}
/* Client Status Bar Used Amount */
.os-progress-bar.blue .bar-level-3, .os-progress-bar.primary .bar-level-3 {
background-color: #e20000;
}
/* Client Status Bar Remaining Amount */
.os-progress-bar.blue .bar-level-2, .os-progress-bar.primary .bar-level-2 {
background-color: #24b314;
}
/* Client Status Bar Height */
.os-progress-bar .bar-level-2, .os-progress-bar .bar-level-3 {
height: 10px;
}
/* Mobile Dropdown Menu Icon Color and Font Weight */
.os-icon.os-icon-hamburger-menu-1 {
font-weight: 900;
color: #113542;
}
</style>

  • Jeff says:

    If you have any questions or issues, you can tag me in the Facebook group for TagOn. I’ll be happy to help you any way I can.