Giter Site home page Giter Site logo

humhub-modules-clean-theme's Introduction

Clean Theme

Clean theme for Humhub based on the Community theme.

Overview

  • Modern, smooth and uncluttered theme
  • Variants: Contrasted and Bordered
  • On large screens: the 2 top menu bars of the default theme are merged
  • On small screens:
    • the second menu becomes a bottom menu bar
    • on scrolling down, the top and bottom menus are hidden
  • Adds the profile's header in the user's account pages
  • Compatible with the Dark Mode module
  • Possibility to collapse the left navigation menu (in a space, profile, account and admin menu) with the collapsibleLeftNavigation property (see the documentation).
  • You can create a child theme to customize colors, fonts, etc. (see instructions below) or use the Theme Builder module (works only on the clean-base theme).

Configuration

  1. Administration -> Modules: install and activate the module
  2. Administration -> Settings -> Appearance: select the theme

Pricing

This module is free, but is the result of a lot of work for the design and maintenance over time.

If it's useful to you, please consider making a donation or participating in the code. Thanks!

Child themes

To customize colors, fonts, etc., create a child theme (don't forget to copy img and ico folders).

See documentation here.

You can start with this empty template which is a child theme of the "contrasted" theme.

Simply unzip it in the /themes root folder (not in protected or the module).

Add you custom styles in less/theme.less and colors in less/variables.less (see available variables here) and build the CSS: cd less; lessc ./build.less ../css/theme.css --clean-css="--s1 --advanced" --source-map=../css/theme.css.map

Advanced

Import the less files in less/build.less (see example in themes/clean-contrasted) and specify the parent theme as explained here defining the variable @baseTheme: "clean-base"; in the less/variables.less (1).

And then overwrite the variable values using the variables names mentioned here.

You can load new fonts by downloading the via this Google webfonts helper site.

(1) This will allow the child theme to use view pages of clean-base (you also can use a sub-theme such as clean-contrasted as a parent theme). If you change the parent theme, flushing cache has no effect, you need to switch to another theme and switch back to your child theme.

Repository

https://github.com/cuzy-app/humhub-modules-clean-theme

Publisher

CUZY.APP

Licence

GNU AGPL

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.