Resource icon

Unmaintained Mocha Style 2.0

No permission to download
Compatible XF 2.x versions
  1. 2.2
The style is free to use, modify, or change (For non-commercial use only)
Mocha Style
  • A light colored coffee themed style
  • No template edits - some CSS additions
  • Preview can be seen here a more extended preview with heavier customizations can be seen here (note this is customized for my site - see template instructions below to add your own custom icons)
  • For xenForo 2.2, the style has been exported as an "archive" so simply import the ".zip file" only.
Installation Instructions: While in the Admin CP
Appearance > Styles > Import > Child of style: (No Parent) > and then click "Import"




To customize your forum icons, add this to your Extra.less template, use it over and over for each forum:

Replace .node.node with your own forum ID and change the image path (url) in the .node-icon section
/*** Node icons with image **/
.node.node--id2 {
    .node-icon i { display: none; }

    &.node--forum {
        .node-body {
            padding-left: 5px;
        .node-icon {
            background-image: url('/styles/path/image.png');
            border-radius: 50%;
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
        &.node--read .node-icon {
            opacity: 0.4;
First release
Last update


5.00 star(s) 2 ratings

Latest updates

  1. Added instructions for adding node icons

    This request has come up a couple of times so I've added instructions for the Extra.less template.
  2. Updated to remove existing Google Adsense code

    I had inadvertently left my Adsense code in the PAGE_CONTAINER template, you can remove it...

Latest reviews

Great style thank you so much.Like it as very easy on the eyes and just perfect for what our forum is about
Really fits the theme of our board - I also like the style because it is good for my eyes. Well done!! :) Thank you!
Top Bottom