OfficeSpace: Professional Corporate Concrete5 Theme

OfficeSpace Concrete5 Theme

Demo

BUY NOW! Single License ($25) | Developer License ($75)

We are extremely excited to be releasing our first premium Concrete5 theme! OfficeSpace is a professional concrete5 theme built specifically for corporate/business websites to showcase your business, services, or products.  OfficeSpace is a grid-based theme and uses the 960 grid system.

Features

  • Tableless, grid-based layout
  • Clean, professional design
  • Works in all major Browsers
  • 3 Color Variations (Blue, Green & Red)
  • 7 Different Page Types / Layouts (Home, Left Sidebar, Right Sidebar, Full, One over Three Columns, One over Two Columns, News Article)
  • Automatic Drop Down Main Navigation
  • Automatic Breadcrumb Navigation on all Pages
  • Includes two bonus blocks & several block templates
  • And more…

Extras

OfficeSpace also comes with two unique blocks and several templates for the existing Autonav, Search, and Page List blocks.

The unique blocks include:

  1. Employee Profile - Based on Remo’s People Block, this block allows you to create a profile for an employee.  You can display the employee’s Name, Title, a Description, Phone #, Email Address, and a Photo.
  2. Testimonial - This block allows you to create a customer testimonial which includes the Testimonial, the Name of the person who gave the testimonial, and the Location or Company of the person.

The templates for existing blocks include:

  1. Sub Menu - This is a template for the Autonav block which styles a sub menu in the sidebar.
  2. News List Main - This is a template for the Page List block which is to be used for the main “News” page of your site to display news articles that are under your News page.
  3. News List - This template for the Page List block can be used on the home page, sidebar, or any other area to display news articles under your “News” page.
  4. Office Space - This is a template for the Search Block.

Installation

Once you’ve purchased OfficeSpace, to install it simply:

  1. Unzip the ‘theme_officespace’ folder to the ‘packages’ folder in the root of your concrete5 installation.
  2. Go to Add Functionality in your Dashboard.  You should see the OfficeSpace Theme package under the New section to be installed.
  3. Install Package.
  4. Next, head over to the Page & Themes page of the dashboard and click the Inspect button next to the OfficeSpace Theme. Then click the Activate Files button to activate the new OfficeSpace Page Types.
  5. That’s it.  You should be all set.  See the demo site for more information and instructions - like setting up the News page and creating News Articles.

Changing the Default (Blue) Color Scheme

To change the color scheme from the default blue to green or red, simply change the line that says blue.css in the screen.css file (located in the theme files at officespace/css/screen.css) to either green.css or red.css.

Licenses

You can either purchase a Single Use License, which allows you to use OfficeSpace on one domain/website or you can purchase the Developer License which allows you to use OfficeSpace on unlimited domains/websites.

Bookmark and Share

73 Comments

Ben  on October 13th, 2009

Hi. I’m interested in the “Employee Profile” block. Within the block is it possible to make the title/name a link?

Also, is it possible to add more than one image, and if so what kind of CSS control is there?

Many regards

Chris Seymour  on October 13th, 2009

@Ben
1. Some customization would need to be done to make the Title/Name a link.
2. Right now you can only add one image, again some more customization would be needed to add multiple images.
3. The block has it’s own CSS file which is easy to change or add to.

Thanks for your interest!

Ben  on October 13th, 2009

Thanks for the quick reply! I am fairly new to Concrete5, so how simple/complex is it to customise the block?

Chris Seymour  on October 13th, 2009

Should be easy if you know PHP. I dont know a lot of PHP but I was able to modify that block to get it to what it is now.

Chronosoft  on October 20th, 2009

Hi there Chris, I just bought a developer package of your Office Space theme for Concrete5 and i’m having difficulty reproducing something similar as your demo page e.g. the grid “about” “our services” “Latest News” through the Concrete5 interface and how would i go about adding a banner this theme?. Could you elaborate on how to do this? btw if it’s possible to get copy of the theme with the grid system and banner etc all in place already (so it’s easily editable) would be great

Chris Seymour  on October 21st, 2009

First make sure you activated all the Page Types that come with OfficeSpace. Head over to the Page & Themes page of your dashboard and click the Inspect button next to the OfficeSpace Theme. Then click the Activate Files button to activate the new OfficeSpace Page Types. Once those are activated, Return to your Website and put the Home page in edit mode and choose the Design tab. Then choose the ‘Home’ page type for that page. Then you should see the correct areas to add content.

Then, for the headings for the columns (below the header area) simply add a content block to the area and add a H3 to it. The styling for the heading is on the H3 tag.

carben  on October 23rd, 2009

Hi

How do I change the grey page background to a different colour?

Thanks

Tony

Chris Seymour  on October 23rd, 2009

Tony,
I just updated the theme to make this possible through the concrete5 theme customization panel. I will email you the new files.

So from now on, to change the background of the theme, go to Pages & Themes in the dashboard. Then click on ‘Customize’ next to the OfficeSpace theme. Then, simply choose a color from the Background color picker.

carben  on October 24th, 2009

This is a fantastic product and worth every penny.

Even a relative numpty like me can have a very presentable site up and running very quickly.

Chris the developer also responds in person.

Highly recommended.

Good job Chris.

Chris Seymour  on October 24th, 2009

Thanks Tony! Greatly appreciate your feedback!

ukwebguy  on October 31st, 2009

Chris,

I’ve just bought a site licence and seem to be missing the styling on the site logo and the search form button. On the logo the id is “logo” but having searched all of your stylesheets I cannot find logo referenced anywhere.

How can I get the styling I bought? {:0)

That minor grouse apart, I think its a great product.

Chris Seymour  on October 31st, 2009

To change the styling of the logo just look for a#logo on line 47 in the main.css stylesheet (theme_officespace/themes/officespace/main.css).

Thanks for purchasing!

ceyhun cenger  on November 6th, 2009

Hi Chris,
I purchase the single license of this great product the other day. But “right_sidebar” page type was missing. Could you send it to my e-mail please?
Thanks

Chris Seymour  on November 6th, 2009

Ceyhun,
The “Right Sidebar” page type is the default (default.php in the officespace theme folder)

ceyhun cenger  on November 7th, 2009

Hi Chris, on my website, the date appears in yyyy-mm-dd hh:mm:ss format, not like in your theme. I checked the view.php under /blocks/page_list/templates/news_list and it is written;
getCollectionDatePublic(”F j, Y”) ?>

I did everything as you described on your theme, why do you think, i still cannot show the date as same as the date in your theme? and What is news_list_main template for?

Thanks in advance.

Chris Seymour  on November 9th, 2009

Ceyhun,
I am guessing you are running concrete5.3.3. There is a know bug (that Andrew at concrete5 confirmed) that makes that date code not display like it should (Andrew fixed it in dev). To get it to display properly replace:
< ?php echo $cobj->getCollectionDatePublic(”F j, Y”) ?>

with this:
< ?php
$ts = strtotime($cobj->getCollectionDatePublic(’user’));
echo date(’F j, Y’,$ts);
?>

in theme_officespace/blocks/page_list/templates/news_list & news_list_main and in theme_officespace/themes/officespace/news_article.php.

The news_list_main template is for styling your main “News” page like the demo page here:
http://c5.sineceramedia.com/news/. While news_list is for styling like the news section on the home page of the demo.

rmongoose  on November 19th, 2009

Chris,

Great theme. What is the best way to replace the site name with a logo? I changed the header.php and the main.css. I have entered the path of the image in the header.php and the logo works, but IE8 then does not show the web site correctly. Any suggestions?

Thanks.

Chris Seymour  on November 19th, 2009

@rmongoose
Depends on when you bought the theme. If you bought it in the last week or two (and you’re using concrete5.3.3) you can use the My_Site_Name block in the global scrapbook (under the Scrapbook section of your dashboard) to add whatever you want and it will automatically replace the site name in the header. Otherwise, what you did is good too.

Can you send me a link (to hello@c5mix.com) to view the site and screenshot of what you’re talking about in IE8?

ejmbrand  on November 23rd, 2009

Chris,

I’ve installed the new office space theme, however I’ve noticed that I can only customize the body font to 8pt in order the get my menu to fit…however when i do that it make the body copy for the entire site becomes to small. Is there and easy way to separate these two elements?

I am new to C5 so I am quickly learning…but I am interested in knowing if i can customize the theme color to a specified hex color instead of just red, green, or blue.

ejmbrand  on November 23rd, 2009

I also wanted to know if i can change the background color of the content area to black. ;-D

Chris Seymour  on November 23rd, 2009

@ejmbrand
In order to change just the font size for the main navigation look for ‘#nav ul li a’ in main.css (in the officespace theme folder) and change ‘font-size:1.2em’ to whatever you want the font size to be. You might also need to change the font size of the navigation dropdown. Look for ‘#nav li li’ and change the font-size there to whatever you want also.
As far as changing the whole theme color, unfortunately there is no way to do that.
-Chris

Chris Seymour  on November 23rd, 2009

@ejmbrand
you could add ‘background-color:#000!important’ to ‘#wrapper’ in the main.css file but that will still leave some white space around the content area. You’d have to also change the background image (site-bg.png) in the images folder to be black too.

Tony  on November 25th, 2009

Chris,
just wanted to say a personal thank you for your support and assistance since I purchased the OfficeSpace theme.

In a world of dodgy companies and rip-off web “gurus”, you’ve been a breath of fresh air. Helpful, informative and quick to respond to your customer (me!)

If you’re thinking of buying some of Chris’s work , I’d recommend him 100%

Thanks and keep up the good work!

Chris Seymour  on November 25th, 2009

Your welcome, Tony. And thank you so much - I greatly appreciate your kind words! And thank you for supporting me with your purchase - it’s because of you and everyone else that has purchased OfficeSpace that I get to do what I love, and help others in the process.

sumsolus  on November 27th, 2009

Hi Chris

this error showing up when setting page design to news using concrete5 version 5.3.3.1

Fatal error: Call to a member function getCollectionDatePublic() on a non-object in /home/justcbmq/public_html/packages/theme_officespace/themes/officespace/news_article.php on line 38

any ideas please

Chris Seymour  on November 27th, 2009

Sumsolus,
This is a known bug (verified by Andrew at concrete5) with the get date function in 5.3.3.1. In the news_article.php file on line 38 replace this code:
< ?php echo $cobj->getCollectionDatePublic(”F j, Y”) ?>

with this:
< ?php
$ts = strtotime($cobj->getCollectionDatePublic(’user’));
echo date(’F j, Y’,$ts);
?>

You’ll also need to replace it in the page_list block templates that come with OfficeSpace. (theme_officespace/blocks/page_list/templates/news_list_main/view.php and theme_officespace/blocks/page_list/templates/news_list/view.php)

Let me know if you need further help.

sumsolus  on November 28th, 2009

Hello

have done first file can not find where to put new code on other two, what lines is code to replace on in these other file

thanks

Chris Seymour  on November 28th, 2009

@sumsolus
line 17 of theme_officespace/blocks/page_list/templates/news_list/view.php and line 16 of theme_officespace/blocks/page_list/templates/news_list_main/view.php (note: on this one, the date format should be ‘M j Y’ not ‘F j, Y’)

sumsolus  on November 28th, 2009

Hi Chris

can you confirm this is right

news_article.php line 38 should be

getCollectionDatePublic(’user’)); echo date(’F j, Y’,$ts); ?>

theme_officespace/blocks/page_list/templates/news_list/view.php 17 should be

getCollectionDatePublic(’user’)); echo date(’F j, Y’,$ts); ?>

theme_officespace/blocks/page_list/templates/news_list_main/view.php line 16 should be

getCollectionDatePublic(’user’)); echo date(’M j Y’,$ts); ?>

if the above is right still not working

sumsolus  on November 28th, 2009

Chris this is all that comes up when changes done

Parse error: syntax error, unexpected T_STRING in /home/justcbmq/public_html/packages/theme_officespace/themes/officespace/news_article.php on line 38

Chris Seymour  on November 28th, 2009

Dan, just sent you an email with the fixed files.

sumsolus  on November 29th, 2009

chris

thanks have done as stated but still not working
any ideas

dan

Todd  on November 30th, 2009

Can you better explain how to replace the site name with a logo. We’re running what I believe to be the most recent release of C5 (they host for us) and I don’t quite understand about the content block you’re talking about. Are you saying create a scrap book entry with the name My_Site_Name and put the image (logo) file in it or something else?

Chris Seymour  on November 30th, 2009

Todd,
If you’ve installed concrete5.3.3 there should automatically be a block named My_Site_Name in the Global Scrapbook under Scrapbook in the backend of your site. All you need to do is put whatever you want for the logo in that content block and it will automatically show up instead of the site name - that is if you have the most recent version of OfficeSpace (this is something I changed about 2 weeks ago, so if you bought it before that send me an email (hello@c5mix.com) with your paypal receipt and I’ll send you the new files.

sumsolus  on November 30th, 2009

Chris

thanks for files again have uploaded all working but there is a date showing cant edit it or remove it

http://www.just-written.co.uk/index.php/portfolio/

sumsolus  on December 1st, 2009

Thanks for email Chris

I just deleted page and done it again its now showing right date, thanks for all your help 10/10 for service

daniel329  on December 2nd, 2009

Looks good… Is there a way to change the colors?… I would be interested if I can select other colors like burgundy, dark green, other blues, some browns/beiges… Please let me know… Thanks

Chris Seymour  on December 2nd, 2009

@daniel329,
thanks for your comment. Right now you’d have to change the colors and some images through the CSS files. I am planning on making this easier to do through the concrete5 theme customization page/interface in the future.

Donna  on December 18th, 2009

Great theme! Well worth it for the blocks included and the other extras thrown in. I found one issue however that bit me but then I figured it out. My system is not configured for php short tags so I had problems installing the theme until I figured it out and manually fixed the four files or so to use <?php instead of <?. Once I made those changes, then all worked great.

Chris Seymour  on December 18th, 2009

Thanks Donna for purchasing and the great feedback!
-Chris

hawkletsxc  on January 3rd, 2010

Hi Chris,

Is there a way to have a different horizontal photo on all different pages? For example, in the site linked on my gravatar, there is a main horizontal photo on the home page. I would like different photos for each subpage and such…

Just wondering! Thank you very much!

Chris Seymour  on January 4th, 2010

@ hawkletsxc
You will need to make an editable area there. Copy the div with the id #feature that is in the home.php file in the theme folder and add it to all the other theme page type files (default.php, full.php, left_sidebar.php, news_article.php, one_over_three.php, one_over_two.php, view.php) just before the div with id #wrapper (or you can put it withing the wrapper div). Let me know if you need any other help.

-Chris

Bel  on January 8th, 2010

Hello.

Great job!

I’d like to know more about licenses : can we have the text for both two licenses for knowing their terms of use?

Do we have to provide or keep any link/stuff in the theme purchased?

Thanks.

P.S.: Is it possible to upgrade from Single license to Developper License?

Chris Seymour  on January 8th, 2010

Bel,
Thanks for the feedback! Basically, with the single use license you can use it for 1 domain/site (want to use again for another site, you will need to purchase it again). With the developer’s license you are allowed to use it on unlimited domains/sites. And no, you dont have to keep any of the links (to c5mix or concrete5) in the footer for either license.

If you’ve already purchased a single license and want to upgrade to developer’s simply pay the difference ($50) via this paypal link:
https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=10226713

Thanks!

Bel  on January 8th, 2010

Thanks for your rapid answer, Chris.

What about terms of use?

I haven’t already purchased a license, my question was just for knowing.

In fact, I plan for using a Single License on a C5’s site, but because I find your work very interresting, I wanted to know if I could have in the future a way for just upgrading to Developper License (by paying the difference as you mentionned). Just buying a single license at first is because I have a single project in C5 for now.

Anyway, I plan think that I’ll have to upgrade in the future for the Developper License in case of using it without any limitation.

So would you please tell me more about licenses and terms of use?

Thanks.

Chris Seymour  on January 8th, 2010

Bel,
If you’d like a more detailed ‘legal’ version of the license check out the standard concrete5 license at:
http://www.concrete5.org/marketplace/themes/officespace/license/

Basically, for terms of use you can use it for anything (you just cant resell it or give it away). If you buy the single license you can use it for 1 domain/site and if you buy the developer’s license you can use it on unlimited domains/sites. If you buy the single license, you can at anytime upgrade to the developer’s license by paying the difference through the paypal link I supplied.

Bel  on January 8th, 2010

Ok.

I’ve seen the License agreement, and all is clear now.

Thanks.

Bel  on January 9th, 2010

Hello.

I’ve purchased one OfficeSpace, and find it good.

I have a problem : I don’t have News list News List Main, and Sub Menu activated. How to fix it?

I didn’t have any issue while installing the OfficeSpace package.

Thanks.

Chris Seymour  on January 9th, 2010

Bel, after you’ve added the Page List block to your page, click on it again and select ‘Set Custom Template’ and you should see them in the dropdown.

Bel  on January 9th, 2010

Hello Chris.

Ok, I’ve seen them.

I’ve tried to list news articles at the Home page as in demo without success.

I have the same page listed in the left, middle and right column.

How to fix it?

Is it possible for having a How to setup a Home Page as in the demo?

Thanks.

Chris Seymour  on January 11th, 2010

Bel,
There are some new page types with the theme that have to be activated first. To activate all the page types go to Dashboard -> Page & Themes and click the ‘Inspect’ button next to the OfficeSpace theme. Click the ‘Activate Files’ button.

Then, for your home page choose the ‘Home’ page type when it edit mode under the ‘Design’ tab.

For directions on setting up the News sections see the instructions on the sidebar of this page of the demo:
http://c5.sineceramedia.com/news/

Adrian  on January 24th, 2010

Hey Chris,
Great template… little glitch. While using the theme to build spec sites, I’ve found editing the My_Site_Name block in the global scrapbook to a new site name disables the Navigation bar. I deleted the block and the navigation now works but displays the old site name in the header. Is there a work around? This has happened on two different sites, one running C5 5.3.2 and one on 5.3.3.1

Chris Seymour  on January 25th, 2010

Adrian,
First off thanks for purchasing!
I am not sure what you are talking about when you say the Navigation bar becomes disabled and I am unable to reproduce any problem with editing the My_Site_Name block on my installs. Can you send me a screenshot of what you’re talking about to hello@c5mix.com. Thanks!

-Chris

Tom  on January 31st, 2010

Hi,
I have problems with News List in Office Theme. It shows correctly date and name of the linked page on the top of the block, but without body text. Any help?

Chris Seymour  on February 1st, 2010

Tom, the News List (Page List) block pulls the ‘body text’ from the page description field, so you have to put a description in there. Put your page in edit mode, go to the Properties tab and put whatever text you want to show up in the Description field.

Sean  on February 1st, 2010

2 things, i bought the single use when i wanted to buy the dev license. How can i fix this.

secondly, i do not have a My_Site_Name block or a global scrapbook. I only see the admins personal scrapbook. I have concrete 5 5.3.3.1 and purchased your theme 3 days agao. My original install did not include default content.

Chris Seymour  on February 1st, 2010

Sean, thanks for purchasing! To upgrade to the developer’s license, simply follow the link below and pay the difference ($50) via PayPal:
https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=FCATUCRM9G5JN

To create the My_Site_Name block, just go to Dashboard -> Scrapbook and create a new scrapbook (you can name it whatever - e.g. Global Scrapbook). Then in that scrapbook, add a new content block and name it My_Site_Name. Then whatever you put in that block will show up instead of the site name in the header.

hawkletsxc  on February 1st, 2010

Hi!

I love the theme and last comment I made, Chris, you were very great about helping me out - I greatly appreciate it.

However, I have one question. Is there a way to disable the top-most link? For example, on the site linked to my avatar, I have a navbar that contains the following: Home, Cross Country, Track & Field, Contact, Members

When the users hover over Cross Country and Track & Field, a dropdown shows. Is there a way to disable the link for Cross Country and Track & Field so the users cannot click those links, so essentially it just becomes a button they can over over that won’t take them anywhere?

Thanks!

Chris Seymour  on February 1st, 2010

@hawkletsxc,
It could be done but would involve a little custom coding to do it. There’s no ‘check this box to disable top link’ easy way to do it.

Adrian  on February 1st, 2010

Chris,
Thanks for the help on my site name. The recommended fix worked perfectly. Great service & support!!

Chris Seymour  on February 1st, 2010

@adrian,
you’re welcome and thank you!

ckellynte  on February 17th, 2010

Chris, Just bought the theme and really like it so far! When adding an HTML block to an existing block on a page, can you add php code in that block? I tried the simple but no luck. If not, what is the best way to add php code into my pages. Thanks.

Chris Seymour  on February 17th, 2010

ckellynte,
Thanks for purchasing and the feedback!
No, you cant put php code in the html block. Try this block from the marketplace - looks like it does what you need.
http://www.concrete5.org/marketplace/addons/code-blocks/

ceyhun cenger  on February 24th, 2010

Chris,

I am really not sure if this is related with the theme, but when I print a page from the website, sitemap is also printed. I am guessing that it is because of how the main navigation was coded. Is there any way to disable that?

Thanks in advance.

Chris Seymour  on February 24th, 2010

ceyhun,
Hmm, not really sure what you mean that the sitemap is also printed. Can you give me a link to your site (the one linked to in your avatar isnt working so I wasnt sure if it was that one or not). Also, what browser are you using and are you on a Mac or PC?

ceyhun cenger  on February 24th, 2010

Chris,

I changed the host yesterday night (I hope I did right), but the link is not working because of that for now. But, it happens on the demo page you provided, too. When you go to print preview on the internet browser, you will also notice 2 level pagelist (Home, About(who we are, Our staff, Employment opportunities), Services…..) appears on top of the page.

How do you think I can stop that?

Thanks

Chris Seymour  on February 24th, 2010

ceyhun,
That’s just the main navigation (unstyled) that is showing up. You’ll probably have to create a ‘print’ stylesheet and set #nav to display:none so it doesnt display. You can see more about print stylesheets here:
http://www.alistapart.com/articles/goingtoprint/

ckellynte  on February 25th, 2010

Thanks Chris. There was also a free PHP block on markerplace which does what I need. Thanks again for this theme and your support.

markb  on February 25th, 2010

Chris,

I’m using the simple news add-on and when the officespace theme is applied, the title is not displayed (linkable title for the news list). When I add news on a page with a different theme applied, i can get the title. Any idea why this might be happening.

A few posts back, you noted also that the top most lnks could be disabled. Can you help out and supply that code or the instructions to modify the code?

Thanks,

Mark

Chris Seymour  on February 26th, 2010

Markb,
Can you send me a link to the page this is happening on so I can look at it? Not sure exactly what you are talking about. Feel free to email me directly at hello@c5mix.com. As far as ‘disabling the top most links’ not really sure which way to do that - a good PHPer should be able to do it rather easily though

stephenpassion  on March 4th, 2010

Hi Chris,

Great Template. Client really likes it too with minimum amount of restyling so my job is easier :-)

I have 1 question. In your About Section in the Demo, the second level navigation has a nice dotted line separating each link. In my version when I use an auto nav I get an indented list with bullet points. Can you advise?

Cheers
Steve

Chris Seymour  on March 4th, 2010

Steve,
Thanks for the feedback! As far as the second level navigation, you just need to set the Sub Nav custom template to the autonav. Click on the block and choose ‘Custom Template’, then select ‘Sub Nav’ from the dropdown and save. Should be all set.

stephenpassion  on March 4th, 2010

Easy when you know how. Cheers dude. Keep up the good work

Leave a Comment