Themes Categories
Home » 4images Video Tutorials » 'Family Memories' 4images template
Watching this video tutorial for the Family Photo Memories 4images theme you will learn how to easily edit the theme's CSS file and customize its layout to your personal liking. You will see how to activate the writing permissions for the template’s CSS file and edit all parts of the contained code that relate to customizing the most important layout elements of your web gallery.
Here are the Family Photo Memories layout customization operations that you will be guided through step by step in the movie:
- Change Site Name Font
- Change Link Color
- Change Buttons Color
- Change Text Size
Here are the Family Photo Memories layout customization operations that you will be guided through step by step in the movie:
- Change Site Name Font
- Change Link Color
- Change Buttons Color
- Change Text Size
Download Photo Memories
'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 will show you how to edit the CSS settings of the Family Photo Memories 4images theme.
First, you need to log into your 4images Administration Control Panel
Specify your username and password and then hit the Login button.
Once in the Control Panel – search for the Settings option in the General section of the left-hand navigation menu.
Next go to the Select Template Directory option and select the Family Photo Memories theme from the drop-down menu.
Scroll down to the end of the page and hit the Save Changes button.
Go to the left-hand menu once again and select the Edit Templates option.
Here is an overview of the possible edit-template options.
First you will see how to change the site name font.
Now go to the Select Template-Pack option and load the theme that you wish to edit.
Next you need to select which part of the template you wish to edit;
In this case this is the style.css file.
Select the file and hit the Edit Templates button.
Here is the whole CSS code of the theme, which is responsible for the theme’s overall look and feel.
Now scroll down the CSS file contents to see how each of the theme’s components (such as menu links, menu buttons, modules, etc.) is set to look like in terms of color, position, font size etc., and change any of the pre-defined settings if necessary.
In this case you need to edit the logo area so look for the .LOGO selector in the CSS code.
Now pay attention to the Font-family property, which you need to edit to change the site name font.
Select the currently set font-family values and replace them with a font-family of your choice.
Here we recommend that you use the Tahoma font family.
Now edit the font-size by selecting the currently set size and replacing it with a new value.
Next select the font-color property value and replace it with the most appropriate new color code generated through the pop-up Color-Cop panel.
Now save the changes by hitting the Save Changes button.
An error message may come up saying that your file permissions are not correct.
To set the correct permissions – you need to first access the theme files through an FTP client.
In this example, we’ll connect with the Themza’s 4images demo theme location.
To locate the theme – first select the Demo folder, then click on the 4images folder and the Templates folder and finally – select the Family Photo Memories folder.
Now scroll down the template’s list of files and select the style.css file.
Right-click the file, select the Properties edit-option and then set the necessary Write permissions for the Group and Public user access categories.
Now go back to the 4images Administration Control Panel,
find the Logo selector that we last edited and hit again the Save Changes button.
The confirmation messages this time reads that the logo settings have been updated successfully due to the applied file permission changes.
To view the logo font updates live – click the Go to the Gallery Theme Page link in the upper right corner and open it in a new tag.
As you can see the site logo has been updated in terms of font type, characters size and font color.
If you do not like the updates, you can easily go back to the 4images Admin Panel
and make new font adjustments to the logo selector in the CSS file.
For instance, you could change the font-size, ……….the font-family, …….the font-weight………… and the font-color, and then hit the Save Changes button to apply all recent updates.
Go again to the theme preview page to see the results.
Now you will see how to make use of the change link color edit-theme option.
Back in the Admin Panel search for the ‘A’ selector in the CSS file.
Here it is – now select the currently set color value, choose a new one from the pop-up Color Cop panel and copy-paste its code in the place of the old value.
Now update the color in the A:HOVER selector with the same value
and then set the text-decoration property to NONE.
This way the links’ color will not change when the visitors mouse over the links.
Next hit the Save Changes button to apply all updates.
Refresh the theme preview page to see the updates reflected in live mode.
Look at the Categories module of the template to see the link color changed and mouse over the links to see that the color stays the same (as defined in the A:HOVER selector).
Another edit-theme option is Change Buttons Color.
Back in the 4images Admin Panel – search for the Buttons_search selector in the style.css file.
Now select the background property value and choose a new one from the pop-up Color Cop panel.
Copy the new custom color code and put it in the place of the old background value.
To apply the update – punch the Save Changes button.
Go again to the theme preview page and hit the browser refresh button to have the search button color changed in live mode.
If you wish to set the same color to the regular buttons on the theme – jump back to the 4images Admin Panel and search for the button selector in the style.CSS file.
Select the background property value and replace it with the one you set for the Buttons_search selector.
Update the theme preview page to see the color of the regular buttons changed.
If you do not like the borders of the button and wish to remove them – you will need to first go back to the Admin Panel and locate the button selector in the style.css file.
In the block of properties of the button selector you should look for the border property.
If you do not need the button on your theme to have a border – simply remove the whole border property line and hit the Save Changes button.
Now visit the theme preview page and refresh your browser to see how the buttons will look like with the border lines removed.
Now you will see how to change the text size of the Family Photo Memories 4images theme.
Go to the style.css file and search for the font-size property in the body selector.
Replace its current value with a new one.
Now scroll down to the font-size property in the UL, LI, P, TD selector, set the desired new value and hit the Save Changes button.
Open the theme preview page and refresh your browser to see the font-size changes reflected in live mode.
That’s it! Now you know how to edit the CSS settings for the Family Photo Memories 4images theme.
Video Tutorials
First, you need to log into your 4images Administration Control Panel
Specify your username and password and then hit the Login button.
Once in the Control Panel – search for the Settings option in the General section of the left-hand navigation menu.
Next go to the Select Template Directory option and select the Family Photo Memories theme from the drop-down menu.
Scroll down to the end of the page and hit the Save Changes button.
Go to the left-hand menu once again and select the Edit Templates option.
Here is an overview of the possible edit-template options.
First you will see how to change the site name font.
Now go to the Select Template-Pack option and load the theme that you wish to edit.
Next you need to select which part of the template you wish to edit;
In this case this is the style.css file.
Select the file and hit the Edit Templates button.
Here is the whole CSS code of the theme, which is responsible for the theme’s overall look and feel.
Now scroll down the CSS file contents to see how each of the theme’s components (such as menu links, menu buttons, modules, etc.) is set to look like in terms of color, position, font size etc., and change any of the pre-defined settings if necessary.
In this case you need to edit the logo area so look for the .LOGO selector in the CSS code.
Now pay attention to the Font-family property, which you need to edit to change the site name font.
Select the currently set font-family values and replace them with a font-family of your choice.
Here we recommend that you use the Tahoma font family.
Now edit the font-size by selecting the currently set size and replacing it with a new value.
Next select the font-color property value and replace it with the most appropriate new color code generated through the pop-up Color-Cop panel.
Now save the changes by hitting the Save Changes button.
An error message may come up saying that your file permissions are not correct.
To set the correct permissions – you need to first access the theme files through an FTP client.
In this example, we’ll connect with the Themza’s 4images demo theme location.
To locate the theme – first select the Demo folder, then click on the 4images folder and the Templates folder and finally – select the Family Photo Memories folder.
Now scroll down the template’s list of files and select the style.css file.
Right-click the file, select the Properties edit-option and then set the necessary Write permissions for the Group and Public user access categories.
Now go back to the 4images Administration Control Panel,
find the Logo selector that we last edited and hit again the Save Changes button.
The confirmation messages this time reads that the logo settings have been updated successfully due to the applied file permission changes.
To view the logo font updates live – click the Go to the Gallery Theme Page link in the upper right corner and open it in a new tag.
As you can see the site logo has been updated in terms of font type, characters size and font color.
If you do not like the updates, you can easily go back to the 4images Admin Panel
and make new font adjustments to the logo selector in the CSS file.
For instance, you could change the font-size, ……….the font-family, …….the font-weight………… and the font-color, and then hit the Save Changes button to apply all recent updates.
Go again to the theme preview page to see the results.
Now you will see how to make use of the change link color edit-theme option.
Back in the Admin Panel search for the ‘A’ selector in the CSS file.
Here it is – now select the currently set color value, choose a new one from the pop-up Color Cop panel and copy-paste its code in the place of the old value.
Now update the color in the A:HOVER selector with the same value
and then set the text-decoration property to NONE.
This way the links’ color will not change when the visitors mouse over the links.
Next hit the Save Changes button to apply all updates.
Refresh the theme preview page to see the updates reflected in live mode.
Look at the Categories module of the template to see the link color changed and mouse over the links to see that the color stays the same (as defined in the A:HOVER selector).
Another edit-theme option is Change Buttons Color.
Back in the 4images Admin Panel – search for the Buttons_search selector in the style.css file.
Now select the background property value and choose a new one from the pop-up Color Cop panel.
Copy the new custom color code and put it in the place of the old background value.
To apply the update – punch the Save Changes button.
Go again to the theme preview page and hit the browser refresh button to have the search button color changed in live mode.
If you wish to set the same color to the regular buttons on the theme – jump back to the 4images Admin Panel and search for the button selector in the style.CSS file.
Select the background property value and replace it with the one you set for the Buttons_search selector.
Update the theme preview page to see the color of the regular buttons changed.
If you do not like the borders of the button and wish to remove them – you will need to first go back to the Admin Panel and locate the button selector in the style.css file.
In the block of properties of the button selector you should look for the border property.
If you do not need the button on your theme to have a border – simply remove the whole border property line and hit the Save Changes button.
Now visit the theme preview page and refresh your browser to see how the buttons will look like with the border lines removed.
Now you will see how to change the text size of the Family Photo Memories 4images theme.
Go to the style.css file and search for the font-size property in the body selector.
Replace its current value with a new one.
Now scroll down to the font-size property in the UL, LI, P, TD selector, set the desired new value and hit the Save Changes button.
Open the theme preview page and refresh your browser to see the font-size changes reflected in live mode.
That’s it! Now you know how to edit the CSS settings for the Family Photo Memories 4images theme.