Skip to main content
D
damienk68104250
Participant
April 8, 2017
Question

Starter Template Color

  • April 8, 2017
  • 1 reply
  • 399 views

Hi, I just started using Dreamweaver CC 2017 as part of a college project.

My knowledge is very very basic and I need some help from the experts.

I want to change the color of a starter template.

The majority are all blue and anytime I go to change the color nothing happens.

Please help!

This topic has been closed for replies.

1 reply

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
April 8, 2017

If it's a Bootstrap Starter Template, you can painlessly change color palettes with a Bootswatch Theme.  There are several themes to choose from and each can be customized further with LESS/SASS or ordinary CSS in your custom stylesheet.  See link below.

Bootswatch · BootstrapCDN by MaxCDN

Using a Bootstrap Portfolio layout as my starter page, I changed the link in my <head> tag from the default Bootstrap CSS to the Superhero Theme hosted on MacCDN.

<!DOCTYPE html>

<html lang="en">

<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>Bootstrap Portfolio template</title>

<!-- Bootswatch Superhero Theme-->

<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/superhero/bootstrap.min.css" rel="stylesheet" integrity="sha384-Xqcy5ttufkC3rBa8EdiAyA1VgOGrmel2Y+wxm4K3kI3fcjTWlDWrlnxyD6hOi3PF" crossorigin="anonymous">

</head>

<body>

<nav class="navbar navbar-inverse">

<div class="container">

<!-- Brand and toggle get grouped for better mobile display -->

<div class="navbar-header">

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myDefaultNavbar1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>

<a class="navbar-brand" href="#">Brand</a> </div>

<!-- Collect the nav links, forms, and other content for toggling -->

<div class="collapse navbar-collapse" id="myDefaultNavbar1">

<ul class="nav navbar-nav">

<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>

<li><a href="#">Link</a></li>

<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true">Dropdown <span class="caret"></span></a>

<ul class="dropdown-menu">

<li><a href="#">Action</a></li>

<li><a href="#">Another action</a></li>

<li><a href="#">Something else here</a></li>

<li role="separator" class="divider"></li>

<li><a href="#">Separated link</a></li>

<li role="separator" class="divider"></li>

<li><a href="#">One more separated link</a></li>

</ul>

</li>

</ul>

<form class="navbar-form navbar-right" role="search">

<div class="form-group">

<input type="text" class="form-control" placeholder="Search">

</div>

<button type="submit" class="btn btn-default">Submit</button>

</form>

</div>

<!-- /.navbar-collapse -->

</div>

<!-- /.container-fluid -->

</nav>

<section>

<div class="jumbotron text-center">

<div class="container">

<div class="row">

<div class="col-xs12">

<h1>Lorem ipsum dolor sit.</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi, deleniti, ea nisi suscipit atque tempore aspernatur harum unde veritatis neque rem dolores assumenda. Recusandae facilis dolores cum iste assumenda accusamus.</p>

<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more »</a></p>

</div>

</div>

</div>

</div>

</section>

<section>

<div class="container">

<div class="row">

<div class="col-xs-12 text-center">

<h1>Lorem ipsum dolor sit amet</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, magni, doloribus, possimus eum sapiente deleniti doloremque fugit ut expedita molestiae iusto debitis eveniet modi obcaecati ipsam quos quis labore dicta.</p>

</div>

</div>

</div>

</section>

<section>

<div class="container well">

<div class="row">

<div class="col-lg-4 col-md-4 col-sm-6">

<div class="media">

<div class="media-left"> <a href="#"> <img class="media-object" src="images/35X35.gif" alt="..."> </a> </div>

<div class="media-body">

<h2 class="media-heading">Media heading</h2>

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. </div>

</div>

</div>

<div class="col-lg-4 col-md-4 col-sm-6">

<div class="media">

<div class="media-left"> <a href="#"> <img class="media-object" src="images/35X35.gif" alt="..."> </a> </div>

<div class="media-body">

<h2 class="media-heading">Media heading</h2>

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. </div>

</div>

</div>

<div class="col-lg-4 col-md-4 col-sm-6">

<div class="media">

<div class="media-left"> <a href="#"> <img class="media-object" src="images/35X35.gif" alt="..."></a></div>

<div class="media-body">

<h2 class="media-heading">Media heading</h2>

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. </div>

</div>

</div>

</div>

</div>

</section>

<section>

<div class="container">

<div class="row">

<div class="col-lg-12 text-center">

<h2>Latest Work</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia, et, placeat !</p>

</div>

</div>

<div class="row">

<div class="col-md-6 text-center"> <img src="images/400x400.gif" alt="">

<h3>Lorem ipsum dolor sit amet, consectetur elit</h3>

<h6>Lorem ipsum dolor sit amet, consectetur elit</h6>

</div>

<div class="col-md-6 text-center"> <img src="images/400x400.gif" alt="">

<h3>Lorem ipsum dolor sit amet, consectetur elit</h3>

<h6>Lorem ipsum dolor sit amet, consectetur elit</h6>

</div>

</div>

<div class="row">

<div class="col-md-3 text-center col-sm-6 col-xs-6"><img src="images/200x200.gif" alt=""></div>

<div class="col-md-3 text-center col-sm-6 col-xs-6"><img src="images/200x200.gif" alt=""></div>

<div class="col-md-3 text-center col-sm-6 col-xs-6 hidden-xs hidden-sm"><img src="images/200x200.gif" alt=""></div>

<div class="col-md-3 text-center col-sm-6 col-xs-6 hidden-xs hidden-sm"><img src="images/200x200.gif" alt=""></div>

</div>

<hr>

<div class="row">

<div class="col-md-3 text-center col-sm-6 col-xs-6"><img src="images/200x200.gif" alt=""></div>

<div class="col-md-3 text-center col-sm-6 col-xs-6"><img src="images/200x200.gif" alt=""></div>

<div class="col-md-3 text-center col-sm-6 col-xs-6 hidden-xs hidden-sm"><img src="images/200x200.gif" alt=""></div>

<div class="col-md-3 text-center col-sm-6 col-xs-6 hidden-xs hidden-sm"><img src="images/200x200.gif" alt=""></div>

</div>

</div>

</section>

<hr>

<section>

<div class="container">

<div class="row">

<div class="col-lg-12 text-center">

<h1>Lorem ipsum dolor sit amet</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, magni, doloribus, possimus eum sapiente deleniti doloremque fugit ut expedita molestiae iusto debitis eveniet modi obcaecati ipsam quos quis labore dicta.</p>

<button type="button" class="btn btn-success">Get in touch</button>

</div>

</div>

</div>

</section>

<hr>

<div class="section well">

<div class="container">

<div class="row">

<div class="col-lg-4 col-md-4">

<h3 class="text-center">WHO WE ARE</h3>

<h5>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, ducimus, sit, quibusdam quidem recusandae veniam eos quod error nisi repellat excepturi laboriosam aspernatur suscipit possimus consectetur dolores nihil labore quas eius illo accusamus nulla sed blanditiis porro accusantium. Perspiciatis, perferendis!</h5>

</div>

<div class="col-lg-4 col-md-4">

<h3 class="text-center">GET IN TOUCH</h3>

<address class="text-center">

<strong>MyCompany, Inc.</strong><br>

Sunny Autumn Plaza, Grand Coulee,<br>

CA, 91308-4075, US<br>

<abbr title="Phone">P:</abbr> (123) 456-7890

</address>

</div>

<div class="col-lg-4 col-md-4">

<h3 class="text-center">NEWSLETTER</h3>

<form>

<div class="form-group col-lg-9 col-md-8 col-sm-10 col-xs-10">

<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">

</div>

<button type="submit" class="btn btn-default">Subscribe<br>

</button>

</form>

</div>

</div>

</div>

</div>

<footer class="text-center">

<div class="container">

<div class="row">

<div class="col-xs-12">

<p>Copyright © MyCompany. All rights reserved.</p>

</div>

</div>

</div>

</footer>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

<script src="js/jquery-1.11.3.min.js"></script>

<!-- Include all compiled plugins (below), or include individual files as needed -->

<script src="js/bootstrap.js"></script>

</body>

</html>

Nancy

Nancy O'Shea— Product User & Community Expert
D
damienk68104250Author
Participant
April 8, 2017

Thanks Nancy but unfortunately I have to use one of the nine templates that Dreamweaver allows, not allowed use any other ones..unless I create my own which i cannot do.

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
April 8, 2017

I'm actually using a Bootstrap Starter Template in Dreamweaver CC.  See screenshot.

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