Themes Categories
Home » 4images Video Tutorials » 'Wedding Album' 4images template
This video tutorial will teach you how to customize the layout characteristics of the Wedding Album 4images theme, by editing its CSS file. The template supports 4 thumbnail columns, automatic thumbnail generation, unlimited categories and subcategories, title and description for every category and many other 4images supported options. Here are the layout customization options illustrated for you in this video:
- Change Site Name Font
- Change Text Link Colo
- Change Buttons Color
- Change Text Size
Download Wedding Album
'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 edit the Wedding Album 4images template.
First you will need to log into your 4images Admin 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 select the Wedding Album theme from the Choose Template Directory menu on the right and hit the Save Changes button to confirm your selection.
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 Wedding Album will look like online.
Back to the Admin Panel - select Edit Template from the General menu.
Now let’s see how to Change the Site Name Font.
After that select the theme from the Select Template Pack drop-down menu on the right and hit the Load theme menu. Then select style.css from the Select Template drop-down list and push the Edit Templates button to confirm your choice.
Here is the CSS source file of the Wedding Album theme that you will be able to edit directly.
To change the font of your website name - first locate the LOGO selector in the CSS file of the template.
Now you can edit the default text font style by replacing the current value of the font-family attribute with the new ones.
Then you can specify a custom value for the font-size attribute.
Hit the Save Changes button to apply all new values.
To be able to edit the CSS file, you will need to set the corresponding writing permissions.
To edit your permissions you need to first open an FTP client of your choice and then initiate an FTP connection by clicking the client’s Connect 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 Templates folder and the folder of the Wedding Album 4images theme.
In the Wedding Album folder – scroll down to the style.css file of the template, right-click it and select the Properties option from the options menu.
In the Properties panel - set the necessary owner, group and public writing permissions and hit OK to apply all changes.
When ready with the edit CSS file permissions update - go back to the 4images Admin Panel, locate the LOGO block of CSS code and hit Save Changes to apply all style updates to the logo area of the template.
After that - go to the Wedding Album preview page and reload your browser to see the site name font characteristics changed accordingly.
Now let’s see how to change the color of the template links.
Back in the 4images Administration Panel – go and search for the A selector in the CSS source file taking advantage again of the search function of your browser.
Making use of the Color Cop tool you can select a suitable color for the links.
Simply choose a color from the palette, copy the generated code and then paste it to replace the current value of the color attribute.
After that paste the same code into the value slot for the A: HOVER selector to set the same color for the moused over links on the template.
Also set the text-decoration attribute to be with NONE value and after that close the Color Cop panel and hit the Save Changes button to apply all changes to the A selectors you have just made.
To view all changes – go again to the template preview page, refresh your browser and then see all links turn from bordeaux to light red with no decoration effects when we mouse over them.
Now let’s see how to change the color of the template buttons.
Go back to the CSS source code in the 4images Admin Panel and locate the Button-search selector through the Find function of your browser.
Here you will need again to take advantage of the 4images integrated Color Cop tool.
Using it select a new color for the background of the template buttons and then paste the code to replace the currently set image for the background attribute of the Button-search selector.
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.
Now visit the preview template page and refresh your browser to see the newly updated buttons as they will be displayed on the web.
As you can see – both the search box button and the regular GO buttons will turn to light red.
If you wish to edit this color – jump back to the CSS file and locate again the BUTTON-SEARCH selector.
After that replace the light red color code with a new one, in our example – with the code of the BLACK color, in the BACKGROUND attribute value field.
Hit the Save Changes button to confirm the update and then go to the Preview Template page to see the color of the search button turn from RED to BLACK.
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 attribute with the new custom value.
Then update the 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 visit the template preview page to see the text changes as they will appear online.
As you can see – the text size of the bullet list representing registered users and of the main categories links have changed to the newly set value.
Well, that’s it!
These are all basic style customization steps for managing the layout of the Wedding Album 4images theme.
Video Tutorials
First you will need to log into your 4images Admin 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 select the Wedding Album theme from the Choose Template Directory menu on the right and hit the Save Changes button to confirm your selection.
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 Wedding Album will look like online.
Back to the Admin Panel - select Edit Template from the General menu.
Now let’s see how to Change the Site Name Font.
After that select the theme from the Select Template Pack drop-down menu on the right and hit the Load theme menu. Then select style.css from the Select Template drop-down list and push the Edit Templates button to confirm your choice.
Here is the CSS source file of the Wedding Album theme that you will be able to edit directly.
To change the font of your website name - first locate the LOGO selector in the CSS file of the template.
Now you can edit the default text font style by replacing the current value of the font-family attribute with the new ones.
Then you can specify a custom value for the font-size attribute.
Hit the Save Changes button to apply all new values.
To be able to edit the CSS file, you will need to set the corresponding writing permissions.
To edit your permissions you need to first open an FTP client of your choice and then initiate an FTP connection by clicking the client’s Connect 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 Templates folder and the folder of the Wedding Album 4images theme.
In the Wedding Album folder – scroll down to the style.css file of the template, right-click it and select the Properties option from the options menu.
In the Properties panel - set the necessary owner, group and public writing permissions and hit OK to apply all changes.
When ready with the edit CSS file permissions update - go back to the 4images Admin Panel, locate the LOGO block of CSS code and hit Save Changes to apply all style updates to the logo area of the template.
After that - go to the Wedding Album preview page and reload your browser to see the site name font characteristics changed accordingly.
Now let’s see how to change the color of the template links.
Back in the 4images Administration Panel – go and search for the A selector in the CSS source file taking advantage again of the search function of your browser.
Making use of the Color Cop tool you can select a suitable color for the links.
Simply choose a color from the palette, copy the generated code and then paste it to replace the current value of the color attribute.
After that paste the same code into the value slot for the A: HOVER selector to set the same color for the moused over links on the template.
Also set the text-decoration attribute to be with NONE value and after that close the Color Cop panel and hit the Save Changes button to apply all changes to the A selectors you have just made.
To view all changes – go again to the template preview page, refresh your browser and then see all links turn from bordeaux to light red with no decoration effects when we mouse over them.
Now let’s see how to change the color of the template buttons.
Go back to the CSS source code in the 4images Admin Panel and locate the Button-search selector through the Find function of your browser.
Here you will need again to take advantage of the 4images integrated Color Cop tool.
Using it select a new color for the background of the template buttons and then paste the code to replace the currently set image for the background attribute of the Button-search selector.
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.
Now visit the preview template page and refresh your browser to see the newly updated buttons as they will be displayed on the web.
As you can see – both the search box button and the regular GO buttons will turn to light red.
If you wish to edit this color – jump back to the CSS file and locate again the BUTTON-SEARCH selector.
After that replace the light red color code with a new one, in our example – with the code of the BLACK color, in the BACKGROUND attribute value field.
Hit the Save Changes button to confirm the update and then go to the Preview Template page to see the color of the search button turn from RED to BLACK.
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 attribute with the new custom value.
Then update the 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 visit the template preview page to see the text changes as they will appear online.
As you can see – the text size of the bullet list representing registered users and of the main categories links have changed to the newly set value.
Well, that’s it!
These are all basic style customization steps for managing the layout of the Wedding Album 4images theme.