Skip to main content
nathanielc92145901
nathanielc92145901
Known Participant
February 15, 2017
Answered

Dreamweaver randomly changed colour when previewed and can't change it back

  • February 15, 2017
  • 7 replies
  • 888 views

I've encountered this twice now. Dreamweaver has randomly changed my colours from what i have used back to the ones i got from a template that was already there. All the information is there but the colours have all gone when i preview it. if someone can tell how to fix this it would greatly be appreciated.  

This topic has been closed for replies.
Correct answer Nancy OShea

This is the CSS code for your page <body>

body {

  font-family: source-sans-pro;

background-color: #D4A42C;  /**change this as needed & save CSS file**/

  margin-top: 0px;

  margin-right: 0px;

  margin-bottom: 0px;

  margin-left: 0px;

  font-style: normal;

  font-weight: 200;

}

Are you working in a defined Local Site folder?    Site > Manage Sites or New Site.

Did you tell DW where to save your site files.  Example C:\MySite.

This is critical for DW to manage assets and file paths for you. 

7 replies

nathanielc92145901
nathanielc92145901Author
Known Participant
February 15, 2017

Thank you this worked i just reentered the same colour.

nathanielc92145901
nathanielc92145901Author
Known Participant
February 15, 2017

@charset "UTF-8";

/* Body */

body {

  font-family: source-sans-pro;

  background-color: #D4A42C;

  margin-top: 0px;

  margin-right: 0px;

  margin-bottom: 0px;

  margin-left: 0px;

  font-style: normal;

  font-weight: 200;

}

/* Container */

.container {

  width: 90%;

  margin-left: auto;

  margin-right: auto;

  height: 1000px;

  background-color: #FFFFFF;

  text-align: center;

}

/* Navigation */

header {

  width: 100%;

  height: 5%;

  background-color: #A52828;

  border-bottom: 1px solid #2C9AB7;

}

.logo {

  color: #fff;

  font-weight: bold;

  text-align: right;

  width: 30%;

  float: left;

  margin-top: 15px;

  margin-left: 25px;

  letter-spacing: 8px;

}

nav {

  float: right;

  width: 50%;

  text-align: right;

  margin-right: 25px;

}

header nav ul {

  list-style: none;

  float: right;

}

nav ul li {

  float: left;

  color: #FFFFFF;

  font-size: 14px;

  text-align: left;

  margin-right: 25px;

  letter-spacing: 2px;

  font-weight: bold;

  transition: all 0.3s linear;

}

ul li a {

  color: #FFFFFF;

  text-decoration: none;

}

ul li:hover a {

  color: #2C9AB7;

}

.hero_header {

  color: #000000;

  text-align: center;

  margin-top: 0px;

  margin-right: 0px;

  margin-bottom: 0px;

  margin-left: 0px;

  letter-spacing: 4px;

}

/* Hero Section */

.hero {

  background-color: #B3B3B3;

  padding-top: 150px;

  padding-bottom: 150px;

}

.light {

  font-weight: bold;

  color: #020202;

}

.tagline {

  text-align: center;

  color: #000000;

  margin-top: 4px;

  font-weight: lighter;

  text-transform: uppercase;

  letter-spacing: 1px;

}

/* About Section */

.text_column {

  width: 29%;

  text-align: justify;

  font-weight: lighter;

  line-height: 25px;

  float: left;

  padding-left: 20px;

  padding-right: 20px;

  color: #A3A3A3;

}

.about {

  padding-left: 25px;

  padding-right: 25px;

  padding-top: 35px;

  display: inline-block;

  background-color: #FFFFFF;

  margin-top: 0px;

}

/* Stats Gallery */

.stats {

  color: #717070;

  margin-bottom: 5px;

}

.gallery {

  clear: both;

  display: inline-block;

  width: 100%;

  background-color: #FFFFFF;

  /* [disabled]min-width: 400px;

*/

  padding-bottom: 35px;

  padding-top: 0px;

  margin-top: -5px;

  margin-bottom: 0px;

}

.thumbnail {

  width: 25%;

  text-align: center;

  float: left;

  margin-top: 35px;

}

.gallery .thumbnail h4 {

  margin-top: 5px;

  margin-right: 5px;

  margin-bottom: 5px;

  margin-left: 5px;

  color: #52BAD5;

}

.gallery .thumbnail p {

  margin-top: 0px;

  margin-right: 0px;

  margin-bottom: 0px;

  margin-left: 0px;

  color: #FFFFFF;

}

/* Parallax Section */

.banner {

  background-color: #2D9AB7;

  background-image: url(../images/parallax.png);

  height: 400px;

  background-attachment: fixed;

  background-size: cover;

  background-repeat: no-repeat;

}

.parallax {

  color: #FFFFFF;

  text-align: right;

  padding-right: 100px;

  padding-top: 110px;

  letter-spacing: 2px;

  margin-top: 0px;

}

.parallax_description {

  color: #FFFFFF;

  text-align: right;

  padding-right: 100px;

  width: 30%;

  float: right;

  font-weight: lighter;

  line-height: 23px;

  margin-top: 0px;

  margin-right: 0px;

  margin-bottom: 0px;

  margin-left: 0px;

}

/* More info */

footer {

  background-color: #FFFFFF;

  padding-bottom: 35px;

}

.footer_column {

  width: 50%;

  text-align: center;

  padding-top: 30px;

  float: left;

}

footer .footer_column h3 {

  color: #010101;

  text-align: center;

}

footer .footer_column p {

  color: #717070;

  background-color: #FFFFFF;

}

.cards {

  width: 100%;

  height: auto;

  max-width: 400px;

  max-height: 240px;

}

footer .footer_column p {

  padding-left: 30px;

  padding-right: 30px;

  text-align: justify;

  line-height: 25px;

  font-weight: lighter;

  margin-left: 20px;

  margin-right: 20px;

}

.button {

  width: 200px;

  margin-top: 40px;

  margin-right: auto;

  margin-bottom: auto;

  margin-left: auto;

  padding-top: 20px;

  padding-right: 10px;

  padding-bottom: 20px;

  padding-left: 10px;

  text-align: center;

  vertical-align: middle;

  border-radius: 0px;

  text-transform: uppercase;

  font-weight: bold;

  letter-spacing: 2px;

  border: 3px solid #FFFFFF;

  color: #FFFFFF;

  transition: all 0.3s linear;

}

.button:hover {

  background-color: #F52828;

  color: #020202;

  cursor: pointer;

}

.copyright {

  text-align: center;

  padding-top: 20px;

  padding-bottom: 20px;

  background-color: #A52828;

  color: #FFFFFF;

  text-transform: uppercase;

  font-weight: lighter;

  letter-spacing: 2px;

  border-top-width: 2px;

}

.footer_banner {

  background-color: #D4A42C;

  padding-top: 60px;

  padding-bottom: 60PX;

  margin-bottom: 0px;

  background-image: url(../images/pattern.png);

  background-repeat: repeat;

}

footer {

  display: inline-block;

}

.hidden {

  display: none;

}

/* Mobile */

@media (max-width: 320px) {

.logo {

  width: 100%;

  text-align: center;

  margin-top: 13px;

  margin-right: 0px;

  margin-bottom: 0px;

  margin-left: 0px;

}

.container header nav {

  margin-top: 0px;

  margin-right: 0px;

  margin-bottom: 0px;

  margin-left: 0px;

  width: 100%;

  float: none;

  display: none;

}

header nav ul {

}

nav ul li {

  margin-top: 0px;

  margin-right: 0px;

  margin-bottom: 0px;

  margin-left: 0px;

  width: 100%;

  text-align: center;

}

.text_column {

  width: 100%;

  text-align: justify;

  padding-top: 0px;

  padding-right: 0px;

  padding-bottom: 0px;

  padding-left: 0px;

}

.thumbnail {

  width: 100%;

}

.footer_column {

  width: 100%;

  margin-top: 0px;

}

.parallax {

  text-align: center;

  margin-top: 0px;

  margin-right: 0px;

  margin-bottom: 0px;

  margin-left: 0px;

  padding-top: 40%;

  padding-right: 0px;

  padding-bottom: 0px;

  padding-left: 0px;

  width: 100%;

  font-size: 18px;

}

.parallax_description {

  padding-top: 0px;

  padding-right: 0px;

  padding-bottom: 0px;

  padding-left: 0px;

  width: 90%;

  margin-top: 25px;

  margin-right: 0px;

  margin-bottom: 0px;

  margin-left: 12px;

  float: none;

  text-align: center;

}

.banner {

  background-color: #2D9AB7;

  background-image: none;

}

.tagline {

  margin-top: 20px;

  line-height: 22px;

}

.hero_header {

  padding-left: 10px;

  padding-right: 10px;

  line-height: 22px;

  text-align: center;

}

}

/* Small Tablets */

@media (min-width: 321px)and (max-width: 767px) {

.logo {

  width: 100%;

  text-align: center;

  margin-top: 13px;

  margin-right: 0px;

  margin-bottom: 0px;

  margin-left: 0px;

  color: #043745;

}

.container header nav {

  margin-top: 0px;

  margin-right: 0px;

  margin-bottom: 0px;

  margin-left: 0px;

  width: 100%;

  float: none;

  overflow: auto;

  display: inline-block;

  background: #52bad5;

}

header nav ul {

  padding: 0px;

  float: none;

}

nav ul li {

  margin-top: 0px;

  margin-right: 0px;

  margin-bottom: 0px;

  margin-left: 0px;

  width: 100%;

  text-align: center;

  padding-top: 8px;

  padding-bottom: 8px;

}

.text_column {

  width: 100%;

  text-align: left;

  padding-top: 0px;

  padding-right: 0px;

  padding-bottom: 0px;

  padding-left: 0px;

}

.thumbnail {

  width: 100%;

}

.footer_column {

  width: 100%;

  margin-top: 0px;

}

.parallax {

  text-align: center;

  margin-top: 0px;

  margin-right: 0px;

  margin-bottom: 0px;

  margin-left: 0px;

  padding-top: 40%;

  padding-right: 0px;

  padding-bottom: 0px;

  padding-left: 0px;

  width: 100%;

  font-size: 18px;

}

.parallax_description {

  padding-top: 0px;

  padding-right: 0px;

  padding-bottom: 0px;

  padding-left: 0px;

  margin-top: 30%;

  margin-right: 0px;

  margin-bottom: 0px;

  margin-left: 0px;

  float: none;

  width: 100%;

  text-align: center;

}

.thumbnail {

  width: 50%;

}

.parallax {

  margin-top: 0px;

  margin-right: 0px;

  margin-bottom: 0px;

  margin-left: 0px;

  padding-right: 0px;

  padding-bottom: 0px;

  padding-left: 0px;

  padding-top: 20%;

}

.parallax_description {

  margin-top: 0px;

  margin-right: 0px;

  margin-bottom: 0px;

  margin-left: 0px;

  width: 100%;

  padding-top: 30px;

}

.banner {

  padding-left: 20px;

  padding-right: 20px;

}

.footer_column {

  width: 100%;

}

}

/* Small Desktops */

@media (min-width: 768px) and (max-width: 1096px) {

.text_column {

  width: 100%;

}

.thumbnail {

  width: 50%;

}

.text_column {

  width: 100%;

  margin-top: 0px;

  margin-right: 0px;

  margin-bottom: 0px;

  margin-left: 0px;

  padding-top: 0px;

  padding-right: 0px;

  padding-bottom: 0px;

  padding-left: 0px;

}

.banner {

  margin-top: 0px;

  padding-top: 0px;

}

}

Or it could be this one

nathanielc92145901
nathanielc92145901Author
Known Participant
February 15, 2017

<!doctype html>

<html lang="en-US">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Light Theme</title>

<link href="css/singlePageTemplate.css" rel="stylesheet" type="text/css">

<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->

<script>var __adobewebfontsappname__="dreamweaver"</script>

<script src="http://use.edgefonts.net/source-sans-pro:n2:default.js" type="text/javascript"></script>

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->

<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

<!--[if lt IE 9]>

      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>

      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

    <![endif]-->

</head>

<body>

<!-- Main Container -->

<div class="container">

  <!-- Navigation -->

  <header> <a href="">

    <h4 class="logo">Mags Travel Agents</h4>

  </a>

    <nav>

      <ul>

        <li><a href="Mags Travel Agents.html">HOME</a></li>

        <li><a href="Bookings.html">BOOKINGS</a></li>

        <li> <a href="#contact">HOLIDAYS</a></li>

        <li> <a href="#contact">CONTACT</a></li>

      </ul>

    </nav>

  </header>

  <!-- Hero Section -->

  <img src="The-Golden-Gate-Bridge-Top.jpg" width="1281" height="370" alt=""/>

  <h2 class="hero_header">MAGS TRAVEL AGENTS</h2>

    <p class="tagline">EXPLORE the world!

      <a href=""><span class="hero_header">

      </span></a>

  </section>

  <!-- About Section -->  </p>

  <section class="about" id="about">

    <h2 class="hidden">About    </h2>

    <p class="text_column">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>

    <p class="text_column"> </p>

    <p class="text_column">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>

    <p class="text_column"> </p></section>

  <!-- Stats Gallery Section --><!-- Parallax Section -->

 

  </section>

  <!-- More Info Section -->

  <footer>

    <article class="footer_column">

      <h3>WHAT WE OFFER</h3>

      <img src="Mags Travel Agent 4.jpg" alt="" width="400" height="274" class="cards"/>

       <p>Mags Travel Agents offer a wide variety of things including flights, car hire and accomidation. Furthermorewe also do package deals that can include 2 or more of the customers requested criteria. At Mags Travel Agents we offer competitive prices to our rivals and for a reward for booking with us you will get a percentage off your next booking.</p>

    </article>

    <article class="footer_column">

      <h3>LOCATIONS</h3>

      <img src="" alt="" width="400" height="200" class="cards"/>

      <img src="../Downloads/65830387.jpg" width="377" height="222" alt=""/>

      <p>At Mags Travel Agents we do holidays to many different countries in the world. We do holidays to North America, South America, Europe, Africa, Asia and Oceania. You can go to the theme parks in Orlando, Florida or the Christ The Redeemer statue in Rio De Janeiro Brazil. Furthermore you could go to Syndey Opera House in Sydney, Australia or Buckingham Palace in London, England.</p>

    </article>

  </footer>

  <!-- Copyrights Section -->

  <div class="copyright">&copy;2017 -<strong>MAGS TRAVEL AGENTS</strong></div>

</div>

  </div>

</div>

<!-- Main Container Ends -->

</body>

</html>

This is what i think you mean?

Nancy OShea
Community Expert
Nancy OSheaCommunity ExpertCorrect answer
Community Expert
February 15, 2017

This is the CSS code for your page <body>

body {

  font-family: source-sans-pro;

background-color: #D4A42C;  /**change this as needed & save CSS file**/

  margin-top: 0px;

  margin-right: 0px;

  margin-bottom: 0px;

  margin-left: 0px;

  font-style: normal;

  font-weight: 200;

}

Are you working in a defined Local Site folder?    Site > Manage Sites or New Site.

Did you tell DW where to save your site files.  Example C:\MySite.

This is critical for DW to manage assets and file paths for you. 

Nancy O'Shea— Product User & Community Expert
nathanielc92145901
nathanielc92145901Author
Known Participant
February 15, 2017

so how can i show it you?

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
February 15, 2017

Like I said before, upload your work to a remote server space you control (aka your web site) and post the URL.  That way we can what you see in our browsers. 

A distant 2nd option is to copy & paste your code into a web forum reply.  Don't use email, it won't come through.

Nancy

Nancy O'Shea— Product User & Community Expert
nathanielc92145901
nathanielc92145901Author
Known Participant
February 15, 2017

ive never used it before apart from the 2 times this has happened and it's for a school project. the colour that is the main page background colour has changed from a gold to white and the header has changed from a dark red to a light blue that was on the original template i took it off

nathanielc92145901
nathanielc92145901Author
Known Participant
February 15, 2017

it's a web site im making

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
February 15, 2017

We can't help you without seeing your CSS & HTML code.

Nancy

Nancy O'Shea— Product User & Community Expert
Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
February 15, 2017

Which colors have changed -- is it the colors in your UI, or your code colors?

Or a web site?

If it's the latter, we need to see your code.  The best way to do that is post the URL to your work online.

If the former, go to Edit > Preferences > Interface.

Nancy

Nancy O'Shea— Product User & Community Expert
Firefly Community Gallery
Adobe Firefly

Remix with Firefly Community Gallery

Thousands of free creations to fall in love with and remix in Firefly.

Explore now
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices