Skip navigation

CQ5

chamila.fernando
chamila.fernando Calculating status...
Currently Being Moderated

static.css styles are not applied unless marked !important

Sep 11, 2012 4:58 AM

Tags: #not #styles #startup #tutorial #applied #are #marked #unless #static.css #!important

Hi,

 

I am following the Adobe http://dev.day.com/docs/en/cq/current/howto/website.html tutorial.

 

Even though I followed the steps exactly, I can not see the styles in static.css are being applied, unless I mark the style as !important.

 

for example,

 

Does not work : background:url('tail.jpg') top repeat-x;

 

Work: background:url('tail.jpg') top repeat-x!important;

 

So I am guessing that there is some configuration which forces some built in styles to be applied, overriding the static.css.

 

When I do view source of the page, I can see below imports.

 

<script type="text/javascript" src="/etc/clientlibs/foundation/jquery.js"></script>

<script type="text/javascript" src="/etc/clientlibs/foundation/main.js"></script>

<link rel="stylesheet" href="/etc/clientlibs/foundation/main.css" type="text/css">

<link href="/etc/designs/mywebsite/static.css" rel="stylesheet" type="text/css">

<link href="/etc/designs/mywebsite.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="/etc/clientlibs/foundation/librarymanager.js"></script>

 

Please let me know what I am doing wrong here.

 

Regards,

 

Chamila

1465 Views   5 Replies   Latest reply: chamila.fernando, Sep 11, 2012 10:35 PM
 
Replies
  • Wile-the-Coyote
    7 posts
    Aug 23, 2012
    Currently Being Moderated
    1. Wile-the-Coyote,
    Sep 11, 2012 7:31 AM   in reply to chamila.fernando
    Report

    there is a CSS precedence, check your mywebsite.css has the declaration background:url which will "win" the one from static.css.

     
    |
    Mark as:
  • chamila.fernando
    Currently Being Moderated
    2. chamila.fernando,
    Sep 11, 2012 8:18 AM   in reply to Wile-the-Coyote
    Report

    Hi, Wile,

     

    thank you for the reply...

     

    Well I checked the content of mywebsite.css and it was empty. I did not add/create that css, but I think it is automatically included by CQ.

     

    BTW I am using foundation components, which are built in CQ.

     
    |
    Mark as:
  • hypnotec
    Currently Being Moderated
    3. hypnotec,
    Sep 11, 2012 8:23 AM   in reply to chamila.fernando
    Report

    i suggest using a browser debugging tool, such as firebug, to determine which CSS rule overrides your expected rule and from which CSS file it originates.

     
    |
    Mark as:
  • chamila.fernando
    Currently Being Moderated
    4. chamila.fernando,
    Sep 11, 2012 8:27 AM   in reply to hypnotec
    Report

    Hi Hypnotec,

     

    Sure, will check it and will update this with my finding.

     

    thanks for the reply.

     
    |
    Mark as:
  • chamila.fernando
    Currently Being Moderated
    5. chamila.fernando,
    Sep 11, 2012 10:35 PM   in reply to chamila.fernando
    Report

    Hi All,

     

    Think I found the problem.

     

    Looks like below div id is implementing some styles, which are overriding all other styles we apply from the static.

     

    <div id="CQ"> in body.jsp

     

    Removed the ID and it worked. I think the tutorial needs to get updated. Some other guys had also faced this same issue.

     

    Thank you all for your inputs.

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points