Cargo - Transport and Logistics Theme

Contents

1. I have purchased your theme. Now what?

2. Missing style sheet error when installing the theme

3. Installing Demo Content

4. I want to use a child theme. How can I do that?

5. How to increase the size of the logo?

6. How to make a page load with accordion items closed by default

7. My Google Maps element does not work. What should I do?

8. How to create One page

9. Embed code I have placed using text element is being cut off. It does not have the proper height. How can I resolve this?

10. How to change the header and edit other Single pages of Portfolio items settings?

11. Is there some way I can see all the icons of the theme?

12. How to change the Excerpt text?

13. How to add new icon?

14. How to hide hover image effect?

15. How to place more than one marker on the map?

16. How to add custom icon font to the theme

17. How to update installed theme? Will it change data?

18. How to set up your Instagram widget?

19. How to set up your Twitter widget?

1. I have purchased your theme. Now what?

The best starting point is to go through the provided documentation. 

It will guide your through the common tasks of theme installation and import of demo content.  

You have 2 options for downloading your theme:


Documentation pdf is in the All files and documentation package. Please download it and the document should be in the root of the downloaded archive.



For more info and detailed instructions please refer to our Online Theme Documentation.

2. Missing style sheet error when installing the theme

A common issue that can occur with users new to installing WordPress themes is a "Broken theme and/or stylesheets missing” error message being displayed when trying to upload or activate the theme. This error message does not mean that the theme you have purchased is broken, it simply means it has been uploaded incorrectly.

You have 2 options for downloading your theme:


Please use archive Installable WordPress file only in the process of Theme installation:

  1. Log in to your WordPress admin area.
  2. Browse to Appearance > Themes.
  3. Click on ‘Add New’.
  4. Click ‘Upload’.
  5. Browse and select the theme zip file to ‘Upload’. - use Installable WordPress file only archive.



For more info and detailed instructions please refer to our Online Theme Documentation.

3. Installing Demo Content

The best way to start is to install demo content. If you want to install demo content please do the following:

1. Start with fresh WordPress installation and make sure that theme and required plugins are installed.

2. Go to ‘Tools > BT Import’ and select demo which you want to install.

3. Wait until you get message that import is finished. If you see red colored error message, go to Media Library and delete any unfinished downloads (images) and repeat the import.

4. I want to use a child theme. How can I do that?

If you want to use Cargo Child Theme, please follow these steps:

1. First of all, make sure that parent theme folder is named: cargo. Otherwise rename the folder.

2. You should be able to find the folder cargo-child in the package you have downloaded from ThemeForest.

3. Please copy this folder to /wp-content/themes folder on your server.

4. Go to Appearance > Themes in your wp-admin console and activate child theme. Please have in mind that all required plugins need to be activated.

5. How to increase the size of the logo?

In order to increase size of the logo you need to add the following CSS statements to Custom CSS field of Appearance > Customize > General panel:

.menuHolder .logo img {
    height: 70px;    
}

Please adjust the numbers according to your needs.

6. How to make a page load with accordion items closed by default

In order to make a page load with accordions collapse by default, please edit cargo/bt_elements.js file in your wp-content/plugins folder and locate the following statements:

$( '.tabsVertical' ).each(function(){
 $( this ).find( '.tabAccordionTitle' ).first().click();
 });

Remove these statements from file or comment them out and your accordions will remain closed on page load.

7. My Google Maps element does not work. What should I do?

Google has changed their Google map policies and now Google map APIs require an API key for new domains as of 22nd of June. Please refer to the following announcement: Google Geo Developers.

In order to resolve the issue with Google Map, please follow the next steps:

  1. First of all, you will need to create an API key as per instructions here: Get api key.
  2. After creating, please locate the cargo.php file in Plugin Editor and replace the following:
wp_enqueue_script( 
            'gmaps_api',
            'https://maps.googleapis.com/maps/api/js?v=&sensor=false'
        );

with:

wp_enqueue_script( 
            'gmaps_api',
            'https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY'
        );

Please change the YOUR_API_KEY with newly created API key and let us know if this resolves the issue.

8. How to create One page

The best way to start is to install demo content. If you want to install one page demo please refer to the article: Installing Demo Content. You will be able to see how all elements on the single page are set.

Please have a look at the following steps, how to achieve one page:

1. Insert in required shortcode section Custom ID Attribute. 

2. Then in Appearance > Menus add a new custom link and as a URL insert custom ID atribute with #.

9. Embed code I have placed using text element is being cut off. It does not have the proper height. How can I resolve this?

It may happen that iframe created by your embed code gets cut off.

Please do the following to resolve this:
1. Define Custom Id for the section containing embed code (for example: section_1)


2. Add the following statements to Custom CSS field of Appearance > Customize > General panel 

#section_1 iframe {
    height: 150px !important;
}

Adjust the height according to your needs.

10. How to change the header and edit other Single pages of Portfolio items settings?

On Appearance > Customize > Portfolio panel there is a Settings Page Slug field. This field should contain the slug of the page which serves as a template for all portfolio items.  All single pages of portfolio items will inherit settings and shortcodes of the page referenced via this field.


                                                        


In order to change elements on single page of the portfolio item, please locate the page with the slug entered in Settings Page Slug field and edit it.



For more info and detailed instructions please refer to our Online Theme Documentation.

11. Is there some way I can see all the icons of the theme?

We use three different sets of icons in the theme: Font AwesomeStroke 7 and Custom Icons.

Please refer to these links for preview of each icon set.

12. How to change the Excerpt text?

All Blog Posts, but even Pages can have Excerpt text.

In order to change the ’Excerpt text’ please take a look at the bottom of edit post page. Since this field is not visible by default, just click Screen options button at top right corner of the form and check Excerpt checkbox. 

                        


This will make excerpt field visible. You will be able to edit Excerpt text.




For more info and detailed instructions please refer to our Online Theme Documentation.



13. How to add new icon?

In order to add new icon, you will need to upload some other files in addition to .svg.

Here is the process:

  1. Go to IcoMoon.

  2. Click IcoMoon App in upper right corner:


3. Click on hamburger Menu in upper left corner and choose Manage Projects:


  4. Click New Project. Rename the project if you want. Click Load:

  5. Click Import Icons:

  6. Choose your .svg file.

  7. If asked do you want to use font's metrics click "Yes".

 8. Click on hamburger Menu in upper right corner and click Select all.

 9. Click Generate font in lower left corner:

 

 10. Click Preferences and set fontawesome-webfont for Font Name:

  11. Click Download in lower right corner:


  12. Extract files from the downloaded archive's fonts folder:

  13. Locate the font folder in theme's folder on your server and delete everything that has fontawesome in the name including woff2 and oet file.

  14. At the end, upload newly created files from IcoMoon.

14. How to hide hover image effect?

In order to hide the hover effect on images, please add the Extra Class Name(s)  "btSimpleHover" to the required element (Row, Grid gallery or Image etc.):

and then add the following css statements to the Custom CSS field in Customize > General Settings:

.btSimpleHover .captionPane {
    display: none;
}


15. How to place more than one marker on the map?

Currently Cargo's map element does not support multiple markers. You need to customize Cargo's plugin a bit to achieve this. Please edit bt_gmap.js in your Cargo plugin's folder (usually /wp-content/plugins/cargo/) and find the following statements:

var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: icon
});

In order to add another marker please add the following just below the referenced statements:

var myLatLng = new google.maps.LatLng( 41.7144678, -75.015827 );
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: icon
});

where 41.7144678 and -75.015827 are latitude and longitude. Please adjust them according to your needs.

For additional markers just repeat the procedure above.

16. How to add custom icon font to the theme

Hi,

This requires customization of several theme files. 

First of all you need to import your font file. Please take a look at the top of style.cargo.min.css file and you will find @font-face declaration. You need to import your own font files in the same manner as FontAwesome and the rest and declare the font-family as, for example 'myFont'.

Then you need to search for all 'data-ico-fa' in the style.cargo.min.css file and create respective statements for your font. For example when you locate

.btIco .btIcoHolder[data-ico-fa]:before{font-family:FontAwesome;content:attr(data-ico-fa)}

you need to create 

.btIco .btIcoHolder[data-ico-mf]:before{font-family:myFont;content:attr(data-ico-mf)}

Please make sure to find all occurrences of data-ico-fa and create respective data-ico-mf statements.

Then, you need to create new file in cargo plugin folder called bt_mf_icons.php by copying the file bt_fa_icons.php and changing it by mapping your glyph codes:

function bt_mf_icons() {
 $arr = array(
 '  ' => 'no_icon', 
 'myname1 (mf)' => 'mf_' . 'xxxx',
 'myname2 (mf)' => 'mf_' . 'xxxx',
etc...

Finally, you need to edit cargo.php in your plugin's folder: 

search for bt_fa_icons.php and add equivalent statements for bt_mf_icons.php:

if ( ! function_exists( 'bt_mf_icons' ) ) {
 require_once( 'bt_mf_icons.php' );
 }

then search for bt_fa_icons() and add respective statements for bt_mf_icons() as well - change all occurrences of 

$icon_arr = array_merge( bt_fa_icons(), bt_s7_icons(), bt_custom_icons() );

to

$icon_arr = array_merge( bt_fa_icons(), nt_mf_icons(), bt_s7_icons(), bt_custom_icons() );

17. How to update installed theme? Will it change data?

First of all, please make sure to download newest theme version from ThemeForest Download section.

Then, just replace the old theme files with new ones on your server via FTP (provided you haven’t made any changes in the source code. If you did, please reapply them to the new version of the theme or they will be lost). 

Keep your eye on potential required plugin update messages at wp-admin dashboard once you replace the files. You should update all required plugins if the updated theme suggests so. 

All settings in Customize panel and your content will be preserved.




For more info and detailed instructions please refer to our Online Theme Documentation.

18. How to set up your Instagram widget?

In order to set up your Instagram widget you need following data:

Client Id 

Please follow this procedure to create your Client Id and Access Token:

1. Go to the link: Authentication and login with your Instagram account

2. Click on Manage Clients in the upper right corner

3. Click on Register a New Client.


               


4. Complete the form, here’s a break down of what each field is:


             


You are now presented with a Client ID and the Redirect URL – copy and paste these somewhere (or leave the browser window open) as we need them for the next step.

5. Click on Edit Client button, click on Security Tab and uncheck Disable implicit OAuth. Click on Update button.




Access Token

Use the url below and replace the bits in UPPERCASE with the information you noted earlier on (Client ID and Redirect URL): https://instagram.com/oauth/authorize/?client_id=YOURCLIENTIDHERE&redirect_uri=HTTP://YOURREDIRECTURLHERE.COM&response_type=token&scope=public_content

Paste the updated URL in to your favorite browser and you will be taken to a page on Instagram that says something like, “Hello [Your Name], [Application Name] is requesting to do the following” followed by a list of permissions – click Authorize to enable and retrieve your token.

You should now have been redirect to the URL you set as your Redirect URL (probably your blog).  At the end of the URL Instagram has directed you to is your access token as a very long series of letters and numbers.  It will almost certainly not all be visible so you’ll need to work a little to get it.  We recommend:

Clicking in the address bar of your browser
Hit CTRL + A on the keyboard to ‘Select All’
Hit CTRL + C on the keyboard to ‘Copy‘
Open a text editor such as Notepad and paste the URL there, you should now be presented with something like this: http://www.bold-themes.com/#access_token=856946666.7338417.ffefasgtasg805784be6ab4f24965e79

Everything after the equals sign (=) is your access token so in our case this would be: 856946666.7338417.ffefasgtasg805784be6ab4f24965e79.

Please enter Client Id and Access token to respective fields of Instagram widget.




For more info and detailed instructions please refer to our Online Theme Documentation.

19. How to set up your Twitter widget?

In order to set up your Twitter widget you need following data:

Please follow this procedure to create required data.
1. Go to Twitter Apps, sign in and create New App.

                                

2. Complete the form, here’s a break down of what each field is:


Please check 'I agree'. You are now presented with a Consumer key – copy and paste this somewhere as we need that for the next step.

   


3. Click on 'manage keys and access token'. Then go to ’Create my access token’  and you will get Consumer Secret, Access Token and Access Token Secret.


   



6. Copy Consumer Key, Consumer Secret, Access Token and Access Token Secret and enter them to respective fields of Twitter widget. 



For more info and detailed instructions please refer to our Online Theme Documentation.