Bloora - Premium WordPress Theme

Intro - top

BLOORA is a creative and very stylish WordPress theme.

If you like this template and the investment, please rate it :). If you plan rating it lower than 5 stars, please drop me an emal and tell me why so i can use your useful feedback in a future update. Thank you very much!

Features

• 960 grid system, witch is based on 12 columns of 60px & 6 modules on a row
• Unlimited positions
• 3 types of slideshows
  • Plus Slider with beautiful Parallax Effect
  • Nivo Slider
  • Wow Slider
• Twitter plugin
• PSD files included
• Built-in style for Suckerfish Drop Down Menu
• Blog page styling
• Portfolio page & styling
• Built-in style for Photo Gallery with automatic thumbnail creation
• Awsome contact page with Google Map which has personalised MAP PIN
• Very nice menu blur effect
• Random Testimonials display
• Google Fonts support
• Built-in style for newsletter module
• FAQ Page
• & many more

Many thanks to

• Yanone Kaffeesatz
• Code Font

Icons

• 32px Social Media Bookmark Icon

Photos

• Deviantart.com
• Creattica.com
• http://musett.deviantart.com/art/Adobe-Folders-211903847
• http://musett.deviantart.com/art/Antares-211907193
• http://musett.deviantart.com/art/Lens-211902151
• http://blog.tutegate.net/2011/05/postage-stamp/
• http://carl913.deviantart.com/art/ACID-ICON-184679000

Plugins used:

• jQuery Parallax - http://webdev.stephband.info/parallax.html
• NivoSlider - http://nivo.dev7studios.com/
• Superfish Menu - http://users.tpg.com.au/j_birch/plugins/superfish/
• Wow Slider - http://wowslider.com/
• Plus Slider - http://css-plus.com/examples/plugins/PlusSlider/
• jQuery LiveQuery - http://docs.jquery.com/Plugins/livequery
• Infield Labels - http://fuelyourcoding.com/scripts/infield/

Thank you ThemeForest!

What do you get in the package

• Bloora Theme - for WordPress
• Bloora Child Theme for developer customizations
• Documentation - and videos to get you started with your site in no time
• PSD Files - to get you started on mockups
• Lifetime Free Updates - Even if the theme will get updated, or it's value will increase, you will get all updates for free

Installation - top

The theme

1. download & unpack the .zip from your Downloads tab.

2. there are 2 methods of installing the theme in your WordPress site -
   

   1. Upload via WordPress
      1. access your wp-admin, go to Appearence > Themes > Install Themes > Upload
      2. select the bloora.zip from the theme folder ( from the unpacking of the main zip )
      3. activate
      4. done!
   2. Upload via FTP
      1. unpack the bloora.zip from the theme folder ( from the unpacking of the main zip )
      2. access your ftp, go to your wordpress installation / wp-content / themes and copy the extracted folder over there
      3. access your wp-admin, go to Appearence > Themes
      4. activate the Bloora theme
      5. done!
3. (optional) import sample data - in your dashboard go to Tools > Import, selectt WordPress, install the WordPress Importer, select the bloora.xml file from your package previewdata folder.
4. go to Appearence > Menu and build and select the Main Menu
5. (optional) go to Settings > Reading and select your blog page and homepage
6. all done!

Note: If you updating the theme ( not a fresh install ), always do it FTP method so that you don't lose images uploaded via the drag & drop uploader integrated in the Sliders Admin.

A video of the installation process:

Notice

For updating the theme always use the Upload via FTP ( B ) method if you have any files uploaded via the drag & drop uploader ( they will be lost if not )

Customising the theme to look like in the preview - top

One of the cool features of this theme is that preview data for sliders, fonts & footer menu gets auto imported so you can just start from there instead from blank. Also the posts & menu data from the preview is included in the package/previewdata/postsandmenus/bloora.xml if you wish to import that too via the WordPress Importer.

Menu

First thing you need to do after installing the theme is create your menu.

This is very to do from the WP Dashboard, Appearence > Menus

Add the menu items you want, the select your newly created menu as the Primary Navigation and click Save

Special Features- top

Special features unique to this theme.

Homepage explained

Note 1.1 - latest works widget can be configured like this

Note 1.2 - feature items can be configured like below; there is a total of six of them

Note 1.3 - set it up by installing this plugin

Note 1.4 - location is set in the third block of the footer in the preview; this is the code below; you can modify the text and location of course.

Note 1.5 - this is the twitter block

Post options explained

You can edit the home SEO description and keywords from the Theme Options.

Blog Page Options

WordPress offers no page that you can edit for the search or blog page or category pages or tag pages, so you can't efficiently change the sidebar location or the "Our Blog" text. Bloora however has a work aorund for this.

For the blog page - create a new page with this name "PAGE BLOG" - the sidebar location, headline and other settings for the blog page will now be feeded from there. Same goes for search - "PAGE SEARCH"

Footer Builder

This is the footer headquaters.

You can drag and drop containers ( blue color )into the footer from the right. Once a container is set, you can drag & drop premade widgets there or write your own content ( html supported ). The Lower Footer Separator is the part that separtes the upper footer from the lower footer.

Contact Form

This is a simple contact form included with the theme.

It can be included in the content via the [contactform] shortcode. You can change the message being delivered format, destination mail and subject format. There are also some placeholders:

If you need more functionality, we recommend the Contact Form 7 plugin which is fully compatible with this theme.

Sliders Admin

This is the admin for all sliders and the Media Gallery

This is awesome because data from the preview should be automatically imported in your install if your server is properly configured and install is done like shown in the docs. So you can just start your site with already made samples and edit those. It's very easy to add the sliders to your content. If you want it in the slideshow area ( header ) of a page / post you just select the slider from the Bloora Post Options tab on each post. If you want it in the content you just input this simple shortcode - [slider id="theidoftheslider"] if it's a slider or [tgallery id="theid"] if it's the media gallery.

A video from the Ammon theme ( same process ) on how to add a slider in the header area or in the content:

Media Gallery type

This is the page http://bloora.digitalzoomstudio.net/media-gallery/ from the preview

The galleries pictures can be configured from Theme Options > Sliders Admin, you can go ahead and edit the already configured gallery with the id lbgallery, or create a new one via New Slider and choosing Lightbox Gallery.

You can insert it in a post page via the simple shortcode [tgallery id="theid"]

Video Background type

The only thing you need to do here is write the path to the video you want to have as the background. This should be in .flv format.

Fullwidth Slider ( or Plus Slider )

This is the default slider. Also the slider that's setup on the first page of the preview site.

The slider is very easy to setup via the Sliders Admin.You can aditionally have a parralax effect by simply selecting the checkbox in the admin.

You can have a description on each slide. This is done from the Description box in each item's options. In the preview this is what we got; you can just copy / paste these codes:

First slide:

<h2 class="first-title"><a href="#1">High Performance</a></h2> <span class="clear"></span> <h2 class="second-title"><a href="#1">Aenean dignissim justo</a></h2>

Second slide:

<h2 class="first-title"><a href="#2">Lorem ipsum dolor</a></h2> <span class="clear"></span> <h2 class="second-title"><a href="#2">Aenean dignissim justo</a></h2>

So, you can have any html code there.

Anything Slider

This slider is mainly purposed for html content. You should know basic html to use it.

You should select inline as the type for each slide if you want html content. Some examples slides from the preview:

First slide:

<img src="https://lh4.googleusercontent.com/-1yjIE2BapQU/TnH5AI5iw-I/AAAAAAAAAIE/ogagLyyQSGY/slide1.png" class="alignright" alt="" /> <div class="details alignleft"> <h2>Ut faucibus dolor eget lectus dapibus ullamcorper justo tempus.</h2> <p>Nulla venenatis mi ante. Integer imperdiet ultricies pulvinar. Class aptent taciti sociosqu ad , per inceptos himenaeos. Sed ante velit, ullamcorper sed auctor at, eleifend tempor est. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> <a href="#" class="big-button yellow">Click here to find out more</a> </div>

Second slide:

<img src="https://lh5.googleusercontent.com/-AlCduxuLMus/TpuqNOed6PI/AAAAAAAAAVM/rczwscamYPA/s475/slide2.png" class="alignright" alt="" /> <div class="details"> <h2>Ut faucibus dolor eget lectus dapibus ullamcorper justo tempus.</h2> <p>Nulla venenatis mi ante. Integer imperdiet ultricies pulvinar. Class aptent taciti sociosqu ad , per inceptos himenaeos. Sed ante velit, ullamcorper sed auctor at, eleifend tempor est. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> <a href="#" class="big-button yellow">Click here to find out more</a> </div>

Piecemaker

Easy to use and awesome.

From Bloora 1.8, there is a special admin panel to control Piecemaker slides so you won't have to do any manual xml modification. You can insert the piecemaker in your site either by inputing the simple shortcode [piecemaker] or setting up a slider with Piecemaker as the Type in the Sliders Admin, and from then insert in the content via [slider id="theidyouset"] or including in the Showcase Area ( see Post Options ).

Shortcodes - top

Video Shortcodes

[video] - shortcode that helps you display your own hosted videos or audio

mandatory

source - the location of the file ( should be on the same domain as the site )

optional

width, height - size of the video

type - video or audio ( can be also youtube or vimeo if you want this custom skin )

Examples:

[video source="http://thezoomer.net/testimages/test.flv" width="700"]
[video source="http://thezoomer.net/testimages/rockshow.mp3" type="audio" width="700" audioimage="http://thezoomer.net/testimages/butterflies.jpg"]

[youtube] - shortcode that helps you display youtube videos

mandatory

source - the ID of the video [ example: http://www.youtube.com/watch?v=oAyZazDpYKs&feature=feedrec_grec_index / the bolded part is the ID]

optional

width, height - size of the video

Examples:

[youtube id="CPblAp8EtY4" width="700"]

[vimeo] - shortcode that helps you display vimeo videos

mandatory

source - the ID of the video [ example: http://vimeo.com/24504225 / the bolded part is the ID]

optional

width, height - size of the video

Examples:

[vimeo id="24504225" width="700"]

Toggle

group - the group in which the toggle belongs ( do not add this attribute if you do not want accordion toggles )

title - the title of the toggle

class - the class of the toggle, can be toggle1, toggle2 or toggle 3

Examples

[toggle title="Toggle Title" class="toggle2"]Content Area[/toggle]

Layout

Because there are several ( and with similar names ), we are going to display the demo page code used

Note: always remember to add _last to the last layout shortcode that is on the row.

Sliders

[slider id="pg"]

id - the ID - you can setup this gallery in Bloora Settings - Sliders

Portfolio

[portfolio]

Optional:

cats - comma separated categories, you can use here the id's of the gallery. If you do not know how to find out the category id, check the FAQ section below

hidecats - set it to "on" if you want to hide category menu above the portfolio

Brief:

You can create Portfolio Items via the Portfolio Items post type. - just like you create normal posts. If you want to sort your Portfolio items you need to add them to a category. The category format is Portfolio - Category Sample. So if your category is named like this, you should see a Category Sample menu button now that filters all the items beloning to this category.

The [sortable_portfolio] shortcode will create a sortable portfolio ( as seen in the preview page - Sortable Portfolio )

Examples:

[portfolio]

[portfolio cats="31,35"]

[portfolio cats="31,35" hidecats="on"]

[sortable_portfolio]

Recent Posts

[recent_posts]

getlast - get the post by "value" posts distance from the last post. For example getlast="0" gets the last post and getlast="2" returns the third to last post.

format - format1 or format2

wpqueryargs - other parameters you may want added that are compliet with the WP_Query args http://codex.wordpress.org/Class_Reference/WP_Query

for example wpqueryargs="post_type=dzs_portfolio" returns only portfolio items

Examples:

[recent_posts getlast="1" format="format2" wpqueryargs=""]

Sidebar

[sidebar]

id - the id of the sidebar, can be footer1, footer2, footer3, footer4, footer5, footer6, footer7, footer8, custom-sidebar-1, custom-sidebar-2, custom-sidebar-3, blog-sidebar, homepage-sidebar, page-sidebar

Examples:

[sidebar id="custom-sidebar-1"]

Historic

[historic]

year - the year

title - the title for that date event

order - enter "first" here if it's the first entry date

direction - left or right

Examples:

[historic year="2001" title="The beggining of the road" order="first" direction="left"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec porttitor erat viverra justo fringilla ultricies. Fusce dignissim libero in neque feugiat quis laoreet magna vulputate. Phasellus vestibulum, dolor eu molestie tincidunt, purus leo fermentum erat, vel hendrerit mauris massa sed erat.[/historic]

Our Team

[executive]

name

function

description

email

phone

facebook

twitter

gplus

linkedin

flickr

order - enter first if it is the first item

image - the thumbnail of that staff member

example: [executive name="John Smith" function="Co-Founder and Managing Director" description="Aliquam erat volutpat. Nullam nec sapien odio. Suspendisse et nunc sem, sed bibndum met. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur.<br><br>Email: john.doe@thedomain.com<br>Phone: 44 555 33 66" email="" phone="" facebook="" twitter="http://twitter.com/zoomitflash" gplus="" linkedin="" flickr="" order="" image="https://lh4.googleusercontent.com/-jDqoWDbsHgo/TpuGJl7Gk8I/AAAAAAAAAUY/hw2feFG454k/s214/dummy_person.jpg"]

[core]

name

function

tooltip

facebook

twitter

gplus

linkedin

flickr

order - enter first if it is the first item

image - the thumbnail of that staff member

example: [core name="Adolph Turner" function="Web Developer" tooltip="hmm" facebook="#" twitter="#" gplus="" linkedin="" flickr="" image="https://lh4.googleusercontent.com/-uLXCYCAedPA/TpuKnsbKFXI/AAAAAAAAAUw/g_jJGmUj058/s111/dummy_personx85.jpg"]

Google Maps

[googlemaps]

long - longitude

lat - latitude

width - the width of the google maps container

height - the height of the google maps container

Examples:

[googlemaps long="42.871986" lat="-106.344051" width="300" ]

You can access the admin from Theme Settings > DZS Gallery, you can add galleries, and in each gallery you can add items. On each item you will see 2 fields - Thumbnail and Link. Thumbnail is the visual thumb you can see in the demo also. Link is the url the thumb takes you when clicked. It can also be a lightbox gallery like in the demo if you set another ( or the same ) picture url in the Link field.

External Plugins - top

Newsletter

To install it just go to Plugins > Add New > Serach for Newsletter

Install & activate it, done!

Jigoshop

To install it just go to Plugins > Add New > Serach for Jigoshop

Install & activate it, done!

Once the plugin is installed, the Shop, Checkout pages will be created automatically. You just need to add them in the menu via Appearence > Menus, if you wish. It's very easy to add items in the Shop Page. You just go to Products, under Jigoshop in your Dashboard, and select Add Product.

When you created your products and inptued the data, the product will appear in the Shop page.

BuddyPress

To install it just go to Plugins > Add New > Serach for BuddyPress

Install & activate it, then go to the setup processs

Click the BP Compatibility link

Click Finish

Click installation wizard

On the first step, click Next

On the second step, click Next,

Where you are prompted to select the theme, select the Bloora Theme

At the last step, click Finish

All done!

FAQ - top

What's a WordPress category ID ? How do I find the category ID ?

Go to Posts > Categories and you'll find the ID in the link that goes to the specific category, as shown in the below picture.
 

What's the code for the equation on the homepage ?

This is it:

Make sure to have the editor in HTML mode

How do I get the newsletter widget like in the demo homepage?

In your WordPress Dashboard go to Plugins > Add New and in the Search box write Newsletter then press Search Plugins and it should be the first result

After you installed it, just drag it where you want the plugin to appear via the Widgets page.

…can I add a right sidebar on the frontpage? Is the frontpage easy to customize under the slider? Thanks and good luck.

Love the theme so far, but I can't for the life of me figure out how to add a slider to the homepage.

I cannot find the coding for the static content slider? Can you please provide the code you used in the demo for the static content slider?

The demo site makes mention of the "sidebar shortcode" but it is not in the documentation. Can you give an example of its use?

Hi, Great theme. I am trying to customize the showcase background area. Can you tell me how to add my own repeat bg pattern? Thanks

.showcase {
    background: url("../images/bg-slider.png") repeat-x scroll center top #111;
}

how can i make it so the entire blog post shows up without having to click read more or the post title ?

Just enable Excerpt field from the Custom Fields area ( more information here http://digitalzoomstudio.net/faq/ ), copy the content from your content area and paste it in the newly enabled excerpt field. Then click Update, all done.

How can I add a slide with CSS text on top

In the Sliders Admin, you select Phoenix Gallery as the type, then add a new slide, then select inline as the Type for that item, then copy paste this code http://pastie.org/2919214 That's all, you can use simple css to configure this.

Where can I get the shortcodes for the 'Call to Action' buttons that are on the demo site?

SHORTCODE - [button class="medium-button green" link="http://google.com"]more[/button] HTML - < a class="medium-button green" href="#" >medium-button green ( without the spaces )

Everything works fine, but i want to know if it's possible to open the first item of the accordion/toggle when the page loads.

Insert this script anywhere in the post / page

i also changed the Full width container so my twiiter will show but its just blank now [twitter_full id="Vivedesigns"]

Try [twitter_full id=Vivedesigns] ( without the quotes )

I'd like to insert the Bloora Contact Form in my 'contact page', but i don't know how... Can someone help me ?

If you want only the contact form, insert this: [contactform] If you want your contact page to look exactly as the demo, insert this:

[raw] 
[contactform] 
[/raw]
 
 
GET IN TOUCH WITH US
 
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. 

Address: Street Address nr 100, 4536534, Your Town, United States 

Phone: (212) 555 55 00 

Email: office@yourwebsite.com 
Web: www.yourwebsite.com 

 

How to change the Here we are text on the map

The PSD for that is in psd/psd elements/marker-image.psd The image that needs replaced is in images/marker-images

I bought this template but i have a lot of dificult to create similar pages to preview. I would like to known if is possible to share, or send email, with description of main and contact pages.

You will find all the pages and posts ready for import in the main package in the previewdata folder. It's the xml from there. You just have to import it via Tools > Import from your WP admin. Even made a video here -> http://www.screenr.com/ipDs

What are the size dimensions for pictures in the Sortable Gallery

You can modify the size dimensions for pictures in the Sortable Gallery from the WP Dashboard > Portfolio Items > Settings > Thumb Width / Height

I have installed and configured the theme. In your theme, there is a page called "Interactive Content", but i don`t find it when I import the xml with your configuration.

That is a handled by Sliders Admin. You go to that page, click Add Slider, then in the newly created slider, you choose Interactive Content as the Type, then you go ahead and complete the blocks with content.

I know how to enavle and disable the color changer. But after I pick a color how to I get it to stay there and disable to changer? As soon as I disable it it reverts back to the default?!

In Theme Options > Skinning , mark Theme Skin to Custom

…can I add a right sidebar on the frontpage? Is the frontpage easy to customize under the slider? Thanks and good luck.

Sure, you can add any sidebar in the content. You can select a sidebar and layout for each post / page individually ( as seen in the post options picture above )

Love the theme so far, but I can't for the life of me figure out how to add a slider to the homepage.

No problem, made a video here:

I cannot find the coding for the static content slider? Can you please provide the code you used in the demo for the static content slider?

Sure,

You select the Type to Inline and write this code in the Inline Content field : 

<div class="static_content"><div class="sc-container"> <div class="video-container alignleft"> <object width="540" height="360"><param name="allowfullscreen" value="true" /><param name="wmode" value="transparent" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=5233789&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=74AB00&amp;fullscreen=1&amp;autoplay=0&amp;loop=0" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=5233789&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=74AB00&amp;fullscreen=1&amp;autoplay=0&amp;loop=0" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" wmode="transparent" width="540" height="360"></embed></object> </div> <div class="details"> <h2>STATIC CONTENT</h2> <p>Aliquam vehicula purus quis massa eleifend feugiat. Suspendisse potenti. In lacus justo, malesuada nec interdum id, facilisis quis tortor. Donec velit mi, ornare eget hendrerit non, feugiat sit amet libero. Vivamus dapibus, nibh luctus consectetur posuere, ligula tellus sagittis felis, ac sollicitudin massa odio vitae massa. Nunc elit mi, semper eu pulvinar malesuada, tincidunt in arcu. Etiam sed ligula urna, sed fringilla diam. </p> <h4>ANOTHER TAG HERE</h4> <a href="#" class="medium-button blue">Buy now!!</a> &nbsp; <a href="#" class="medium-button green">Another action</a> </div> </div></div>

How do I add photos to the media gallery as per your live preview? [tgallery id=""] ... what do i put here? And how do i add photos to the gallery?

You create the gallery in the Sliders Admin ( thumb gallery type ), enter an id add your photos, then in the post / page you want to add the gallery id you just enter this shortcode [tgallery id="theidyousetintheadmin"]

Can you please tell me how to add a youtube video as a video background in the sliders admin

Create a new slider with INLINE as the TYPE And paste the youtube video embed code there

The demo site makes mention of the "sidebar shortcode" but it is not in the documentation. Can you give an example of its use?

[sidebar id="footer1"] footer1 - footer4 Or [sidebar id="blog-sidebar"] Or if you go to Widgets area and expand Custom Sidebar 1 for example, it will give you exactly the code you need

Hi, Great theme. I am trying to customize the showcase background area. Can you tell me how to add my own repeat bg pattern? Thanks

Go to Appearance > Theme Options and in the Extra CSS tab write:

.showcase {
    background: url("../images/bg-slider.png") repeat-x scroll center top #111;
}

Replace ../images/bg-slider.png with your own pattern or image.

How do you change the pop up google map at the bottom of the webpage (in the contents widget, with We on maps).

You go to Theme Options > Google Maps and change default latitude and longitude to the coordinates that you wish. You can also change them individually on each page / post via the Abrax Post Settings. If you check Enable Google Maps in there, the google map will appear on top of the post like in the demo, on the contact page. If not, it will stay hidden on bottom, but with the coordinates you give there.

I need to have nine menu buttons but when I do this they spread out and overlap with my logo. Is there a way to have two rows of menu butons? If so how do I do it. Also how do I position my logo further over to the left in the header?

Two rows of menu items > Go to Theme Options > Extra CSS and write

#header ul.menu {
  width: 300px;
}

For placing the logo further to the left

#logo {
  left: -30px;
}

Developer Tips - top

This theme is ready to be extended for your client. There are many cusomization possibilities to this theme provided you have the html, css and php knowladge.

Child Theme

Best way to modify the theme is by modifiying the child theme included. That is because on future updates, when you'll want to update all the files of the theme, you'll be safe to do it because all your modified files are placed inside the child theme. Only the style.css file is included in the child theme, but you can modify php files too, you just need to copy them from the main theme.

Modify the Theme Structure

In our themes we use two global extensible function to define the theme structure. If you are used to the normal WP structure, you will know that you may find it in - index.php , category.php, archive.php, author.php , etc. -in our themes you will find it under functions.php - royale_above_loop and royale_bellow_loop that represent just what their name suggest. The content between them is found in loop.php or loop-single.php

Digital Zoom Studio

Go To Table of Contents