Themes Categories
Home » 4images Video Tutorials » 'Photo Community' 4images template
The Photo Community 4images theme video tutorial is intended to show you how to edit the template’s CSS file on a step-by-step basis. This way you can tailor the appearance of your template-based online gallery to your specific requirements. Here is a part of the layout customization options supported by Photo Community:
- Change Site Name Font
- Change Link Color
- Change Buttons Color
- Change Text Size
- Change Site Name Font
- Change Link Color
- Change Buttons Color
- Change Text Size
Download Photo Community
'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 Community 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 Photo Community template from the Choose Template Directory menu on the right and hit the Save Changes button.
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 Photo Community will look like online.
Now let’s see how to Change the Site Name Font.
Back to the Admin Panel – select Edit Template from the General menu.
After that select the theme 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 push the Edit Templates button.
This will generate for you the CSS source file of the Photo Community 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 and then replace the current values of the logo font attributes with the 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 and 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 Community 4images theme.
Browse to the style.css file of the template, 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 style updates to the logo area of the template.
Go to the Photo Community 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 using the search function of your browser.
Now you will need to take advantage of the Color Cop tool to replace the currently set color with a new one. Using Color Cop – go to the template preview page and select a suitable color for the links through the selector.
In this example we choose to use the Green color of the images that mark the categories on the index page of the template.
Go back to the CSS file and replace the current link color for active and moused over links with the code of the newly-selected color.
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 selector you have made so far.
To view all changes – go again to the template preview page, refresh your browser and then see all links turn from orange to green.
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.
Using again the Color Cop tool – select a new color for the background of the template buttons and then paste its 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.
Visit the preview template page to see the newly updated buttons as they will be displayed on the web.
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. That’s it!
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 Photo Community template from the Choose Template Directory menu on the right and hit the Save Changes button.
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 Photo Community will look like online.
Now let’s see how to Change the Site Name Font.
Back to the Admin Panel – select Edit Template from the General menu.
After that select the theme 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 push the Edit Templates button.
This will generate for you the CSS source file of the Photo Community 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 and then replace the current values of the logo font attributes with the 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 and 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 Community 4images theme.
Browse to the style.css file of the template, 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 style updates to the logo area of the template.
Go to the Photo Community 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 using the search function of your browser.
Now you will need to take advantage of the Color Cop tool to replace the currently set color with a new one. Using Color Cop – go to the template preview page and select a suitable color for the links through the selector.
In this example we choose to use the Green color of the images that mark the categories on the index page of the template.
Go back to the CSS file and replace the current link color for active and moused over links with the code of the newly-selected color.
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 selector you have made so far.
To view all changes – go again to the template preview page, refresh your browser and then see all links turn from orange to green.
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.
Using again the Color Cop tool – select a new color for the background of the template buttons and then paste its 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.
Visit the preview template page to see the newly updated buttons as they will be displayed on the web.
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. That’s it!