PowerMag
The Most Muscular Magazine Theme
- Created: 03/10/2013
- latest Update: 05/14/2014
- By: djwd
- themeforest.net/user/djwd
- Support: http://djwd.ticksy.com
Thank you for purchasing PowerMag. If you have any questions that are beyond the scope of this help file, please feel free to open a ticket on the support site, thank you.
Getting Started
Uploading the Theme
Method 1: To upload the theme you need to extract the downloaded zip file. Once extracted you'll see a file named powermag.zip. Go to Appearances > Themes and click upload. Select the "powermag.zip" file on your hard disk.
Also check out Wordpress Codex: http://codex.wordpress.org/Using_Themes
Migration from another theme
If you are migrating from another theme, you need to resize all the images and thumbnails to the right size. Fastest way to do this is by using the Regenerate Thumbnails plugin, simply install, navigate to Settings → Regen. Thumbnails and run it. Job done.
Customizations Tips
Before you attempt any customization please get familiar with one of the web inspectors. In the end you will save a huge amount of time. If you are on Chrome it is already installed, simply right-click on the element you want to change and select "Inspect Element" or press F12. If you are using Firefox you can install the Firebug addon.
When you open it you will see two panes. The markup is on the left with the css on the right. Once you target the element you want to change, you have access to all css right there in the browser. Once you change a css property you can see the results instantly.
Once you've figured out what elements you want to change, you can paste those changes into the "Custom CSS" box in the theme options. If you edit the actual css files then you might have some issues when you upgrade the theme. Keeping your css customizations in the theme options will keep them nice and safe.
Adding Menus
To add your menus you go to Appearances > Menus and you can create the menus there. There are three menu locations: Primary (main navigation), Utilities and Footer. To learn more about creating menus please refer to the WordPress Codex. The little colored corners are added separately because you may want to add other menu items that are not categories and give them a color anyway. To make it appear you need to set the desired hex color code in the description field of the menu item as explained in the documentation. For example if you wanted red you would paste in #FF0000.
Note: If you can’t see the description field you can enable it by activating it from the Screen Options at the top right of the Setting > Menus admin page.
Also CSS color names like 'hotpink' and 'orange' are supported, for the full list check out this URL: http://www.w3schools.com/cssref/css_colornames.asp
Adding Your Logo
Go to Appearances > Theme Options > Basic Settings > Header Logo Upload. Click upload and navigate to the file on your hard disk (dimensions for the live preview logo are 202 X 61 pixels).
Category Styler
You have quite a few options for customizing the categories. All the options are in there when you edit the category.
NB: any styling you make to a category will also affect its sub-categories.
Color: This is the main category skin color.
Background Color: If you want a solid color as page background, select it here
Background Image or Pattern: Add a background. Simply upload the file and save.
Background Position: Select wheather you want a full screen background or a tiled one. Usually the first one is suitable for big pictiures, the second for patterns.
Custom CSS: Enter here any custom CSS for the specific category.
Enable Featured Slider: Check the box if you want the slider to appear and bring in featured posts from that category.
Enable Featured Carousel: Check the box if you want the vertical carousel to appear and bring in featured posts from that category.
For best results you probably want the menu item corner linking the category to be the same color as the category itself, in order to do so simply copy the HEX code from the category color picker and paste it in the menu description as explained in Getting Started > Setting the Menu
Single Post
Post Options
There are quite a few options for the single post. Let's get through them:
<iframe width="560" height="315" src="http://www.youtube.com/embed/5zFWVXr-LHY" frameborder="0" allowfullscreen></iframe>
Comment Type
Select wheather to use FaceBook Comment or Regular (Ajaxified) WP Comments for the post.
The advantage of using Facebook comments is that you will get more reach on social media networks. However, keep in mind that user anonymity is gone and that could stop people voicing their opinion if the subject matter elicits strong opinions or is controversial. There are plenty of well written articles on the web dealing with WP vs. FB comments so a little research may be in order to figure out what is most appropriate for your website.
Reviews
Enable Review?
Here you mark the post as a review so that the various loops in the theme will recognize it, look for a score and show the stars it was rated
Enable User Rating?
Adds the possibility for your users to give a rate too on the subject.
Criteria Name
Here you can break down the various parts of the review e.g., Graphics, Value, Sound and so on. Give each one a description and a score by dragging the slider. Leave the name field empty if you don't need it.
Avarage
An avarage value will be automatically calculated from the criteria sliders, and this will be you final overall score. You can change it at the end and save the post if you don't want a mathematic avarage. Watch out not to drag the sliders after that or the value will be overridden with the mathematic average again.
Rating Type
Select Stars or Percentage rating. For Stars Type rating the total value will be outputted in a 0 - 5 form. For the Percentage Type rating the 0 - 100 scale will be kept instead.
Criteria Header/Rating Tag/Longer Summary
These last few options are used to control how the criteria headers and summaries that appear on the post.
Position
Select the position you want the review box to appear. The 'Top' option will output the rating box right under the featured image (when present). The 'Bottom' one will appear at the end of the post. The 'Floated' option will appear floated on the left, with a half-width.
Warning: Please keep in mind that the Floated option will not work with posts made with the Page Builder, manually insert the text you want to be next to the review box and then use the page builder if you need to.
Other Options
Full-width Layout
Disable the sidebar if you want this post to have a full-width layout.
Sidebars
If you previously created some extra sidebars through the Sidebar Generator in the Theme Options, then you can select them here.
Theme Options
To access the theme options go to Appearance > Theme Options. There are plenty of options that will help you setting up your Blog without touching any code. Let's loop through most of them:
Basic Settings
Header Logo Upload
HomeStyle
- Widgetized Home
This is an important option for your Blog. Selecting Widgetized Home will transform your homepage in a fully widgetized area divided in three sections:
- HomePage Big (left)
- HomePage Medium (middle)
- HomePage Small (right)
You can then move to Appearance > Widgets to set up your widgets on those sidebars.
For best results and to replicate the live demo, drag the widgets which name starts with HP on the homepage 'sidebars'. Those widgets are especially designed to fit the homepage.
- Classic Blog
If you select the Classic Blog option, your front page will act as a normale blog page, displaying latest posts and the regular default sidebar.
Blog Entries Style
Select the style of the post entries for the Classic Blog homepage and archive pages
Post Excerpts
Notice: Please be aware that using Auto Trim will not output shortcodes in post excerpts.
Retina Support
Enable this if you want the Retina Support to be activated.
When your users load a page, retina.js checks each image on the page to see if there is a high-resolution version of that image on your server. If a high-resolution variant exists, the script will swap in that image in-place.
The script assumes you use Apple's prescribed high-resolution modifier (@2x) to denote high-resolution image variants on your server.
For example, if you have an image on your page that looks like this:
<img src="/images/my_image.png" />
The script will check your server to see if an alternative image exists at this path:
"/images/my_image@2x.png"
PowerMag already comes with retina graphics! That means that all images used for the theme like social icons, rating stars, etc..already have thir retina version available in theme's folder
Custom Favicon
Upload a 16px x 16px Png/Gif image to represent your website, this will be displayed right next to your address URL and as a bookmark icon.
Footer Logo Upload
Select the image to use as logo for the footer. The PowerMag footer logo size is 100x22 px.
Footer Credits
Write here your copyright credits or other footer stuff.
Single
Display Breadcrumb
Enable/Disable breadcrumbs.
Breadcrumbs appear horizontally across the top of a web page, often below title bars or headers. They provide links back to each previous page the user navigated through to get to the current page or—in hierarchical site structures—the parent pages of the current one. Breadcrumbs provide a trail for the user to follow back to the starting or entry point.
Typical breadcrumbs look like this:
Home page > Section page > Subsection page
Display Related Posts
Enable/Disable related post. If enabled you can chose how many related posts to display. Related posts are picked by tags similarities.
Author Info
Show/Hide author box with biography, avatar and social icons.
To display the avatar you need to add a gravatar image. Go to http://www.gravatar.com and signup with the exact same e-mail address in your wp user profile. Upload your photo or image and save it. This will then automatically appear in the author page and in your comments around the web.
To get the biography to appear you need to simply fill out the "bio" box in your user profile page in the wp dashboard > users.
To get the social network icons to appear you need to put in your links into the relevant boxes.
Back to Top
Show/Hide the back to top arrow that appears on the bottom left of the browser window.
Sidebars
Sidebar Position
Move the sidebar left or right
Sidebar Generator
In this block you can generate new sidebars to attach to singular posts or pages. Click on Add SIdebar, type a name, and that's it. Now move to the Widgets page and drag your widgets in the sidebar you just created.
To attach the sidebars to posts or pages select them through the meta box in the single post options
Home Page Sidebar
Decide wheather to use the default Sidebar or the HomePage Small on the homepage when the Widgetized homepage is selected.
Sliders
On this tab you can activate the homepage slider(s) and the vertical carousel. Drag the sliders to select how many Posts you want to display for each slider, and the animation settings.
To feature a post or page on a particular slider see the Single Post section of this very documentation
Backgrounds
Set a Background color or Pattern
If you wish to have a solid color or a repeated pattern as your blog background, upload it here.
Full Page Background
If you wish to have fullscreen image as your blog background, upload it here. The image will be stretched to fit the entire screen, so please make sure you're uploading pretty big images here to avoid quality loss.
Make the Background an Ad
If you wish to have a clickable background, for advertising purposes for instance, enter the target link here. The whole background will automatically be clickable.
Layout Style
Select if you want a boxed container or a full width with free blocks. If Boxed you can set the background of the inner container and enable/disable the shadow around it.
For the Free Blocks option avoid complicated backgrounds or patterns.
Colors
On this tab you can select all the color background and text colors of your website. The options are pretty self-explanatory.
Typography
If you wish to change default theme fonts, this is the way to go. Headings are automatically sized, you can select the base font size for the body copy, all other sizes will change accordingly.
To preview the available fonts check out the Google Webfonts resource.
Miscellaneous
Top Ad Code
Collapsible Box
To activate the home page toggle (the hidden space under the slider) navigate to Theme Options → Home page and enable the Home Toggle checkbox.
- Mailchimp newsletter
If you have a MailChimp account managing your newsletter, you can dedicate the hidden space to a newsletter subscription form. In order to do this you need to enable the Insert Newsletter Info checkbox. Fill in the Info Box with any additional information you might want to give to your users, then paste your target URL in the MailChimp URL field.
MailChimp URL Example:
http://yourdomain.us5.list-manage.com/subscribe/post?u=f05978bb168246549b07542d68&id=7acf9edf41
To find your MailChimp target URL, login to your MailChimp account, then navigate to Lists → For your Website → Sign up Form Embed Code. You will see something like this:
The Highlighted URL is the part you need to copy and paste into the MailChimp URL field.
- Custom Content
Alternatively you can add your own content into the Home page hidden space by enabling the Or/And add any custom content checkbox. You can place any text or HTML code in this text area.
Display Meta Details on Archive Pages
Enable/disable tags and categories on archive pages.
Display Current Date
Show/Hide the date block next to the navigation.
Home Tabs
Select the Home Tabs position and for each tab, select the displaying criteria, empty tabs will be ignored.
Advanced
If you know what your are doing, you can pass custom CSS rules or Javascript code in this area, and have them outputted in the head section of your pages.
It's always the best choice to override existing styles through this Tab, so you can safely update PowerMag without losing your changes.
Page Builder
PowerMag comes with the awesome Premium Plugin from CodeCanyon Visual Composer for Wordpress specifically customized for the theme.
No install is required of course, just install the theme and you're ready to go.
The following chapter is an extract of the official documentation of the parts you need to know in order to master its use. Also check out this very helpful video tutorial:
Concept
After installing and enabling Visual Composer plugin you can start creating your layouts. There's one concept/design pattern you should know.
In the Visual Composer editor mode you'll have two menu sections with content elements to place on the working canvas.
- Popular Layout (Columns)
- Content Elements
Popular Layout (Columns)
This is set of "empty" columns (grid) which you can place on your working canvas. After placing it to the working canvas you can drop-and-drop elements from "Content Elements" section to fill those columns with content blocks.
That way you can group elements in logical groups and then drag them around with your mouse (to re-position).
Content Elements
This is a list of available content elements that can be placed on the working canvas or inside of the columns. Think of them as bricks. With those bricks you are building your layout. Most of the content elements have options, to set them click pencil icon. To save changes click save button.
List of avalaible content items:
- Text block
- Twitter widget
- Separator (Divider)
- Separator (Divider) with text
- Message box
- Facebook like
- Tweetmeme button
- Google+ button
- Pinterest button
- FAQ (Toggle)
- Single image
- Image gallery
- Tabs
- Tour section
- Accordion
- Teaser (posts) grid
- Posts slider
- Widgetised sidebar
- Button
- Call to action button
- Video player
- Google maps
- Raw html
- Raw js
After placing this content elements to the working canvas, click pencil icon to see options available for this particular shortcode.
FAQ
- Can I insert 3rd party shortcodes?
Yes. In the WYSIWYG editor you can insert [shortcodes] as usual. Basic scenario: Insert Text Block from Content Elements section, click Edit button and in the editor, enter your shortcode or place it between existing text content.
- I have a layout that I built with Visual Composer and now I want to "clone" for the other page/post, how can I do that?
Great question! Starting from 3.0 version you can create a "Template" and then insert it on any other page. Here's how:
- Design your layout.
- Select "Save current page as a Template" from "Templates" menu.
- Enter template name.
- Next, open (or create new) page where you want to place that template.
- Select your template from the "Templates" menu.
- It will be appended to the current page.
Another way. Switch to Classic mode and copy shortcodes that Visual Composer generated for you, create new page and paste them and switch to Visual Composer mode. You should see your layout copied.
- How can change background color for Tabs, Tours and Accordion elements?
To do that you will need to override default CSS rules. This is easy, open your theme style.css file (or another file wherr your css rules located) and place this snippet in it:
|
1
|
div.wpb_content_element .ui-tabs .ui-tabs-nav li, div.wpb_content_element .ui-accordion .ui-accordion-header, div.wpb_tabs .ui-tabs .ui-tabs-panel { background-color: #ff0000; } |
This will re-color background to red color, change hex value to your color.
- Can I add my own shortcodes sets?
In short - Yes. Please check advanced documentation file (this is something that should be done by php developer).
- I can't switch to Visual Composer, Erro messag: "Please switch default WordPress editor to ‘Visual’ mode first"
Please take a look at this video demo http://www.screenr.com/ash8 how to switch to "Visual" mode.
- There are no content in third tab/tour section or accordion, what should I do?
Please take a look at the video demo: http://www.screenr.com/v4x8
Make sure you are running latest WordPress version.
Shortcodes Manager
PowerMag has a really handy Shortcodes Manager built-in. That means you don't have to remember the syntax of hundreds shortcodes, but you can insert them directly through an easy to use user interface. Most of the shortcodes are based on Twitter Bootstrap Elements specifically styled for PowerMag. Including those awesome components has never been easier, no coding knowledge is needed!
To activate the Shortcode Manager click the shortcode icon right next to the default Add Media button.
Now select the desired element from the dropdown menu
Let's say you want to insert a button, select Button. You'll see all the options available for the button element
After you entered the information you needed, just click on the insert button, and the shortcode will be imported in your post editor
[button text="Button Text" url="#" size="medium" type="success" icon="off" iconcolor="white" target="_blank"]
Cool huh?
Have fun with all the available elements and options, if you're having troubles or need support for specific elements, drop me an e-mail through my profile page.
Widgets
PowerMagTheme comes with several built-in custom widgets. To setup a widgetized area, navigate to Appearance -> Widgets and use the WordPress drag and drop interface to drop widgets into the desired widgetized areas.
HP Category Regular - Magazine HomePage Widget
This widget lets you place in the main content a widget containing the latest posts and reviews for a specific category (or all categories). You can set a group title, that represents the content you are displaying, and set the maximum number of posts to show.
HP Text Only - Magazine HomePage Widget
This widget lets you place in the main content a widget containing the latest posts and reviews for a specific category (or all categories) in a text-only form.
Ads Widget - Magazine, Sidebar, Footer, HomePage Small
The Ads widget lets you place Ads in your pages. You can display ads through an Ad code, such as Google AdSense, or upload and link an image yourself.
Advice: best results come with: 2x125px, or 1x300px banners. In this last case just leave the second banner block empty.
Best Reviews - Sidebar, Footer, HomePage Small
This widget will display the latest reviews. Just set a name, category, and maximum reviews to display at most.
Recent Posts - Sidebar, Footer, HomePage Small
This widget will display the latest posts. You only need to set the maximum posts to show at most.
Popular Posts - Sidebar, Footer, HomePage Small
This widget will display the most popular posts based on comments and views. You only need to set the maximum posts to show at most.
Social Counter - Sidebar, Footer, HomePage Small
This widget grabs the number of your Twitter Followers, Facebook Likes and RSS Subscribers. Just enter your Twitter ID, Facebook ID and your FeedBurner URL.
Notice: for being allowed to grab FeedBurner subscribers number, you need to activate Awareness API service. Login to Google FeedBurner and navigate to your feed → Publicize tab → Awareness API (in the sidebar). From that page, activate the Awareness API service. Changes can take up to an hour to be effective.
Twitter feeds - Sidebar, Footer, HomePage Small
This widget will show your latest tweets. Just enter a title, your Twitter ID, and the number of tweets to show.
Facebook Page - Sidebar, Footer, HomePage Small
This widget adds the official Facebook Like box in your sidebar. You only need to enter your Facebook page URL. (e.g. http://www.facebook.com/facebookuser)
Flickr - Sidebar, Footer, HomePage Small
This widget grabs the latest pics from a Flickr account. Enter the User ID of the desired account, if you don't know it just hit the Find it here link and follow the instructions. You also need to set how many pics you want to display.
Video Embed - Sidebar, Footer, HomePage Small
This widget lets you embed videos from YouTube, DailyMotion or Vimeo directly into your sidebar. Just enter the desired Video ID.
Example link: http://www.youtube.com/watch?v=UxpWpv3_pNc
Enter: UxpWpv3_pNc
Source and Credits
Thanks to:
- WordPress
- ThemeForest
- ThemeShaper
- jQuery
- jQuery Easing
- FlexSlider
- jCarousel Lite
- Google Fonts
- SuperBox
- Font-awesome
- Retina.js
- Sidebar Generator
- Twitter Bootstrap
- jQuery Masonry
Thank you for purchasing PowerMag. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here: http://themeforest.net/user/djwd,
Thank you.
djwd