Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ General Web Design _ Change Color in Dreamweaver

Posted by: LFerr May 26 2019, 06:39 PM

Hi,
I made a website a long time ago and it's still serving its purpose, however I wanted to give it a new color palette. There are a few elements of the page I want to change the colors of. I am unable to change the color of the navigation bar at the top along with the center section.

http://www.own-realestate.com/index.html

I was able to change the background color pretty easily to dark blue (see screenshot), but I cannot change the brown found in the content section in the center of the page.

I went so far as to screen shot the webpage and use the eyedropper tool to identify the hex code of the color I want to change (#64440D) then searched throughout the code for that hex value, but couldn't locate it.

Any help changing the colors of the two parts of the page (see screenshot) would be very much appreciated!! Thank you.

LeonAttached Image

Posted by: pandy May 26 2019, 09:48 PM

You have it here in style.css.

CODE

#wrapper {
    width: 960px;
    background-color: #640;
    margin-left:auto;
    margin-right:auto;
    color: #fff;
}


You used shorthand for the color value in the style sheet. And your picker was a little off. #664400, not #66440D.

The brown background for the header is an image - I discovered after searching your CSS for it twice. wink.gif
Maybe you took your color sample there. Images often get a little off.

Posted by: LFerr May 27 2019, 08:47 AM

Thanks a lot for this!!
Also, where can you locate the gray color represented to the right of the navigation?

Posted by: pandy May 27 2019, 06:56 PM

Here.

CODE
nav ul {
    padding-left: 0;
    margin-left: 0;
    background-color: #ccc;
    color: #FFF;
    float: left;
    width: 100%;
}



Most browsers have an "inspector" nowadays. Typically you rightclick in an area of the page and choose "inspect" or similar from the context menu. The inspector opens and shows you the HTML and CSS for the page with the sections corresponding to the area you clicked focused. When you click an element in the HTML the CSS for that will be focused and the area will be highlighted on the page. You may have to click around a little to find the right spot.

It's easier and quicker than searching the style sheet, especially if you aren't already familiar with it.

Attached Image

Posted by: LFerr May 28 2019, 07:35 AM

Thanks again, I really appreciate your help! Have a great week.

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)