Themes Categories
Home » 4images Video Tutorials » 'Travel Photography' 4images template
This is the video page of Travel Photography – the 4images theme for all travelers with a camera in hand. Take a look at the video, presenting the theme’s basic layout elements (left sidebar, main area, large banner area) and key customization options, including:
- Change Site Name Font
- Change Text Links Color
- Change Search/Go Buttons Color
- Change Text Size
- Change Site Name Font
- Change Text Links Color
- Change Search/Go Buttons Color
- Change Text Size
Download Travel Photography
'Travel Photography' 4images template
'Travel Photography' - A Movie Trailer
download a 4images theme
install a 4images template
'Wedding Album' 4images template
'Family Memories' 4images template
'Photo Box' 4images template
'Photo Community' 4images template
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 first.
To do that, specify your login details and click the Login button.
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 menu.……
After that select style.css from the Select Template drop-down list and confirm your choice by clicking the Edit Templates button.
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 family…
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 4images theme.
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 and public 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 first.
You can change the font-size of the title by setting a custom value for the font-size property.
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 page………
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 template.
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 selector.
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.
Video Tutorials
To start customizing the theme – you will need to log into your 4images Admin Panel first.
To do that, specify your login details and click the Login button.
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 menu.……
After that select style.css from the Select Template drop-down list and confirm your choice by clicking the Edit Templates button.
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 family…
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 4images theme.
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 and public 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 first.
You can change the font-size of the title by setting a custom value for the font-size property.
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 page………
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 template.
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 selector.
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.