Download Travel Photography
This movie tutorial will show you how to customize the Travel Photography
4images theme by editing its CSS file.
To start customizing the theme – you will need to log into your 4images Admin Panel
To do that, specify your login details and click the Login
Once you access the 4images Admin Panel
, select Settings
from the General
menu on the left.
After that select the Travel Photography
theme from the Choose Template Directory
menu on the right.
When ready with your selection, click the Save Changes
button to confirm your update.
Next click on the Go to the Gallery Home Page
link in the top right corner and open it in a new tab to see how Travel Photography
will appear online.
Here is the template as it will be appearing online with its default style settings.
Now let’s see what are the basic layout customization options and how you can make use of them editing the theme’s CSS file.
Back to the Admin Panel
– select Edit Template
from the General
menu on the left.
Then select the Travel Photography
theme from the Select Template Pack
drop-down menu on the right and click the Load theme
After that select style.css
from the Select Template
drop-down list and confirm your choice by clicking the Edit Templates
Now let’s see how to Change the Site Name Font.
In the CSS file of the Travel Photography
theme, locate the LOGO selector, using the SEARCH function of your browser…….
…..then replace the font family types currently set as a value for the font-family
property with a custom value. In our case we replace Georgia and Times New Roman with the Tahoma
When ready – hit the Save Changes
button to apply all updates
To apply all new updates to the CSS file, you must set the corresponding write permissions.
To edit your edit-CSS-file permissions you need to first open an FTP client of your choice and then initiate an FTP connection by clicking the Connect
button of the button.
Now take a look at the right section of your FTP client and browse to the Demo
folder, then to the 4images
and the Admin
folder to finally reach the Template
folder and the folder of the Travel Photography
In the Travel Photography
folder, scroll down to locate the style.css
file of the template, right-click it and then select Properties
from the options menu.
In the Properties
panel, set the necessary group
writing permissions and click OK
to apply all changes….
When you complete the permissions update, go back to the CSS source code in the 4images Admin Panel, re-apply the font-family updates and click the Save Changes
button to confirm them…….
With the new permissions set – you can now successfully apply all updates to the CSS file.
When ready – go to the Template Preview
page to see the page background of the Travel Photography
theme as it will look like in live mode
To further customize the style of the template title you should go back to the 4images Administration Panel
You can change the font-size of the title by setting a custom value for the font-size
Then you can remove the ‘bold’ value set for the font-size property by removing the font-size line.
To preview the template title after the style updates you have just made, visit again the Theme preview
Let’s now see how to change the template links color.
Back in the 4images Administration Panel
, search for the A
selector in the CSS source file using again of the search function of your browser…………
Using the Color Cop tool
you can select a suitable color for the text links of the
Choose a color from the palette, copy the generated code and paste it to replace the current value of the COLOR
property. In our example we choose a BLUE color.
You can apply the same change to the A: HOVER
Visit the Travel Photography
preview page to see all new link style updates reflected online.
Refresh your browser session to see all template links, including sidebar links and category links turn from ORANGE to BLUE.
Now let’s see how to change the buttons color.
Go back to the 4images Admin Panel.
Using the search function of your browser locate the BOTTON SEARCH selector, responsible for defining the color of the search button.
Using the Color Cop
panel you can replace the currently set color for the search button with a color code that you generate……
In this example we’ll select a DARK color for the background and a LIGHT color for the buttons….
Simply copy their code from the Crop Cop panel
and paste them as new custom values.
Click the SAVE CHANGES button to update the buttons color online.
Now visit the Travel Photography
preview template page and refresh your browser to see the newly updated search button color scheme as it will be displayed on the web.
If you want to change the color of the GO button, go to the CSS file, locate the BUTTON selector and set new color values for the COLOR and the BACKGROUND properties.
Go to the Preview Page
and check out the GO button color change.
Now let’s see how to change size of the text areas on the template.
In the CSS file – locate the BODY selector and then replace the font-size property with the new custom value……In our example we increase the value by 3 pixels.
…..Then update the other text area selectors like UL and LI
for bullet lists, P
for paragraphs and TD
for table cells.
Go again to the preview page and reload your browser to check out the text size update in live mode.
To undo the text size change – jump back to the CSS file and set the default values for the same selectors.
We are again on the PREVIEW PAGE and reload the browser to reflect the updates online
Well, that’s it!
Now you know how to customize the layout of the Travel Photography 4images theme