Berger - WordPress Creative Agency Portfolio Theme

1. Visual Composer in portfolio pages

2. Map is not displayed properly

3. Cannot activate Revolution Slider

4. How do I upgrade the theme? Will I lose all my changes?

5. How to change the color of a Contact Form 7 placeholder text

6. What should be the 'standard size' for images?

7. My fullscreen parallax image is not responsive and does not scale well

8. How to optimise the speed of my website?

9. How can I add my own custom icons/fonts to the theme?

10. How do I upgrade Berger theme?

Yes, you should be able to use Visual Composer in portfolio pages.

You need to make sure however that you have Content Types -> 'berger_portfolio' checked in Visual Composer settings.

If you still don't see the Visual Composer backend editor make sure you press save and refresh in Visual Composer settings.

if there is an error in browser's console stating:

Google Maps API error: MissingKeyMapError

you need to create a google maps api key as described in this article:

https://developers.google.com/maps/documentation/javascript/get-api-key

Make sure you authorize the contact page url containing the map when you create the key.

then go to theme options -> map options -> google maps api key and paste it there

Problem:

I cant activate the slider plugin that the theme asked me to install.

I keep getting this error.

Parse error: syntax error, unexpected T_FUNCTION in /.../wp-content/plugins/revslider/inc_php/revslider_slider.class.php on line 851

Solution:

This problem may related with old php version on server. ThemePunch (plugin’s author) wrote:

“Please consider updating your server’s PHP to a more modern version in order to prevent similar issues with other WP products in the future. Your server is using a PHP Version < 5.3 , which is from July 2009.”

We also recommend to contact with server administrator because it’s not safe to work on such an old php version.

Also, if you are happy with one slider you can use the Main Slider and you don't need Revolution Slider

Main Slider should be the hero section of any page which has Slider hero section type.

To upgrade the theme:

Download the latest version from envato (installable Wordpress file)

In admin dashboard: 

remove the old theme and install the new version

using FTP remove the theme folder from /wp-content/themes/ and then copy the new version

You will not lose the changes if you added content, uploaded media or changed theme/page options.

if you haven't modified the theme files you should be fine.

Add this CSS code to theme options -> styling options -> custom css:

::-webkit-input-placeholder { /* WebKit browsers */
color: #000 !important;
opacity: 1;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #000 !important;
opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #000 !important;
opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #000 !important;
opacity: 1;
}

The standard we use is to have 1600px width for full-width images and 800px width for thumbnails

If you are using Adobe Photoshop, save images with 60% quality.

When the browser displays a fullscreen image will do so taking three factors in account:

- display resolution (width and height)

- display mode (portrait or landscape)

- image aspect ratio (width vs height)

So to display using the current resolution and display mode and preserving the aspect ratio, the browser will crop the image: in portrait will preserve the height whereas in landscape mode will preserve the width, cropping the rest that does not fit in current res.

The attached images visually explains the cropping process.

One of the main reasons the site is slow is that you may have lots of images which are not optimised for web.

https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization?hl=en

To check which images slow down the site. If you go to chrome, and right click and the 'Inspect' you will see a 'Network' tab which helps you monitor the loading time for all elements.

Click on the 'time' column to sort the entries.

Second you can use one of the WordPress cache plugins to deliver cached content:

https://premium.wpmudev.org/blog/top-wordpress-caching-plugins/

Third, compress your images  using a plugin such as WP Smush

Fourth, optimize your WordPress installation using a plugin like WP-Optimize.

Fifth, use a CDN (Content Delivery Network) to deliver your content over the web. 

Try uploading the files somewhere as a subfolder of the theme and then use @font-face to create a font family.

And then simply add the font-family style for each element you want to have that font.

See here for a description of the process:

http://premium.wpmudev.org/blog/custom-fonts-css/

You can edit style.css or use customizer -> Additional CSS

If You need to make sure you are running the latest release you need to verify the version of

Berger

and

Berger Functionality Plugin

To upgrade:

The latest version of functionality plugin is bundled with theme. If you re-download the theme from envato you have the latest release of the theme.

If you are using admin dashboard simply un-installing the theme and the re-installing the new version will do the upgrade.

to upgrade Berger Functionality Plugin you must deactivate the theme first and delete the plugin because you cannot delete the plugin while the theme is active.

Upon theme reactivation you will prompted to install the bundled plugin - therefore the latest version.