How to Incorporate "fade" Into the Navigation Bar with iWeb?

I started wondering about and exploring this topic in another thread. I would like to make the navigation bar shine brightly and then slowly fade whenever the cursor overlaps the navigation buttons. Does anyone have any idea how to do this? For an example of what I'm looking for, please visit This company is a website builder that has, as one of its features, the fading navigation bar option that I'm looking to incorporate into iWeb. Just look at some of their featured websites for an example. I also found the following doing a google search. Any thoughts and ideas of how to get this feature on my iWeb designed website would be helpful. Thank you.

Leave all files in the folder as you downloaded them. Drop the index.html file on the browser icon. You will then see what the menu will look like when published on a page. Edit the index.html file to your needs. Your edits will be shown in the browser window (save file upon edit - don't worry, you can still undo in most editors - and refresh the browser window).
If required, also edit the main.css and image files.
When done, copy the contents of the index.html file into a HTML snippet in iWeb. Position the snippet to exactly where you want it to be (height and width accordingly) and publish. Upload the other files manually and make sure that their path on the iDisk/server matches the path mentioned in the index.html and main.css files.
As you will have gathered, you need to understand some HTML and CSS. You may acquire understanding and knowledge by trial and error.

Similar Messages

  • 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;");
    // -->
    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.

  • Guestbook and linking to the navigation bar i Iweb

    I have made a site for my dog and want to have a guestbook - so I got a free guestbook and it seem to work fine...
    For now I have added a link to the frontpage of the site - but it would have been fun to have it on the navigation bare on ALL my sites. I have seen that somebody has done that but dont know a clue how to do that!
    Is there somebody out there that knows how to do this????

    Create a blank internal page titled "Guestbook" (actually you can name the page whatever you want.) Then in that Guestbook page add an HTML Snippet with the following code:
    <script type="text/javascript">
    parent.window.location = ""; // change this to your own URL
    ...Once published, clicking on "Guestbook" in the navbar will immediately redirect to your external Guestbook page. (Thanks to Cyclosaurus for the code).

  • [Forum FAQ] Customize the Navigation Bar in Outlook 2013

    In Outlook 2013, the Navigation Bar is a gray bar which lists commands at the bottom of the Outlook window that enable you to quickly navigate to Mail, Calendar, People, and Tasks.
    You can change the Navigation Bar settings for a single user by clicking
    … and then Navigation Options. For more information, please refer:
    However, if you want to change the Navigation Bar settings for all users in your organization, you’ll need to modify the registry.
    Important This section, method, or task contains steps that tell you how to modify the registry. However, serious problems might occur if you modify the registry incorrectly. Therefore, make sure that
    you follow these steps carefully. For added protection, back up the registry before you modify it. Then, you can restore the registry if a problem occurs. For more information about how to back up and restore the registry
    To modify the Compact view
    To maximize the vertical height of the Outlook window you can use Compact Navigation. We can change the setting by creating the
    ABCompact registry key. To do this, please follow the steps:
    1. Press Windows key + R to open the Run command, type regedit
    and press Enter to open the Registry Editor.
    2. Locate the following registry path:
    3. Right-click on the Options folder and select NEW > KEY, name it
    4. Select the WunderBar key, right-click on it and select
    NEW > DWORD (32-bit) Value and name it ABCompact.
    Value name: ABCompact
    Value type: DWORD (32-bit)
    Value: 1 to tick the Compact Navigation;
    0 to untick it.
    5. Restart Outlook to make the change.
    To modify the Maximum number of visible items
    To change how many views appear on the Navigation Bar, you need to change the number for Maximum number of visible items by modifying the
    NumBigModulesAB registry key.
    Value path: HKEY_CURRENT_USER\Software\Microsoft\Office\15.0\Outlook\Preferences
    Value name: NumBigModulesAB
    Value type: REG_DWORD
    Value: 1-8
    The key doesn’t exist by default. When the value is set to 1, only
    Mail will appear on the Navigation Bar. If the value is set to
    8, all views will appear.
    To modify which view is turned on or off
    You can also turn one or more views off from the Navigation Bar. This is controlled by a registry string named
    Value path: HKEY_CURRENT_USER\Software\Microsoft\Office\15.0\Outlook\Preferences
    Value name: ModuleVisible15
    Value type: REG_SZ
    Value: 1,1,1,1,1,1,1,0,0
    By default, the string value is set to 1,1,1,1,1,1,1,0,0.
    1 means the view is turned on while 0 means the view is turned off. Moreover, the value correspond one-to-one with the views, for example, the first “1” correspond to
    Mail, and the second “1” correspond to
    Calendar… By default, the eighth and ninth view is turned off. The eighth is
    Journal and I have no idea what the ninth number stands for. You can open Journal by pressing Ctrl+8, but if you want it to appear on Navigation Bar, you can change the eighth “0” to “1”.
    To modify the view order
    If you want to switch the positions of Mail and Calendar, you’ll need to modify the
    ModuleOrderAB string.
    Value path: HKEY_CURRENT_USER\Software\Microsoft\Office\15.0\Outlook\Preferences
    Value name: ModuleOrderAB
    Value type: REG_SZ
    Value: 1,2,3,4,5,6,7,8,9
    The default order for the Navigation Bar is:
    Mail  Calendar  People  Tasks  Notes  Folders  Shortcuts 
    In the registry string there are 9 numbers (1~9), let’s just ignore 9. So, there are 8 numbers left and each number has some relationships to each Navigation item.
    Here is the logic:
    There are 8 Navigation Options. Let’s say ‘Mail’ is Nav1, Calendar is Nav2, People is Nav3, …, Shortcut is the Nav7 and Journal is Nav8.
    Meanwhile, there are 8 positions to put those 8 Navigation items, we name them
    position1 to position8, from left to right.
    ModuleOrderAB=    5                
    1              3               
    2              6           
    The number “5” is in the first position of the ModuleOrderAB string and it takes
    position1. The default navigation option for position1 is
    So, “5” means put Nav1 (Mail) on position5.
    “1” is on position2, default navigation item on
    position2 is Calendar. It means put Calendar on
    So, “3” means put People on position3; “2” means put
    Task on position2… and so on.
    If you have more questions, welcome to post in the forum. Thank you.
    Please click to vote if the post helps you. This can be beneficial to other community members reading the thread.

    There isn't a built in way to do that since all the navigation toolbars are on one toolbar.
    You can restore this functionality by installing the Classic Theme Restorer add-on

  • I just upgraded from vista to windows 7 and now when i try to type in a url address in the navigation bar nothing but gibberish appears

    whatever letter i type into the navigation bar, some other letter or number appears. i do not have this problem on chrome or internet explorer.

    go to Help Menu -> select "Restart with Add-ons Disabled"
    Firefox will close then it will open up with just basic Firefox. You can enable the Add-ons later. Check and tell if its working. If this doesn't work then try this
    Update all Firefox Plug-ins ->
    If Updating Plug-ins doesn't work then follow these links.
    Cannot connect after upgrading Firefox connect after upgrading Firefox#w_the-cause
    Error loading web sites
    Firefox crashes when loading certain pages
    Is my Firefox problem a result of Malware
    Check and tell which solution worked.

  • I am unable to enter a URL into the address bar.

    Problem description: I can type an address into the URL bar, but when I hit enter, nothing happens. Nothing happens when I hit the "go" arrow. Nothing happens when I paste an address into the URL bar with "Paste & Go".
    The awesome bar functionality seems to work, but when I select an address, it puts the address in the URL bar, but nothing happens.
    It's just refusing to actually load any URL I type into the URL bar.
    The bookmarks menu works just fine, as does everything else.
    This occurred when I upgraded to Firefox 20.0.
    I found the problem, but I'm not sure if this is a bug or not.
    I tried disabling all the add-ons, but that didn't help.
    The problem did NOT occur when using a fresh newly-created profile. You're probably thinking something was corrupt in my old profile. But that's not it.
    The problem occurs when the profile is located on a network share. If I copy the profile to the local hard drive, the problem goes away. If I copy the fresh new profile to the network share, the problem starts occurring there.
    I keep the profile on the network share because it gets backed up automatically every night. I have been doing this for at least the last five or six years, and it's been working fine since I don't know what Firefox version. 4 or 5? No idea, not important.
    Here is my profiles.ini:
    Name=Joe D
    As you can see, profile 0 is on the network share, and profile 1 is on the local hard drive. I copied the profile from the network to the local drive to create profile 1.
    But wait! It gets even better!
    They are not just identical copies. They are the EXACT SAME FILES. The folder for profile 1 is a symbolic link to the folder for profile 0. (Yes, you can do symlinks in Windows now.)
    So the profiles are literally exactly the same, but one works and the other doesn't.
    This solves my issue by allowing me to keep my profile on the network, but the other way should still work.
    Any ideas?

    There appears to be a problem with Firefox 20 with UNC paths when using roaming profiles on a server.
    *[[/questions/955140]] why is the 20.0 address bar unresponsive?
    This is currently investigated and tracked via this bug report.
    *[ bug 857672] - Address Bar not working (roaming profiles;UNC path support OS.File)
    <i>(please do not comment in bug reports: [])</i>

  • The new version of firefox does not meet my customization needs, because I can't hide the navigation bar.

    In the old version of firefox, my window setup looks like this:
    I can't replicate this in the newer version, even in the classic view, I can't hide the navigation bar.

    With the classic view extension provided by Mozilla, you have the ability to move that, as well as the URL bar, back down to the bottom where I usually keep them. This leaves me with an empty navigation bar but no way to hide it.

  • How can I drag to the bookmarks bar?

    How can I drag to the bookmarks bar with iPad?

    You can't - Safari on the iPad can't be personalised in that way, all you can do is add bookmarks via the icon of the square with the arrow coming out of it

  • How can I pin the ONLY link I need (Bookmooch java) to the navigation bar instead of opening up a whole new toolbar?

    I sent a better written request with an incorrect email address before ...
    I would like to add a single URL link as a button to the navigation bar, instead of having to open a whole new toolbar for it alone.
    I have moved all my add-ons to this single visible toolbar with the help of an add-on, but there isn't one for the Bookmooch bar. The official one can only be dragged into the bookmarks bar which I never use.
    If I created a whole new bar and moved all the preset tools (home, back, etc) onto it, could I combine them with that URL button?
    Or is the only way to fiddle with the registry and replace bits of the Mozilla code?
    The link to the only person offering custom toolbar icons (I managed to find) won't load.
    Help? Thank you! <br />
    When you are in the Toolbar Customize mode, move the '''Bookmarks Toolbar Items''' to the Navigation Toolbar. Then hide the now empty Bookmarks Toolbar.

  • How can I disable zoom and navigator bar in the interactivity?

    I'm working at a project about I add a interactivity into DPS. First, I create a basic struture code in HTML5 and after I add it to a layer into DPS. Well, It work perfectly, but, two problems appear:
    The navigator bar appear when I touch interactivity layer.
    I can zoom it even I deny it with user-scalable set as "no".
    How can I fix it? I really appreciate some help
    The code I use is:
    <!DOCTYPE html>
            <meta charset="utf-8">
            <meta content='width=device-width, minimum-scale=1.0, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' name='viewport' />
                    width: 100%;
                    height: 100%;
                    background: url('imgs/bg.jpg') repeat;
            <div id="container"></div>

    Oh, thanks again.
    Yep... It really work, but, I've a game and I set a container with touch gestures (start, move and end) to deny zoom and pop up navigator bar (container { width: 768px; height: 924px; } ), and now the user can't leave the page by touch/dragging on the div, and then for my buttons (to play containerButtons{width: 768px; height: 100px;} ), I need to set touchmove event to it doesn't pop up navigator bar (and again the user can't leave the page). Again I don't think it the best idea :/...

  • 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 />
    #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);

  • How can I hide page thumbnails navigation bar at the start up of Adobe Reader and open a pdf file?

    How can I hide page thumbnails navigation bar at the start up of Adobe Reader and open a pdf file? I could not find this option under Preferences tab? Thanks

    Hey there,
    Thanks for your reply. That works for the files I do what you said. However, for files I have not done that, It still shows the navigation bar. Any idea, how to do it default for any files?
    Thanks agian

  • How to get the download option in Firefox 3.6.13. Earlier it was showing in the Navigation Bar

    How to get the download option in Firefox 3.6.13. Earlier it was showing in the Navigation Bar just beside where we see the URL.

    You can find the connection settings in Tools > Options > Advanced : Network : Connection
    See "Firefox connection settings":
    *[[Firefox cannot load websites but other programs can]]

  • How do you create a new page which does not appear on the navigation bar?

    I am creating a website and have designed the top pages. Some of these pages have sub pages but I can't work out how to create them. Please could someone advise me?
    Many thanks.

    Welcome to the discussions. You can find answers to such questions by searching here:
    Entering: iWeb navigation the first search bar comes up with these documents in the list:
    _Preventing a webpage from appearing in the navigation menu_
    Hiding the navigation menu
    Note that iWeb can't produce sub-pages +per se+ — i.e. ones that drop down from an item (page) in the navigation bar.

  • How do I add an image above the navigation bar?

    I'm trying to add an image above the navigation bar and can't seem to do it without covering the links. Does anyone know how to do that?

    select the page you want to add the image to
    open up the Inspector and go to the Page Tab (second from left)
    Choose Layout and increase the size of Header Height

Maybe you are looking for