How To Modify a WordPress Theme's Colours - Part 2


Published on

Part two of our guide on how to modify a wordpress theme's colours. If you want to hire a web designer or developer, please hire Neogain.

Published in: Technology, Art & Photos
  • Be the first to comment

  • Be the first to like this

How To Modify a WordPress Theme's Colours - Part 2

  1. 1. <ul><li>How To Modify a WordPress Theme’s Colours – Part 2 </li></ul>
  2. 2. <ul><li>Part two of our ‘How to Modify a WordPress Theme’s Colours‘, sees us looking at image colours. </li></ul><ul><li>Plus afterwards we provide useful advice on how to crop and optimise the image files. </li></ul><ul><li>If you want to hire a WordPress designer please consider Neogain. </li></ul>
  3. 3. <ul><li>Modifying the theme’s image files colours. </li></ul><ul><li>Perhaps your theme has a background or header image that you want to change a colour or two within? </li></ul><ul><li>This is incredibly easy if it is a single colour taking up a whole large area. However if there is fine detail, it will require further editing to adjust the image. </li></ul>
  4. 4. <ul><li>The next tip shows you how to change a colour when the whole header image for instance is just one colour: </li></ul><ul><li>1. Download a copy of your theme files to your computer via FTP. You will find your theme at /wp-content/themes/yourtheme/ </li></ul><ul><li>2. Browse the images and then open the required image with the GIMP. </li></ul>
  5. 5. <ul><li>3. Now using GIMP you can replace a colour using the ‘fill’ tool. </li></ul><ul><li>4. Once saved, you can re-upload the image file and replace the original, though it might be advisable to make a backup of the original image before replacing. </li></ul><ul><li>What else the GIMP can do? </li></ul><ul><li>The GIMP is often overlooked by the web design community, but the GIMP actually can help both novice and advanced users alike create or modify template images, plus help you choose your colours. </li></ul>
  6. 6. <ul><li>So what exactly else can the GIMP do? Well quite a lot actually. Below we will cover just a few simple uses. </li></ul><ul><li>How to resize an image. </li></ul><ul><li>Sometimes images are too large and need resizing, with the GIMP you can accomplish this two ways. </li></ul>
  7. 7. <ul><li>The easy way: </li></ul><ul><li>1. Open your image. </li></ul><ul><li>2. From the ‘Image’ menu select ‘Scale’, then enter your new pixel sizes and apply. </li></ul><ul><li>The sneaky way to crop: </li></ul><ul><li>1. Open the image you wish to crop. </li></ul><ul><li>2. From the ‘File’ menu select ‘New’. </li></ul><ul><li>3. Provide the pixel dimensions you require and create a new image. </li></ul>
  8. 8. <ul><li>4. Now go back to the original image and select ‘Copy’, from the ‘Edit’ menu. </li></ul><ul><li>5. On the new image select ‘Paste as….New Layer’ from the ‘Edit’ menu. </li></ul><ul><li>6. Select the move tool (crossed arrows) to readjust the placement. </li></ul><ul><li>7. Save the new image. </li></ul>
  9. 9. <ul><li>The reason why the sneaky crop method is so helpful is that when you work with templates, chances are you are working with set image dimensions. </li></ul><ul><li>So instead of selecting an area to cut from an original image, and trying to make sure the dimensions are just right, a simple cut and paste is all you need. </li></ul>
  10. 10. <ul><li>Saving as different image formats. </li></ul><ul><li>Saving as different image formats is another short cut that often saves you from having to reduce colours within an image file or manually adjusting the quality using tools, which can take a novice a while. </li></ul>
  11. 11. <ul><li>However standard settings for gif (256 colours) and jpg (millions of colours) are fine and converting to a different file format can save you time adjusting colours settings manually. </li></ul><ul><li>For example if you have a png image, see what saving to a jpg does to the file size. </li></ul><ul><li>If you have a grey scale jpg, see what happens to the quality and file size when saved as a gif. </li></ul>
  12. 12. <ul><li>How to convert between file formats: </li></ul><ul><li>1. Open the image. </li></ul><ul><li>2. From the ‘File’ menu select ‘Save As’. </li></ul><ul><li>3. Type the new image name followed by a full stop and the file extension. </li></ul><ul><li>Example: background.gif background.jpg background.png </li></ul>
  13. 13. <ul><li>Remember you will need to update your style.css or possible a template php file to change the file names. </li></ul><ul><li>If you want to hire a web designer or developer , please get in touch. </li></ul>