Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
css
 
 
 
 
img
 
 
js
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

org.civicrm.shoreditch (developmental)

The "Shoreditch" extension is a theme for CiviCRM based on a contemporary flat design and the Bootstrap v3 framework.

Please note that this extension is currently in alpha stage and under active development. Significant elements may change.

Requirements

For development

  • NodeJS v14.16.0

Supported CMSs

At the moment the theme is being developed to work only in Drupal 7. WordPress and Joomla are not currently supported.

Installation (git/cli)

# Navigate to your extension directory, e.g.
cd sites/default/files/civicrm/ext

# Download and enable the extension
git clone https://github.com/civicrm/org.civicrm.shoreditch
cv en org.civicrm.shoreditch

CiviAdmin Companion Drupal theme

If you also intend to use the CiviAdmin Companion Drupal theme, please go to its repo and follow the installation instructions there

(only for Shoreditch v0.1-alpha33+)

Development / Bleeding edge version

If you are developing for the theme or if want the very latest (but untested) version of the theme on your site, run

cd org.civicrm.shoreditch
npm i

Once all the packages are installed gulp sass will be automatically invoked, which will build the stylesheets with the latest version of the source code.

Components

The theme includes two major components:

  • "bootstrap.css" is a build of Bootstrap based on the standard Bootstrap style-guide. It can be used with other CiviCRM extensions which satisfy the Bootstrap style-guide.
  • "custom-civicrm.css" is a supplement to "civicrm.css". It uses the same visual conventions and SCSS metadata, but it applies to existing core screens.

Using bootstrap.css

This extension provides the CSS for Bootstrap. Other extensions should output compliant HTML, e.g.

<div id="bootstrap-theme">
  ...
  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">Hello World</h3>
    </div>
    <div class="panel-body">
      This is the Hello World example.
    </div>
  </div>
  ...
</div>

Note the use of id="bootstrap-theme". To avoid conflicts with CMS UIs, the CSS rules are restricted to #bootstrap-theme.

Contributing

Want to report a bug, suggest enhancements, or contribute to the project? Please read here!