SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    Love *********'s Forum ep2012's Avatar
    Join Date
    Aug 2004
    Location
    Toronto, Ontario
    Posts
    848
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Please help with code

    Hi there,

    I need to change the colour of this box so that it stands out since the box right above it is the same exact colour.

    Can someone just tell me what to change code wise & what colours or shading you think would look best so it pops. I'm afraid to start changing things as I don't want anything to break.

    Here's the code & below it, is the page showing the box on the right panel.

    <div style="border: 1px solid #510028; margin: 10px auto; padding: 5px; background-color: #9b1155; text-align: center; width: 260px">
    <h3 style="color: #ffffff; font-weight: bold; text-shadow: 0px 1px 0px #000000; text-decoration: underline; line-height: 19px; font-size: 17px"><font size="5">Free Bonuses</font></h3>
    <p>
    <font color="#ffffff">1. Along with your order you will also receive 2 Free Songs &amp; 1 Guided Imagery you can use for yourself or when you see clients.</font>
    </p>
    <p>
    <font color="#ffffff">2. A Discount on Advertising with the most well known Top Escort Industry Directory <br />
    </font>
    </p>

    https://www.becomeanescort.com/

    Thank you


    Michelle

  2. #2
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try changing the value of the background-color to whatever you like to suit the rest of your web page.

    Code:
     
    background-color: #9b1155;

  3. #3
    Love *********'s Forum ep2012's Avatar
    Join Date
    Aug 2004
    Location
    Toronto, Ontario
    Posts
    848
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, but there's shading in those other white boxes & I know that involves more coding.

    Can you tell me how to maybe put a somewhat thick bright white border just inside the box so it makes it really stand out. Maybe we could shade that with grey or something. Like the other shading is done in the white boxes.

    Thanks


    Michelle

  4. #4
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you could change your border style on the box from

    Code:
     
    border: 1px solid #510028;
    to something like

    Code:
     
    border: 5px solid rgb(255,255,255);  /* 5px white border */
    but this will also add an extra 8 pixels to the overall width of the box.

    If that is an issue, then you could put a "gutter" div inside the box. (The gutter div would contain all the current content in the box.) . Then put the 5px border on the gutter div to maintain the original overall width of 260px on the box.

  5. #5
    Love *********'s Forum ep2012's Avatar
    Join Date
    Aug 2004
    Location
    Toronto, Ontario
    Posts
    848
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh god, I know I won't be able to do all of that <sigh> LOL

    That's why I wanted the border to go inside the existing thin border, so it wouldn't make the box any wider than it is & so it's inline with all the other boxes.

    I guess it can't be too thick otherwise the text will end up being too narrow & will look stupid. I just wanted it thick & bright enough so it pops the box & I don't have to change the entire background colour. I don't want it to blend in with the other box of the same colour. It really needs to stand out.

    Thanks


    Michelle

  6. #6
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What I suggested is pretty straight forward.

    If you like, have a play with the borders in this demo to see how increasing the gutter div border width works

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
    </head>
    <body>
     
    <div style="width: 260px; border: 1px solid red;">
     
    <!-- the div below is the gutter div -->
     <div style="border: 5px solid blue">
                <br /><br /><br /><br />
                Your box content<br /> goes here
                 <br /><br /><br /><br />
        </div>
     
    </div
    </body>
    </html>

  7. #7
    Love *********'s Forum ep2012's Avatar
    Join Date
    Aug 2004
    Location
    Toronto, Ontario
    Posts
    848
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No, that didn't work at all.

    You changed the background to white, so it was white text on top of white with a blue border. That's not what I suggested.

    It also made the popup go nuts & not work properly.

    I have a SS, but can't remember how to attach SSs in forums since I rarely do.

    Thanks anyway


    Michelle

  8. #8
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by exoticpublishing View Post
    No, that didn't work at all.

    You changed the background to white, so it was white text on top of white with a blue border. That's not what I suggested.

    It also made the popup go nuts & not work properly.

    I have a SS, but can't remember how to attach SSs in forums since I rarely do.

    Thanks anyway


    Michelle
    What I posted was a demo showing how you can use a "gutter" div to put a border inside your box as you requested.

    You can't simply replace your original code with my demo code without retaining your original box styles.

    If you put a gutter div inside your original box div you can then put a border inside your original box without increasing its original width.

  9. #9
    Love *********'s Forum ep2012's Avatar
    Join Date
    Aug 2004
    Location
    Toronto, Ontario
    Posts
    848
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well that's what I needed.

    I don't know how or what the code is, hence me asking for help. I could have maybe changed the colours in certain areas, but I needed the exact code to do what I wanted.

    Never mind.

    Thanks


    Michelle


Bookmarks

Posting Permissions

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