The following products uses Bootstrap framework for styling the front-end. 

  1. Community Answers
  2. Community Polls
  3. Community Quiz
  4. Community Surveys
  5. Community Quotes
  6. GPS Tools
  7. CjBlog
  8. Community Crosswords

Other products uses jQuery UI themes but they are being migrated to Bootstrap soon.

Changing UI look and feel using Bootstrap themes

  1. The best source of customizing your bootstrap theme is from the bootstrap website http://getbootstrap.com/2.3.2/customize.html .
  2. In bootstrap customization page, include all components and javascript plugins and customize the colors, fonts etc to get your final output.
  3. After downloading the customized package, you can find the minified css files under css folder of the package.
  4. Replace the css files with the ones in components/com_cjlib/bootstrap/css folder
    • rename and replace the bootstrap.min.css file in the package with cj.bootstrap.min.css
  5. If you are using Joomla 3, you can replace the file directly in Joomla core bootstrap file in media/jui/css folder

There are many other resources available on web that offer pre-customized themes for bootstrap. Here are a few.

There are many resources available on web to change your theme look and feel. Just get the Bootstrap CSS file and replace it in components/com_cjlib/bootstrap/css foldder. 

  1. Please note that there is a possibility of css conflicts with your template as bootstrap uses most common names for its css classes such as icon-*. The best way to avoid such conflicts is load the template css files before loading component bootstrap css files. Please contact your template provider for any help changing your template.
  2. The most effective way of avoiding any conflict is to add prefix to the css classes. All corejoomla product component views are wrapped with a container with id cj-wrapper. You can add this prefix to css to apply any styling only for the component

    for example: #cj-wrapper icon-feed {background-position: top left;}

    However there is no standard way to add prefix automatically to the bootstrap css file except using less files. corejoomla uses below bootstrap.less file (with all other less files remain same).

    /*!
    * Bootstrap v2.2.2
    *
    * Copyright 2012 Twitter, Inc
    * Licensed under the Apache License v2.0
    * http://www.apache.org/licenses/LICENSE-2.0
    *
    * Designed and built with all the love in the world @twitter by @mdo and @fat.
    */ // CSS Reset
    @import "reset.less"; // Core variables and mixins
    @import "variables.less"; // Modify this for custom colors, font-sizes, etc
    @import "mixins.less"; #cj-wrapper {
    // Grid system and page structure
    @import "scaffolding.less";
    @import "grid.less";
    @import "layouts.less";

    // Base CSS
    @import "type.less";
    @import "code.less";
    @import "forms.less";
    @import "tables.less";

    // Components: common
    @import "sprites.less";
    @import "dropdowns.less";
    @import "wells.less";
    }
    @import "component-animations.less";
    #cj-wrapper {
    @import "close.less";

    // Components: Buttons & Alerts
    @import "buttons.less";
    @import "button-groups.less";
    @import "alerts.less"; // Note: alerts share common CSS with buttons and thus have styles in buttons.less

    // Components: Nav
    @import "navs.less";
    @import "navbar.less";
    @import "breadcrumbs.less";
    @import "pagination.less";
    @import "pager.less";
    }
    // Components: Popovers
    @import "modals.less";

    #cj-wrapper {
    @import "tooltip.less";
    @import "popovers.less";

    // Components: Misc
    @import "thumbnails.less";
    @import "media.less";
    @import "labels-badges.less";
    @import "progress-bars.less";
    @import "accordion.less";
    @import "carousel.less";
    @import "hero-unit.less"; // Utility classes
    @import "utilities.less"; // Has to be last to override when necessary
    }

Changing UI look with jQuery UI themes

Presently Community Surveys, Community Quotes and Crosswords supports jQuery UI themes - soon they will migrate to Bootstrap. Here is the procedure to get customized theme.

  1. Goto jQuiry UI Theme Roller page
  2. Select Gallery tab
  3. Choose the theme you like and click download button just below the theme.
  4. Unzip the downloaded package into your local computer
  5. Replace the css file in components/com_cjlib/jquery/themes/YOURTHEMENAME folder. Do not remove other files in that folder.
  6. Customize the answers.css file under css folder of Community Answers to suite your website needs if you want.