4. Setting Up The Theme
Homepage
- Go to Pages -> Add New to create a new page.
- Give your page a title and in the main writing text add the following shortcodes:
[slider name="slider" width="980" height="400" cats="17" top="-60" shadow="shadow-xl" align="aligncenter"] [text text_align="text-center" size="40" line_height="1.2"]The Next Generation of WordPress Themes[/text] [text text_align="text-center" color="#666" width="880px" right="auto" left="auto"]This is just an ordinary WordPress page that has been customized using SuperMassive's huge array of shortcodes. Transform any page into a completely unique design in a matter of minutes all for $37. Click <a href="http://themeforest.net/item/supermassive-a-next-generation-wordpress-theme/132454?ref=GhostPool">here</a> to buy this theme today.[/text] [curved /] [four type="joint" height="260"] [text font="Lucida Grande, Lucida Sans Unicode, Arial" other="font-weight: bold;" size="15"]Lorem ipsum dolor[/text] [text color="#666"]Sit amet, consectetur adipiscing elit. Nam a augue augue. n vel feugiat felis.[/text] [image url="wp-content/uploads/earth-and-the-communication.jpg" width="190" height="140" left="10" bottom="10" shadow="shadow-s" /][/four] [four_middle type="joint" height="260"] [text font="Lucida Grande, Lucida Sans Unicode, Arial" other="font-weight: bold;" size="15"]Libero quis elitr[/text] [text color="#666"]Ut hendrerit, nibh quis auctor pulvinar, felis. Phasellus euismod sodales lectus.[/text] [image url="wp-content/uploads/business-hand-pushing-social-network-communication.jpg" width="190" height="140" left="10" bottom="10" shadow="shadow-s" /][/four_middle] [four_middle type="joint" height="260"] [text font="Lucida Grande, Lucida Sans Unicode, Arial" other="font-weight: bold;" size="15"]Rutrum non[/text] [text color="#666"]Praesent rutrum libero quis elit egestas pulvinar.[/text] [image url="wp-content/uploads/blackboard-with-network-communication-terms-on-it.jpg" width="190" height="140" left="10" bottom="10" shadow="shadow-s" /][/four_middle] [four_last type="joint" height="260"] [text font="Lucida Grande, Lucida Sans Unicode, Arial" other="font-weight: bold;" size="15"]Sollicitudin eget[/text] [text color="#666"]Suspendisse laoreet blandit turpis, ut congue nislt hendrerit, nibh quis auctor.[/text] [image url="wp-content/uploads/dirty-keyboard.jpg" width="190" height="140" left="10" bottom="10" shadow="shadow-s" /][/four_last] [clear /] [clear /] [two][image shadow="shadow-m" align="aligncenter" url="wp-content/uploads/business-technology.jpg" width="450" height="318"][/two] [two_last] [text size="20" width="100%" text_align="text-right" color="#808080" line_height="1.2"]A stylish panel[/text] [text size="40" width="100%" text_align="text-right" line_height="1.2"]Without Borders.[/text] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam a augue augue. Nam ac lacus a libero lacinia imperdiet at non elit. Vestibulum vel metus pellentesque nibh pulvinar consectetur. Praesent nisl risus, vestibulum sed pellentesque blandit, porttitor adipiscing ipsum. Vivamus tincidunt nisi at quam condimentum eget tempor lectus vehicula. Phasellus dictum, nulla sit amet semper facilisis. [button]More info...[/button] [/two_last] [clear /] [two type="separate" height="290"] [text width="200px"] <strong>Leget tempor lectus vehicula</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam a augue augue. Nam ac lacus a libero lacinia imperdiet at non elit. Vestibulum vel metus. Efficiently disseminate backend resources via real-time architectures. Seamlessly. [button]Read On...[/button] [/text] [image url="http://ghostpool.com/wordpress/supermassive/wp-content/uploads/large-flat-screen-with-nature-images-1.jpg" link="wp-content/uploads/large-flat-screen-with-nature-images-1.jpg" lightbox="image" height="175" top="35" right="20" reflection="reflection-s"] [/two] [two_last] [accordion] [panel title="Accordion Panel 1"]Morbi euismod suscipit enim, <a href="#">vitae hendrerit elit</a> cursus et. Vestibulum vel metus pellentesque nibh pulvinar consectetur. Nunc volutpat risus a libero condimentum. Vestibulum vel metus pellentesque nibh pulvinar. Vestibulum vel metus pellentesque nibh pulvinar consectetur. Nunc volutpat risus a libero condimentum sit amet placerat nisi feugiat. Morbi euismod suscipit enim, vitae hendrerit elit cursus et. Praesent nisl risus, vestibulum sed pellentesque blandit, porttitor adipiscing ipsum. Vivamus tincidunt nisi at.[/panel] [panel title="Accordion Panel 2"]Vestibulum vel metus pellentesque nibh pulvinar consectetur. Vestibulum vel metus pellentesque nibh pulvinar consectetur. Nunc volutpat risus a libero condimentum sit amet placerat nisi feugiat. Morbi euismod suscipit enim, vitae hendrerit elit cursus et.[/panel] [panel title="Accordion Panel 3"]Vestibulum vel metus pellentesque nibh pulvinar consectetur. Nunc volutpat risus a libero condimentum sit amet placerat nisi feugiat. Morbi euismod suscipit enim, vitae hendrerit elit cursus et.[/panel] [/accordion] [/two_last]
- To display slides in your slider from specific categories add your category IDs to the
cats=""option (go to Slides -> Slide Categories and get the IDs from the ID column). - Scroll down to the Page Settings panel, check the Hide Page Title option, change the Frame and Breadcrumbs drop down menu options to Hide and change the Layout drop down menu option to Fullwidth.
- Scroll down to the Discussions panel and uncheck the Allow comments option, if you cannot see the Discussions panel click here.
- Go to Settings -> Reading, select A static page option and from the Front page drop down menu select the page you just created (leave the Posts page drop down menu empty).
- You can create your own custom homepage layout by using different shortcodes and changing the shortcode options. For a full list of the shortcodes available click here.
Login Page Template
- Go to Pages -> Add New and create a page called "Login" or whatever you want.
- On the right-hand side in the Page Attributes panel select the Login page template from the Template drop down menu.
- Now go to Appearance -> Theme Options -> General Settings and add the page URL of the pages you just created in the Login Page URL text field.
Sliders
Creating Slides- Go to Slides -> Add New to add a slide to the slider.
- Scroll down to the Slide Settings panel below the main writing text box and from the Slide Type drop down menu choose whether to create an Image/Video Slide or Custom Slide.
- On the right-hand side you will see a Featured Image panel, click the Set featured image link to set an image for this slide.
- After uploading or selecting your featured image click the Use as featured image link in the image upload window.
- Enter your page, image or video URL that you want the slide to link to in the Slide URL text field.
- On the right-hand side you can add your slide to a category from the Slider Categories panel.
- You can add the slider shortcodes to any page.
- To insert a slider add the following code to the main writing text box on any post or page:
[slider name="fadeslider" cats="" slides="-1" width="980" height="400" align="none" nav="1" arrows="true" timeout="6" shadow="none" /]
- To add slides from a specific category add the slider category IDs to the
cats=""option (go to Slides -> Slide Categories and get the IDs from the ID column). - You can also change a variety of other slider options by adjusting the shortcode, for a full list of slider options see this page.
Portfolios
You can create portfolio posts just like posts and then you can create a new page, add something called a shortcode inside the main writing text, which will display your portfolio posts. The shortcode options can be adjusted to change a variety of portfolio options.
Creating Portfolio Posts- Go to Posts -> Add New to create a new post.
- Give your post a title and some text in the main writing text box.
- Scroll down to the Post Settings panel where you can control the way the post looks.
- On the right-hand side you will see a Featured Image panel, click the Set featured image link to set an image for this post.
- After uploading or selecting your featured image click the Use as featured image link in the image upload window.
- To add additional images/audio/images in a lightbox click the the Add Media button, upload your files and give them an order value of "1".
- On the right-hand you can assign your post to categories from the Categories panel.
- Go to Pages -> Add New and insert the following portfolio shortcode into the main writing text box:
[portfolio name="" type="three-col" cats="" col_height="" image_width="" image=_height="" per_page="9" orderby="date" order="desc" excerpt_length="50" title="true" shadow="none" reflection="none" pagination="true" preload="false" /]
- To add posts from a specific category to a portfolio shortcode add the category IDs to the
cats=""option (go to Posts -> Categories and get the IDs from the ID column). - You can also change a variety of other portfolio options by adjusting the shortcode, for a full list of portfolio options see this page.
Blog Pages
- Go to Pages -> Add New and insert the following blog shortcode into the main writing text box:
[blog images="true" cats="" image_width="640" image_height="250" per_page="9" orderby="date" order="desc" offset="0" excerpt_length="50" meta="true" full_content="false" title="true" shadow="none" reflection="none" divider="curved" pagination="true" preload="false" wrap="false" /]
- To add posts from a specific category to a blog shortcode add the post category IDs to the
cats=""option (go to Post -> Categories and get the IDs from the ID column). - You can also change a variety of other blog options by adjusting the shortcode, for a full list of blog options see this page.
Navigation
- Go to Appearance -> Menus to set up your header and footer navigation menus.
- Click the + button and create two menus.
- On the left-hand side from the Theme Locations panel select your menus from the Header Navigation and Footer Navigation drop down menus.
Shortcodes
This theme comes with several shortcodes. Shortcodes are pieces of code that can be inserted directly into your main text box on posts and pages to add certain content easily such as videos and dividers.
- Click the Visual tab at the top of the main text box on any post or page.
- Click the GP button to open the shortcode window.
- From the shortcode drop down menu select a shortcode, which will automatically be inserted into the main text box.
- You can view the full range of options for all the shortcodes from the following page.
Customising The Background
- Go to Appearance -> Background to add your own background colour or upload your own background image.
- If you only want to add a background colour with no background image you will still need to upload an image to overwrite the existing background image. Upload the transparent image that comes with the theme located at supermassive-theme/supermassive/lib/images/blank.gif.
Contact Page
- Go to Pages -> Add New to create a new page.
- Insert the contact form shortcode into the main text box e.g.
[contact email="youremail@address.com"]. - Replace
youremail@address.comwith your own email address. - If your contact form is not working click here.
Sidebars/Widgets
- Go to Appearance -> Sidebars, click the Add Sidebar link and give your new sidebar a name.
- Now go to any post or page and scroll down to the settings panel.
- Now select one of your sidebars from the Sidebar drop down menu.
- Go to Appearance -> Widgets and drag and drop widgets from the Available Widgets panel over the to your sidebar widget panels on the right.
- You can also add any of the shortcodes with the theme within a Text widget.
Customising Theme Design
You will probably want to customise the design of the theme. This may involve editing the HTML in the php files (theme structure) and the CSS in the style sheets (theme design). If you are not familiar with HTML and/or CSS you will want to hire a developer to modify the theme for you. You can contact one of these developers from here. If they are unavailable you will have to look elsewhere such as FreelanceSwitch.- Go to Appearance -> Theme Options -> CSS Settings and in the Custom CSS text box you can add your own CSS code to style the theme.
- The CSS code you add to this text box will overwrite the default styling of the theme.
- The benefit of adding your CSS code to the Custom CSS text box rather than editing the style sheets is that when theme updates are released your style modifications will not be overwritten.
- For example, to edit the link and link hover colours you would add the following to the Custom CSS text box:
a {
color: #ff0000;
}
a:hover: {
color: #000000;
}
- To change the colour of the post meta text you would add:
.post-meta {
color: #ff0000;
}
- In order to style the theme you need to know the name of the HTML elements you want to restyle. To get the names you should use the Firebug add-on in Firefox (recommended) or the built-in developer tools in Chrome or Internet Explorer 8+. All you then need to do is right click on a particular section of the web page and it will tell you what styling tags are controlling it and what files the styling tags are located in. If you're not sure how to use Firebug (or other developer tools) follow the tutorial here.
Translation
- Install the translation program Poedit.
- Open the supermassive-theme/supermassive/languages/en_EN.po file with Poedit.
- Translate the file with Poedit, click here for more information.
- Locate wp-config.php, which is in the root directory of your WordPress installation and change the language, click here for more information.
- If you want your website to support multiple language you can use the qTranslate plugin.
Using The Lightbox
Gallery Shortcode
- To enable the lightbox on the
[gallery]shortcode additemtag="div" link="file"to the shortcode, like so:
[gallery itemtag="div" link="file" columns="3"]
Manual Use
- To use the image or video pop up effect on any content add
rel="prettyPhoto"to your links as follows:
<a href="http://example.com/imagename.jpg" rel="prettyPhoto"><img src="http://example.com/imagename.jpg" alt="" /></a> <a href="file=http://www.example.com/video.flv&image=http://www.example.com/image.jpg" rel="prettyPhoto[pp_gal]">Text Link</a>
- If you want to group items in the lightbox add
[pp_gal]to the link e.g.rel="prettyPhoto[pp_gal]". - You can add the following files to the lightbox, using the following formats:
- YouTube: file=http://youtu.be/Sw-H3FoV2lc&image=http://www.example.com/image.jpg
- Vimeo: http://vimeo.com/8245346
- QuickTime: http://www.example.com/video.mov?width=780&height=418
- FLV/MP4/M4V/MP3: file=http://www.example.com/video.flv&image=http://www.example.com/image.jpg
- OGV/OGG/WEBM: http://www.example.com/video.ogv
- External Site: http://www.twitter.com?iframe=true&width=400&height=200
- To disable the lightbox script that comes with this theme open supermassive-theme/supermassive/lib/scripts/custom.php and find and remove:
jQuery("a[rel^='prettyPhoto']").prettyPhoto({
theme: 'light_square',
deeplinking: false,
social_tools: ''
});