How to change colors of splux theme?

71 views
Skip to first unread message

Mamak, Lacey

unread,
May 9, 2021, 9:24:59 PM5/9/21
to subjec...@googlegroups.com
Hi,
I love the splux theme but need to change the colors to match my institution.
I thought this would be as simple as changing the primary color and secondary colors listed in the :root colors section of the splux-default.css file, but I've tried that and don't see any color changes.
How do I get any color changes to take effect? What am I doing wrong?
Thanks!
Lacey

-- 

Lacey Mamak

Library Faculty, Electronic Resources/Reference & Instruction

Normandale Community College

952-358-8310 | www.normandale.edu

lacey...@normandale.edu

Pronouns to use for me: they/them/their OR he/him/his

pvillanueva01

unread,
May 10, 2021, 9:41:25 AM5/10/21
to SubjectsPlus

Hello Lacey,

Thank you for your comments. We use a CSS preprocessor to compile several SASS files into a single file. Are you familiar with this process or do you use any compiling tools?

If you do, I can share with you the SASS files and you could process them with your favorite tools. If that's not the case, I could send you an expanded CSS file of the SP Lux Default theme and you would need to do a find/replace for the colors that need changing.

Please let me know and I would gladly help you get those customizations in place.

Patricia Villanueva
University of Miami Libraries

Mamak, Lacey

unread,
May 14, 2021, 9:35:21 PM5/14/21
to SubjectsPlus
Hi Patricia,
Thanks so much for your help!
CSS preprocessing has been one of the items on my must-learn list for a few years (I learned CSS before they came into use). But, I'm also on a tight deadline for getting my library migrated to a new 4.5.1 instance (we're on subjects plus 2 now). Would you be willing to send me both the SASS files and an expanded CSS file? That way I can use this as a learning opportunity and also have the expanded file to use if needed.
Thanks again!
Lacey

-- 

Lacey Mamak

Library Faculty, Electronic Resources/Reference & Instruction

Normandale Community College

952-358-8310 | www.normandale.edu

lacey...@normandale.edu

Pronouns to use for me: they/them/their OR he/him/his


From: subjec...@googlegroups.com <subjec...@googlegroups.com> on behalf of pvillanueva01 <pvilla...@gmail.com>
Sent: Monday, May 10, 2021 8:41 AM
To: SubjectsPlus <subjec...@googlegroups.com>
Subject: [SubjectsPlus] Re: How to change colors of splux theme?
 
--
You received this message because you are subscribed to the Google Groups "SubjectsPlus" group.
To unsubscribe from this group and stop receiving emails from it, send an email to subjectsplus...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/subjectsplus/c25b8540-f455-4f16-b523-1715430e5b8an%40googlegroups.com.

pvillanueva01

unread,
May 17, 2021, 2:28:02 PM5/17/21
to SubjectsPlus
Hello Lacey,

I am sorry for my delay in responding. I am attaching the SASS files in a ZIP and the expanded CSS files. I am using the sp-lux default as base.

The colors for the variables are as follows:

$sp-accent: #07adc7; //accent ui color
$sp-accent-dark: darken($sp-accent, 5%);
$prime: #00243c; //used in nav
$prime-dark: #071f2f; //used on mobile nav
$text-ondark: #ffffff; //text on dark bkg
$text-onlight: #000000; //text on light bkg
$default-text: #333333; // default text-color
$default-link-color: #00507d;
$feature: $sp-accent;
$feature-light: #eef0f1;

You will need to run a find/replace where these colors are used to achieve customization. You can always use the developer tools to inspect the element you want to change and find it on the expanded CSS.

Please let me know if you have any questions.

Patricia Villanueva
University of Miami Libraries


sp-lux-default.css
SP-LUX-Default-SASS-files.zip

Villanueva, Patricia Esperanza

unread,
May 18, 2021, 11:24:12 AM5/18/21
to Kathy....@westminster-mo.edu, subjec...@googlegroups.com

Hello Kathy,

 

No worries. Here is the information I shared with Lacey.

 

I am attaching the SASS files in a ZIP and the expanded CSS files. I am using the sp-lux default as base.

 

The colors for the variables are as follows:

 

$sp-accent: #07adc7; //accent ui color

$sp-accent-dark: darken($sp-accent, 5%);

$prime: #00243c; //used in nav

$prime-dark: #071f2f; //used on mobile nav

$text-ondark: #ffffff; //text on dark bkg

$text-onlight: #000000; //text on light bkg

$default-text: #333333; // default text-color

$default-link-color: #00507d;

$feature: $sp-accent;

$feature-light: #eef0f1;

 

You will need to run a find/replace where these colors are used to achieve customization. You can always use the developer tools to inspect the element you want to change and find it on the expanded CSS.

 

Please let me know if you have any questions.

 

 

Thank you,

 

Patricia E. Villanueva

Web Designer

 

University of Miami

 

 

From: Patricia Villanueva <pvilla...@gmail.com>
Date: Monday, May 17, 2021 at 2:49 PM
To: "Villanueva, Patricia Esperanza" <p.vill...@miami.edu>
Subject: [EXTERNAL] Fwd: [SubjectsPlus] Re: How to change colors of splux theme?

 

CAUTION: This email originated from outside the organization. DO NOT CLICK ON LINKS or OPEN ATTACHMENTS unless you know and trust the sender.

 

 

---------- Forwarded message ---------
From: Kathy Renner <Kathy....@westminster-mo.edu>
Date: Mon, May 17, 2021 at 9:37 AM
Subject: [SubjectsPlus] Re: How to change colors of splux theme?

 

Would you be willing to send me both the SASS files and an expanded CSS file.  I realize I didn’t originally ask but we need to upgrade this Summer and one of the things I did not do before was use CSS.  With the help of Westminster College’s IT, I think we can do it.

 

Need help using library resources or doing research?  Make an appointment with me in Accudemia.   (MyWC - Student tab)  I am available to meet 1) face-to-face (mask required), 2) phone call and 3) Zoom call. 

 

Formal signature

 

 

 

From: 'Mamak, Lacey' via SubjectsPlus <subjec...@googlegroups.com>
Sent: Friday, May 14, 2021 8:35 PM
To: SubjectsPlus <subjec...@googlegroups.com>
Subject: [EXTERNAL] Re: [SubjectsPlus] Re: How to change colors of splux theme?

 

CAUTION: This message originated outside of the Westminster College email system. Do not click links, open attachments, reply or provide information to the sender unless you know the content is safe. Contact the Westminster College helpdesk at x5169 or he...@wcmo.edu with questions.

 

 

PLEASE NOTE: Due to the non-secure nature of e-mail, the confidentiality of such communications cannot be ensured. Please use discretion when sending information that is sensitive in nature.


 

--

Patricia Villanueva

SP-LUX-Default-SASS-files.zip
sp-lux-default.css
Reply all
Reply to author
Forward
0 new messages