Forum

Thread tagged as: Question, Problem, Error

Perch CSS loading before UI Customizations

Hi, A problem I'm facing with adding my own UI Customizations with CSS is that upon the page load you are first confronted with Perch's original CSS before my own CSS kicks in. Any way to overrule this? Thanks.
Greg Stone

Greg Stone 0 points

  • 6 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

6 years ago

No, you need our CSS. Yours loads after it so that you can modify what's there.
Greg Stone

Greg Stone 0 points

6 years ago

Drew McLellan said:

No, you need our CSS. Yours loads after it so that you can modify what's there.

Yeah, I understand your CSS as the foundation. But from a users experience, every time they click on a new tab in the dashboard, there's a split second that first shows the originally designed Perch Dashboard before my custom UI kicks in. It's more like I'm covering up old CSS with new CSS, not actually modifying the CSS.

Is this something I just have to work with from a users experience?
Rachel Andrew

Rachel Andrew 394 points
Perch Support

6 years ago

Are you just adding CSS, or have you also got some JavaScript loading stuff in there? Perhaps show us what you are doing.
Greg Stone

Greg Stone 0 points

6 years ago

I have no JavaScript loading in at this point. Here's a sample of some of my CSS

* {
    font-family: open-sans, arial !important;
}

.main {
    background-color: #f7f7f7;
}

.mainnav li a {
    font-size: 18px;
    text-transform: uppercase;
    color: #4A98E7 !important;
    font-weight: 100;
    margin: 20px 30px;
    opacity: 1;
    letter-spacing: 1.5px;
    font-weight: 400; 
}

.mainnav li:hover {

}

.mainnav .selected a {
    font-weight: 700 !important;
}

#appmenu ul.menu li.dumb {
    font-size: 18px;
    text-transform: uppercase;
    color: #4A98E7 !important;
    font-weight: 100;
    margin: 20px 30px;
    opacity: 1;
    letter-spacing: 1.5px;
    font-weight: 400;
}

body h2 {
    color: #4A98E7 !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    font-size: 14px !important;
    letter-spacing: 1.5px;
    background-color: #fff !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    border: none !important;
   }

.button {
    border: none !important;
    background-color: #4A98E7 !important;
    background-image: none !important;
    padding: 10px 25px !important;
    text-shadow: none !important;
    color: #fff !important;
    font-size: 12px !important;
    border-radius: 0px !important;
    box-shadow: none !important;
    margin: -8px 0px 0px 0px !important;
}

Thanks your help.
Drew McLellan

Drew McLellan 2638 points
Perch Support

6 years ago

If you look at your network timeline, do you see anything causing the pause?