How to not include spiffyui.min.css?

hgeor...@gmail.com

unread,

Jul 3, 2013, 9:49:52 AM7/3/13

to spif...@googlegroups.com

Hey Zack,

I see that when I run my application that

<link rel="stylesheet" type="text/css" href="managementconsole/spiffyui.min.css">

Even though my project's html file never has it. I have edited the spiffyui.css file to have my own changes and I'm including that within my html file. However, since spiffyui.min.css is linked first, I think it's taking precedence and is defaulting to the original SpiffyUI stylings.

Is there any way I can not include that file? Because I'm not explicitly including it in the HTML file of the project.

Thanks again, this google group has been great!

Zack Grossbart

unread,

Jul 3, 2013, 9:58:45 AM7/3/13

to spif...@googlegroups.com

Hello,

The spiffyui.min.css gets included by JavaScript code in the spiffyui.js
file. You can stop it from doing that by setting the spiffyui.autoloadCSS
to false. However, that's probably not what you want to do.

Editing the spiffyui.css file makes it difficult for you to upgrade your
application to new Spiffy UI versions. It's a better idea to create a new
CSS file and include it after the spiffyui.min.css. If you're using the
Maven build and you put your new CSS file in the src/main/webapp/css
directory then it will get included inside the spiffyui.min.css file
automatically when you build.

I hope that helps,
Zack

--
You received this message because you are subscribed to the Google Groups
"Spiffy UI" group.
To unsubscribe from this group and stop receiving emails from it, send an
email to spiffy-ui+...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

hgeor...@gmail.com

unread,

Jul 3, 2013, 10:23:24 AM7/3/13

to spif...@googlegroups.com, hgeor...@gmail.com

I'm trying to use classes within spiffyui.css but I want them slightly changed. I have my own file as well, and I have classes in there with the same name, but the ones in spiffyui.min.css is taking precedence.

For example:

<head>

</head>

Within ManagementConsole, if I have:

.humanMsgInfo {

background-color: green;

color: white;

opacity: 1;

}

It won't use the green background, but instead the black background that is specified within spiffyui.min.css...

Zack Grossbart

unread,

Jul 3, 2013, 10:50:42 AM7/3/13

to spif...@googlegroups.com

This is just an order of operations issue. The C in CSS stands for
cascading and that means the last one wins. Just make sure your CSS comes
after the spiffyui.min.css. You can do that with JavaScript or with the
build mechanism I mechanism I mentioned in my previous email.

Cheers,

Zack

From: spif...@googlegroups.com [mailto:spif...@googlegroups.com] On
Behalf Of hgeor...@gmail.com

hgeor...@gmail.com

unread,

Jul 3, 2013, 12:37:52 PM7/3/13

to spif...@googlegroups.com, hgeor...@gmail.com

I'm confused. In my example above, I have the custom CSS file being linked after all of the SpiffyUI CSS files but it's still taking the styles from Spiffy files instead of mine.

We don't use Maven.

Do you have a code sample on how to do this with JavaScript?

On Wednesday, July 3, 2013 9:49:52 AM UTC-4, hgeor...@gmail.com wrote:

Zack Grossbart

unread,

Jul 3, 2013, 1:01:30 PM7/3/13

to spif...@googlegroups.com

If the spiffyui.min.css styles are overriding your styles then the browser
thinks they were loaded last. Spiffy UI isn't doing any magic there.

-Zack

From: spif...@googlegroups.com [mailto:spif...@googlegroups.com] On
Behalf Of hgeor...@gmail.com
Sent: Wednesday, July 03, 2013 12:38 PM
To: spif...@googlegroups.com
Cc: hgeor...@gmail.com
Subject: Re: How to not include spiffyui.min.css?

Reply all

Reply to author

Forward