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 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    HTML/CSS coding question

    Hello, I am a newbie at html/css coding; however, I do have a basic understanding of how everything works. I am trying to customize some pre-fabricated code to fit a logo's color scheme. The website is http://www.renuyoursmile.com.

    As you can see, the logo cuts into a portion of the darker blue section. I would like to either remove or match the color of the darker blue section to match the logo. However, I cannot find the code for that darker blue section in the CSS code. Does anyone have any suggestions to what this might be called in the CSS code? Finally, can anyone suggest to me how to center the logo? I have included what I think is the relevant CSS code below:

    Thanks!

    Code:
    /* ----------------------------------------------------------------------------------------------------------
    
        COLOR CSS BELOW
    
    ---------------------------------------------------------------------------------------------------------- */
    
    /* ----------------------------------------------------------------------------------------------------------
    HTML
    ---------------------------------------------------------------------------------------------------------- */
    
    /*body {background:#2f2f2f; color:#222;}*/
    
    body {background:#2f2f2f; color:#222;}
    a {color:#000;}
    a:hover {color:#2D7DF5;}
    
    /* ----------------------------------------------------------------------------------------------------------
    Generally HTML styles (table, ul, dl...)
    ---------------------------------------------------------------------------------------------------------- */
    
    ul.ul-list-02 {border-top:1px solid #00BCE2;}
    ul.ul-list-02 li {border-bottom:1px solid #EAEAEA;}
    
    ul#ul-rss li a {color:#000;}
    ul#ul-rss li a:hover {color:#F50;}
    
    /* ----------------------------------------------------------------------------------------------------------
    Others
    ---------------------------------------------------------------------------------------------------------- */
    
    .box ul li {background:url("blue/dot.gif") 0 100% repeat-x;}
    ul#ul-rss li {background:url("blue/ico-rss.gif") 0 3px no-repeat;}
    ul.ul-list li {background:url("blue/dot.gif") 0 100% repeat-x;}
    /* .main.bg {background:url("blue/main.gif") 100% 0 repeat-y;} */
    #header {background:url("blue-header.gif") 0 100% repeat-x;}
    #search-input {background:url("blue/inp-search.gif") 0 0 no-repeat;}
    #search-submit {background:#000 url("blue/inp-search-submit.gif") 0 0 no-repeat;}
    
    #topstory .info, .article .info {background:url("blue/topstory-line.gif") 0 100% repeat-x;}
    #topstory p.date, .article p.date {background:url("blue/topstory-date.gif") 0 0 no-repeat;}
    .article .info {background:url("blue/article-line.gif") 0 100% repeat-x;}
    .article p.date {background:url("blue/article-date.gif") 0 0 no-repeat;}
    .ico-comment {background:url("blue/ico-comment.gif") 0 2px no-repeat;}
    
    /* ----------------------------------------------------------------------------------------------------------
    Layout
    ---------------------------------------------------------------------------------------------------------- */
    
    .main.bg {background-color:#FFF;}
    
    /*#header {background-color:#43BBFA;}*/
    #header {background-color:#00BCE2;}
    
    #logo {color:#00BCE2;}
    #logo a {color:#FFF;}
    
    #search-input input {background-color:#FFF;}
    
    #nav {background:#000;}
    #nav ul li a {border-right:1px solid #303030; color:#FFF;}
    #nav ul li.current_page_item a {color:#23B0F6;}
    
    #aside a {color:#2D7DF5;}
    #aside a:hover {color:#000;}
    
    #aside .title {border-bottom:1px solid #CACACA;}
    
    #footer {background:#000; color:#AFAFAF;}
    #footer a {color:#AFAFAF;}
    #footer a:hover {color:#FFF;}
    
    .low {color:#808080;}
    
    /* ----------------------------------------------------------------------------------------------------------
    Page: Home
    ---------------------------------------------------------------------------------------------------------- */
    
    #topstory {background:#C3E9FE;}
    #topstory p.date {background-color:#23B0F6;}
    #topstory p.date span {color:#000;}
    
    .article {background:#FFF; border-bottom:1px solid #EAEAEA;}
    .article p.date {background-color:#505050;}
    .article p.date span {color:#FFF;}

  • #2
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Also, here is the relevant code for the actual logo:

    In CSS:

    Code:
    #ReNulogo {
      width: 420px;
      position: center;
      height: 480px;
      background: #CCC url(ReNuYourSmile.jpg) no-repeat center top;
      padding: 0;  
      color: #FFF;  
    }
    In HTML:

    Code:
    <!-- Header -->
    <div id="header" class="box">
        <div class="main">
        <div id="ReNulogo">
          </div>
    
        </div> <!-- /main -->
    
    </div> <!-- /header -->

  • #3
    Regular Coder optimus203's Avatar
    Join Date
    Sep 2008
    Location
    CT
    Posts
    317
    Thanks
    22
    Thanked 16 Times in 15 Posts
    Its a background repeated image, and doesn't have any css color designation:

    #header {background:url("blue-header.gif") 0 100% repeat-x;}

    You can open this file in Photoshop, and try to get an exact color match with the eyedropper tool. Hope this helps.
    Always thank those CF Users who help you solve issues...
    Connecticut Web Design

  • #4
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Lots of helpful sites here.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  

    Posting Permissions

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