ThemeShaper Forums » Thematic

[closed]

Different image on each page, declared in style.css with page-id

(4 posts)
  • Started 8 years ago by bearsfan102
  • Latest reply from ScottNix
  • This topic is not resolved
  1. bearsfan102
    Member

    Thanks for any help on this..

    I'm charged with replicating a site that a developer abandoned, I was able to get all the stylesheets and images from the previous dev and figured out they created the theme with thematic. I'm most of the way there but I've got a snag..

    They used the 2c-r-fixed layout and added background images in the left sidebar area with code like this in the style.css for the child theme:

    .pageid-36 #main {
    background-image: url(images/diagram-man4.png);
    background-repeat: no-repeat;
    background-position: left;
    min-height: 468px;
    }

    .pageid-35 #main {
    background-image: url(images/barrel.png);
    background-repeat: no-repeat;
    background-position: top left;
    }

    I changed the page-id's in the style.css to the correct id for the new pages but I'm not having any luck getting them to show. Any ideas on what I should try? Thanks.

    Posted 8 years ago #
  2. ".page-id-35 #main {" missing a dash.

    If that doesn't work, check to make sure your #main isn't set to "overflow:visible", this will cause it to collapse and you wont' see it because main isn't stretching down to clear the other elements.

    Posted 8 years ago #
  3. bearsfan102
    Member

    Great catch! Thanks that fixed it on most of the pages. Could you go into a little more depth about the "overflow:visible" piece?

    To change that setting do you just add "overflow:visible/invisible;" in the div on the stylesheet?

    Posted 8 years ago #
  4. You shouldn't have to mess with it at all. By default it is set to overflow:hidden;, this just means that content that expands outside that #main div box will not be shown (hence the hidden).

    I just mentioned it because sometimes people (myself included) will set the #main div to overflow:visible for cool things like positioning elements "outside" that main div. The draw back to that is overflow:visible will no longer make the #main div stretch all the way over the containing elements... so the #main would only be as tall as its paddings and margins, so it could also be a reason you wouldn't see background images.

    http://www.quirksmode.org/css/clearing.html#link3

    Posted 8 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.