Web Design

Tutorial – How To Quickly & Easily Change CSS Colors Using The Search & Replace Function

Tutorial - How To Quickly & Easily Change CSS Colors Using The Search & Replace Function
Posted: March 21, 2010 at 9:52 pm   /   by   /   comments (0)

This tutorial shows how to quickly & easily Change CSS Colors in a (Joomla) CSS Style sheet using the search & replace function. I am using screenshots of the hwdVideoShare template CSS as an example, but it will be exactly the same process for editing any other CSS in a Joomla website (and probably others too...... In fact, a similar search function can be found within Cpanel's "file browser", and in Windows OS (using "WordPad", etc),  and so you can also do the same as is detailed below - just look for the familiar binoculars icon).

Rather than manually looking for each instance of a color in order to replace it with a color of your choice, you can use the search & replace function in eXtplorer- not only is this much faster & easier, but it will ensure you find ALL instances of the color that you wish to replace......

 

Step 1: Access the CSS file via eXtplorer (Note: you will find this listed in "Components", not "utilities" as in our image)

Tutorial - How To Quickly & Easily Change CSS Colors Using The Search & Replace Function

eXtplorer menu - close-up

Step 2- Go to the file you wish to edit, right click on it & select "Edit"

Tutorial – How To Quickly & Easily Change CSS Colors Using The Search & Replace Function

eXtplorer - editing css feature screenshot

You will then be presented with the CSS - see below....

Tutorial - How To Quickly & Easily Change CSS Colors Using The Search & Replace Function

editing CSS (hwd VideoShare) - screenshot

Step 3 -Select the Binoculars (Search)  Icon....

Tutorial – How To Quickly & Easily Change CSS Colors Using The Search & Replace Function

editing CSS (hwd VideoShare) screenshot

Step 4 - Put the # of the color you wish to search for (& replace) in the "Search" box, and put the # of the color you wish to replace it with in the "Replace" box....

(BIS Tip: If you don't know what the actual numbers of the colors that you want to find or replace are, then I suggest you read our article "3 Great (Free) Tools For Webmasters & Web Design" in our BIS Product Reviews Section- and download the great free tool called "Pixie" - the other free tools I reviewed in that article I have personally found to also be invaluable, so you might want to check them out, too...)

Tutorial - How To Quickly & Easily Change CSS Colors Using The Search & Replace Function

editing CSS (hwd VideoShare) - screenshot

Each time you press "Find Next", you will be presented with an instance in the CSS of the particular color you are searching for.... - see below

Tutorial – How To Quickly & Easily Change CSS Colors Using The Search & Replace Function

editing-CSS (hwd VideoShare) - screenshot

You can then replace each instance of the 'searched-for' color with your desired replacement color........This ensures that you won't miss any instances of the color you are wanting to replace (which can easily happen if you are doing it "the hard way" - manually...)

Step 5- Tick the "Return to directory after saving" option & press "Save" & your done!

Tutorial – How To Quickly & Easily Change CSS Colors Using The Search & Replace Function

editing css - eXtplorer screenshot

PS: Don't forget to always check the results in the website's front-end....


Share and Enjoy:
  • Print
  • email
  • Add to favorites
  • Facebook
  • Twitter
  • LinkedIn
  • Yahoo! Buzz
  • Google Buzz
  • Google Bookmarks
  • Digg
  • StumbleUpon
  • del.icio.us
  • MisterWong
  • Diigo
  • Reddit
  • NewsVine
  • Tumblr
  • Ping.fm
  • Plurk
  • RSS

What Others On This Site Are Reading:


The following two tabs change content below.
Karen Banting
Karen Banting is the primary author for Business-In-Site.com and writes about a variety of topics, including: Online Business, SEO, Marketing, Software and more....
s2Member®