Custom CSS Front-end/Back-end

[cfish]

I'm enjoying working with IPS4 and developing a new child theme for my site but I have one major annoyance.

The Custom CSS works well in controlling the look and feel of the front-end (Board etc.) but annoyingly, it also changes the admin (back-end) design too and this often clashes. So, effects I want to add to the front-end cause the admin to look weird.

Is there any way to have a child theme control the front-end and maintain the default theme for the admin?

[Charles]

Click "Signed in as..." in the top bar of the AdminCP and you can choose the theme you want to use for the AdminCP.

[BB Themes]

We know we can do it that way, but it would be easier and less frustrating for new admins to just have an option to select "default ACP theme" aswell!  

[Marcher Technologies]

The presence of the ACP skin selection is in itself not necessary if people would theme properly. .ipsApp_front CSS selector should be used to target the frontend only.

My 2 cents.

[cfish]

Click "Signed in as..." in the top bar of the AdminCP and you can choose the theme you want to use for the AdminCP.

​Thanks Charles. I didn't realise that was there. Still finding my way round.

@Marcher Technologies are you saying that for the sake of specificity, all CSS selectors for front-end presentation should use a .ipsApp_front selector prefix? So CSS should look something like this:

/* Text colour for footer */
.ipsApp_front #ipsLayout_footer a, .ipsApp_front #ipsLayout_footer p {
    color: #f8f8f8;
}

 

[Marcher Technologies]

​Thanks Charles. I didn't realise that was there. Still finding my way round.

@Marcher Technologies are you saying that for the sake of specificity, all CSS selectors for front-end presentation should use a .ipsApp_front selector prefix? So CSS should look something like this:

/* Text colour for footer */
.ipsApp_front #ipsLayout_footer a, .ipsApp_front #ipsLayout_footer p {
    color: #f8f8f8;
}

 

​If you do not wish to skin the ACP, and wish for it to remain default colors, yes. I could be wrong, but I'm fairly certain the only reason it loads custom.css in the ACP is to allow you to skin both if desired without needing to modify default css files.

[cfish]

OK, that makes sense (sort of). What I've found is that the structure of the markup is different and even though the same classes and IDs are used, the results are not predictable. Probably would have been better to use different class/ID names on front and back ends, which would still allow both to be styled in one place. But the selector prefix is a good workaround.