...

View Full Version : HTML/CSS coding question



tbenson80
06-01-2010, 11:30 PM
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!




/* ----------------------------------------------------------------------------------------------------------

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;}

tbenson80
06-01-2010, 11:35 PM
Also, here is the relevant code for the actual logo:

In CSS:



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


In HTML:



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

</div> <!-- /main -->

</div> <!-- /header -->

optimus203
06-01-2010, 11:40 PM
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.

effpeetee
06-02-2010, 08:33 AM
Lots of helpful sites here (http://www.exitfegs.co.uk/Sources.html).

Frank



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum