Forum Discussion

tkearsley's avatar
tkearsley
Maven
12 years ago

CSS for single page


Hello,

 

I am seeing an issue with the printer friendly page formatting. The text near the top of the page is overlapping, see screenshot.

 

 

Screen Shot 2013-02-21 at 7.18.37 AM.png

 

I know how to edit the CSS responsible, but the question is how do I make the CSS (below) apply to just one page (TKBAticlePrintPage)?

 

.lia-content > .lia-quilt > .lia-quilt-row-main{
padding:25px;
margin-bottom:20px;
background:url(/skins/images/C8251170964E6D5424CA1C4CFD46B580/ooyala_skin/images/badge_bg_splat_statistics.png) top left no-repeat;
position:relative;
top:-88px;
padding-top:45px;
}

 

Thanks,

Thomas

  • MoniqueL's avatar
    MoniqueL
    12 years ago

    you can add the page class to the stack of divs to have css specific for this page, such as

     

    #lia-body.TKBAticlePrintPage .lia-content > .lia-quilt > .lia-quilt-row-main
          { <whatever css changes you need to make>}

     

  • VenkS's avatar
    VenkS
    Lithium Alumni (Retired)
    12 years ago

    You can add your CSS to a custom component, then add that component to this page.

     

    Hope that helps!

  • MoniqueL's avatar
    MoniqueL
    Lithium Alumni (Retired)
    12 years ago

    you can add the page class to the stack of divs to have css specific for this page, such as

     

    #lia-body.TKBAticlePrintPage .lia-content > .lia-quilt > .lia-quilt-row-main
          { <whatever css changes you need to make>}

     

    • tkearsley's avatar
      tkearsley
      Maven
      12 years ago
      Hi Monique,

      WIth the exception of the misspelling of article, is there anything else here that would cause this to not work?

      I have tried many different variations, and nothing takes on the Article Print Page.


      Thanks,
      Thomas
      • MoniqueL's avatar
        MoniqueL
        Lithium Alumni (Retired)
        12 years ago
        Just taking a very quick glance at your stage site, the property top: -88 set to the general class .lia-content > .lia-quilt > .lia-quilt-row-main is causing you're woes on the print page. If #lia-body.TkbArticlePrintPage isn't working, it may be because it's added to your style sheet above the general ".lia-content > .lia-quilt > .lia-quilt-row-main" instead of below it. You may also want to consider trying a header/page layout & css alternative to what you currently have to achieve your desired design without using a negative top.