Forum Discussion

mlombard's avatar
11 years ago

Creating a new look for community site

I've been thrown into the middle of developing a new look for my company's community. This is my first exposure to Lithium, I've dealt primarily with Wordpress in the past, and I'm not really a developer/coder. Does anyone have any suggestions for how you've experimented with different look/feel for your community sites, and what skills were the most useful in doing this?

  • You can do quite a lot with just CSS, but you will need to at least understand CSS and the HTML code that is generated.

     

    Start by simply examining what's already happening. If you use Chrome, for example, just right click on any element on the page and choose "Inspect element." You can then read the generated HTML for that element, identify the correct path to the element, view the CSS that is applied to that element and much more. It can be a little daunting at first, but you should be able to pick up CSS and HTML within a few days (or less, depending on your background).

     

    Make the first change a very simple one. Change the heading text to blue, for example. It may take you a few tries to get it right the first few times; don't get discouraged. You can play in Studio without damaging your site :)

     

    But DO copy your existing CSS file to another filename before you play, so you don't inadvertently push the play changes...

     

    And DO go through the very helpful Lithium training videos for Studio (and everything else)! And ask questions on the forum when you don't understand. I don't see many questions go unanswered for long.

     

     

  • This largely depends on the types of changes you want to implement.

     

    A good starting point is to  look at how Lithium structures the HTML - based on the quilt, page layout and component layout. Then look at how the skin CSS is used to change the look and feel. Have a look at how Lithium specifies fonts and colours.

     

    To style the community you use 'skins' - you can have more than one, and the mobile and desktop versions can be configured separately.

     

    You can't change the structure of Lithium's own components, so if CSS can't do what you want, you'll need to start looking into custom components and the REST API.

     

    If you're doing a major overhaul of the community, you'll want to create a new skin. I recommend creating something as blank as possible as a starting point. Once you've got that, work on the overall page structure (header, footer, main contents etc.), followed by the structure of the different page types (forums, blogs etc.). Finally, when you're happy with the structure, you can start to use CSS for the look and feel - again starting with general rules, then getting more specific for different types of pages.

     

    If the changes are big, the chances are you'll be better starting from scratch rather than trying to make incremental changes to the existing skin.

     

  • I 2nd that... The lithium training on studio and push was really helpful when I first started looking at playing with studio. 

     

    203 and 213 should help