Advanced CSS customization

Question

The scenario

I have a quick CSS question. I am customizing the web interface of our Zimbra deployment, which uses jetty (something I haven't worked in before). I've identified two files that work together: (1) skin.css, and (2) skin.properties. The skin.css file includes the following line:

.ImgLoginBanner         {   background-repeat:no-repeat; @LoginBanner@   }

The @LoginBanner@ appears to be a variable, and the other file (skin.properties) apparently holds the value. It has the following lines:

LoginBannerImg      =   @LogoImgDir@/LoginBanner.png?v=@jsVersion@
LoginBanner         =   @img(, LoginBannerImg, 400px, 158px)@

---

What I am trying to do . . .

I want to customize it to insert my own background-size CSS property, but I can't seem to get it working correctly. In the skin.css file, I did this:

.ImgLoginBanner         {   background-repeat:no-repeat; @LoginBackgroundSize@; @LoginBanner@   }

And then in the skin.properties file I added the LoginBackgroundSize line:

LoginBannerImg      =   @LogoImgDir@/LoginBanner.png?v=@jsVersion@
LoginBanner         =   @img(, LoginBannerImg, 400px, 158px)@
LoginBackgroundSize = @background-size:400px 158px@

But it didn't work. I guess I am mis-understanding something here, but I am not sure what to google. I'm not familiar with this syntax. I don't even know what the values within the @ symbols are called. "CSS variables" maybe?

---

The question

• How are the skin.css and skin.properties files are working together?
• What is the img() function? Is that CSS?
• Why does the LoginBannerImg line in the skin.properties file have four @ symbols? If it is to separate literal from symbolic text, then why does the LoginBanner line only have two?

Answer 1

Okay so I figured this out. The @ symbols aren't necessary in the skin.properties file. In the existing entries, they probably represent nested variables. I changed the LoginBackgroundSize from this:

LoginBackgroundSize = @background-size:400px 158px@

. . . to this:

LoginBackgroundSize = background-size:400px 158px

Worked immediately.