Showing results for 
Show  only  | Search instead for 
Did you mean: 

Lithosphere Design Breakdown

Lithium Alumni (Retired)

PaulGillihamProfilePaul Gilliham is Lithium's Director of Customer Marketing,  responsible for customer engagement marketing, social media and Lithium's own community, the Lithosphere.


He is a regular blogger for Lithium and in the Lithosphere you'll see him as PaulGi. You can follow him on Twitter at @lithosphere or @bladefrog



I have been asked by a number of our customers and by our CSM team to put together a quick blog talking about how we built Lithosphere, which could help people understand how we approached it and some of the reasoning.


Happy to oblige!


Just a note, I tried as much as possible to use straight out of the box components on Lithosphere, to show the flexibility ‘from stock’ so to speak. There are a couple of obvious areas that I strayed from that – the Support page for one, is custom and makes use of our SalesForce integration, and the blog carousel, but other than that, we’re basically driving the car straight out of the dealership…!


Tabbed Navigation



One of the biggest differences to the new Lithosphere is the redesigned tabbed interface. If you have used any of our sandbox environments you will have seen the familiarity in the style, but there is a slight difference in the implementation.


For the sandboxes, the code for the homepage tabs is managed in the Announcement area in Admin.


670i8B11B701F774D02EThis allows for very simple quick updates to this navigational element, however it doesn’t carry across to other lower levels of the community.


For Lithosphere we incorporated the tabs as a custom component in the quilts, to allow us to place this via Studio and have it consistently show across the site. We also made sure that we matched url path to the CSS to allow the highlighting of a tab when you’re in a specific section. This type of tabbed navigation can be attractive visually and as a navigational aid, but there are some downsides which I want to draw your attention to.


One of the aims of Lithosphere is to act as a showcase environment for our platform, so we can provide examples of how to use functionality etc. So you’ll notice that the ‘tabs’ really correspond to features (Forums, Blogs, Ideas, TKB) as well as actions (read, learn, discuss, etc). This was partly to give customers access to content, but also to help highlight our blogs product, or our ideas product. 


Bear this in mind when you are looking at your interface as you are probably designing around the interaction of customers with ‘your’ products/services - a router, a laptop line or magazine or tv channel, etc. The ‘horses for courses’ rule applies, and don’t get dragged in by the ‘shineyness’!


Editorial Control


We have lots more capabilities to show editorial content on the Lithosphere.


This was particularly important to me as we have a lot going on, and I want to highlight specific things without having to make specific changes to code.


This is achieved through the use of custom content spaces, managed through Studio and Admin.  Fairly straight forward….


We defined two custom content spaces (highlighted in purple) on the homepage, two on the Support page, and then a couple of other minor ones.



This lets me place an image or text in the relevant block in Admin > Layout Settings > Custom Content, apply any addition text and links and then publish it out.


Very easy to do, minimal technical expertise required and has significant visual and editorial impact to the community.


This should give you a good level of control on your community.








The blogs page has a custom built carousel in the middle that helps highlight the four main blogs, plus the latest post from each. Everything else on that page is ‘out of the box’ configuration. The carousel is a reused version of the one we had in the previous Lithosphere, we just applied some new CSS.


It uses our REST API to call the blog name, description and the latest post. Once it’s in the page, there is no management of it required, unless you delete a blog or decide to add a new one (but that doesn’t happen often).


I use the blog announcement area in Admin (Blogs > Communication > announce.pngAnnouncements) to manage the right side panel messaging. When you are in a blog (such as this one, or Social CRM Matters for example) we added a small piece of code to allow us to manage ‘node specific’ announcements.


That means that from the Communication > Announcement area of each blog, I can place an image or specific announcement that isn’t used anywhere else.


I am using this space as a consistently branded header, but in theory you could use this type of implementation for all sorts of announcements or ad space, etc..



This is the major custom page for us. As we need to give specific entitlements to people for logging cases, displaying cases etc, there is quite a lot of custom code here, we did reuse a lot of the development from the original Lithosphere to be mindful in carrying that investment in time forward.  [Note: the black boxes are obscuring case data]




We use two custom content spaces to manage the Documents and Education banners, and then we are checking a user’s permissions to calculate if they have access to cases, and if so, are there any cases to display in the Open Cases Summary and Closed Cases Summary.


This is fairly intensive customization that your CSM can talk to you about, and will involve our development team’s time.


Moving Forward

They are the main areas I can think of, pretty much everything else was out of the box of v9.8.4 I made extensive use of Studio to organize and arrange the elements for people, and I suspect that I will tweak this a little more in the coming weeks.


This is definitely the approach I was aiming at. When new features become available I can easily roll them in to the Lithosphere with little or no assistance from our dev teams depending on the tool and what I want to do with it.


I hope this was helpful and is of use in your design/functionality discussions. Let me know if you have any questions and I’ll be happy to chat.

Tags (1)