How to Change the Spry Accordion Tab Color on Photoshop to Orange

The color of the spry accordion tab image that you are using for your Web page's navigation can be changed to orange with the "Paint Bucket Tool" in Adobe Photoshop. When you set an image as the background of a Web page element, such as a spry accordion tab, you are referencing an image file that is stored on your Web server. This image can be edited in the same ways as any other image that you can open in Photoshop, which allows you to make changes to the image at any time.

Instructions

    • 1

      Launch your Web editing program.

    • 2

      Click "File" at the top of the window, click "Open" and then double-click the file containing the spry tab panels that you want to modify. If your Web editing program has a "Design" and a "Code" mode, select the "Code" option.

    • 3

      Browse to the spry accordion tab element on your page, and then identify the CSS class associated with the element. For example, if your spry accordion tab HTML code is "<div class="mysprytab">," then the class would be "mysprytab."

    • 4

      Scroll to the "<head>" section of your Web page that contains the CSS class for your spry tab. If your CSS is located on a separate CSS page, then you will need to open that CSS page to locate the CSS class information.

    • 5

      Locate the "background-image" style of your CSS class, and then write down the file location and name of the file found there.

    • 6

      Browse to the file identified by the "background-image" style.

    • 7

      Right-click the file, click "Open With" and then click "Adobe Photoshop."

    • 8

      Click the "Set Foreground Color" icon in the toolbox at the left side of the window, click your desired shade of orange and then click "OK."

    • 9

      Click the "Paint Bucket Tool" in the toolbox at the left side of the window.

    • 10

      Click anywhere on the image to change the current color to the orange color that you just selected.

    • 11

      Click "File" at the top of the window, and then click "Save."

Tips & Warnings

  • Do not use the "Save As" command after making changes to the spry accordion tab in Photoshop, as you may inadvertently alter the location of the image file. Since the image file is identified in relation to your Web page, your edited file will not be used if it is saved in a different location than the URL being referenced in your CSS code.

Related Searches:

References

Comments

Related Ads

Featured