Skip to:
Content
Pages
Categories
Search
Top
Bottom

FirmaSite Social: Buddypress + bbPress theme based on Bootstrap


  • Unsal Korkmaz
    Participant

    @unsalkorkmaz

    FirmaSite Social

    How to download:

    http://wordpress.org/extend/themes/firmasite

    Theme Features:

    • Its GPL and free :)
    • Based on Twitter Bootstrap  and all WordPress, BuddyPress and bbPress files using only bootstrap css. That means you can use custom bootstrap styles and all of your site will use same theme style. There is already 13 custom bootstrap theme is included in theme from Bootswatch. In future, i will explain how you can add custom bootstrap styles
    • Using Bootstrap Responsive so all your site will be mobile ready. BuddyPress and bbPRess too!
    • Using Theme Customization API for theme options. It means you can see changes on live edit and you can easily extend options with wordpress functions directly. A video on action: http://youtu.be/F95TngS9er8  (Its a bit old version of theme but a good example for main theme options)
    • Google Fonts! lots of! You can choose google fonts from theme options ( watch example video from above)
    • 4 different layout:
    1. Content – Sidebar
    2. Sidebar – Content
    3. Only Content (Long)
    4. Only Content (Short)
    • Unique 2 feature: ShowCase and PromotionBar. ShowCase letting you show your special post in home page header like: http://twitter.github.com/bootstrap/examples/carousel.html and PromotionBar is letting you promote your posts in content header, footer or sidebar. You just marking your posts from your post panel. Both feature is using Bootstrap’s carousel component so there is no extra  javascript. An example post panel screenshot:
    • You can upload logo,disable comments, activate facebook comments, activate sharing buttons (facebook,twitter and google+1), upload custom background and option to remove responsive for fixed width if you want.
    • Supporting Post Formats! Formats have special template parts with get_template_part  and video,audio formats calling necessary js that need to play video or audios. System supporting oEmbed links too.
    • Ready for translation. Theme’s default language is English and Turkish translation is included. ( You can send me your translations if you have). You can use Codestyling Localization for translating theme.
    • I will add lots of filter and action (already have lots of) so you can use it as starter theme for your projects. I will explain how you can keep your customization while keeping theme up-to-date.

    Themes are in review for publishing on WordPress.Org Theme  Directory but in meantime, you can download and try it from links above. Please share your opinions on theme in this topic.

Viewing 25 replies - 26 through 50 (of 64 total)

  • Stephen Edgar
    Keymaster

    @netweb

    @unsalkorkmaz Congrats… There is some neat code in your theme…


    Unsal Korkmaz
    Participant

    @unsalkorkmaz

    FirmaSite 1.1.7 released:
    download: (zip)
    changelog: 1.1.7

    Its an important release for BuddyPress that adds interaction buttons.

    For people already started to use FirmaSite theme: dont forget to keep your eyes on Tip & Tricks! I am sending some pretty neat customizations that you can easily use :)


    Unsal Korkmaz
    Participant

    @unsalkorkmaz

    Thank you for kind words btw @mercime and @netweb 🙂
    For bbPress people:
    this site is using bbPress 2.3-rc1 and BuddyPress 1.7 beta2 already!


    Erlend
    Participant

    @sadr

    By the way, is this theme based on Roots? Personally I’d consider this a very good thing, especially if you made sure to stay on par with it, seeing as it is a very actively developed and well supported theme.


    Unsal Korkmaz
    Participant

    @unsalkorkmaz

    @sadr No.  Before i started to write this theme, i inspect all Bootstrap+ WordPress solutions that i can use. After i see there is no solution for me that i am happy with it, i decide to write my own theme. In Roots theme, i like their solution for Walker_Nav_Menu so i used this section. Basically only this file is from Roots theme: https://themes.svn.wordpress.org/firmasite/1.1.7/functions/nav.php

    A funny note: I was using Infinity theme as my parent theme until 2 months ago. I was using it because their option panel was letting upload images with 1 click (custom plupload implement). When they removed it, i decide to change my parent theme


    Unsal Korkmaz
    Participant

    @unsalkorkmaz

    Sorry for people that waiting, passed 7+ days from approved but theme is still waiting for WordPress.Org publish.  Its probably my fault that i released some newer versions before it gets published. I cant give a date but at least theme will be in WordPress.Org soon.

    Meanwhile you can check my example child-theme: http://theme.firmasite.com/example.zip
    This theme;

    • adds Flatstrap custom style to theme style list
    • selects it automatically
    • removing default default bootstrap style from list.

    You can edit this child-theme however you want 🙂


    Unsal Korkmaz
    Participant

    @unsalkorkmaz

    Theme is officially published in WordPress.Org: https://wordpress.org/extend/themes/firmasite

    Enjoy 🙂


    Stephen Edgar
    Keymaster

    @netweb

    Cool… I updated the original post with the new link 🙂


    Unsal Korkmaz
    Participant

    @unsalkorkmaz

    Update: I added “Change style” button to theme website. Now you can see how buddypress or bbpress pages are changing when you change theme style.

    Example BuddyPress Profile page:
    http://theme.firmasite.com/members/unsalkorkmaz/profile/

    Dark style of same profile page: http://theme.firmasite.com/members/unsalkorkmaz/profile/?style=cyborg

    Example bbPress forum:
    http://theme.firmasite.com/support/forum/theme-support/

    Just change style from top-right and see the magic 🙂


    Erlend
    Participant

    @sadr

    I’ve been playing around with the theme lately. I can’t seem to figure out how to make the promotion bar and showcase text show up. What are the required conditions for these items to be displayed?

    Also the posts loop could still use some work imo, especially on wide sites:

    https://i.imgur.com/K92zGvu.png

    There’s way too much empty space below that title. I’m gonna suggest some mockups.


    Unsal Korkmaz
    Participant

    @unsalkorkmaz

    I’ve been playing around with the theme lately. I can’t seem to figure out how to make the promotion bar and showcase text show up. What are the required conditions for these items to be displayed?

    You just mark posts or pages with clicking stars on edit panels:

    If you are using full content layout, promotionbar should be set for Before Content  or In Site Footer. Its set in In top of Sidebar as default.

    Also the posts loop could still use some work imo, especially on wide sites:

    View post on imgur.com


    There’s way too much empty space below that title. I’m gonna suggest some mockups.

    This is why i love Responsive design: http://twitter.github.io/bootstrap/scaffolding.html#responsive
    You can change loop with

    /* Large desktop */
    @media (min-width: 1200px) { ... }
    

    If you ask me, its not bad looking tbh. Its clean but if you can explain me how it can be better for large desktops with full content (long) layout, i can help you to accomplish that design.

    Update: Maybe this is what you are looking for: Want responsive but not wide not for large screens?


    Erlend
    Participant

    @sadr

    Here’s a first take on a layout I’d much prefer:

    https://i.imgur.com/tLX4lvD.png

    • I think you’ll rarely, if ever, use the pagination from the forum index. This is an in-topic sort of operation. So, I removed it.
    • It’s still important to give an idea of how crowded a topic is, so I show the # of the last reply which indicates how many replies there are in total in the topic.
    • The “reply #” button would take you to the last reply of the topic. Oftentimes you’ve already visited the topic before, so you know what the topic is about already and you just want to skip to the last reply/page.
    • I’ve made a 2-part division between {topic title}, {topic author}, {topic category} and {reply link}, {freshness}, {reply author}.
    • At the bottom of each of the example sites is a lightweight example, excluding authors to conserve space.

    Update to your update: No the fluid width itself is not a problem. I just think you could display the forum data in a more balanced and informative way than what you’re currently doing.


    Unsal Korkmaz
    Participant

    @unsalkorkmaz

    Your customizations should be use child-theme rather then css solution.

    1. Create a child-theme. You can use example child theme from Child Theme article
    2. Create bbpress folder inside child-theme then create loop-single-topic.php file in bbpress folder
    3. You can change all loop display in loop-single-topic.php. I created an example file for you: http://pastebin.com/UqBVADNU
    4. Its really easy to change things. I just change some pull-left and pull-rights classes. Play with it 🙂

    Erlend
    Participant

    @sadr

    Thanks for the pointers 🙂 I hope I’ll have something to show soon.


    Erlend
    Participant

    @sadr

    I’ve been looking at various Bootstrap themes, and I’m starting to realize that the admin style convention is exactly what I’m after for my community site. Plastique and Perfectum are strong contenders.

    I’d really love a tutorial on how to include custom Bootstrap themes such as these in Firmasite. The big question is whether this is in the “either you know how to do it already, or it’s gonna be out of your comfort zone anyways” category or not.

    I looked into your themes folder and noticed that those themes (BootSwatch themes like Amelia, Cerulean etc.) are all simple css files, whereas these admin themes are complete templates with a bunch of assets of their own, so I’m guessing it’s not quite as straight forward as dropping a folder in the right place.


    Erlend
    Participant

    @sadr

    bbPress won’t even allow me to post a single link, what’s up with that? Anyways, the “admin styles” I’m referring to are over here:

    wrapbootstrap dot com/themes/admin


    Unsal Korkmaz
    Participant

    @unsalkorkmaz

    I’d really love a tutorial on how to include custom Bootstrap themes such as these in Firmasite.

    Did you check http://theme.firmasite.com/child-theme/?

    I looked into your themes folder and noticed that those themes (BootSwatch themes like Amelia, Cerulean etc.) are all simple css files, whereas these admin themes are complete templates with a bunch of assets of their own, so I’m guessing it’s not quite as straight forward as dropping a folder in the right place.

    Bootstrap’s css is just 1 file which is enough but its minimum requirement. No one is stopping you to add additional css files or new php/css/js components. You can think FirmaSite as a main clean theme that supports additional features on child-themes. For example i am working on a premium real estate child-theme that is using FirmaSite as main theme 🙂


    Unsal Korkmaz
    Participant

    @unsalkorkmaz

    This weeks question & answer: 

    Showcase, promotion and custom content types

    Question Summary: How to add PromotionBar and ShowCase feature to your custom post types?

    Solution: Its super simple;
    This code will activate PromotionBar and ShowCase features for your custom post type 🙂 For example for bbPress, you can activate those features for topic post type:

    add_filter('firmasite_pre_get_posts_ekle', "firmasite_custom_cpt_add");
    function firmasite_custom_cpt_add($array){ 
    	$array[]='topic'; 
    	return $array; 
    }

    Erlend
    Participant

    @sadr

    I looked into the child theme route but couldn’t quite achieve what I was after on my own. Are you interested in some freelance work? You can send an e-mail to contact at jmonkeyengine.org if you’re interested.

    I have another (small this time) tweak inquiry for ya as well: How can I make the forum always 1-column? I’m talking about the way you move the right-side profile section centered above the post content on narrow screens. I’d like that to be the case even on wider displays.


    Unsal Korkmaz
    Participant

    @unsalkorkmaz

    I am working on my first premium theme based on FirmaSite for Envato’s most wanted. I am in a bit hurry for being in first 15 theme so i cant take extra job in this 2 weeks. If you are not in hurry, I will probably finish it in 2 weeks and can help you after that. Wish me luck 😀

    (P.S: i did some incredible theme options system on theme customizer 😀 )


    Erlend
    Participant

    @sadr

    He he well good luck indeed! Are you doing all of the real estate functionality from scratch or will you be building the theme to support a plugin like WP Property?

    2 weeks is fine, that’ll give me time to work more on mockups and such.


    Unsal Korkmaz
    Participant

    @unsalkorkmaz

    Going from scratch. This is became a super intelligent system that supports custom filter system, currency system that automatically updates daily from The European Central Bank, geolocation with location-taxonomy support etc.. Those are fully built on FirmaSite which have infinite design possibilities with custom Bootstrap skins. Plus there will be premium slide effects from Lush Content Slider that i talked with its author and he allowed me to do 🙂 With ShowCase system, i can add lots of premium slider system with ultra-easy usage for clients


    Unsal Korkmaz
    Participant

    @unsalkorkmaz

    This weeks question & answer:

    theme customize

    Question Summary: How to add custom css to all widgets?

    Solution: In our theme, you can target all widgets with article.widget. An example:

    article.widget {
    	background: #fff;
    	border-radius: 6px;
    	margin: 10px;
    	padding: 10px;
    	box-shadow: rgba(0,0,0,0.3) 0 1px 3px;
    }
    

    Erlend
    Participant

    @sadr

    Almost 3 weeks now. Have you got some time to spare now @unsalkorkmaz ? I’ve made some mockups and found some good references. You have the e-mail mentioned above.


    Unsal Korkmaz
    Participant

    @unsalkorkmaz

    I sent you a mail yesterday but didnt get any answer.
    You can send a personal message from http://unsalkorkmaz.com/iletisim/ or to e-mail adress at the bottom of this page

Viewing 25 replies - 26 through 50 (of 64 total)
  • You must be logged in to reply to this topic.
Skip to toolbar