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 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Nov 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Need Help Modifying CSS to Add Header

    I desperately need help. My understanding of CSS is non-existent. I have a store http://astore.amazon.com/texasheat-20 with Amazon.com and would like to add a banner to the top of the pages. According to the information from Amazon.com "Write your own overriding CSS to customize your aStore." Their setup page is divided into two sections. On the right they show the existing CSS. On the left there is a box where you can add the new code. They have tabs for "Global", "Category Page", "Detail Page", "Search Results" etc.

    My objective is to add an image (header.jpg 959 x 187) to top of all the pages.

    On top of this new background/image, I'd like to be able to add the store name "Texas Heat" with a marketing slogan directly below it.

    The existing CSS for "Global" is:

    ===================================


    /* PAGE STYLE */
    body {
    margin:24px;
    padding:0px;
    background:#000000;
    color:#FFFFFF;
    min-width:748px;
    font-family:'Lucida Console', monospace;
    font-size:9pt;
    font-weight:500;
    line-height:12pt;
    text-decoration: none;
    }
    table {
    font-family:'Lucida Console', monospace;
    font-size:9pt;
    }
    form {
    margin:0px;
    }
    a {
    color: #FFFFFF;
    text-decoration: underline;
    }
    a img{ border:none;}
    hr {
    border:0;
    width:100%;
    color:#880406;
    background-color:#880406;
    height:1px;
    width:100%;
    margin:6px 0px 12px 0px;
    }
    #wrap {
    width:748px;
    }
    #rule {
    height:1px;
    background-color:#FFFFFF;
    width:100%;
    margin:6px 0px 12px 0px;
    }
    h2 {
    font-size:16px;
    font-weight:bold;
    margin:0px;
    padding:0px;
    }
    h3 {
    font-size:14px;
    font-weight:bold;
    margin:0px;
    padding:0px;
    }

    /* MAIN PAGE AREA */
    #mainwrap {
    float:left;
    }
    #main {
    width:530px;
    margin-bottom:19px;
    overflow:hidden;
    }
    div#header {
    background:#880406;
    padding:6px 24px 4px;
    margin:0;
    vertical-align:middle;
    }
    a#mainheadertitle {
    padding:0px;
    font-family:'Georgia', serif;
    font-size:15pt;
    font-weight:normal;
    line-height:28pt;
    color:#FFFFFF;
    margin:0px;
    text-align:left;
    vertical-align:middle;
    text-decoration:none;
    }
    a#mainheadertitle:hover {
    text-decoration:underline;
    }
    td#mainheaderlogo {
    padding:5px;
    }
    img#mainlogo {
    padding-right:5px;
    }
    div#mainsubheader {
    background:#303030;
    padding:10px 24px;
    vertical-align:middle;
    }
    div#contentsubheader {
    width:482px;
    overflow:hidden;
    }
    div#subheaderlinks {
    float:right;
    text-align:right;
    }
    div#subheadertitle {
    font-size:12pt;
    font-weight:bold;
    }
    div#contenterror {
    background:#333333;
    padding:14px 24px;
    }
    span.currentpage {
    font-weight:bold;
    }

    span.error {
    font-weight:bold;
    }

    /* SIDEBAR */
    #sidebar {
    float:right;
    width:200px;
    overflow:hidden;
    }
    #sidebar ul {
    margin-bottom:0;
    }
    #sidebar h3, #sidebar p {
    padding:0 10px;
    }

    /* GENERAL SIDEBAR WIDGET STYLES */
    ul#widget,ul.widget li.widget {
    margin:0;
    padding:0;
    list-style:none;
    }
    li.widget {
    float:left;
    width:200px;
    margin-bottom:19px;
    }
    ul#widget div {
    background:#333333;
    }
    ul#widget h3 {
    font-family:'Lucida Console', monospace;
    font-size: 10pt;
    font-weight: bold;
    color:#FFFFFF;
    margin:0px;
    padding:6px 15px 4px;
    text-align:left;
    background:#880406;
    }
    ul#widget p {
    font-family:'Lucida Console', monospace;
    font-size: 9pt;
    font-weight: normal;
    color:#FFFFFF;
    margin:0px;
    padding: 10px 15px 20px;
    }

    /* SEARCHBROWSE WIDGET */
    div#searchbrowse {
    padding:14px;
    }
    div#searchbrowse div.indent {
    padding: 5px 0px 5px 15px;
    }
    select.searchwidget {
    width:173px;
    margin-bottom:6px;
    }
    input#searchwidgetkeywords {
    width:134px;
    }
    span#SearchAtAmazon {
    font-size: 8pt;
    }
    div#browsetitle {
    font-weight:bold;
    padding-bottom:7px;
    }
    span.selectedcategory {
    font-weight:bold;
    }

    /* LISTMANIA WIDGET */
    div.listwidget {
    padding-bottom:16px;
    }
    ul.listmania {
    margin:0px;
    padding:0px;
    list-style:none;
    }
    ul.listmania li {
    margin:0px;
    padding:5px;
    padding-left:10px;
    list-style:none;
    text-align:center;
    }
    ul.listmania li.clsOdd,li.listimages {
    background-color:#353535;
    }
    ul.listmania li.clsEven {
    background-color:#333333;
    }

    img.listimage {
    display:block;
    margin-left:auto;
    margin-right:auto;
    }

    /* PRODUCTS WIDGETS */
    div.productwidget {
    padding:0px;
    padding-bottom:16px;
    }
    div.productwidget .price {
    font-weight:bold;
    }
    table.sidebarproducts {
    font-family:'Lucida Console', monospace;
    font-size:9pt;
    width:200px;
    }
    table.sidebarproducts td {
    padding:5px;
    }
    table.sidebarproducts td.image {
    vertical-align:top;
    width:75px;
    }
    table.sidebarproducts td.text {
    vertical-align:middle;
    width:115px;
    }
    table.sidebarproducts span.listtitle {
    font-weight:bold;
    }
    div.privacylink {
    padding: 2px 5px;
    font-size:7pt;
    text-align:center;
    }

    /* FOOTER */
    div#footer {
    width:530px;
    margin-bottom:28px;
    color:#880406;
    border-top:1px solid #880406;
    }
    div#footer p {
    padding:5px;
    margin:0;
    }
    div#leftfoot {
    float:left;
    width:430px;
    }
    div#rightfoot {
    float:right;
    width:100px;
    text-align:right;
    }

    /*Associate Provided CSS*/
    body {
    font-size: 62.5%; /* Resets 1em to 10px */
    font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
    background-color: #000;
    color: #ccc;

    #sidebar {
    font: 1em 'Lucida Grande', Verdana, Arial, Sans-Serif;
    }

    ===================================

    I have read everything I can find concerning CSS and banners but everything I've found assumes that I have at least a basic understanding of CSS. Unfortunately I don't have a clue. I am however confidant that given a starting point, I can easily adjust the positioning of the store name and marketing slogan to position them where I want them using the appropriate fonts.

    I apologize for my ignorance. And I will definitely appreciate any guidance that is offered. Thanks in advance for your time and attention!

    Steve

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,927
    Thanks
    6
    Thanked 1,041 Times in 1,014 Posts
    Quote Originally Posted by SWC76801 View Post
    My objective is to add an image (header.jpg 959 x 187) to top of all the pages.

    On top of this new background/image, I'd like to be able to add the store name "Texas Heat" with a marketing slogan directly below it.
    Hi Steve,

    Well, adding an image isn’t that hard but to add text (i.e. plain text, not part of the image) you’d need to change the HTML as well, not just the CSS.

    Anyway, I don’t know where exactly you want that image but I’d say for now do the following:
    Look for the rule that reads…
    Code:
    #wrap {
          width:748px;
    }
    and add this:
    Code:
    #wrap {
          width:748px;
          padding-top: 187px;
          background: url(path/to/image.jpg) no-repeat;
    }
    or, if you can’t change CSS, just add CSS then write a new rule like the above but without the width line.
    You need to upload your image somewhere and reference it with the correct path to show up.

    As I said, to add text you’d need to change the HTML as well. I din’t know if you can do that. If not then why not just add the text to the image (like, make it a part of the image)?

    Hope that helps.

  • #3
    New to the CF scene
    Join Date
    Nov 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This will work! I've added the code you sent. Until I can get this portion of the project working properly I'm just using the existing image. I'm really happy that after you gave me the code, I can understand how it works and how it can be changed. This is encouraging! Once I get it perfected, I'll create the new one with the text. I had to change the width to 959 to get the image to display correctly. Now that the image is positioned as it should be I need to make a couple of additional modification.

    First I'd like to change the layout for the page so that it is centered. Currently it is aligned to the left.

    Then I'd like to be able to change the arrangement for the columns that make up the rest of the page excluding the new image we've added. Before I changed the width to 956 the two columns were separated by a small black border. After I changed the width the distance between the columns has increased and they are apparently using the full width of 956. Is it possible to get them centered with a small border similar to the way they were before I added the image?

    You can see how the page looks at http://astore.amazon.com/texasheat-2...256669-6970038

    Once again, I apologize for my ignorance. I really appreciate your help with learning how to edit CSS. I have ordered a couple of books that I hope will help me learn how to do this on my own.

    Thanks again!

    Steve

  • #4
    Regular Coder
    Join Date
    Feb 2007
    Location
    Seattle
    Posts
    153
    Thanks
    5
    Thanked 9 Times in 9 Posts
    Quote Originally Posted by SWC76801 View Post
    First I'd like to change the layout for the page so that it is centered. Currently it is aligned to the left.
    Change #wrap to look like this:
    Code:
    #wrap {
    margin: 0px auto;
    width:748px;
    }
    This has the effect of applying a 0px margin to the top and bottom, and applying an equal margin for the left and right automatically based on the user's browser window size.

    Some old browsers need more help - you may need to add
    Code:
    body {
          margin:24px;
          padding:0px;
          background:#000000;
          color:#FFFFFF;
          min-width:748px;
          font-family:'Lucida Console', monospace;
          font-size:9pt;
          font-weight:500;
          line-height:12pt;
          text-decoration: none;	
          text-align:center;
    }
    in the body style to trick IE6 into centering the content, then add
    Code:
    #wrap {
          margin: 0px auto;
          width:748px;
          text-align:left;
    }
    to the #wrap style to bring your text back to where it ought to be. Try it first without this trick.

    Then I'd like to be able to change the arrangement for the columns that make up the rest of the page excluding the new image we've added. Before I changed the width to 956 the two columns were separated by a small black border. After I changed the width the distance between the columns has increased and they are apparently using the full width of 956. Is it possible to get them centered with a small border similar to the way they were before I added the image?
    Your columns each have a specific width assigned to them:
    Code:
    #sidebar {
          float:right;
          width:200px;
          overflow:hidden;
    }
    and
    Code:
    #main {
          width:530px;
          margin-bottom:19px;
          overflow:hidden;
    }
    Try adjusting those widths to fill in the pixels you added. Perhaps you add it all to the #main style in order to keep your sidebar widgets in harmony with your #sidebar wrapper.

  • #5
    Regular Coder Jutlander's Avatar
    Join Date
    Jun 2007
    Location
    In my own sick little world :P
    Posts
    425
    Thanks
    1
    Thanked 12 Times in 12 Posts
    Quote Originally Posted by garydarling View Post
    Change #wrap to look like this:
    Code:
    #wrap {
    margin: 0px auto;
    width:748px;
    }
    This has the effect of applying a 0px margin to the top and bottom, and applying an equal margin for the left and right automatically based on the user's browser window size.

    Some old browsers need more help - you may need to add
    Code:
    body {
          margin:24px;
          padding:0px;
          background:#000000;
          color:#FFFFFF;
          min-width:748px;
          font-family:'Lucida Console', monospace;
          font-size:9pt;
          font-weight:500;
          line-height:12pt;
          text-decoration: none;	
          text-align:center;
    }
    in the body style to trick IE6 into centering the content, then add
    Code:
    #wrap {
          margin: 0px auto;
          width:748px;
          text-align:left;
    }
    to the #wrap style to bring your text back to where it ought to be. Try it first without this trick.
    This is not the trick to get IE 6 to center a page, but IE 5. IE 6 will play along just fine if the doctype is correct, i.e. with a URL.
    .
    .

  • #6
    New to the CF scene
    Join Date
    Nov 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The #wrap style brought the text back to where it should be and centered it. It looks exactly as I had wanted it. The new image however is still a problem. When I set width:748px; the lower portion of the page is perfect, but my image is cropped. If I set width:996px; the image is perfect but the text is now spread out across the page. My ultimate goal is to have the image (which is obviously wider than the text) centered above the text and spanning it on the left and the right. I'm trying to match my WordPress blog.

    A secondary problem that I'm seeing is that the original Amazon.com CSS had a small margin at the top of the page. The image has it's own margin built into it, so the margin at the top of the page should probably be set to 0. I've tried several changes which seemed perfectly logical to me, but none of them worked. Just shows how little I know about all of this.

  • #7
    New to the CF scene
    Join Date
    Nov 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well... it turns out that I was a bit premature with my report yesterday. Today I have been trying to resolve the problems reported in my last reply and I discovered that the "text-align:center;" also centers the text on the "Detail Page". I' still unable to resolve the problems in the previous reply.


  •  

    Posting Permissions

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