Knowledge Base – FAQ

2. General (7)

Icons bundled with Fusion Theme

For Fusion theme, the icons bundled with the theme are listed here –

Icon Fonts bundled with Fusion Theme

To know how to use the icons, read below –

How to use Icon Fonts

Permalink.

Icons bundled with Cosmic Theme

For Cosmic theme, the icons bundled with the theme are listed here –

Icon Fonts bundled with Cosmic Theme

To know how to use the icons, read below –

How to use Icon Fonts

Permalink.

How to use 500+ icon fonts bundled with the theme?

The list of icons bundled with the theme is listed here –

Icon Fonts bundled with Enigmatic/Extinct/Appdev/Squash Theme

For Agile theme, the 1500+ icons bundled with the theme are listed here –

Icon Fonts bundled with Agile Theme

To use the icons, you just insert a markup like

or some prefer

to display the icon. The above link provides you with the class names to use to display the corresponding icon.

These font icons can be styled in CSS for color and size. You can utilize the custom.css file or the Custom CSS tab in the options panel to insert styling information like this –

#my-section i { font-size: 32px; color: #333; }.

Do look for some examples of the usage in the demo content provided with the theme.

Although I am not going to recommend it, theoretically you can use inline styling as well to scale the icon and color it like this –

.

Permalink.

How to use 1500+ icons bundled with the Agile/Austin/FitPro/Invent theme

For Agile theme, the icons bundled with the theme are listed here –

Icon Fonts bundled with Agile Theme

To use the icons, you can use the WordPress shortcode

[icon class="icon-heart"]

or you just insert a HTML markup like

or some prefer

to display the icon. The above link provides you with the class names to use to display the corresponding icon.

These font icons can be styled in CSS for color and size. You can utilize the custom.css file or the Custom CSS tab in the options panel to insert styling information like this –

#my-section i { font-size: 32px; color: #333; }.

Do look for some examples of the usage in the demo content provided with the theme.

Although I am not going to recommend it, theoretically you can use inline styling as well to scale the icon and color it like this –

.

Permalink.

Twitter widget API v1.1 configuration

Due to API changes by Twitter, we can no longer provide a built in Twitter Widget without significant changes. The JTWT JS plugin we used (and many others on the web) has been retired. There are two good options for the users who want to continue to use the twitter widget. Both have their pluses and minuses.

First option is pretty close to what we are used to – displaying just a list of recent tweets, and blends reasonably well with the theme (and we can reskin it too with little effort). With the latest updates of our themes, support for Recent Tweets plugin integration is now seamless with the help of TGM plugin activation framework.

Second option is feature rich (ex: post, retweet, replies right from the widget is supported) but at times does not blend well with the theme due to custom skinning by Twitter which displays the tweets in an iFrame.

Have provided the screenshots for your help (video would have been better but involves some patience in blurring out some of the details shown during the creation of the widgets). Let us know if you have trouble.

FIRST OPTION –

WordPress Plugin from wordpress.org – http://wordpress.org/plugins/recent-tweets-widget/

1) Login to twitter account after you invoke the link –

https://dev.twitter.com/apps

2) Click on create a new application

https://docs.google.com/file/d/0B9j6FQo4cSQFWDR5Q21OSlo1OEE/edit?usp=drivesdk

3) Fill in the details as shown and hit the Create application button at the bottom –

https://docs.google.com/file/d/0B9j6FQo4cSQFdUl1LVRwc0xOa0E/edit?usp=drivesdk

4) You should now be able to see the details like consumer key, consumer secret etc. as shown in the below screenshot –

https://docs.google.com/file/d/0B9j6FQo4cSQFMGZtRXFqWTI2ODA/edit?usp=drivesdk

Generate OAuth tokens by visiting the OAuth tool tab –

https://docs.google.com/file/d/0B9j6FQo4cSQFWGwxLTFkN0V3QTA/edit?usp=drivesdk

5) Download the plugin from the URL –

http://wordpress.org/plugins/recent-tweets-widget/installation/

Load the plugin, drag and drop the Recent Tweets widget into the desired widget area. Paste the above details – keys and tokens into WordPress widget and you are done –

https://docs.google.com/file/d/0B9j6FQo4cSQFZGtyX2Q4TmRJVVk/edit?usp=drivesdk

The tweets should now appear in the page.

SECOND OPTION –

1) Documentation is here but involves steps detailed below – https://dev.twitter.com/docs/embedded-timelines

Go to

https://twitter.com/settings/widgets

and hit Create Widget button –

https://docs.google.com/file/d/0B9j6FQo4cSQFTEZ5bU0yczVnYjA/edit?usp=drivesdk

2) Should open the widget creation page like this –

https://docs.google.com/file/d/0B9j6FQo4cSQFYzRhZkFJT3liWDQ/edit?usp=drivesdk

Choose a dark or light skin depending on whether you want the widget to appear in the footer or on one of the sidebars. Copy the widget HTML generated at the bottom right –

https://docs.google.com/file/d/0B9j6FQo4cSQFbGFtUWVBMlJaYUU/edit?usp=drivesdk

3) Paste the copied HTML into a WordPress text widget as shown below –

https://docs.google.com/file/d/0B9j6FQo4cSQFdmNyb200NDlRS2M/edit?usp=drivesdk

Your tweets should appear on your page. Hope this helps.

Permalink.

Install Custom Fonts – Make your site dramatically better looking with no additional cost

Folks out there who bought the theme – just wanted to provide a way for you to make things much better on your site with some minimal work on your part. Here is how to do it –

1) Create an account in http://myfonts.com.

2) Login to your account and go to http://www.myfonts.com/fonts/exljbris/museo-slab/.

3) Choose the Museo Slab 500 font (costs $0), hit ‘Add to Cart’ button visible when you hover over the font selection.

4) In the Add to Cart popup window, among the choice available – Desktop and Web, choose ‘Web – To use the font on a website using @font-face CSS’.

5) Hitting ‘Add to Cart’ in the popup window, will take you to cart page. Hit ‘Proceed to checkout’ button and then place your order in the subsequent page. This should open up a page with ‘Download’ button.

6) Download the webfont kit. Extract the zip file, and locate the webfonts folder containing three files with extensions – ttf, eot, woff. Transfer these files to a folder to your hosting server. Best place would be to a separate directory named something like ‘webfonts’ inside the /wp-content/ folder. Guaranteed to stay when the WordPress or the theme is updated.

7) In the files extracted on your desktop, also locate a CSS file named ‘MyFontsWebfontsKit.css’ that code that looks something like this –

@font-face {
font-family: 'MuseoSlab-500';
src: url('webfonts/26B0C6_0_0.eot');
src: url('webfonts/26B0C6_0_0.eot?#iefix') format('embedded-opentype'),url('webfonts/26B0C6_0_0.woff') format('woff'),url('webfonts/26B0C6_0_0.ttf') format('truetype');
}

8) Copy the above code to the Custom CSS tab in the theme options panel. Change the src: url('webfonts/ to something like http://mydomain.com/wp-content/webfonts/. Your code should look something like –

@font-face {
font-family: 'MuseoSlab-500';
src: url('http://mydomain.com/wp-content/webfonts/26B0C6_0_0.eot');
src: url('http://mydomain.com/wp-content/webfonts/26B0C6_0_0.eot?#iefix') format('embedded-opentype'),url('http://mydomain.com/wp-content/webfonts/26B0C6_0_0.woff') format('woff'),url('http://mydomain.com/wp-content/webfonts/26B0C6_0_0.ttf') format('truetype');
}

9) Enter ‘MuseoSlab-500’ as Custom Heading Font in Fonts Tab in Enigmatic theme options panel.

10) Last, insert the following code into Custom CSS tab in the options panel for the new font to take effect.

h1, h2, h3, h4, h5, h6, #before-content-area h1, #before-content-area h2 , #sitemap-template h2, #archives-template h2, .archive h2, #portfolio-full-width .entry-title, #portfolio-template .entry-title, .post-snippets .hentry .entry-title, #retina-text h3 { font-weight: 500; }

#content .hentry .entry-meta, .entry-title, .entry-title a { font-family: 'MuseoSlab-500'; }

#portfolio-full-width .entry-title, #portfolio-template .entry-title, .post-snippets .hentry .entry-title { font-size: 16px; }

The basic idea behind the above procedure is quite simple – just download the fonts toolkit from myfonts.com and then make them part of your Custom CSS.

Fonts like Museo Slab are much better than anything you can find on Google Fonts. While the above font does not cost anything, I encourage you to check out some paid fonts as well in the site. Many of them are worth their money.

Permalink.

How to fix a few styling issues instantly using Chrome Developer Tools

If you are not already doing so, I recommend users learn using Chrome Developer tools or Firebug in Firefox to fix minor styling issues like spacing, size of the font, background image, color etc.. Here are two videos to get started –

http://www.youtube.com/watch?v=7cqh7MGLgaM

http://www.youtube.com/watch?v=Mhb4n0yGYT4

Once you determine the change required, go to Custom CSS tab in the theme options panel to insert the CSS for the change to take effect.

Permalink.

1. Theme Setup (5)

[Extinct/Squash/Enigmatic Theme]How to setup theme and Revolution Slider in 10 min

Pls follow following video tutorials for importing data and setting up the revolution slider for my themes. The tutorial talks about setting up my recent theme Extinct but steps are pretty much the same for Squash/Enigmatic themes and hence you should have no issues. Here are the links –

https://www.youtube.com/watch?v=iO6FmlrerS4

If you still have issues, pls send me an email through my ThemeForest profile page with the URL and a temporary login to your site. Thanks for your purchase!

Permalink.

[Appdev Theme] How to setup theme and revolution slider – YouTube video

Pls watch the below video for importing data and setting up the revolution slider for my single page theme – Appdev on ThemeForest. Here are is link –

https://www.youtube.com/watch?v=26eeNU97mxY

If you still have issues, pls post a support request here with a private message containing a temporary login to your installation or send me an email through my ThemeForest profile page with the URL and a temporary login to your site. Thanks for your purchase!

Permalink.

[Agile/Austin/Fusion Theme] How to setup theme and revolution slider – YouTube video

Update: For Agile and FitPro themes, pls go to the link below for an updated video – [Agile 3.0/FitPro Theme]How to replicate the demo site in 10 min

Pls watch the below video for importing data and setting up the revolution slider for my single page theme -Agile on ThemeForest. The steps are similar for Fusion as well as Austin themes. Here is link –

http://www.youtube.com/watch?v=eynd9mMPHwQ

If you still have issues, pls post a support request here with a private message containing a temporary login to your installation or send me an email through my ThemeForest profile page with the URL and a temporary login to your site. Thanks for your purchase!

Permalink.

[Agile 3.0/FitPro Theme] How to replicate the demo site in 10 min

Pls follow following video tutorials for importing data and setting up the revolution slider for my Agile/FitPro themes. The tutorial talks about setting up Agile theme but steps are pretty much the same for FitPro as well and hence you should have no issues. Here are the links –

https://www.youtube.com/watch?v=maHDG7TRDQs

If you still have issues, pls send me an email through my ThemeForest profile page – , with the URL and a temporary login to your site. Thanks for your purchase!

Permalink.

[Invent Theme] How to replicate the demo site in 10 min

Pls follow following video tutorials for importing data and setting up the revolution slider for Invent Education theme. It also walks through the backend of LearnDash LMS. Here is the link to the video –

https://www.youtube.com/watch?v=fsZ7I-WTdp0

If you still have issues, pls send me an email through my ThemeForest profile page – , with the URL and a temporary login to your site. Thanks for your purchase!

Permalink.