Color of navigation bar words

Can you change the color of the site words that come up in the navigation bar? (like blog, photos, etc. .. pages on your site) I can't seem to find an option anywhere for that .. and mine are "gray" and sometimes it just doesn't show up on backgrounds I use. Thanks for your help anyone ..... Vicky

Vicky:
See this topic by sboben: How To Change Hyperlinks And Nav Menu Colors. He describes how to chance the colors in the template so you don't have to do any post publish editing. You do it once for a theme and that's it.

Similar Messages

How to change color on Navigation Bar.

Website: www.iphoneappguru.com
How can I change the color of the navigation bar to something else? Check it out on my website!
Thanks!
-RahulR

This tutorial may be of help: #24 - How to Change the Basic, Rollover and Visited Color of an iWeb Navbar.
OT

Custom color for navigation bar

I am struggling to find a way to make my navigation bar color different that supported colors.
SDK supports default style i.e. blue, black and black opaque. I know it is possible cause there so many apps doing so. For example midomi.
I have searched this forum already but haven't found working solution. If anybody knows how to do it would be grateful if he points me to the solution.

tintColor property
[https://developer.apple.com/iphone/library/documentation/UIKit/Reference/UINavi gationBar_Class/Reference/UINavigationBar.html]

Color of Navigational Bar background

The background color of the navigational bar is coral....when I click on it, there are no options in the graphic inspector. Is there a work-around for this? I'd like it to be gray, or even white. Thank you.

For most of the themes the background color of the navbar area is not a user defined item. However, with some java code in an HTML snippet you can change it. Put this code, with your selected color number, in an HTML snippet on the page:

<script language="JavaScript" type="text/javascript">

</script>
An example of this can be see on this demo page: Change Navbar Text and Background Color.
OT

Navigation bar word kerning

Is there a way to reduce the amount of space between words in the navigation bar? When I add another page title it flows to another line which I don't want. Drives me nuts, I've been trying to figure this one out but am lost. Any help would be appreciated.

You have two options. You can either turn off the navigation bar by going to inspector and clicking on page and turning off navigation bar display. If you do this, you can then create your own navigation bar and space it out how you want it.
The other option is to alter the position and size of the original navigation bar. Click on it and go into inspector to re-size. You can't alter the space between, as this is pre-set, but you can alter the size.

Changing hyperlink colors for the navigation bar

hello all i am trying to figure out how to change the color of the links that are the top of my page in the navigation bar. i know how to do it with the ones in my text- but i cannot figure out how to do so for the ones at the top of each page in the navigation bar.
any help would be much appreciated!

Welcome to the Apple Discussions. Here's a link to a post by Cyclosaurus, the resident java script expert, about changing the font, etc. in the navbar with java script and a HTML snippet.. Don't know if includes color also.
http://discussions.apple.com/thread.jspa?messageID=8600361#8600361
OT

How do I change navigation bar text color?

I want to change the color of the type in the navigation bar, as well as the line/bar below the type. How can I do this?

there are many way to change navbar look-and-feel:
1) by changing template XML, this requires XML knowledge and is a complex process.
2) by changing navbar CSS in page source, this a bit easier but requires post editing.
http://discussions.apple.com/thread.jspa?messageID=5186688&#5186688
3) by javascript, this requires CSS and javascript knowledge:
http://discussions.apple.com/thread.jspa?messageID=8638743&#8638743
4) by manually build your own navbar as roddy and ot mentioned, this requires no knowledge of any kind but it is not very efficient; see my post here:
http://discussions.apple.com/thread.jspa?messageID=8136472&#8136472
5) by AJAX, this requires CSS, javascript and AJAX knowledge; I outlined it in my blog here:
http://www.cyclosaurus.com/Home/CyclosaurusBlog/Entries/2009/9/10iWeb_NavBarWidget.html

Navigation bar different colors for each tab

I want to have the top horizontal navigation bar with different background colours for each tab on the bar.
I don't want to change the background colour for the entire navigation bar. How do I change them individually?
thanks!

Hi lorrscorpio,
As far as I know it is difficult to change background color of top navigation link OOTB, better to create a html menu for that and add it to your page .In that you can easily change background color of your top navigation link.
Whenever you see a reply and if you think is helpful, click "Vote As Helpful"! And whenever you see a reply being an answer to the question of the thread, click "Mark As Answer

Can I modify a background color of a template - specifically, the navigation bar background?

can I modify a background color of a template - specifically, the navigation bar background?

iWeb has a great toool :
And it's visible here :
And google is your friend :
http://www.google.com/search?q=what+is+a+HTML+Snippet

Navigation Bar font color

Can anyone point me in the right direction on how I can change the font color for the navigation bar items (e.g. print, logout)? The default for my template is black and doesn't show well with my background color.
I'm using APEX 2.1.0
Thanks in advance.

<p>Install Firefox
<p>Install the Firebug extension
<p>Run your application
<p>Right click and select Inspect Element from the context menu
<p>Click on the Print or Logout link
<p>You will see something like this
<p>That tells you that the CSS selector responsible for that color is ".t7NavBar a".
<p>Go to Page Attributes/HTML Header and put the following CSS snippet to override the color
.t7NavBar a {color: red;}<p>Hope this helps

My navigation bar colors went all wonky!

The colors of my navigation bar changed when I updated Firefox. The top one in the picture is what they turned into, the bottom is what they're supposed to be. It's only the correct color when I have multiple tabs open, otherwise everything is black.
http://i47.tinypic.com/20gf8l2.png

I Think I understand your problem.
This is not a new development and the solution is somewhere on this support but I can not find it anymore. I just reinstalled win 7 and therefor a new FF that reinstated this supposed "improvement" grrr
I found the below and changed it from "true" to" false" and voila it's back to all white.
go to "about:config" and search for the below.
browser.urlbar.formatting.enabled <--change from true to false

Justify Hyperlink Text in Navigation Bar

Hello,
I am trying to justify the text of my navigation bar (which are all hyperlinks). I would like to use css. I have tried a variety of things but none seem to work. I have attached the text. If anyone could write the code I need it would be greatly appreciated! Thanks! I have attached the file as well.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Shupaca Handmade Alpaca Clothing</title>
<link href="Shupaca.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
<script type="text/javascript">

</script>
</head>
<body onload="MM_preloadImages('Images/Home Page Links/scarf.jpg')">
<div class="MarginControl">
<div id="NavigationBar">
    <a href="index.html" target="_self">Home </a><a href="scarves.html" target="_self">products </a><a href="construction.html" target="_self">who we are </a> <a href="construction.html" target="_self">why alpaca? </a><a href="construction.html" target="_self">FAQ's </a><a href="mailto:[email protected]">contact</a><a href="construction.html" target="_self"></a></p>
</div>
</div>
</body>
</html>

As you will see though, by making the menu text so large, the interval between menu items looks all off. Eithr dramatically red
uce the text size, or you can set the width of each individual li by giving some an id and specifying width:
<div id="NavigationBar">
<ul>
    <li><a href="index.html">Home</a></li>
    <li id="prod"><a href="scarves.html">products</a></li>
    <li id="who"><a href="construction.html">who we are</a></li>
    <li id="why"><a href="construction.html">why alpaca</a></li>
    <li><a href="construction.html">FAQ's</a></li>
    <li><a href="construction.html">contact</a></li>
</ul>
</div>
wtih this css - the changes in orange
#NavigationBar a {
    color: #666;
    font-family: Arial verdana sans-serif;
    font-size: 20px;
    text-decoration: none;
    text-transform: uppercase;
    display: block;
#NavigationBar a:hover, #NavigationBar a:active, #NavigationBar a:focus {
    color: #84cbe1;
#NavigationBar ul {
    list-style: none;
    width: 850px;
#NavigationBar li {
    text-align: center;
    padding: 0px;
    float: left;
    width: 118px;
#NavigationBar li#who, #NavigationBar li#why {
    width: 180px;
#NavigationBar li#prod {
    width: 136px;
Hope that helps.
E. Michael Brandt
www.divahtml.com
www.divahtml.com/products/scripts_dreamweaver_extensions.php
Standards-compliant scripts and Dreamweaver Extensions
www.valleywebdesigns.com/vwd_Vdw.asp
JustSo PictureWindow
JustSo PhotoAlbum, et alia

Active Navigation bar

Hello,
I working on my navigation bars, and have them "link" and "visited" as gray and "hover" as white. I would like the "active" to be a different color like red-orange. So, when someone is to go on the about page, they would be aware that they are on the "about" page. When I add "active" after my "hover" it doesn't work. I'm not sure what I'm doing wrong. The website is: www.archconarchitecture.com.
Here is my code:
#navBar {
    font-family: "BankGothic Md BT";
    font-size: 14px;
    font-style: normal;
    color: #999;
    background-color: #000;
    height: 30px;
    width: 665px;
    text-align: center;
    position: absolute;
    left: 3%;
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: middle;
    padding-top: 0%;
    padding-right: 10%;
    padding-bottom: 0%;
    padding-left: 10%;
    margin-top: 625px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    top: 0px;
    right: 3%;
    font-weight: normal;
a:link {
    color: #999;
    text-decoration: none;
a:visited {
    color: #999;
    text-decoration: none;
a:hover {
    color: #fff;
    text-decoration: none;
a:active {
    color: #F60;
    text-decoration: none;

There is a very long discussion going on about this already, spanning several threads. The short answer is "it can't be done with :active but it can be done"
There are several ways, some use .js others are all CSS, none of them can use :active though. The easiest is here:
http://alt-web.com/Articles/Persistent-Page-Indicator.shtml

How can I use my Html/CSS Navigation bar to control an Edge Stage?

I have an HTML/CSS navigation bar set up in my EDGE created page. The Navbar is not created in edge. I would like to use these buttons to control the stage.
Inside the stage the main timeline has labels and stop actions every 1.5 secs to create a horizontally sliding site.
The labels are as follows: home, work, blog, profile, and contact. I can easily use a symbol created inside edge for example:
sym.play("home");
and animate a 6000px width symbol across my 1000px stage in 1000px increments.
I do not want to use a symbol inside of edge to do this because I cannot create the effect that the html/css navbar has on mouseover inside of edge.
So I am interested in knowing if I can use this bar to control my main timeline so I don't have to sacrifice design for functionality.
currently the link list is setup with the standard hyperlink. What code would I use to play the stage on click of the html navbar?
Many thanks to anyone who can help with this!
Here is the code for the navbar:
<div id="menu"><ul class="block-menu">
                    <li><a href="/home" class="three-d">
                              Dynamic
                              <span class="three-d-box"><span class="front">Dynamic</span><span class="back">Artisans</span></span>
                    </a></li>
                    <li><a href="/demos" class="three-d">
                              Work
                              <span class="three-d-box"><span class="front">Work</span><span class="back">Work</span></span>
                    </a></li>
                    <li><a href="/deals" class="three-d">
                              Blog
                              <span class="three-d-box"><span class="front">Blog</span><span class="back">Blog</span></span>
                    </a></li>
                    <li><a href="/about" class="three-d">
                              Profile
                              <span class="three-d-box"><span class="front">Profile</span><span class="back">Profile</span></span>
                    </a></li>
        <li><a href="/about" class="three-d">
                              Contact
                              <span class="three-d-box"><span class="front">Contact</span><span class="back">Contact</span></span>
                    </a></li>
          </ul>
<span class="block-menu"></span></div>
Full HTML:
<!DOCTYPE html>
<html>
<head>
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
          <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
          <title>Untitled</title>

    <script type="text/javascript" charset="utf-8" src="workapp_edgePreload.js"></script>
    <style>
        .edgeLoad-EDGE-57204389 { visibility:hidden; }
              .block-menu {
                              display: block;
                              background: #000;
                    .block-menu li {
                              display: inline-block;
                    .block-menu li a {
                              color: #fff;
                              display: block;
                              text-decoration: none;
                              font-family: 'Passion One',Arial,sans-serif;
                              -webkit-font-smoothing: antialiased;
                              -moz-font-smoothing: antialiased;
                              font-smoothing: antialiased;
                              text-transform: uppercase;
                              overflow: visible;
                              line-height: 20px;
                              font-size: 24px;
                              padding: 15px 10px;
                    /* animation domination */
                    .three-d {
                              -webkit-perspective: 200px;
                              -moz-perspective: 200px;
                              perspective: 200px;
                              -webkit-transition: all .07s linear;
                              -moz-transition: all .07s linear;
                              transition: all .07s linear;
                              position: relative;
                              .three-d:not(.active):hover {
                                        cursor: pointer;
                              .three-d:not(.active):hover .three-d-box,
                              .three-d:not(.active):focus .three-d-box {
                                        -moz-transform: translateZ(-25px) rotateX(90deg);
                                        -webkit-transform: translateZ(-25px) rotateX(90deg);
                                        -o-transform: translateZ(-25px) rotateX(90deg);
                                        transform: translateZ(-25px) rotateX(90deg);
                    .three-d-box {
                              -webkit-transition: all .3s ease-out;
                              -moz-transition: all .3s ease-out;
                              -ms-transition: all .3s ease-out;
                              -o-transition: all .3s ease-out;
                              transition: all .3s ease-out;
                              -webkit-transform: translatez(-25px);
                              -moz-transform: translatez(-25px);
                              -o-transform: translatez(-25px);
                              transform: translatez(-25px);
                              -webkit-transform-style: preserve-3d;
                              -moz-transform-style: preserve-3d;
                              -ms-transform-style: preserve-3d;
                              -o-transform-style: preserve-3d;
                              transform-style: preserve-3d;
                              pointer-events: none;
                              position: absolute;
                              top: 0;
                              left: 0;
                              display: block;
                              width: 100%;
                              height: 100%;
                    .front {
                              -webkit-transform: rotatex(0deg) translatez(25px);
                              -moz-transform: rotatex(0deg) translatez(25px);
                              -o-transform: rotatex(0deg) translatez(25px);
                              transform: rotatex(0deg) translatez(25px);
                    .back {
                              -webkit-transform: rotatex(-90deg) translatez(25px);
                              -moz-transform: rotatex(-90deg) translatez(25px);
                              -o-transform: rotatex(-90deg) translatez(25px);
                              transform: rotatex(-90deg) translatez(25px);
                              color: #FFE7C4;
                    .front, .back {
                              display: block;
                              width: 100%;
                              height: 100%;
                              position: absolute;
                              top: 0;
                              left: 0;
                              background: black;
                              padding: 15px 10px;
                              color: white;
                              pointer-events: none;
                              -moz-box-sizing: border-box;
                              box-sizing: border-box;
    </style>

</head>
<body>
<div id="menu"><ul class="block-menu">
                    <li><a href="/home" class="three-d">
                              Dynamic
                              <span class="three-d-box"><span class="front">Dynamic</span><span class="back">Artisans</span></span>
                    </a></li>
                    <li><a href="/demos" class="three-d">
                              Work
                              <span class="three-d-box"><span class="front">Work</span><span class="back">Work</span></span>
                    </a></li>
                    <li><a href="/deals" class="three-d">
                              Blog
                              <span class="three-d-box"><span class="front">Blog</span><span class="back">Blog</span></span>
                    </a></li>
                    <li><a href="/about" class="three-d">
                              Profile
                              <span class="three-d-box"><span class="front">Profile</span><span class="back">Profile</span></span>
                    </a></li>
        <li><a href="/about" class="three-d">
                              Contact
                              <span class="three-d-box"><span class="front">Contact</span><span class="back">Contact</span></span>
                    </a></li>
          </ul>
<span class="block-menu"></span></div>
<div id="Stage" class="EDGE-57204389">
</div>
</body>
</html>

I've come across this from the Edge API:
Edge.getComposition(compId)
Anyone having trouble with this same issue should try this:
var targetComp = AdobeEdge.getComposition('TARGETCOMPID');
   targetComp.getStage().play();
in their trigger or event handler.
How I got it to work:
<li><a href="javascript:var targetComp = AdobeEdge.getComposition('EDGE-57204389');
   targetComp.getStage().play();" class="three-d">
                              Dynamic
                              <span class="three-d-box"><span class="front">Dynamic</span><span class="back">Artisans</span></span>
                    </a></li>

How do I change the background image for a single tab on the navigation bar

I'm creating a movie website for TDKR and for the navigation bar, I intend to have a different character for each tab. However, I'm having trouble putting a single image each separate tab. Instead one image appears on each of the tabs. Here's an example of the source and CSS.
<td width="200"><ul id="navigation"><br />
      <li><a href="../pages/index.html">Home</a></li><br />
      <li><a href="../pages/cast.html">Cast</a></li><br />
      <li><a href="../pages/pictures.html">Pictures</a></li><br />
      <li><a href="../pages/soundtrack.html">Music</a></li><br />
      <li><a href="../pages/interview.html">Interviews</a></li><br />
      <li><a href="../pages/links.html">Links</a></li><br />
    </ul>
    </td>
#navigation {
          list-style-type: none;
          padding: 0px;
          margin: 0px;
#navigation li {
          margin: 0px;
          padding: 0px;
          list-style-type: none
#navigation li a:link, #navigation li a:visited {
          display: block;
          width: 200px;
          height: 100px;
          text-decoration: none;
          text-align: center;
          line-height: 100px;
          font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
          font-weight: bold;
          -webkit-transition: 1000ms ease;
          -moz-transition: 1000ms ease;
          -ms-transition: 1000ms ease;
          -o-transition: 1000ms ease;
          transition: 1000ms ease;
          color: #648AAE;
          background-repeat: no-repeat;
          background-image: url(../Images/gifs/Batman-still-2.gif);
          background-position: center bottom;
          text-transform: uppercase;
          letter-spacing: 0.79em;
          border-radius: 5px;
#navigation li a:focus, #navigation li a:hover, #navigation li a:active {
          color: #000000;
          background-image: url(../Images/gifs/Batman-animation-2.gif);
          background-repeat: no-repeat;
          background-position: center bottom;
          background-color: #454545;
          border-radius: 25px;
So, how do I put a single image on each tab (home, cast, pictures, etc). Thank you for your help in advance.

Assign a class to the item and use CSS to apply an image as in
<li><a href="../pages/index.html" class="home;">Home</a></li><br />
<li><a href="../pages/cast.html">Cast</a></li><br />
<li><a href="../pages/pictures.html">Pictures</a></li><br />
<li><a href="../pages/soundtrack.html">Music</a></li><br />
<li><a href="../pages/interview.html">Interviews</a></li><br />
<li><a href="../pages/links.html">Links</a></li><br />
and the CSS
#navigation li a:link.home, #navigation li a:visited.home {
     background-image: url(../Images/gifs/Batman-still-2.gif);

Color of navigation bar words

Similar Messages

Maybe you are looking for