Variables in CSS file

Question

I have a Java Web Project and I want to have a split test in my application. I want to be able to select different header images according to the passed query string. For instance, if the user retrieves the following url:

http://www.website.com/?header=1

Then I show the image A for the header. If the user retrieves the url like this:

http://www.website.com/?header=2

The I show the image B. I'm already receiving the 'header' value in my html by expression language variable. The problem is that I set the image url in a CSS file. How can I pass this variable to the CSS file to load the correct image?

PS: I know I can apply the style in the HTML file, but I want to extract all of my styles in the CSS file.

DarkAjax · Accepted Answer · 2013-04-01 18:18:01Z

2

That's not possible unless you use something like LESS.

What you could do is make separate CSS files, use the querystring to determine your needs with Java Web and load the one you need depending on the situation.

answered Apr 1, 2013 at 18:18

DarkAjax

16.3k11 gold badges60 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Robert Owen · Accepted Answer · 2013-04-01 18:54:12Z

1

include 2 different classes for the different background header images in your css, then apply the different class in coding.

.header1 {
background-image: url(background1.jpg);
}

.header2 {
background-image: url(background2.jpg);
}

edited Apr 1, 2013 at 18:54

answered Apr 1, 2013 at 18:32

Robert Owen

9308 silver badges12 bronze badges

1 Comment

Guto Marrara Marzagao Over a year ago

I'm not using PHP, but it's the same logic. I'll do this. Thanks.

Vatan Aggarwal · Accepted Answer · 2013-04-01 18:22:44Z

1

If I understood your question correctly, I believe you can do this by applying different CSS class to your header based on what input you gets from header.

answered Apr 1, 2013 at 18:22

Vatan Aggarwal

363 bronze badges

1 Comment

Guto Marrara Marzagao Over a year ago

Hmm, of course! It's a really good idea. That's the way I'll do. Thank you.

Adrian · Accepted Answer · 2013-04-01 18:21:21Z

0

You have three basic options:

Switch CSS files based on the query parameter, with one CSS file per header image - you can have these just set the header image, and have the static styles in their own file.
Use something like LESS or SASS.
Write your CSS as a JSP file or dynamically generated via servlet, and change the style dynamically on the server.

answered Apr 1, 2013 at 18:21

Adrian

47.2k7 gold badges121 silver badges110 bronze badges

Comments

gaborsch · Accepted Answer · 2013-04-01 18:26:58Z

0

Divide your CSS styles into 3 parts:

common.css
header1.css
header2.css

Depending on your headers, you can include either of headerN.css classes. You can solve it also on server side (generating different includes in <head>) or on client side (use javascript to extract the header value and include the proper css dynamically)

answered Apr 1, 2013 at 18:26

gaborsch

15.8k6 gold badges41 silver badges50 bronze badges

Collectives™ on Stack Overflow

Variables in CSS file

5 Answers 5

Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related