Themes Categories
Home » 4images Video Tutorials » 'Photo Box' 4images template
Here you will find a movie tutorial showing you how to customize the Photo Box 4images theme. This multi-lingual template is optimized for a 1024 screen resolution. It supports 4 thumbnail columns and a variety of image- and file formats.
Depending on the photographic contents you will display on your site, you may need to adjust the template’s layout to your particular needs. Take a look at this movie to see how you can make use of the few basic layout customization options for the Photo Box template, by editing its CSS file:
- Change Site Name Font
- Change Link Color
- Change Buttons Color
- Change Text Size
Depending on the photographic contents you will display on your site, you may need to adjust the template’s layout to your particular needs. Take a look at this movie to see how you can make use of the few basic layout customization options for the Photo Box template, by editing its CSS file:
- Change Site Name Font
- Change Link Color
- Change Buttons Color
- Change Text Size
Download Photo Box
'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 quick movie will show you how to edit the Photo Box 4images template.
First you will need to log into your 4images Administration Panel.
For that purpose – specify your login details and hit the Login button.
Once in the 4images Admin Panel interface – select Settings from the General menu on the left.
Then go and select the Photo Box template from the Choose Template Directory menu.
Hit the Save Changes button to confirm the template selection.
Next click on the Go to the Gallery Home Page link in the top right corner and open it in a new tab.
Here is how the selected 4Images theme will look like online.
Now back to the 4images Admin Panel select Edit Template from the General menu on the left.
First let’s see how to Change the Site Name Font.
Before that – go and select the template from the Select Template Pack drop-down menu and hit the Load theme menu.
Then select style.css from the Select Template drop-down menu and hit the Edit Templates button.
This will generate for you the CSS source file of the Photo Box template that you will be able to edit directly.
To change the font of your 4images website’s name – first locate the LOGO selector in the CSS source code of the template and then replace the current values of the logo font attributes with new ones.
First specify the new font-family
.. and then the new font-size value.
Hit the Save Changes button to apply all new values.
Next go and open an FTP client of your choice and initiate an FTP connection by clicking the client’s Connect button.
Now take a look at the right section of your FTP client where your remote 4mages files are located.
Browse to the Demo folder, then to the 4images and the Admin folder to finally reach the Themes folder and the folder of the Photo Box 4images theme.
Open the Photo Box folder and browse to the style.css file.
Select the file, right-click it and select Properties from the options menu.
Set the necessary group and public writing permissions and hit OK.
Now go back to the 4images Admin Panel, locate the LOGO block of CSS code and hit Save Changes to apply all updates.
Go to the template preview page and reload your browser to see the site name font characteristics changed accordingly.
Now let’s see how you can change the color of the logo to match the color scheme of the template.
Jump back to the 4images Admin Panel to select a new color for the site logo.
To do that simply generate a color code from the Color Cop panel and paste the new code into the COLOR attribute value field.
When done – hit the Save Changes button and then open the template preview page to see the site title with the new color reflected online.
Now let’s see how to change the color of the template’s links.
Back in the 4images Admin Panel – go and search for the A selector in the CSS file.
Using the Color Cop tool go to the template preview page and select a suitable color for the links.
In this example we choose to use the Orange color present in the Lightbox buttons of the template.
Go back to the CSS file and replace the link color with the code of the newly-selected color.
Also set the text-decoration attribute to be with NONE value and after that hit the Save Changes button to apply all changes to the A selector made so far.
To view all changes – go again to the template preview page, refresh your browser and then see all links turn from red to orange.
Now let’s how to change the buttons color.
Go back to the CSS source code and search for the Button-search selector.
Using the Color Cop panel – select a new color for the background of the template buttons and then paste it to replace the currently set image for the background attribute.
Now locate the buttons selector and then set the same color for the background of the regular buttons on the template.
Next hit the Save Changes button to apply all changes to the background color of the template buttons.
Visit the preview template page to see the newly updated buttons in live mode.
Now let’s see how to change the text size.
In the CSS file – locate the BODY selector and then replace the font-size attribute with the new custom value.
You can do the same with other text area selectors like UL and LI for bullet lists, P for paragraphs and TD for table cells.
Again, hit the Apply Changes button and then visit the template preview page to see the changes as they will appear online.
These are all basic style customization steps for managing the layout of the Photo Box 4images theme.
Video Tutorials
First you will need to log into your 4images Administration Panel.
For that purpose – specify your login details and hit the Login button.
Once in the 4images Admin Panel interface – select Settings from the General menu on the left.
Then go and select the Photo Box template from the Choose Template Directory menu.
Hit the Save Changes button to confirm the template selection.
Next click on the Go to the Gallery Home Page link in the top right corner and open it in a new tab.
Here is how the selected 4Images theme will look like online.
Now back to the 4images Admin Panel select Edit Template from the General menu on the left.
First let’s see how to Change the Site Name Font.
Before that – go and select the template from the Select Template Pack drop-down menu and hit the Load theme menu.
Then select style.css from the Select Template drop-down menu and hit the Edit Templates button.
This will generate for you the CSS source file of the Photo Box template that you will be able to edit directly.
To change the font of your 4images website’s name – first locate the LOGO selector in the CSS source code of the template and then replace the current values of the logo font attributes with new ones.
First specify the new font-family
.. and then the new font-size value.
Hit the Save Changes button to apply all new values.
Next go and open an FTP client of your choice and initiate an FTP connection by clicking the client’s Connect button.
Now take a look at the right section of your FTP client where your remote 4mages files are located.
Browse to the Demo folder, then to the 4images and the Admin folder to finally reach the Themes folder and the folder of the Photo Box 4images theme.
Open the Photo Box folder and browse to the style.css file.
Select the file, right-click it and select Properties from the options menu.
Set the necessary group and public writing permissions and hit OK.
Now go back to the 4images Admin Panel, locate the LOGO block of CSS code and hit Save Changes to apply all updates.
Go to the template preview page and reload your browser to see the site name font characteristics changed accordingly.
Now let’s see how you can change the color of the logo to match the color scheme of the template.
Jump back to the 4images Admin Panel to select a new color for the site logo.
To do that simply generate a color code from the Color Cop panel and paste the new code into the COLOR attribute value field.
When done – hit the Save Changes button and then open the template preview page to see the site title with the new color reflected online.
Now let’s see how to change the color of the template’s links.
Back in the 4images Admin Panel – go and search for the A selector in the CSS file.
Using the Color Cop tool go to the template preview page and select a suitable color for the links.
In this example we choose to use the Orange color present in the Lightbox buttons of the template.
Go back to the CSS file and replace the link color with the code of the newly-selected color.
Also set the text-decoration attribute to be with NONE value and after that hit the Save Changes button to apply all changes to the A selector made so far.
To view all changes – go again to the template preview page, refresh your browser and then see all links turn from red to orange.
Now let’s how to change the buttons color.
Go back to the CSS source code and search for the Button-search selector.
Using the Color Cop panel – select a new color for the background of the template buttons and then paste it to replace the currently set image for the background attribute.
Now locate the buttons selector and then set the same color for the background of the regular buttons on the template.
Next hit the Save Changes button to apply all changes to the background color of the template buttons.
Visit the preview template page to see the newly updated buttons in live mode.
Now let’s see how to change the text size.
In the CSS file – locate the BODY selector and then replace the font-size attribute with the new custom value.
You can do the same with other text area selectors like UL and LI for bullet lists, P for paragraphs and TD for table cells.
Again, hit the Apply Changes button and then visit the template preview page to see the changes as they will appear online.
These are all basic style customization steps for managing the layout of the Photo Box 4images theme.