Forum Discussion

tkearsley's avatar
tkearsley
Maven
13 years ago
Solved

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
    13 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>}

     

6 Replies

Sort By
  • VenkS's avatar
    VenkS
    Lithium Alumni (Retired)
    13 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)
    13 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
    13 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)
    13 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.
  • tkearsley's avatar
    tkearsley
    Maven
    13 years ago
    Thanks for the information. I moved #lia-body.TkbArticlePrintPage and nothing changed. I think I will try the header/page layout option and see if that produces the desired result.