The situation
I have a specific issue with CSS that I need help with. I am currently working on customizing the user interface of our Zimbra deployment, which uses jetty (a platform I am not very familiar with). I have come across two files that seem to be related: (1) skin.css, and (2) skin.properties. Inside the skin.css file, there is a line that caught my attention:
.ImgLoginBanner { background-repeat:no-repeat; @LoginBanner@ }
The @LoginBanner@ seems to be a variable, while the other file (skin.properties) contains the corresponding value. Here are the relevant lines from that file:
LoginBannerImg = @LogoImgDir@/LoginBanner.png?v=@jsVersion@
LoginBanner = @img(, LoginBannerImg, 400px, 158px)@
My challenge . . .
My goal is to customize the CSS by adding my own background-size property, but I am struggling to make it work seamlessly. In the skin.css file, I attempted the following:
.ImgLoginBanner { background-repeat:no-repeat; @LoginBackgroundSize@; @LoginBanner@ }
Additionally, I included the LoginBackgroundSize line in the skin.properties file:
LoginBannerImg = @LogoImgDir@/LoginBanner.png?v=@jsVersion@
LoginBanner = @img(, LoginBannerImg, 400px, 158px)@
LoginBackgroundSize = @background-size:400px 158px@
Unfortunately, my changes did not take effect. I suspect I am missing something crucial and I am unsure what resources to consult for guidance. The syntax is unfamiliar to me, and I am puzzled by the values enclosed within the @ symbols. Could they be considered "CSS variables," perhaps?
The inquiry
- How do the skin.css and skin.properties files collaborate?
- What exactly is the
img()function? Is it part of CSS? - Why does the skin.properties file have four
@symbols in theLoginBannerImgline, but only two in theLoginBannerline? Does this discrepancy serve a specific purpose?