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

Similar Messages

  • 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 &quot;Vote As Helpful&quot;! And whenever you see a reply being an answer to the question of the thread, click &quot;Mark As Answer

  • Changing link navigation bar font and color

    Is it possible to change the font and color on the links for each page on iWeb?

    Welcome to the Apple Discussions. Yes, with the code and a HTML snippet that's described in this tutorial: #24 - How to Change the Basic, Rollover and Visited Color of an iWeb Navbar.
    However, if you want to create a site that is more search engine friendly I suggest you create a text based navbar as described in this demo page: Text Based Navbar. If you don't have a lot of pages in your site it's not too difficult.
    OT

  • How do I change font colors in the navigation bar

    I'm designing a new website for my son's high school lacrosse team. It looks great, and I hope to upload it in the next week. The one thing that I haven't been able to do is change the font colors and font type in the page navigation links a the top of the pages. Can anyone help me with this?

    I outlined methods to change iweb navbar in this thread:
    http://discussions.apple.com/thread.jspa?messageID=11004066&#11004066
    and cited inefficient of building text base/box navbar:
    http://discussions.apple.com/thread.jspa?messageID=8136472&#8136472

  • How can i edit / customize the font in the navigation bar in iweb?r

    how can I edit / customize font size and color in the navigation bar on an iweb created page?

    This tutorial may help: #24 - How to Change the Basic, Rollover and Visited Color of an iWeb Navbar.  It only applies to the various colors.
    Wyodor has posted code to be put in an HTML snippet that will increase the font size.
    <script language="JavaScript" type="text/javascript">
    <!--
    navDiv = parent.document.getElementById("widget0-navbar-list");
    navDiv.setAttribute("style", "font-size: 1.1em;");
    // -->
    </script>
    Increase the size by increments of .1 until you get the size you want.  You'll need to publish the site before you'll see the change.
    If you only have a couple of pages in your site you can create your own text based navbar.  That will give you complete  control over font, size, color, spacing, etc. However, be sure to use only  Web Safe Fonts or the navbar will not look like you want it on those computers that do not have the font you used installed. This demo page is an example: Text Based Navbar.  With more than a couplke of pages updating such a navbar can become a real pain.  However, it is much more search engine friendly.
    OT

  • 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 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]

  • 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

  • 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:
    <!-- code by Wyodor -->
    <script language="JavaScript" type="text/javascript">
    <!--
    function navBackgroundColor () {
    elem = parent.document.getElementById('nav_layer');
    elem.style.backgroundColor = "#5D68C3";
    clearInterval(chkNavLink);
    chkNavLink = setInterval('navBackgroundColor()', 500);
    // -->
    </script>
    An example of this can be see on this demo page: Change Navbar Text and Background Color.
    OT

  • 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.

  • 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

  • How do you change the color of the navigation bar text  in iWeb?

    I have created buttons to set in the nav bar but the type color needs to be white to show up against the button background.
    How can I change the nav bar text colors?
    Thanks
    G

    If it's the iWeb generated navbar then see if this tutorial helps: #24 - How to Change the Basic, Rollover and Visited Color of an iWeb Navbar
    OT

  • 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>
    <!--Adobe Edge Runtime-->
        <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>
    <!--Adobe Edge Runtime End-->
    </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>

Maybe you are looking for