Color/background of one page

I want to modify somethings BUT to one and only one page (let's take the login page for example) , and i want to do the following:
1) by default of the template (i think), the background color is white, and i want to change it to black
2) how do i set the background of a page with the help of a photo taken from the web (a link)?
so i want to do this just for one page, not to modify all the pages in one application
thanks in advance

Hi,
It does depend on what items you need to colour black and white. For example, if you want the background colour to be black and the text colour to be white for EVERYTHING on the page, you could add the following into the HTML Header on the page:
<style type="text/css">
* {background-color:black; color:white}
</style>You will still see borders on input items, but these can be coloured as well if need be
Andy

Similar Messages

  • How come when i copy a color from one page to another, the color looks faded?

    I'm using the same color in a multi-page layout. When i copy a color box from one page to another, the color looks faded on some pages. WHY?! Thanks!

    So i checked the blend spaces - both are CMYK (as this doc will be offset printed). Something really strange is happening! See attach below: the 2 blues (same setup/blend space, color breakdown, etc...) look different! And my client is PICKY! ugh. HELP! Thanks again!

  • How can I add more than one same spry menu (eg. collapsible menu)  with in different styles (font size, color, background, etc) on current page?

    How can I add more than one same spry menu (eg. collapsible menu)  with in different styles (font size, color, background, etc) on current page?

    Hi Nancy,
    This screenshot was only for imagination. A part of the code (not all) is below.  In the code there are some background images but they are not seem in live mode.
    <!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></title>
    <link href="css/my_site.css" rel="stylesheet" type="text/css" />
    <link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css"/>
    <link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" />
    <script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
    <script src="SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
    <style>
    #CollapsiblePanel1 .CollapsiblePanelOpen .CollapsiblePanelTab {
        background-color: #003366;
        font-size: 18px;
        line-height: 52px;
        color: #FFF;
    #CollapsiblePanel1 .CollapsiblePanelTabHover .CollapsiblePanelTab {
        background-color: #003366;
        color: #FFF;
        text-shadow: 1px 1px #000;
        font-weight: bold;
        line-height: 52px;
    #CollapsiblePanel1 .CollapsiblePanelClosed .CollapsiblePanelTab  {
        background-color: #C3CFDF;
        border-radius: 5px 5px 0px 0px;
        color: #999
        text-shadow: 1px 1px #000;
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
        font-size: 18px;
        font-weight: bold;
        line-height: 52px;
    #CollapsiblePanel2 .CollapsiblePanelOpen .CollapsiblePanelTab {
        background-image: url(images/international.jpg);
        background-repeat: no-repeat;
        font-size: 18px;
        line-height: 52px;
        color: #FFF;
    #CollapsiblePanel2 .CollapsiblePanelTabHover .CollapsiblePanelTab {
        background-color: #003366;
        color: #FFF;
        text-shadow: 1px 1px #000;
        font-weight: bold;
        background-image: url(images/TR_Col-WEB.png);
        background-repeat: no-repeat;
        line-height: 52px;
    #CollapsiblePanel2 .CollapsiblePanelClosed .CollapsiblePanelTab  {
        background-color: #C3CFDF;
        border-radius: 5px 5px 0px 0px;
        color: #999
        text-shadow: 1px 1px #000;
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
        font-size: 18px;
        font-weight: bold;
        background-image: url(images/TR_Gray2-WEB.png);
        background-repeat: no-repeat;
        line-height: 52px;
    #CollapsiblePanel2 .CollapsiblePanelContent {
        background-color: blue;
    #CollapsiblePanel3 .CollapsiblePanelOpen .CollapsiblePanelTab {
        background-image: url(images/TR_Col-WEB.png);
        background-repeat: no-repeat;
        font-size: 18px;
        line-height: 52px;
        color: #FFF;
    #CollapsiblePanel3 .CollapsiblePanelTabHover .CollapsiblePanelTab {
        background-color: #003366;
        color: #FFF;
        text-shadow: 1px 1px #000;
        font-weight: bold;
        background-image: url(images/TR_Col-WEB.png);
        background-repeat: no-repeat;
        line-height: 52px;
    #CollapsiblePanel3 .CollapsiblePanelClosed .CollapsiblePanelTab  {
        background-color: #C3CFDF;
        border-radius: 5px 5px 0px 0px;
        color: #999
        text-shadow: 1px 1px #000;
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
        font-size: 18px;
        font-weight: bold;
        background-image: url(images/TR_Gray2-WEB.png);
        background-repeat: no-repeat;
        line-height: 52px;
    #CollapsiblePanel4 .CollapsiblePanelOpen .CollapsiblePanelTab {
        background-image: url(images/TR_Col-WEB.png);
        background-repeat: no-repeat;
        font-size: 18px;
        line-height: 52px;
        color: #FFF;
    #CollapsiblePanel4 .CollapsiblePanelTabHover .CollapsiblePanelTab {
        background-color: #003366;
        color: #FFF;
        text-shadow: 1px 1px #000;
        font-weight: bold;
        background-image: url(images/TR_Col-WEB.png);
        background-repeat: no-repeat;
        line-height: 52px;
    #CollapsiblePanel4 .CollapsiblePanelClosed .CollapsiblePanelTab  {
        background-color: #C3CFDF;
        border-radius: 5px 5px 0px 0px;
        color: #999
        text-shadow: 1px 1px #000;
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
        font-size: 18px;
        font-weight: bold;
        background-image: url(images/TR_Gray2-WEB.png);
        background-repeat: no-repeat;
        line-height: 52px;
    #CollapsiblePanel5 .CollapsiblePanelOpen .CollapsiblePanelTab {
        background-image: url(images/TR_Col-WEB.png);
        background-repeat: no-repeat;
        font-size: 18px;
        line-height: 52px;
        color: #FFF;
    #CollapsiblePanel5 .CollapsiblePanelTabHover .CollapsiblePanelTab {
        background-color: #003366;
        color: #FFF;
        text-shadow: 1px 1px #000;
        font-weight: bold;
        background-image: url(images/TR_Col-WEB.png);
        background-repeat: no-repeat;
        line-height: 52px;
    #CollapsiblePanel5 .CollapsiblePanelClosed .CollapsiblePanelTab  {
        background-color: #C3CFDF;
        border-radius: 5px 5px 0px 0px;
        color: #999
        text-shadow: 1px 1px #000;
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
        font-size: 18px;
        font-weight: bold;
        background-image: url(images/TR_Gray2-WEB.png);
        background-repeat: no-repeat;
        line-height: 52px;
    </style>

  • How to change the background color only for one HTML-Portlet?

    Hi all,
    I have created a HTML-Portlet in my root-page. The root page have a style: Main-Style.
    I want to change the background-color only for this one HTML-Portlet:
    <html>
    <header><title>Test</title></header>
    <body bgcolor="#999999">
    Test
    </body>
    </html>
    But this does not work...
    When I use the CSS, then it will change the background-color for the root-page too.
    Thans
    Leonid Pavlov

    could you try this
    <table bgcolor="#999999">
    <tr>
    <td>
    test
    </td>
    </tr>
    </table>
    I don't think you need <html><header><title>Test</title></header>
    <body></body></html> for your HTML-Portlet.

  • Background -color of a template page through skinning

    Hi All,
    I designed a Template page using webcenter portal application .In that I added some Images .
    Now I want to get good look and feel for that template using skinning .By default in the application we have portal-skin.css.
    So I want to apply background -color to that template page.But the color should be shaded with more than one color.So how can I
    get it through skinning.Could anyone help me on this.
    Thanks
    keerthi

    Hi Jiri,
    Thanks for your quick reply .
    I have seen the link which you gave .But they had mentioned like this to apply for background.
    background: -webkit-linear-gradient(left, grey, grey 30%, white 30%, white);
    But in my skin.css file i have not found this property -webkit-linear-gradient.
    And another syntax is of like this:
    div#content {background: url("./gray.png") repeat-y, white; background-size: 30%;}
    Here there are uploading color as a image .But actually i am not following this way .
    Could we have any other approach for this.
    Thanks
    keerthi.

  • How to change the color background in Pages for iPad?

    how to change the color background in Pages for iPad?

    You can find many themes at https://github.com/hdoria/xcode-themes  There's a download zip button on the right side of the page.
    Unzip and and copy the .dvtcolortheme files into /Users/YourUsername/Library/Developer/XCode/UserData/FontAndColorThemes Create the directory if it doesn't exist.
    If you can't find the Library directory you can get to it by using Finder's "Go to Folder..." option under "Go" or press shift + cmd + G then type the path.

  • How do you make the background all one color without disturbing the subjects?

    I shot a wedding this past weekend.  Where the bridal party walked in there was an acrhway with christmas lights as the only lights.  It made the background all splotchy.  I have tried the paintbrush tool, but only preset choices, such a textures and such.  Won't help.  I need to work around people and make the background all one color.  I've tried using a vignette, but it made it too dark, and when you lighten the exposure you see all the splotches.  Does anyone have any advice.  I am in a  jam, I want the colors to be uniform for all the bridal party....and not look like someone threw paint on the wall.  HELP PLEASE!
    I'm using Adobe Photoshop Elements 10.

    You'll need to post an example so we can figure out the best way.
    Ken

  • JTable: After one row is modified, the row should have red color background

    After one row is modified(using setValueAt()),
    I want the modified row to have red color background color.
    How can I do that? I tried.
    JTableInstance.setBackground( Color.RED);But it sets all the rows not the only modified row.

    import java.awt.*;
    import java.util.ArrayList;
    import javax.swing.*;
    import javax.swing.table.*;
    public class TableChangeTest extends JFrame {
        public TableChangeTest() {
            initComponents();
            renderer = new MyTableRenderer();
            table.setDefaultRenderer(String.class, renderer);
            int row = 0;
            table.setValueAt("test1",row,0);
            rowsChanged.add( row );
            row = 2;
            table.setValueAt("test2",row,1);
            rowsChanged.add( row );
        private void initComponents() {
            panel = new JPanel();
            scrollPane = new JScrollPane();
            table = new JTable();
            setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
            setTitle("Table Change");
            panel.setLayout(new BorderLayout());
            table.setModel(new DefaultTableModel(
                    new Object [][] {
                        {"1", "a"},
                        {"2", "b"},
                        {"3", "c"},
                        {"4", "d"}
                    new String [] {
                "Title 1", "Title 2"
                Class[] types = new Class [] {
                    java.lang.String.class, java.lang.String.class
                public Class getColumnClass(int columnIndex) {
                    return types [columnIndex];
            scrollPane.setViewportView(table);
            panel.add(scrollPane, BorderLayout.CENTER);
            getContentPane().add(panel, BorderLayout.CENTER);
            Dimension screenSize = Toolkit.getDefaultToolkit().getScreenSize();
            setBounds((screenSize.width-357)/2, (screenSize.height-241)/2, 357, 241);
        public static void main(String args[]) {
            new TableChangeTest().setVisible(true);
        private JPanel panel;
        private JScrollPane scrollPane;
        private JTable table;
        private TableCellRenderer renderer;
        private ArrayList rowsChanged = new ArrayList();
        class MyTableRenderer extends DefaultTableCellRenderer {
            public Component getTableCellRendererComponent(
                    JTable table,
                    Object value,
                    boolean isSelected,
                    boolean hasFocus,
                    int row,
                    int column) {
                super.getTableCellRendererComponent(table,
                        value, isSelected, hasFocus, row, column);
                setBackground( Color.white );
                if( rowsChanged.contains(row) ) {
                    setBackground( Color.red );
                return this;
    }

  • Multiple reports on one page; loading in background

    Hey everybody,
    i have a lot of reports on one page so that it takes a long time to load this page. Is there any possibility to just load one or two reports and the rest after the first report is shown or that the reports are loaded in the background?
    thx to everybody,
    dt

    dt,
    Interesting question... It is possible. Get started by looking over Karl's example of a report pull via Ajax here:
    http://apex.oracle.com/pls/otn/f?p=11933:48
    You would just set the code to pull the reports onload without jQuery or when ready with jQuery.
    Regards,
    Dan
    http://danielmcghan.us
    http://sourceforge.net/projects/tapigen
    http://sourceforge.net/projects/plrecur
    You can reward this reply by marking it as either Helpful or Correct ;-)

  • How Can I Change One Page to Look Different From The Rest of My Pages?

    Hi, my website uses a CSS page with a dark background and white type. But I have one page I need to have a white background and light grey type on. I am not sure how to do this without it changing all of my site's look which I don't want to do. I only want to change one page to have a different look. How can I do this? I am new to CSS so please try to explain how I can do this in simple terms if you can. Thanks.

    There are 3 ways to use CSS.
    External style sheet: a separate physical file that contains all your site wide rules & to which your html documents are linked.
    http://alt-web.com/DEMOS/DW-Link-Stylesheet.shtml
    Embedded styles: page specific rules in the <head> section of code view.
    <head>
         <style type="text/css">
              page specific styles go here...
         </style>
    </head>
    Inline styles: CSS styles in the markup (mostly used for HTML emails and not on web sites).
         <p style="color:red">This paragraph has a red style.</p>
    In order of importance, inline styles override embedded styles.  Embedded styles override external styles. 
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists 
    http://alt-web.com/
    http://twitter.com/altweb

  • Spry tabbed panels, all content showing on one page, please help?

    Hi there,
    I'm developing a website for my friend and i'm using DW CS5 spry tabbed panels. Everything looks great in DW but when i load the page to the server all of the content shows as one page and i can't navigate through tabs.http://dndperspective.co.cc/
    I'll give you the whole code, I am fairly experienced in html but have never used spry before, so it may be a silly mistake. Any Suggestions?
    Here is the code:
    <!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>DND Perspective</title>
    <script src="file:///C:/Users/work/Desktop/Sites/SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
    <link href="file:///C:/Users/work/Desktop/Sites/SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    <!--
    body {
    background-color: #2B3856;
    .style1 {
    color: #FFFFFF;
    .style4 {
    color: #FFFFFF;
    font-size: 36px;
    font-style: italic;
    font-family: Georgia, "Times New Roman", Times, serif;
    margin-left: 250px;
    .style5 {color: #CCCCCC}
    .style11 {
    font-size: 18pt;
    font-style: italic;
    a:link {
    color: #FFFF00;
    a:visited {
    color: #000000;
    a:hover {
    color: #000033;
    -->
    </style></head>
    <body>
    <div align="center">
      <p align="left" class="style4">DND  </p>
    </div>
    <p align="left">
    <img style="border:6px inset #545565; margin-left: 150px; margin-bottom: 50px;" src="newbanner.jpg" width="701" height="244" />  </p>
    <p align="center">
    <p align="center">
    <div id="TabbedPanels1" class="TabbedPanels">
      <ul class="TabbedPanelsTabGroup" >
        <li class="TabbedPanelsTab" tabindex="0"><img src="images/homebar.jpg" width="125" height="50" /> </li>
        <li class="TabbedPanelsTab" tabindex="0"><img src="images/aboutbar.jpg" width="125" height="50" /></li>
        <li class="style11 TabbedPanelsTab" tabindex="0"><em><img src="images/servicesbar.jpg" width="125" height="50" /></em></li>
        <li class="TabbedPanelsTab style11" tabindex="0"><img src="images/gallerybar.jpg" width="125" height="50" /></li>
        <li class="TabbedPanelsTab style11" tabindex="0"><img src="images/pricingbar.jpg" width="125" height="50" /></li>
        <li class="TabbedPanelsTab style11" tabindex="0"><img src="images/contactbar.jpg" width="125" height="50" /></li>
      </ul>
      <div class="TabbedPanelsContentGroup">
        <div class="TabbedPanelsContent style1">
          <div align="center">
            <p class="style11">Welcome to DND </p>
            <p>We are so glad you took the time to visit our site during your busy planning schedule. We have tried to make this site as user friendly as possible so you can get back to planning your big day. We provide straight foward and dependable services so you've got nothing to worry about.</p>
            <p>We are located in Rhode Island, but service Massachusetts and Connecticut as well. </p>
            <p>Please visit our services page to discover all photography sessions we have available such as:</p>
            <p>Wedding Photography</p>
            <p> Engament Photos</p>
            <p>Senior Portraits </p>
            <p>Anniversary</p>
            <p>&amp; More!!!</p>
            <p> </p>
          </div>
        </div>
        <div class="TabbedPanelsContent">
          <p class="style1"><strong><u>S.W</u></strong> -<em> Owner and Photographer</em>. For more information about her please click <a href="Untitled-11.pdf">here</a>!
        </div>
        <div class="TabbedPanelsContent">Under Construction...</div>
        <div class="TabbedPanelsContent">Under Construction....</div>
        <div class="TabbedPanelsContent style1">
    <p>We hear at DND  understand that packages and pricing may not provide the precise accomadations to fit you unique and carefully planned big day. We are very open and happy to discuss with you an individual catered package or plan that fits your style and most of all your budget. Whether you need us for just an hour or a full day we want to make your day as special as possible. We have services available starting at just $200.00. Below you will find our most popular packages, printing prices &amp;
    packages, custom videos, thank you cards and albums.</p>
               <hr width="50%" align="left" />
          <p><strong>Package 1 - $500.00</strong></p>
          <p>3 Hours; 1 location - Incl. DVD with unlimited high resolution shots and free basic retouching and enhancing; webgallery with or without password protection; Special Effects on 5 photos; and 1 8&quot;x10&quot; fine art high quality print. *</p>
          <p><strong>Package 2 - $575.00</strong></p>
          <p>3 Hours; 2 locations - Incl. DVD with unlimited high resolution shots and free basic retouching and enhancing; webgallery with or without password protection; Special Effects on 5 photos; and 1 8&quot;x10&quot; fine art high quality print. *</p>
          <p><strong>Package 3 - $700.00</strong></p>
          <p>4 Hours; 3 locations - Incl. DVD with unlimited high resolution shots and free basic retouching and enhancing; webgallery with or without password protection; Special Effects on 5 photos; and 1 8&quot;x10&quot; fine art high quality print. *</p>
          <p>*Each additional hour or location available for $100.00. Locations beyond 20 miles will require additional fees. Additional DVD priced at $25.00 each.</p>
               <hr width="50%" align="left" />
          <p><strong>Prints</strong>: (Fine Art High Quality)**</p>
          <p>Individual prices: 8&quot;x10&quot; = $12.99; 10&quot;x13&quot; = $19.99; 2 - 5&quot;x7&quot; = $12.99; 4 - 4&quot;x6&quot; = $11.99</p>
          <p>(Custom sizes available - Custom framing available)</p>
          <p><strong>Package 1:</strong></p>
          <p>3 - 8&quot;x10&quot;; 4 - 5&quot;x7&quot;; 4 - 4&quot;x6&quot; = $50.00</p>
          <p><strong>Package 2:</strong></p>
          <p>5 - 8&quot;x10&quot;; 6 - 5&quot;x7&quot;; 6 - 4&quot;x6&quot; = $90.00</p>
          <p><strong>Package 3:</strong></p>
          <p>8 - 8&quot;x10&quot;; 4 - 5&quot;x7&quot;; 4 - 4&quot;x6&quot; = $125.00</p>
          <p><strong>Package 4:</strong> (Basic Prints)</p>
          <p>Any 100 photos printed 4&quot;x6&quot; = $100.00</p>
               <hr width="50%" align="left" />
          <p><strong>Custom video:</strong>**</p>
          <p>Any 100 photos put to royalty-free music = $50.00</p>
              <hr width="50%" align="left" />
          <p><strong>Custom thank you cards for your guests:</strong>**</p>
          <p>300 cards - 4&quot;x6&quot; = $350.00</p>
          <p>100 cards - 4&quot;x6&quot; = $150.00</p>
         <hr width="50%" align="left" />
          <p><strong>Custom Albums Available: </strong>(prices vary - special order)</p>
          <p>Bride &amp; Groom Albums</p>
          <p>Parent Albums</p>
               <hr width="50%" align="left" />
          <p>**Please be aware that your DVD will be available within a week; Web Gallery within 5-7 business days; Prints, Cards or Video within 2-6 weeks. Thank you!</p>
        </div>
        <div class="TabbedPanelsContent style5">
          <p> Contact DND Perspective:</p>
          <p>The best way to reach us is via email .</p>
          <p>You can alternately reach us anytime at ...!</p>
        </div>
        <div class="TabbedPanelsContent">
          <div align="center">
            <p><span class="style1">About Info</span></p>
            <p> </p>
          </div>
        </div>
      </div>
    </div>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <script type="text/javascript">
    <!--
    var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
    //-->
      </script>
    </body>
    </html>

    You called it: your links to the SpryAssets are linking to your hard drive, not to the files within the folder on the server.
    Correct these links:
    <script src="file:///C:/Users/work/Desktop/Sites/SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
    <link href="file:///C:/Users/work/Desktop/Sites/SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
    And you should be good to go.
    Beth
    ps. If you run into more difficulties with the Spry Widgets, take your questions to the Dreamweaver Spry Forum http://forums.adobe.com/community/labs/spry, where they will get quicker attention.
    B

  • How long does one page in iWeb go?

    Hi,
    I currently have a website up on freewebs.com and now I have my own domain name and am working on making a new site with iWeb and just started using it the other day.
    When you are working on a page within iWeb lets say the Welcome page, are you limited to one page or can you keep on going within that page so it scrolls down. Let's say my first page is really 5 pages do I just keep adding stuff to that first page and it will automatically scroll when someone opens it in their browser (provided they click the down arrow)?
    What I'm really asking is, is their a limit to how long your first page is? I hope this is making sense here.
    S.

    I don't think that a page in iWeb is limited in it's length. There maybe a limit that apple has placed on it, but it is well past 6000 pixels. You can change how long your page is by opening the inspector and clicking on the second tab from the left. This will open your "page" dialouge. Edit the length of your page by increasing the number in the "content height" field. About the automatic updating of the length in your page; that does happen, but only when you move certain things. iWeb will not lengthen your page when you keep adding more stuff into it. It will increase the length, however, if you litterally move the position of something that is a default item in your selected template. For instance, iWeb will update the length of your page if you move the position of that default text field (wich is in French or somethinng) beyond the current page's "page length" limitation. You can see more clearly the boundaries wich you've set for yourself by changing temporarily the "browser background" color (also in the "page" dialouge in the inspector.
    One other tip: (this is not at all related) Personally I don't like the look or configuration of the links in Apple's provided navigation menu. I choose not to display the nav menu and I use my own. It takes more work - you have to worry about style and all of that in addition to coordinating all those links. so let's say you use a tab configuration like i do. I have five tabs, and I have about 40 pages on my website. That means I had to make 200 links just for my custom nav menu. Coordinating them to make sure each one is correctly configured is another thing. I think it's worth it though. - And the copy and paste technology invented 3 billion years ago has been used more and more by me to complete that task! check it out if you like at DesignNashville.com.
    got ?'s email at [email protected] and I'll see what I can do for you.

  • Resolving conflicting JavaScript due to several Spry elements in one page

    I am fairly new to web coding, I would really appreciate some help in the following topic. I am working on a web page and I decided to insert some of the pre-coded Spry elements provided by Dreamweaver, I have in one page a HorizontalMenuBar, a SpryTabbedPanels, and an AccordionPannel. I have not modified any of the script that is automatically inserted into my code, all I did was to change some of the CSS to match my design, I saved the extension files in my own .js folder rather than the SpryAssets folder that is automatically created and I have verified that all the files are being called correctly in the <head> of my document. When I test the page with only the HorizontalMenuBar it works fine, as soon as I add the TabbedPanels and the Accordion only one of them works. I researched this subject and I think the problem is that eachof these /.js files created by Dreamweaver have a couple of variables that are named creating conflict when running the script. But I don't know what variable it is, in previous threads I found that the most common variable causing this problem is the 'onload' event, so I looked for it on each file and to my surprise neither of the .js files have an 'onload' element. I would guess that is being used as a global variable, but I don't write code and I wouldn't know how to fix that.
    I have some specific questions I would appreciate help with.
    1- Does anyone know a simple way to fix this problem?
    2- What other variable could be causing this problem? Specific names would help so I can run a Find search
    3- Will it cause a problem if I combined the 3 .js files into one?
    4- What can I do to avoid this problem later on if I decided to add another pre-coded JavaScript element into my site?
    Thanks in advance for any help provided.

    I'm having a similar problem and can't find the solution. I have a twitter feed widget and a image cycle widget on my site. On their own the widgets work fine, but when both in the same html document only one works. Here's my code, what do you think: I'd really appreciate any assistance. Thanks!
    <!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>Untitled Document</title>
    <script src="scripts/jquery-1.6.min.js" type="text/javascript"></script>
    <script src="scripts/jquery.cycle.all.js" type="text/javascript"></script>
    <script src="scripts/jquery.js" type="text/javascript"></script>
    <script src="scripts/twitter_search.js" type="text/javascript"></script>
    <style type="text/css">
    /* BeginOAWidget_Instance_2559022: #slideshow */
                                  #slideshow { 
                                      padding: 0px;
                                            margin:0; 
                                  #slideshow-caption{
                                            padding:0;
                                            margin:0;
                                  #slideshow img, #slideshow div { 
                                      padding: 0px;
                                      background-color: transparent;
                                            -webkit-border-radius: 0px;
                                            -moz-border-radius: 0px;
                                            border-radius: 0px;
                                      margin: 0;
    /* EndOAWidget_Instance_2559022 */
    </style>
    <script type="text/xml">
    <!--
    <oa:widgets>
      <oa:widget wid="2559022" binding="#slideshow" />
      <oa:widget wid="2125523" binding="#twitter" />
    </oa:widgets>
    -->
    </script>
    <style type="text/css">
    /* BeginOAWidget_Instance_2125523: #twitter */
                        #twitter { height: 200px; width: 250px}
    /* EndOAWidget_Instance_2125523 */
    </style>
    </head>
    <body>
    <script type="text/javascript">
    // BeginOAWidget_Instance_2559022: #slideshow
                               slideshowAddCaption=false;
    $(document).ready(function() {
              $('#slideshow').cycle({
                        after:                              slideshowOnCycleAfter, //the function that is triggered after each transition
                        autostop:                              false,     // true to end slideshow after X transitions (where X == slide count)
                        fx:                                        'fade,',// name of transition effect
                        pause:                              true,     // true to enable pause on hover
                        randomizeEffects:          true,  // valid when multiple effects are used; true to make the effect sequence random
                        speed:                              2000,  // speed of the transition (any valid fx speed value)
                        sync:                              false,     // true if in/out transitions should occur simultaneously
                        timeout:                    6000,  // milliseconds between slide transitions (0 to disable auto advance)
                        fit:                              true,
                        height:                       '400px',
                        width:         '900px'   // container width (if the 'fit' option is true, the slides will be set to this width as well)
    function slideshowOnCycleAfter() {
              if (slideshowAddCaption==true){
                                  $('#slideshow-caption').html(this.title);
    // EndOAWidget_Instance_2559022
    </script>
    <div id="slideshow">
      <!--All elements inside this will become slides-->
      <img src="images/beach1.jpg" width="100" height="100" title="caption for image1" /> <img src="images/beach2.jpg" width="300" height="300" title="caption for image2" /> <img src="images/beach3.jpg" width="200" height="200" title="caption for image3" />
      <div title="sample title"> you can add blocks of text instead!</div>
      <img src="images/beach4.jpg" width="200" height="200" title="caption for image4" /> <img src="images/beach5.jpg" width="200" height="200" title="caption for image5" /> </div>
    <!--It is safe to delete this if captions are disabled-->
    <div id="slideshow-caption"></div>
    <div id="twitter"></div>
    <script type="text/javascript">
    // BeginOAWidget_Instance_2125523: #twitter
    $(document).ready(function() {
              $('#twitter').twitterSearch({
                        term: 'from%3Abholtdesign',
                        title: 'cbb twitter',
                        titleLink: 'http://www.twitter.com/bholtdesign',
                        bird: true,                                                  // true or false (show or hide twitter bird image)
                        birdSrc: '/images/tweet.gif',                     // twitter bird image
                        birdLink: '',                    // url that twitter bird image should like to
                        avatar: false,                                        // true or false (show or hide twitter profile images)
                        anchors: true,                              // true or false (enable embedded links in tweets)
                        animOutSpeed: 500,          // speed of animation for top tweet when removed
                        animInSpeed: 500,          // speed of scroll animation for moving tweets up
                        pause: true,                                        // true or false (pause on hover)
                        time: true,                                                  // true or false (show or hide the time that the tweet was sent)
                        timeout: 4000,                              // delay betweet tweet scroll
                        css: {
                                  a:     { textDecoration: 'none', color: '#999999', fontWeight: 'normal'},
                                  container: { backgroundColor: '#000000' },
                                  frame: { border: '10px solid #333333', borderRadius: '10px', '-moz-border-radius': '10px', '-webkit-border-radius': '10px' },
                                  img:   { width: '30px', height: '30px' },
                                  loading: { color: '#888' },
                                  text:  {fontWeight: 'normal', fontSize: '12px', color:'#ffffff'},
                                  time:  { fontSize: '12px', color: '#CCC' },
                                  title: { backgroundColor: '#990066', padding: '5px 0 5px 0', textAlign: 'center', fontWeight: 'bold', fontSize: '12px'},
                                  titleLink: { textDecoration: 'none', color: '#ffffff' },
                                  user:  { fontSize: '12px'},
                                  fail:  { background: '#6cc5c3 url(/images/failwhale.png) no-repeat 50% 50%'}
    // EndOAWidget_Instance_2125523
    </script>
    </body>
    </html>

  • Color Background in Side Bar Navigation Include

    I have two columns in the sub-pages of my website.  In column one, I have a sidebar navigation as an include and trying to add a color background.  I can't get it to work, where it automatically adjusts to the length of the content area in column two of the webpage.  So, on some pages the column one shading does not stretch as long as it needed. 
    I heard this is complicated to do to have it auto format rather than have a set area.  Does anyone know how to code this correctly?

    This is less a code thing and more of a technique thing.  Make a 2-toned background image the same width as your page #wrapper and repeat it vertically with CSS.  This technique is called Faux Columns.
    You can see a working demo here:
    http://alt-web.com/TEMPLATES/2-column-fixed-width-template.shtml
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists
    http://alt-web.com/
    http://twitter.com/altweb

  • How do I copy and paste from one page or file to another page or file - on the same screen?

    How do I copy and paste from one page or file to another - on the same screen?

      Open both of your images in the Editor. Click on the image you want to copy and press Ctrtl+A (select all) followed by Ctrl+C (copy) then click the tab for your other image and press Ctrl+V (paste)
    Alternatively click on your background image then simply drag the second image from the photo/project bin and drop it into the main editor workspace on top of the background image. Use the move tool to position and the corner handles of the bounding box to scale.

Maybe you are looking for