Forums
How to style admin pages - Printable Version

+- Forums (https://libforum.vccs.edu/forum)
+-- Forum: Web Liaisons: Web and eResource management (https://libforum.vccs.edu/forum/forum-8.html)
+--- Forum: LibGuides (https://libforum.vccs.edu/forum/forum-21.html)
+--- Thread: How to style admin pages (/thread-3897.html)



How to style admin pages - nmueller - 06-06-2024

Good Morning, Everyone,

The admin pages for the various apps in LibApps, e.g., LibGuides, LibAnswers, LibCal, are styled slightly differently. For example, the font size of the admin pages in LibGuides is much smaller than it is on the admin pages of the other LibApps. I tried adding CSS for the LibGuides admin pages to the CSS for the public LibGuides pages but it didn't have any effect. Was I using the wrong CSS selector(s) or is there a special way to apply CSS to admin pages? 

Thanks!


RE: How to style admin pages - mhanlin - 06-11-2024

Hi Nathan, there are sometimes different selectors for LibCal/Libguides etc and it's not a one to one relationship when using CSS. What do you exactly mean by admin pages? Do you meant the backend that staff can log into? Or do you mean front facing pages that everyone sees? For the backend of libguides, I always check the box under tab custom JS/CSS that says do not include this code on the guide edit page.


RE: How to style admin pages - nmueller - 06-11-2024

(06-11-2024, 09:27 AM)mhanlin Wrote: Hi Nathan, there are sometimes different selectors for LibCal/Libguides etc and it's not a one to one relationship when using CSS.  What do you exactly mean by admin pages?  Do you meant the backend that staff can log into?  Or do you mean front facing pages that everyone sees?  For the backend of libguides, I always check the box under tab custom JS/CSS that says do not include this code on the guide edit page.
Hi, Mary, I mean the pages that you see after you log in to LibApps (or an individual product, like LibGuides). The pages with the yellow banner across the top where all the settings for the product are located. The font sizes on the admin pages are different for different products. The  font size on the admin pages for LibGuides is small, whereas the font size on admin pages of the other products is large. I'd like to make them all the same. I also check the box that says not to include custom JS/CSS code on Guide edit pages. Thanks!


RE: How to style admin pages - mhanlin - 06-13-2024

(06-11-2024, 04:35 PM)nmueller Wrote:
(06-11-2024, 09:27 AM)mhanlin Wrote: Hi Nathan, there are sometimes different selectors for LibCal/Libguides etc and it's not a one to one relationship when using CSS.  What do you exactly mean by admin pages?  Do you meant the backend that staff can log into?  Or do you mean front facing pages that everyone sees?  For the backend of libguides, I always check the box under tab custom JS/CSS that says do not include this code on the guide edit page.
Hi, Mary, I mean the pages that you see after you log in to LibApps (or an individual product, like LibGuides). The pages with the yellow banner across the top where all the settings for the product are located. The font sizes on the admin pages are different for different products. The  font size on the admin pages for LibGuides is small, whereas the font size on admin pages of the other products is large. I'd like to make them all the same. I also check the box that says not to include custom JS/CSS code on Guide edit pages. Thanks!
Hi Nathan!  Then yes, you'd probably have to target the backend CSS and it is different from the public facing CSS.  We've got some variability in font sizes with our backend, but for me, it's not worth it to spend the time going through every selector.  As long as it's easy enough for librarians to see and it's consistent on the public facing side, I haven't really worried about it.


RE: How to style admin pages - mhanlin - 06-13-2024

(06-13-2024, 10:16 AM)mhanlin Wrote:
(06-11-2024, 04:35 PM)nmueller Wrote:
(06-11-2024, 09:27 AM)mhanlin Wrote: Hi Nathan, there are sometimes different selectors for LibCal/Libguides etc and it's not a one to one relationship when using CSS.  What do you exactly mean by admin pages?  Do you meant the backend that staff can log into?  Or do you mean front facing pages that everyone sees?  For the backend of libguides, I always check the box under tab custom JS/CSS that says do not include this code on the guide edit page.
Hi, Mary, I mean the pages that you see after you log in to LibApps (or an individual product, like LibGuides). The pages with the yellow banner across the top where all the settings for the product are located. The font sizes on the admin pages are different for different products. The  font size on the admin pages for LibGuides is small, whereas the font size on admin pages of the other products is large. I'd like to make them all the same. I also check the box that says not to include custom JS/CSS code on Guide edit pages. Thanks!
Hi Nathan!  Then yes, you'd probably have to target the backend CSS and it is different from the public facing CSS.  We've got some variability in font sizes with our backend, but for me, it's not worth it to spend the time going through every selector.  As long as it's easy enough for librarians to see and it's consistent on the public facing side, I haven't really worried about it.

For context, this is what our backend pages look like.[Image: example.PNG]


RE: How to style admin pages - nmueller - 06-13-2024

Thank you for your help, Mary. I love that painting by Van Gogh! I'll keep fiddling with it to see if I can make the changes that I want to make. Smile


RE: How to style admin pages - jwalz - 11-05-2024

(06-06-2024, 12:02 PM)nmueller Wrote: Good Morning, Everyone,

The admin pages for the various apps in LibApps, e.g., LibGuides, LibAnswers, LibCal, are styled slightly differently. For example, the font size of the admin pages in LibGuides is much smaller than it is on the admin pages of the other LibApps. I tried adding CSS for the LibGuides admin pages to the CSS for the public LibGuides pages but it didn't have any effect. Was I using the wrong CSS selector(s) or is there a special way to apply CSS to admin pages? 

Thanks!

Nathan,

You might want to be careful trying to change the CSS of the fonts in the ADMIN view.   You mostly don't have access to it, but also you can break significant portions of it if you are not careful.   

I do think I understand what you mean though.  About the font types / sizes in the different ADMIN interfaces.

All that I do is to change my browser.  That works best.   Then it makes them larger or smaller only on my machine to suit myself.     in Chrome, I just hit the <CTRL> + to make it all bigger so my tired eyes can see it better.

Meanwhile, the different ADMIN views are controlled by Springshare and you can post a message on the Lounge to let them know what you would like to see.  They are very responsive.   (plus some of the interfaces are currently undergoing mods and all of them will be changing soon)

I hope that helps some!

Jennifer @DCC