Skeleton – A Responsive WP/bbPress Theme
-
I’m not sure this is the proper place to post this, but I just wanted to share this with the community.
I’ve built a custom bbPress(2) skin into my latest free WordPress theme called Skeleton. It is responsive, tested in IE7,8,9,Firefox,Opera,and Webkit browsers as well as all iPhone,iPad,and Droid devices. It also makes use of the Theme Options framework for customization.
You can see a demo here:
http://demos.simplethemes.com/skeleton/
bbPress Demo:
http://demos.simplethemes.com/skeleton/forums
Docs:
http://demos.simplethemes.com/skeleton/documentation
hope you find it useful
-
Cool! Great job. I am in love with responsive designs
I’ve worked a lot with responsive themes and after going to the demo, I noticed you are fighting the same problem I have been for some time now.
Specifically the navigation when in ‘mobile’ view.
When in ‘full view’ mode, under the ‘about skeleton’ tab, there are dropdown links. However when switching to the mobile view mode, you are loosing those links.
I’ve been fighting myself with trying to come up with a nice way of displaying dropdown links when in a ‘mobile’ viewport.
By any chance have you guys been working on a way of combating this problem as well?
Hi, thanks for the feedback. Actually I chose to hide the sublevel items in mobile view. I do intend to address it more practically, though. It shouldn’t be difficult. My original thinking was to provide some method of access on subpages after a user has clicked. It just seemed to be a cleaner approach while enforcing usability. That said, what I can do is apply a CSS rule that overrides the display:none rule on current/active menu items or add a JavaScript user agent script that adds a slidedown effect. I’ll play around with this a bit later today. in the dentist chair right now
very nice solution there. I like how when you are on an ipad that when you click the top level button it shows dropdown properly. Click it again and it takes you to the top level page. Had not thought about that approach before.
I imagine the column shortcodes could be this:
[column width=”1/3″ final=”true”]…[/column]
Hi simplethemes,
I quite like your Skeleton Theme and installed it on the blog. How do I install the theme on bbPress?
Hi simplethemes,
I think i get it. BBPress 2 is a BBPress Plugin for WordPress. BBPress 1.03 is a standalone BBPress.
Your Skeleton theme is for WordPress/BBPress 2 and not for standalone BBPress 1.03
simplethemes,
do you do simple customization? I’m looking for a forum just like the one in your demo to be placed here:
http://www.theurbantwist.com/community
I’ve been reading the docs over and over again trying to figure this out but my page keeps spitting out blank outputs.
I don’t know if whether or not it’d be something as simple as just copying code into my archive-forum files and such.
I must say, i really like this theme! However, i found a small problem, not sure you will adress it or not but i am using chrome on win7 and my page look like this when i load it:
http://www.dododesign.se/error.jpg
however, it looks fine in IE, and even on chrome on my mac at work. do you know of it’s something wrong with my computer or on chrome win 7 in general? If you think it’s my computer, what could be the problem? Really strange problem.
Cheers
That looks strange…almost like it’s using a completely different font. Do you have any custom font settings set in Chrome or your OS? It could also be a damaged font. I’ll look into it and see if I can replicate the problem.
I just checked on a few PC’s and was not able to see this in Chrome.
The theme does allow you to change the font settings in the admin, so if you want to set it to a more safe font for your own peace of mind, feel free to do so. If you can replicate this error on more than one system, I’ll be glad to look into it in more detail.
Thx for the answer, if i see it again ill try to get back to you, althought everyone seems to see it ok, just my comp thats actung up. saw it just now on a diffrent page also. strange indeed
I installed this theme and its pretty nice. One question I have is I wanted to added a widget to the forum sidebar but it doesn’t show up. Any idea what I need to do to get it to show up?
You should be able to add any widget to the ‘Forum Sidebar’ location.
If bbPress is installed, this widget location gets registered:
http://screencast.com/t/axXP7yykY
If it isn’t showing up, make sure it isn’t commented out in the forum templates you want it to show in. I only enabled it in the templates I felt were necessary (like the member pages).
On some of my forum pages I wanted a wide page, but you can certainly change it.
For example, to change the forum home page template, open archive-forum.php in the theme editor and just uncomment this line:
// get_sidebar('bbpress');
Then, in functions.php find this line:
// force wide on bbPress pages
if (is_bbpress()) {
$columns = 'sixteen';
}and change ‘sixteen’ to ‘eleven’ to accommodate the sidebar.
I understand it gets registered and it does show up. I added a text widget to that area. It doesn’t show up on the forum sidebar
Sorry if I was unclear.
I will try what you have posted and see if that fixes it.
I just did what you said and its working fine.
Next Question. I am in the process of creating a small graphical logo. I would like to know what would be the best size to make and also how to get it right aligned in the header.
BTW did I mention I really like this theme. Clean and all.
If you go to “Theme Options” and select “Display a custom image/logo image in place of title header” you can upload an image or paste the URL to one from your media library.
Below that, you can set your logo width and logo height. You should resize the image prior to uploading so it doesn’t look choppy. The size is up to you – depending on the orientation of your logo graphic.
To align it to the right, you’ll need to edit the style.css.
Find:
#header .inner {
padding-top: 15px;
padding-bottom: 20px;
}and change to:
#header .inner {
padding-top: 15px;
padding-bottom: 20px;
float:right;
}Glad you like the theme
Actually I want to keep the text there as well. Sorry I am really being unclear today. Must because I am tired.
Been reading wordpress stuff and messing with my site since 5am. I know there is not much content there but want to get it visually and feature wise laid out before putting up more content.
I see, then your best bet is to just leave the text header as-is and add a background image attribute to the #header selector.
change:
#header {
clear: both;
margin-top: 16px;
}to:
#header {
clear: both;
margin-top: 16px;
background: url(http://www.url.com/path/to/image.png) no-repeat right center;
}…obviously replacing the URL to the image with one of your own.
Ok thanks that got it. I was able to get an image in there and it looks real good
Let me know how it looks
Ok was wondering if a post icon could be added to post. I would like to have icons for php css and html as well as a general wordpress icon and my site logo as an icon.
I have tried several plugins and they don’t seem to work. If this is not doable then no biggie was just thinking it would be nice to dress up the post some.
Yes, this should be possible with CSS and core WordPress post classes.
Just add something like this to your style.css:
.post.category-html h2 {
padding-left: 32px;
background: url(http://cdn5.iconfinder.com/data/icons/fatcow/32x32/file_extension_html.png) no-repeat 0 8px;
}
.post.category-php h2 {
padding-left: 32px;
background: url(http://cdn1.iconfinder.com/data/icons/fatcow/32x32_0680/page_white_php.png) no-repeat 0 8px;
}
.post.category-css h2 {
padding-left: 32px;
background: url(http://cdn1.iconfinder.com/data/icons/fatcow/32x32_0300/css_valid.png) no-repeat 0 8px;
}Then put your posts in categories of slug ‘php’,’html’,’css’.
*Note – You should also download the referenced icons/images to your server instead of linking to theirs.
Not sure why the [bbp-*] shortcodes aren’t working on this page.
- The topic ‘Skeleton – A Responsive WP/bbPress Theme’ is closed to new replies.