ThemeShaper Forums » Thematic

[closed]

Finally got my website online, few questions!

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

    Hello everyone, after months of on and off, I finally managed to develope my site far enough to get it online (which was rather difficult in itself, transfering from localhost to live). It's my first website ever, so pardon any stupid questions. You can see it here: www.bookboxshop.com

    My main question at the moment, is how to get that gradient that runs above the footer to remain static/still? If I window the browser, the gradient moves up as I resize to a small window.

    This is my current code:

    Body.home {
    	background-color:#000000;
    	background:url(images/gradient.png) repeat-x bottom;
    	width: 1 px;
    }

    I'm assuming part of the problem is because it is placed in the body. I have played with putting it in Body.home #main but the problem there is that #main has a fixed width, so if I leave it as is, the gradient does not extend past the 900px width of #main. If I set #main's width to auto, everything gets blown out to the sides. What would the correct method of accomplishing this be?

    --------

    Second question, partly related, is that I developed the site on one monitor, so when I checked it on a mobile phone, or a high resolution screen, things start to get distorted, and the gradient position can be awkward (floating), especially on a mobile phone. I did set the height of the header and footer to a percent rather than a fixed pixel value, which seems to have helped. Are there any other tricks to getting the website to display properly regardless of screen resolution?

    --------

    Third question is rather simple, essentially need to clean up my style.css code. What I have been doing to get these gradients display on every page is like so:

    Body.page-id-81 {
    	background-color:#000000;
    	background:url(images/gradient.png) repeat-x bottom;
    	width: 1 px;
    }
    
    Body.page-id-92 {
    	background-color:#000000;
    	background:url(images/gradient.png) repeat-x bottom;
    	width: 1 px;
    }

    So I keep pasting the same code over and over, just changing the page-id. I have about 60+ pages with a gradient so it ends up adding a lot of code. What would the short method for this be?

    Would this work?

    Body.page-id-81,91,etc,etc

    Thanks so much!

    Posted 8 years ago #
  2. whiteweazel21
    Member

    In regards to the first question in getting the gradient to stick, perhaps using #wrapper instead of the body or #main would work? I've tried all sorts of different positioning tricks but the darn thing just won't stay down!

    Posted 8 years ago #
  3. whiteweazel21
    Member

    After a lot of searching, I finally managed to get the gradient to stick on the homepage using "display:table".

    The problem now is that I need to apply this style to the 60 other pages. Is there really no shortcut to apply multiple page-ids to a specific css styling, or do I really have to have 60 entries for the background image? I tried searching for this, but as of yet I have not found much in relation to Wordpress Page-ids.

    Thanks

    Posted 8 years ago #
  4. vicky515
    Member

    Is there a reason why you're specifying each individual page? For example, are there pages you don't want to have this applied to?

    If not, then just use the CSS class "page", which will apply it to all pages...

    Posted 8 years ago #
  5. whiteweazel21
    Member

    Hi Vicky,

    Well I supposed adding this gradient to all pages is a possible option to shorten the CSS, but there are some pages where the gradient does not really fit in.

    So far every page that has a gradient has an image with transparency overlayed over it as a png. Pages such as the "shop", "contact", and "blog" that have no image or reflection -- I don't think should have this gradient, because it serves no purpose.

    Is each css styling really limited to only one page ID? I did find a function based (+css) way to do this while searching but I am a little intimidated to implement it and I'm not entirely sure it will shorten the code in the end.

    Thanks!

    Posted 8 years ago #
  6. whiteweazel21
    Member

    This is the article I was referring to:
    http://wordpress.org/support/topic/css-div-background-image-change-by-page-id?replies=11

    Would it be worth it to implement something like this to shorten the CSS code? I'm new to website developement so I don't know how much CSS size affects website loading speed, but I assume shorter CSS would help load times right?

    Not to mention my host provider, Host Gator, is giving me trouble. The pages load so slow sometimes, I've complained 4 times already without much progress. It's improved in speed slightly, but I feel like it still loads fairly slow...

    Posted 8 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.