Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Dynamic CSS Content

    <em>* link to my layout.css code <a href="http://pastie.org/4026483" title="CSS Pastie">http://pastie.org/4026483</a></em>

    I use Drupal 7 and have a webpage I'm designing, and was customizing the .css in a few different areas so it would better suit my web content. I have an issue though with large screens.

    If I get a screen over like 1400x900 or so, my header's background stops repeating and you have two ugly white spaces outside of the header background.

    I'm trying to get the background to be dynamic just like I got my content to be dynamic. (Dynamic meaning the content expands and contracts as I expand and contract my window size.) So whether you have an 1024x768 or 2500x3100, I want the header background to be filling the width of the screen.

    I have the Andromeda theme installed and was trying to customize the layout.css, but I don't know how to do it. I will tell you that in the "page wrap" section of the layout.css, I added <code>width:100%;</code> and it caused the content to be dynamic, but this method didn't seem to work on the header, or maybe I put the code in the wrong place.

    I've tried and tried again, I can't get this to work. I'd greatly appreciate any help I could get, thanks!

  • #2
    Regular Coder
    Join Date
    Dec 2011
    Posts
    201
    Thanks
    12
    Thanked 26 Times in 26 Posts
    can you post a link to your site please?

  • #3
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Honestly, I can't. IT's setup in a private server testing enviroment, I was supposed to develop and troubleshoot it before it went live. I do have access to all the files for my particular theme though. layout.cc, structure.css etc. See that link in my original post? copy and paste it, it's a pastie with the layout.css file which is where I believe you would make this edit.

  • #4
    Regular Coder
    Join Date
    Dec 2011
    Posts
    201
    Thanks
    12
    Thanked 26 Times in 26 Posts
    That background behind the header and partially behind the slide show, is derived from two images.

    Code:
    body.with-banner {
        background: url("/site/themes/andromeda/images/bg-pattern-t.gif") no-repeat scroll center top #F5F5F5;
    
    body.wrapper-body {
        background: url("/site/themes/andromeda/images/bg-not-front.gif") no-repeat scroll center top #F5F5F5;
        color: #363636;
        font-family: Arial,Tahoma,Verdana;
        font-size: 12px;
        margin: 0;
        padding: 0;
    }
    1. You will either need to make the image wider so on very wide screens you dont see the white background.

    2. You can re-layout your html so that you have a 100% div with a black background instead of the images.

    For now you can delete the images just edit the #header {}

    Code:
    #header {
        background-color: #000000;
        margin-bottom: 30px;
    }
    that doesn't look to bad, but it doesn't go behind the slider. I kind of like that, and it gives you 100% width, but it doesn't match your footer images.

    Good luck

  • Users who have thanked SeattleMicah for this post:

    tekt0nik (06-04-2012)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •