“OneCommunity” Documentation by “Diabolique Design”


OneCommunity - BuddyPress Theme

Created: 31 Dec 2012
By: Diabolique Design

Thank you for purchasing OneCommunity theme. If you have any questions that are beyond the scope of this help file, please visit my Support Forum. Thanks so much!
P.S. Before you ask any question please read Support section on the item page:


Table of Contents

  1. I. Theme and BuddyPress plugin installation
  2. II. How to display menu on the top?
  3. III. Contact form installation
  4. IV. Don't see some font glyphs?
  5. V. How to change OpenSans font?
  6. VI. Style customisation
  7. VII. Shortcodes
  8. VIII. How to add subtitle and thumbnail caption to blog post?
  9. IX. How to install live search?
  10. X. How to translate theme?

I. Theme and BuddyPress plugin installation - top

1. Compress OneCommunity folder with a theme to a ZIP file → Go to Apprearance → Themes → Install themes → Upload OneCommunity.zip file and activate theme after BuddyPress plugin installation. If you have already installed BuddyPress in past then go to 3rd step.

2A. Go to Plugins → Add New → install & activate BuddyPress plugin.


2B. Now go to Settings → Buddypress and select everything like on the following screenshot and SAVE:


2C. Go to Settings → Permalinks select Post name and SAVE

If you used BuddyPress' built-in forums then you have to migrate to bbPress - Instructions

2D. Install and activate bbPress plugin.
If bbpress is installed then go to Pages → Add New and create page called Forum with pasted (in Text mode) following shortcodes:
[bbp-forum-index]
[bbp-topic-index]
...and selected Page with title template under Page Attributes.


Generally slug of Forum page should be forum. If you want to use a different slug then you should change slug for tile too (in the language file).

Disable comments for this page:


Press Publish button.

Go to Forums → New Forum and create forum called Group Forums.

Go to Settings → Forum and make all settings like on the following screenshot (and SAVE):



Make sure your each User Group has active a Forum Discussion. When you go to specific Group and Forum tab is not visible then go to Admin (inside group) -> Forum tab -> check Yes. I want this group to have a forum and save.

2E. Go to Pages → Add New and create pages called Register and Activate. Now go to Settings → BuddyPress → Pages and make all settings like on the following screenshot:


3. Create empty page called Home (Pages → Add New) with selected Frontpage 1, Frontpage 2 (slider with blog posts), Frontpage 3 or Frontpage 4 (metro posts) page template (My theme must be active now):



4. Go to Settings → Reading, select Front page: Home and SAVE changes (do not touch Posts page).


5. Create empty page called Login (Pages → Add New) with selected Login Page template (permalink must be login - permalink can be changed in the language file).

6. Create empty page called for example Password Recovery (Pages → Add New) with selected Password Recovery template. Permalink for this page must be recovery - permalink can be changed in the language file.

7. Create empty page called Blog (Pages → Add New) with selected Blog template.

8. Go to Settings → General and check Anyone can register.

9. You can setup all widgets like on the screenshot:
Important: Each widget must contain title



10. Go to Settings -> Media and setup Thumbnail size - 90x90 and check Crop thumbnail to exact dimensions (normally thumbnails are proportional)

11. You can edit theme settings under Appearance → Theme Options.
Go to Appearance → Menus, create new menu called (for example) Main. Click on the Screen Options and select everything like on the following screenshot:



Now move some pages into Main menu.
IMPORTANT: Select Main menu as your primary navigation and SAVE

III. Contact form installation - top

Install Contact Form 7 plugin.
Copy shortcode with contact form from Contact settings page. Now create page called "Contact Us", paste shortcode with contact form and select Contact Form template under Page Attributes.



IV. Don't see some font glyphs? - top

If you have non-english website and you don't see some font chars then you have to choose font which contains more glyphs.
Open font/font.css
and replace:
@font-face {
    font-family: 'QuicksandBook';
    src: url('Quicksand_Book.eot');
    src: url('Quicksand_Book.eot?#iefix') format('embedded-opentype'),
         url('Quicksand_Book.woff') format('woff'),
         url('Quicksand_Book.ttf') format('truetype'),
         url('Quicksand_Book.svg#QuicksandBook') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'QuicksandBold';
    src: url('Quicksand_Bold.eot');
    src: url('Quicksand_Bold.eot?#iefix') format('embedded-opentype'),
         url('Quicksand_Bold.woff') format('woff'),
         url('Quicksand_Bold.ttf') format('truetype'),
         url('Quicksand_Bold.svg#QuicksandBold') format('svg');
    font-weight: normal;
    font-style: normal;
}
for:
@font-face {
    font-family: 'QuicksandBook';
    src: url('Quicksand_Book-all.eot');
    src: url('Quicksand_Book-all.eot?#iefix') format('embedded-opentype'),
         url('Quicksand_Book-all.woff') format('woff'),
         url('Quicksand_Book-all.ttf') format('truetype'),
         url('Quicksand_Book-all.svg#QuicksandBook') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'QuicksandBold';
    src: url('Quicksand_Bold-all.eot');
    src: url('Quicksand_Bold-all.eot?#iefix') format('embedded-opentype'),
         url('Quicksand_Bold-all.woff') format('woff'),
         url('Quicksand_Bold-all.ttf') format('truetype'),
         url('Quicksand_Bold-all.svg#QuicksandBold') format('svg');
    font-weight: normal;
    font-style: normal;
}

V. How to replace OpenSans font? - top

Open functions.php and replace source of font here:
wp_register_style('OpenSans', 'http://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic');
wp_enqueue_style( 'OpenSans');
You can use fonts from google - http://www.google.com/webfonts
If you want to replace Open Sans for Yanone Kaffeesatz font then replace
wp_register_style('OpenSans', 'http://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic');
wp_enqueue_style( 'OpenSans');
for
wp_register_style('Yanone', 'http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz');
wp_enqueue_style( 'Yanone');
Now open style.css and replace Open Sans for Yanone Kaffeesatz.


VI. Style customisation and predefined styles - top

Styling of theme is inside style.css file.
Own style you can paste into myStyle.css file for example - .tile { background-color:#cccccc; }

Where I can change logo position:
#logo { margin-top:40px; ... }
Where I can change tile background color?
header .tile { ... background-color:#ff9801; ... }
header .tile:hover { background:#5d6da2; background: linear-gradient(135deg, #5d6da2 0%,#5d6da2 50%,#546394 50%,#546394 100%); }
Where I can change button style?
#wp-submit, #signup_submit, a.more-link, .wpcf7-submit, #post-topic-reply #submit, #new-topic-post #submit, .my-account #submit, #new-topic-button, .page-template-search-page-php #search-submit, #comment-submit  { background-color:#e6d973; background-image: url( "images/bg-button.png" ); ... padding:10px 16px 10px 16px; text-shadow: 1px 1px 0px #ffffff; border:1px solid #eac44e; font-size:18px; border-radius:5px; font-family: QuicksandBold; color:#000000; transition: all 300ms ease-in; }
Where I can change Log In background on the frontpage?
#right-login { ... background:#d98100; ... }
Where I can change button color on the Log In form (on the frontpage)?
#front-login-submit { background:#ff9801; ... }
Where I can change the background color of an active menu item?
nav ul li.current-menu-item { background:#f69200; ... }
Where I can change style of tabs?
#mytabs { background-image: url( "images/bg-tabs.png" ); ... border:1px solid #cf7b00; box-shadow: inset 0px 0px 0px 1px #ffbd5e; }
#object-nav ul li { padding:5px 10px; ... background-image: url( "images/spacer-tab.gif" ); ... }
#object-nav ul li:hover { background:#ea8b00; background-image: url( "images/spacer-tab-selected.gif" ); ... }
#object-nav ul li a { color:#ffffff; font:16px QuicksandBold; text-shadow: 1px 1px 0px #c77804; }
#object-nav ul li.current { background:#ea8b00; background-image: url( "images/spacer-tab-selected.gif" ); ... }
#subnav { padding:0 10px; background-image: url( "images/spacer-subnav.gif" ); ... }
#subnav ul li { padding-top:4px; padding-bottom:4px; }
#subnav ul li a { color:#ffffff; font:13px Open Sans!important; text-shadow:#c77804 1px 1px 0px; }
Where I can change style of the big page title?
.page-title { font:65px QuicksandBook; ... color:#ffffff; text-shadow:#7b7b7b 1px 1px 0px; background:#f68b11; background: linear-gradient(to bottom, #f98c12 0%,#ee8611 100%); border:1px solid #ce740f; box-shadow: inset 0px 0px 0px 1px #ffbd5e; }
Where I can change style of blog title?
.post-title { ... box-shadow: inset 0px 0px 0px 1px #ffbd5e; ... color:#ffffff; text-shadow:#7b7b7b 1px 1px 0px; background:#f68b11; background: linear-gradient(to bottom, #f98c12 0%,#ee8611 100%); border:1px solid #ce740f; }
.post-title a { color:#ffffff; font:46px QuicksandBook; }
Where I can change style of "On the Forums"?
ul li.forum-lastposts .activity-content { ... color:#ffffff; ... background:#f66d08; ... }
ul li.forum-lastposts .activity-content:hover { background:#c75400; }
Where I can change default avatar on the header?
wp-content/themes/OneCommunity/images/avatar.gif
Where I can change style of "Hello!" message?
#frontpage-info-big { font:200px QuicksandBook; color:#0f0f0f; ... }
#frontpage-info { font:26px QuicksandBook; line-height:1.3em; ... color:#262626; ... }
Where I can change styling of shortcodes?
4.2 - Shortcodes section is in the style.css
Where I can change styling of the OnebyOne slider?
slider/onebyone.css
Where I can change styling of the WP login page?
wp-content/themes/OneCommunity/css/wp-login.css
Where I can edit text of OnebyOne slider for Frontpage 3 template?
Edit language file

VII. Shortcodes - top

Here is the list of all shortcodes:
[highlight]Praesent bibendum, libero faucibus vehicula vulputate.[/highlight]


[go href="http://code.google.com"]Take a look on it![/go]


[leftpullquote]Sed sagittis, justo quis sollicitudin viverra...[/leftpullquote]
[rightpullquote]Sed sagittis, justo quis sollicitudin viverra...[/rightpullquote]


[quote]Donec fringilla, urna sit amet euismod congue, turpis lectus accumsan erat, eget luctus tellus ante at leo. Donec vitae nisl vitae eros tincidunt faucibus sit amet vel eros.[/quote]
[quoteby by="Nicole said:"]Donec fringilla, urna sit amet euismod congue.[/quoteby]


[notice]Aenean molestie pharetra facilisis. Duis sem quam, hendrerit nec commodo quis, cursus eget elit.[/notice]


[h1]Heading 1[/h1]
[h2]Heading 2[/h2]
[h3]Heading 3[/h3]
[h4]Heading 4[/h4]
[h5]Heading 5[/h5]
[h6]Heading 6[/h6]


[img]http://www.demo1.diaboliquedesign.com/3/shortcode-image.jpg[/img]
[img]http://www.demo1.diaboliquedesign.com/3/shortcode-image.jpg[/img]
[img]http://www.demo1.diaboliquedesign.com/3/shortcode-image.jpg[/img]
[clear]


[member]You are a member so you can see this message.[/member]


[h6]2 columns[/h6]
[one_half]
	Vivamus ut lectus vitae sapien bibendum mollis. Nam ac risus in urna accumsan ornare nec a sapien.
[/one_half]
[one_half_last]
	Vivamus ut lectus vitae sapien bibendum mollis. Nam ac risus in urna accumsan ornare nec a sapien.
[/one_half_last]



[h6]3 columns[/h6]
[one_third]
	Vivamus ut lectus vitae sapien bibendum mollis. Nam ac risus in urna accumsan ornare nec a sapien.
[/one_third]
[one_third]
	Vivamus ut lectus vitae sapien bibendum mollis. Nam ac risus in urna accumsan ornare nec a sapien.
[/one_third]
[one_third_last]
	Vivamus ut lectus vitae sapien bibendum mollis. Nam ac risus in urna accumsan ornare nec a sapien.
[/one_third_last]



[h6]4 columns[/h6]
[one_fourth]
	Vivamus ut lectus vitae sapien bibendum mollis. Nam ac risus in urna accumsan ornare nec a sapien.
[/one_fourth]
[one_fourth]
	Vivamus ut lectus vitae sapien bibendum mollis. Nam ac risus in urna accumsan ornare nec a sapien.
[/one_fourth]
[one_fourth]
	Vivamus ut lectus vitae sapien bibendum mollis. Nam ac risus in urna accumsan ornare nec a sapien.
[/one_fourth]
[one_fourth_last]
	Vivamus ut lectus vitae sapien bibendum mollis. Nam ac risus in urna accumsan ornare nec a sapien.
[/one_fourth_last]



[h6]5 columns[/h6]
[one_fifth]
	Vivamus ut lectus vitae sapien bibendum mollis. Nam ac risus in urna accumsan ornare nec a sapien.
[/one_fifth]
[one_fifth]
	Vivamus ut lectus vitae sapien bibendum mollis. Nam ac risus in urna accumsan ornare nec a sapien.
[/one_fifth]
[one_fifth]
	Vivamus ut lectus vitae sapien bibendum mollis. Nam ac risus in urna accumsan ornare nec a sapien.
[/one_fifth]
[one_fifth]
	Vivamus ut lectus vitae sapien bibendum mollis. Nam ac risus in urna accumsan ornare nec a sapien.
[/one_fifth]
[one_fifth_last]
	Vivamus ut lectus vitae sapien bibendum mollis. Nam ac risus in urna accumsan ornare nec a sapien.
[/one_fifth_last]



[h6]6 columns[/h6]
[one_sixth]
	Vivamus ut lectus vitae sapien bibendum mollis. Nam ac risus in urna accumsan ornare nec a sapien.
[/one_sixth]
[one_sixth]
	Vivamus ut lectus vitae sapien bibendum mollis. Nam ac risus in urna accumsan ornare nec a sapien.
[/one_sixth]
[one_sixth]
	Vivamus ut lectus vitae sapien bibendum mollis. Nam ac risus in urna accumsan ornare nec a sapien.
[/one_sixth]
[one_sixth]
	Vivamus ut lectus vitae sapien bibendum mollis. Nam ac risus in urna accumsan ornare nec a sapien.
[/one_sixth]
[one_sixth]
	Vivamus ut lectus vitae sapien bibendum mollis. Nam ac risus in urna accumsan ornare nec a sapien.
[/one_sixth]
[one_sixth_last]
	Vivamus ut lectus vitae sapien bibendum mollis. Nam ac risus in urna accumsan ornare nec a sapien.
[/one_sixth_last]



VI. How to add subtitle and thumbnail caption to blog post? - top

While creating post click on Screen Options, select Custom Fields and Add New Custom Field called subtitle


If you want do add short text below thumbnail then while adding thumbnail put some text into Caption field.


1. Activate Ajax Search Pro plugin.
2. Go to Ajax Search Pro -> Ajax Search Pro -> Add a new Search called 1
3. Configure settings.



X. How to translate theme? - top

1. Install Poedit software - www.poedit.net.
2. Open installed software, go to File -> New cataloque from POT file ... -> open lang/OneCommunity.pot file and save as en_EN, de_DE, it_IT, es_ES ...
3. Upload created files (.po and .mo) into wp-content/themes/OneCommunity/lang/.
4. Open the wp-config.php file and modify following code line:
define('WPLANG', '');
Put the code of your language, for example:
define('WPLANG', 'de_DE');

Once again, thank you so much for purchasing this theme. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Diabolique Design

Go To Table of Contents