Скачать шаблон Joomla с JooMix.org

Articles

март
18

Examples

Two basic options, along with two more specific variations.

Single button group

Wrap a series of buttons with .btn in .btn-group.

<div class="btn-group">
  <button class="btn">Left</button>
  <button class="btn">Middle</button>
  <button class="btn">Right</button>
</div>

Multiple button groups

Combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex components.

<div class="btn-toolbar">
  <div class="btn-group">
    ...
  </div>
</div>

Vertical button groups

Make a set of buttons appear vertically stacked rather than horizontally.

<div class="btn-group btn-group-vertical">
  ...
</div>

Checkbox and radio flavors

Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View the JavaScript docs for that.

Dropdowns in button groups

Heads up! Buttons with dropdowns must be individually wrapped in their own .btn-group within a .btn-toolbar for proper rendering.

Overview and examples

Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup.

<div class="btn-group">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    Action
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <!-- dropdown menu links -->
  </ul>
</div>

Works with all button sizes

Button dropdowns work at any size: .btn-large, .btn-small, or .btn-mini.

Requires JavaScript

Button dropdowns require the Bootstrap dropdown plugin to function.

In some cases—like mobile—dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom JavaScript.


Split button dropdowns

Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.

<div class="btn-group">
  <button class="btn">Action</button>
  <button class="btn dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <!-- dropdown menu links -->
  </ul>
</div>

Sizes

Utilize the extra button classes .btn-mini, .btn-small, or .btn-large for sizing.

<div class="btn-group">
  <button class="btn btn-mini">Action</button>
  <button class="btn btn-mini dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <!-- dropdown menu links -->
  </ul>
</div>

Dropup menus

Dropdown menus can also be toggled from the bottom up by adding a single class to the immediate parent of .dropdown-menu. It will flip the direction of the .caret and reposition the menu itself to move from the bottom up instead of top down.

<div class="btn-group dropup">
  <button class="btn">Dropup</button>
  <button class="btn dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <!-- dropdown menu links -->
  </ul>
</div>

Standard pagination

Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.

<div class="pagination">
  <ul>
    <li><a href="#">Prev</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</div>

Options

Disabled and active states

Links are customizable for different circumstances. Use .disabled for unclickable links and .active to indicate the current page.

<div class="pagination">
  <ul>
    <li class="disabled"><a href="#">&laquo;</a></li>
    <li class="active"><a href="#">1</a></li>
    ...
  </ul>
</div>

You can optionally swap out active or disabled anchors for spans to remove click functionality while retaining intended styles.

<div class="pagination">
  <ul>
    <li class="disabled"><span>&laquo;</span></li>
    <li class="active"><span>1</span></li>
    ...
  </ul>
</div>

Sizes

Fancy larger or smaller pagination? Add .pagination-large, .pagination-small, or .pagination-mini for additional sizes.

<div class="pagination pagination-large">
  <ul>
    ...
  </ul>
</div>
<div class="pagination">
  <ul>
    ...
  </ul>
</div>
<div class="pagination pagination-small">
  <ul>
    ...
  </ul>
</div>
<div class="pagination pagination-mini">
  <ul>
    ...
  </ul>
</div>

Alignment

Add one of two optional classes to change the alignment of pagination links: .pagination-centered and .pagination-right.

<div class="pagination pagination-centered">
  ...
</div>
<div class="pagination pagination-right">
  ...
</div>

Pager

Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.

Default example

By default, the pager centers links.

<ul class="pager">
  <li><a href="#">Previous</a></li>
  <li><a href="#">Next</a></li>
</ul>

Aligned links

Alternatively, you can align each link to the sides:

<ul class="pager">
  <li class="previous">
    <a href="#">&larr; Older</a>
  </li>
  <li class="next">
    <a href="#">Newer &rarr;</a>
  </li>
</ul>

Optional disabled state

Pager links also use the general .disabled utility class from the pagination.

<ul class="pager">
  <li class="previous disabled">
    <a href="#">&larr; Older</a>
  </li>
  ...
</ul>

Labels

Labels Markup
Default <span class="label">Default</span>
Success <span class="label label-success">Success</span>
Warning <span class="label label-warning">Warning</span>
Important <span class="label label-important">Important</span>
Info <span class="label label-info">Info</span>
Inverse <span class="label label-inverse">Inverse</span>

Badges

Name Example Markup
Default 1 <span class="badge">1</span>
Success 2 <span class="badge badge-success">2</span>
Warning 4 <span class="badge badge-warning">4</span>
Important 6 <span class="badge badge-important">6</span>
Info 8 <span class="badge badge-info">8</span>
Inverse 10 <span class="badge badge-inverse">10</span>

Easily collapsible

For easy implementation, labels and badges will simply collapse (via CSS's :empty selector) when no content exists within.

Hero unit

A lightweight, flexible component to showcase key content on your site. It works well on marketing and content-heavy sites.

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

Learn more

<div class="hero-unit">
  <h1>Heading</h1>
  <p>Tagline</p>
  <p>
    <a class="btn btn-primary btn-large">
      Learn more
    </a>
  </p>
</div>

Page header

A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1's default small, element as well most other components (with additional styles).

<div class="page-header">
  <h1>Example page header <small>Subtext for header</small></h1>
</div>

Default thumbnails

By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.

Highly customizable

With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.

  • 300x200

    Thumbnail label

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    Action Action

  • 300x200

    Thumbnail label

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    Action Action

  • 300x200

    Thumbnail label

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    Action Action

Why use thumbnails

Thumbnails (previously .media-grid up until v1.4) are great for grids of photos or videos, image search results, retail products, portfolios, and much more. They can be links or static content.

Simple, flexible markup

Thumbnail markup is simple—a ul with any number of li elements is all that is required. It's also super flexible, allowing for any type of content with just a bit more markup to wrap your contents.

Uses grid column sizes

Lastly, the thumbnails component uses existing grid system classes—like .span2 or .span3—for control of thumbnail dimensions.

Markup

As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup for linked images:

<ul class="thumbnails">
  <li class="span4">
    <a href="#" class="thumbnail">
      <img data-src="holder.js/300x200" alt="">
    </a>
  </li>
  ...
</ul>

For custom HTML content in thumbnails, the markup changes slightly. To allow block level content anywhere, we swap the <a> for a <div> like so:

<ul class="thumbnails">
  <li class="span4">
    <div class="thumbnail">
      <img data-src="holder.js/300x200" alt="">
      <h3>Thumbnail label</h3>
      <p>Thumbnail caption...</p>
    </div>
  </li>
  ...
</ul>

More examples

Explore all your options with the various grid classes available to you. You can also mix and match different sizes.

Default alert

Wrap any text and an optional dismiss button in .alert for a basic warning alert message.

Warning! Best check yo self, you're not looking too good.
<div class="alert">
  <button type="button" class="close" data-dismiss="alert">&times;</button>
  <strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>

Dismiss buttons

Mobile Safari and Mobile Opera browsers, in addition to the data-dismiss="alert" attribute, require an href="#" for the dismissal of alerts when using an <a> tag.

<a href="#" class="close" data-dismiss="alert">&times;</a>

Alternatively, you may use a <button> element with the data attribute, which we have opted to do for our docs. When using <button>, you must include type="button" or your forms may not submit.

<button type="button" class="close" data-dismiss="alert">&times;</button>

Dismiss alerts via JavaScript

Use the alerts jQuery plugin for quick and easy dismissal of alerts.


Options

For longer messages, increase the padding on the top and bottom of the alert wrapper by adding .alert-block.

Warning!

Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

<div class="alert alert-block">
  <button type="button" class="close" data-dismiss="alert">&times;</button>
  <h4>Warning!</h4>
  Best check yo self, you're not...
</div>

Contextual alternatives

Add optional classes to change an alert's connotation.

Error or danger

Oh snap! Change a few things up and try submitting again.
<div class="alert alert-error">
  ...
</div>

Success

Well done! You successfully read this important alert message.
<div class="alert alert-success">
  ...
</div>

Information

Heads up! This alert needs your attention, but it's not super important.
<div class="alert alert-info">
  ...
</div>

Examples and markup

Basic

Default progress bar with a vertical gradient.

<div class="progress">
  <div class="bar" style="width: 60%;"></div>
</div>

Striped

Uses a gradient to create a striped effect. Not available in IE7-8.

<div class="progress progress-striped">
  <div class="bar" style="width: 20%;"></div>
</div>

Animated

Add .active to .progress-striped to animate the stripes right to left. Not available in all versions of IE.

<div class="progress progress-striped active">
  <div class="bar" style="width: 40%;"></div>
</div>

Stacked

Place multiple bars into the same .progress to stack them.

<div class="progress">
  <div class="bar bar-success" style="width: 35%;"></div>
  <div class="bar bar-warning" style="width: 20%;"></div>
  <div class="bar bar-danger" style="width: 10%;"></div>
</div>

Options

Additional colors

Progress bars use some of the same button and alert classes for consistent styles.

<div class="progress progress-info">
  <div class="bar" style="width: 20%"></div>
</div>
<div class="progress progress-success">
  <div class="bar" style="width: 40%"></div>
</div>
<div class="progress progress-warning">
  <div class="bar" style="width: 60%"></div>
</div>
<div class="progress progress-danger">
  <div class="bar" style="width: 80%"></div>
</div>

Striped bars

Similar to the solid colors, we have varied striped progress bars.

<div class="progress progress-info progress-striped">
  <div class="bar" style="width: 20%"></div>
</div>
<div class="progress progress-success progress-striped">
  <div class="bar" style="width: 40%"></div>
</div>
<div class="progress progress-warning progress-striped">
  <div class="bar" style="width: 60%"></div>
</div>
<div class="progress progress-danger progress-striped">
  <div class="bar" style="width: 80%"></div>
</div>

Browser support

Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox.

Versions earlier than Internet Explorer 10 and Opera 12 do not support animations.

Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content.

Default example

The default media allow to float a media object (images, video, audio) to the left or right of a content block.

64x64

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
64x64

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
64x64

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
<div class="media">
  <a class="pull-left" href="#">
    <img class="media-object" data-src="holder.js/64x64">
  </a>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...

    <!-- Nested media object -->
    <div class="media">
      ...
    </div>
  </div>
</div>

Media list

With a bit of extra markup, you can use media inside list (useful for comment threads or articles lists).

  • 64x64

    Media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    64x64

    Nested media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
    64x64

    Nested media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
    64x64

    Nested media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
  • 64x64

    Media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
<ul class="media-list">
  <li class="media">
    <a class="pull-left" href="#">
      <img class="media-object" data-src="holder.js/64x64">
    </a>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      ...

      <!-- Nested media object -->
      <div class="media">
        ...
     </div>
    </div>
  </li>
</ul>

Wells

Use the well as a simple effect on an element to give it an inset effect.

Look, I'm in a well!
<div class="well">
  ...
</div>

Optional classes

Control padding and rounded corners with two optional modifier classes.

Look, I'm in a well!
<div class="well well-large">
  ...
</div>
Look, I'm in a well!
<div class="well well-small">
  ...
</div>

Close icon

Use the generic close icon for dismissing content like modals and alerts.

<button class="close">&times;</button>

iOS devices require an href="#" for click events if you would rather use an anchor.

<a class="close" href="#">&times;</a>

Helper classes

Simple, focused classes for small display or behavior tweaks.

.pull-left

Float an element left

class="pull-left"
.pull-left {
  float: left;
}

.pull-right

Float an element right

class="pull-right"
.pull-right {
  float: right;
}

.muted

Change an element's color to #999

class="muted"
.muted {
  color: #999;
}

.clearfix

Clear the float on any element

class="clearfix"
.clearfix {
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
  }
  &:after {
    clear: both;
  }
}
март
12

окт
19

JoomlaXTC Template Framework Guide



Introduction

The XTC Framework provides simple yet powerful template creation tools that allows developers to rapidly build or change every aspect of template elements and its administration panel and provide final users with easy and familiar controls to configure the template.



Among its features are:



Multiple Layouts



Layouts define the overall location of elements in the template, they can have their own set of style, typography or any other CSS Parameter Groups. Also they can have their own custom parameters for added functionality such as custom code, Javascript calls, etc.
  • Support for one or multiple layouts each one with its own set of parameters. Switch your entire site look in two clicks!
  • Layouts can share the same module position names or have custom ones for increased flexibility.
  • Support mobile devices.
  • Creating a new layout is as easy as copying the current one into another folder!
  • PHP-based layout code allows any kind of customization or logic to be used
  • Intelligent Grid rendering with standard Joomla! jdoc calls is available for easy placement of content areas
  • The grid engine creates automatic CSS classes for easy styling: Need to edit the header of the bottom module in the first column of region3? CSS is as easy as: #region3 .firstcolumn .lastarea h3 {}
  • Use region-based layouts with selectable region display order
  • Easily switch column display order within a region
  • From simple to advanced template layouts, the choice is yours!

Style Groups




XTC delivers powerful CSS features to ease the styling of templates. For example, you can combine multiple CSS preset styles to obtain the right look for your site. XTC template CSS can be split in as many groups as needed, each one capable of sharing one or more template parameters to control what you want, and if you need more groups, creating new ones is really simple.
  • Use Parameters Groups to organize CSS in many ways: Colors and Graphics, Module suffixes, Typography, Menu styling, etc.
  • Use one CSS file with one or multiple Parameter Groups, or multiple CSS files for each group.
  • CSS files can be edited from template backend, or use the template.css file to override any other CSS.
  • Use standard Joomla! elements along with custom elements for easy XML customization
  • Use PHP code inside CSS files with full access to all parameters for custom styles.
  • Does not require multiple calls for CSS files to server
  • Making an extra sets of parameters is as easy as copying one file!

Easy Menus




Three menu modes included by default: Suckerfish, Two-column suckerfish and Drop line, each one selectable as a class in the mainmenu module!
  • Support list rendering
  • Automatic CSS classes added for easy styling
  • MooTools based for total compatibility

Framework Features

  • Fast, Joomla! API standard
  • Select which components to show or hide in the frontpage
  • Include all the CSS as part of the HTML document, as separate files or as a single file with the flip of a switch
  • Selectable CSS gzip compression for increased throughput
  • Mark any parameter as "public" to allow their values be set from URL calls
  • Public parameter values are independent by user/visitor
  • Customizable CSS for the administation panel
  • More features are being added!

User's Guide to XTC Framework


The XTC framework provides a flexible and powerful foundation to develop Joomla! frontend templates of any kind, this user guide will explain the basic concepts behind the framework and teach you how to use the administrator parameters available on the Joomla! Template Manager of an XTC template.

Before starting, it is strongly recommended for you to have some knowledge of how standard Joomla! templates work and how are they managed. A good place to start is the Joomla! site itself, click here for more information. Also, knowledge of HTML and CSS is strongly suggested.

One thing to consider is that the parameters can be different from template to template since they are ultimately decided by the template developer in first place, however there are simple rules that apply to all of them.

Layouts and Styles


Joomla! templates (and practically any webpage) are built using the HTML markup language and CSS formatting or styling language. There are several schools of web development but for practical purposes on Joomla! templates we will think of HTML as the way to define where to position the content ("Layout") and the CSS as the way to define how the content will visually look like ("Style").

Layouts


An XTC template can have a choice of multiple Layouts, these can vary in the number of module positions, content areas or any other aspect. Some layouts can be automatically used for specific devices such as mobile phones (read the Developer's Guide for more information). Layout files are stored on their own directory inside the "/layouts" folder of the template.

Styles


Style files contain any CSS required by the Layouts to be properly displayed in a user's browser. Like Layouts, a template may have one or more Style options to choose from, each one intended to control one aspect of the layout formatting. By combining the different Styles available, you can easily customize the appearance of your site with just a few clicks. Styles are composed of two file types: A CSS file stored in the "css" folder and a XML file stored in the "parameters" folder.

Read below for more information about the file structure of the template.

Parameter Groups


The XTC framework provides facilities for both Layouts and Styles to utilize user-managed parameters to enhance their functionality, these parameters are available in the Template Manager of the Joomla! administrator page. In the case of XTC templates, you will have access not only to the regular parameters of the template but also to "Parameter Groups" that control the XTC framework as well. These Parameter Groups carry an identification label on the left side and an arrow icon and title on the right side. You can click on the right side to slide-open each group and see the parameters within (the images shown on this guide are taken from a sample template and do not necessarily reflect the parameters on your template).

Template Manager

There are two types of Parameter Groups: Layout parameter groups and Style parameter groups. An XTC template has only one Layout group that contains the parameters for each layout, however there could be one or more Style parameter groups. The different Style groups help not only to ease the management of parameters but also provide increased flexibility by allowing you to combine them.

This is the hierarchy of parameters in an XTC template:

XTC Hierarchy

There is no limit to the number of layouts or style groups available on an XTC template. In the example shown in the first image, the Layout group has two layouts: Default layout and Mobile layout. Each layout can be configured independently from each other. Notice that the parameters allow you to choose which style to use from each style group below. The hability to configure each Style group individually and being able to choose from them in the layout allows you to change your entire website design with just a few clicks.

The XTC framework uses standard Joomla! parameters for most of the configuration options and although some of them may look similar, their usage can be different depending on their purpose. For example, on some cases you are expected to enter a number while on others you may have to enter a text legend. Please pay attention to the information on parameter tooltips. Move your mouse over the parameter label to see them.

Besides the standard parameters, XTC includes a few additional types that are explained here:

Text Parameter


Text Parameter

This parameter can have multiple purposes as it allows you to enter text or number values. Read the instructions on the parameter tooltip to learn if there is any particular format you have to follow when entering information on it.

Column Order


Column Order

One of the features of XTC Framework is the hability to render Joomla! content in Grids containing one or more columns. This parameter allows you to choose the render order (from left to right) of each column within a given Grid. The parameter displays a list of all the possible options however a column might not be rendered in the template if there is no content for it. For more information on XTC Grids please read the Developer's Guide.

Combobox Parameter


Combobox Parameter

Combines the ease of preset values from a regular drop-down parameter with the ability to type custom values if needed. This parameter also can have multiple purposes as it allows you to enter text or number values. Read the instructions on the parameter tooltip to learn if there is any particular format you have to follow when entering information on it.

Image Selector


Image Selector

Most templates require image files, this parameter allows you to disable or choose from a list of available images. If you place your mouse over the left side of the parameter a tooltip will appear displaying the folder name where the images are located. This folder is placed inside the "/images" folder of your template.

Color Picker


Color Picker

This parameter used for color selection accepts a color input in any valid CSS format, some examples are (without quotes): "#FEB028", "Red", "transparent", "rgb(100%, 0%, 0%)" etc. Also, if you click on the small square at the right of the input field, a graphic color-picker will appear that lets you choose or edit the color value directly. Click on the small dot at the lower-right corner when done.

Framework Parameters


This is a special group of parameters that may or may not be available in your template, their purpose is to control the framework internal system. Read below for a description of each option.

Color Picker

CSS Mode


This controls how the CSS code will be generated for the template:

Single File
All the CSS code will be generated on a single file, this reduces the number of HTTP requests to the server thus reducing the page load time. It is the recommended setting.
Separate Files
CSS code will be generated in files per Style Group. This causes multiple HTTP requests to the server but also helps the debug process during template development as you can see the CSS source code for each individual Style Group.
Head Embedding
The CSS code will be embedded in the HEAD element of the template. This avoids HTTP requests for template CSS however the page source code will be much bigger.


CSS Compression


This parameter enables or disables GZip compression of the CSS code reducing transmission time at the expense of minimal server load. Most modern browsers are capable of using this feature. CSS compression is only available in "Single File" and "Separate Files" CSS modes.


Component Display


On certain scenarios, you might want to control the display of Joomla! components in the frontpage of your site. This parameter allows you to decide which of the installed components will be allowed to be shown in the frontpage. Select the "ALL COMPONENTS" option to enable any component, or choose one or more components from the list (press the CTRL key for multiple selection).

Menu Effects and Styling


By default XTC framework provides special styling enhancements and sliding animation effects support for three menu types: Suckerfish, Two-column Suckerfish and Dropline. To apply these effects to any menu in your system you just have to change a few parameters in the "mod_mainmenu" module assigned to render the menu. For example, the image below shows the parameters of a "mod_mainmenu" module that will display the options from the "mainmenu" menu in the module position identified as "top":

Menu Module

To use the animation and styling enhancements, the settings of the module should be as follows:

"Menu Style" = List
"Always show sub-menu Items" = Yes
Menu Class Suffix
Choose from " suckerfish", " dualfish" or " dropline" options. Enter the value with no quotes and a leading space.
Module Class Suffix
This is an optional CSS class of your choice applied to the module HTML and could be useful for styling

After the changes are done, click on the Save or Apply buttons. The module will now start to behave as desired.

Styling the menus


In order to change the visual appearance of a menu you must first get familiar with their structure. The "List" menu style will render the menu structure using a common "nested list" format. For example, the HTML code for a menu with three main options and a submenu with another three options will look like this:

<ul>
   <li>
      <a href="#">Menu option 1</a>
   </li>
   <li>
      <a href="#">Menu option 2</a>
      <ul>
        <li><a href="#">Submenu option 1</a></li>
        <li><a href="#">Submenu option 2</a></li>
        <li><a href="#">Submenu option 3</a></li>
      </ul>
   </li>
   <li>
      <a href="#">Menu option 3</a>
   </li>
</ul>

Besides this basic structure, List menus on XTC have aditional HTML code and CSS classes added to facilitate custom styling, the complete HTML code for a Suckerfish menu is similar to this:

<ul class="menu suckerfish">
   <li class=" first order1">
      <a><span>Menu option 1</span></a>
   </li>
   <li class="parent center order2">
      <a><span>Menu option 2</span></a>
      <ul>
         <li class=" first order1">
            <a><span>Submenu option 1</span></a>
         </li>
         <li class=" center order2">
            <a><span>Submenu option 2</span></a>
         </li>
         <li class=" last order3">
            <a><span>Submenu option 3</span></a>
         </li>
      </ul>
   </li>
   <li class=" active last order3">
      <a><span>Menu option 3</span></a>
   </li>
</ul>

Notice how the main

    tag has the "menu" and "suckerfish" classes added to it. Also, the options within each menu level have extra classes describing their place in the menu structure: "first", "center" and "last" (or "single" if there is only one option). They are also assigned a numbered "order" class indicating their position. Lastly, the classes "active" and "parent" further identify the currently active menu option and options containing child submenus respectively.

    With this structure in mind, you can now look at the following CSS code as an example of styling:

    /* Top Level */
    ul.menu > li.active > a { background:#ffffff;color:#999999; }
    ul.menu > li > a { font-weight:normal; background:#ffffff; color:#999999; }
    ul.menu > li > a:hover { background:#ffffff; color:#bbbbbb; }
    
    /* Drop Levels */
    ul.menu li.parent > ul { background:#5399b7; }
    ul.menu li.parent > ul > li { background:#000000; }
    ul.menu li.parent > ul > li > a { border-bottom: 1px solid #65a3be; font-size:11px; color:#bad6e2; }
    ul.menu li.parent > ul > li.active > a { color:#bad6e2; }
    ul.menu li.parent > ul > li > a:hover { font-size:11px; color:#ffffff; }
    

    As you can see, styling is separated in two main groups, the first group has the visual formatting of the options show in the first level of options, while the second group defines the appearance of any option in a submenu. The code above contains only appearance formatting and most of the time it is what you will be interested in (the necessary code for the menu structure is already built for you on the template "default.css" file and does not need to be changed).

    Of course, you are free to use any CSS formatting code you desire. As a best-practice, the recommended place to store all your custom CSS code is the "template.css" file located in the "css" folder. This file is available for editing from the Template Manager screen by cliking on the "Edit CSS" button at the top. Please continue reading for a detailed description of the files included in an XTC template.

    XTC File Structure


    XTC templates are very similar in structure to a standard Joomla! template on purpose, this means you will be very familiar with the file elements of XTC framework in just a moment.

    As any other Joomla! template, XTC templates are stored in a directory within the "/templates" folder of your system. The main program of a Joomla! template is called "index.php" and for XTC templates, this file is in charge of initializing the XTC framework, loading the different parameters and calling a layout file to render the template and contents.

    Layouts


    A layout contains the HTML code to create the overall template layout, they include standard Joomla! "jdoc" calls for content areas as well as the XTC function calls required for the Style Group files that compose the CSS code for formatting. It can also include any other HTML code necessary for the template to work properly. Layouts are stored on their own directory inside the "layouts" folder of the template, this is an example of the file structure for layouts:

    XTC Layout

    As you can see, each layout is composed of at least two files:

    config.xml
    This file contains the layout parameters visible on the Template Manager
    layout.php
    This is the main layout program containing the necessary HTML markup and Joomla! "jdoc" calls for content areas

    Note: Layouts can contain more folders or files depending on their functionality.

    XTC supports an unlimited number of layouts per template. The easiest way to create a new layout is to make a copy of an existing layout folder with a different name. You can then edit the php and xml file to suit your needs or leave them unchanged. The XTC framework will recognize the new layout automatically and will keep separate sets of parameters for both. Read the Developer's Guide for more information on how to construct a Layout from scratch.

    Styles


    As mentioned before, the visual styling of the template is done with CSS formatting and the XTC framework follows the same "Cascade" concept to apply stylings. In order to achieve this, several files located in the "css" folder of the template are called in the following order:

    1. default.css - This file contains most of the styling code for the template
    2. "Style groups" - The files corresponding to each Style Group will be called in sequence
    3. system.css - Joomla! default system styling
    4. general.css - Joomla! default styling
    5. template.css - The default Joomla! CSS file for a template will be called last, it can contain any user-made override of previous stylings.

    Each Style Group has a short prefix assigned in the template parameters, and all files related to the group must be named using the same prefix. This being said, it is important to understand how Style parameters groups work. In the next examples, we will use a Style Group identified with the prefix "theme" that is intended to control the overall color appearance of our template.

    Style Groups are composed of at least one CSS file and one or more XML files. Our example group has the "theme" prefix assigned, so there will be a "theme.css" file (the formatting code) in the "css" folder and a "theme.xml" file (the parameters code) in the "parameters" folder. Just like in Layouts, the Style parameters are available in the Template Manager.

    The nature of Style Groups allows you to expand the configuration options even more: since the files are named after a common suffix, it is possible to have a single theme.css file and multiple xml files, for example:

    css/theme.css
    This contains the CSS code
    parameters/theme_blue.xml
    This XML contains parameters with color values set for a Blue appearance
    parameters/theme_green.xml
    This XML contains parameters with color values set for a Green appearance
    parameters/theme_red.xml
    This XML contains parameters with color values set for a Red appearance

    If the CSS base code is essentially the same, having multipe xml files allows you to have multiple sets of parameter values for a single group. The xml parameter files of a single group will be shown together like in the following image:

    Multiple Styles

    Of course, they can all be adjusted individually. XTC will keep a separate copy of the values for each set and will automatically select the correct one depending on the option selected in the layout.

    Furthermore, the combinations can be expanded even more if you create multiple CSS files for a single group. For example:

    css/theme.css
    This contains the CSS code
    css/theme_green.css
    This contains the CSS code
    parameters/theme_blue.xml
    This XML contains parameters with color values set for a Blue appearance
    parameters/theme_green.xml
    This XML contains parameters with color values set for a Green appearance
    parameters/theme_red.xml
    This XML contains parameters with color values set for a Red appearance

    In this example, the Blue and Red themes will share a single css file ("theme.css") while the Green theme will use its own css file, permiting it to have a different set of parameters altogether. Just like Layouts, the easiest way to create a new xml or css file is to simply copy an existing one with a filename using the same preffix. You can then edit the css or xml files to change the style name and/or description.

    Conclusion


    Thank you for reading this guide. As you can see, the XTC framework offers efficient and powerful features that ease template customization while maintaining full compatibility with standard Joomla! template features. Your current knowledge of Joomla! templates is still valid and empowered with the XTC extensions! If you are a Template Developer, there is still more useful information available for you in the Developer's guide.

    The XTC framework will be enriched with more real-world useful features in the future. This document will be updated whenever needed to reflect any changes or additions.


    Copyright 2010 Monev Software LLC
    www.joomlaxtc.com

окт
19
tiadminpanel

Joomla XTC Framework

JoomlaXTC XTC Framework template system provides complete control over the template styles, from Width Adjustments, Region and Column Layout, Backgrounds, Font Colors / Sizes / Typeset, Module Layout, Menus and much more.

Using the standard Joomla! programming interface, the XTC Framework provides simple yet powerful template creation tools that allows developers to rapidly build or change every aspect of template elements and its administration panel and provide final users with easy and familiar controls to configure the template.

The following are some of the available features, more are coming!


Layouts:


Layouts define the overall location of elements in the template, they can have their own set of style, typography or any other CSS Parameter Groups. Also they can have their own custom parameters for added functionality such as custom code, Javascript calls, etc.
  • Support for one or multiple layouts each one with its own set of parameters. Switch your entire site look in two clicks!
  • Layouts can share the same module position names or have custom ones for increased flexibility.
  • Support mobile devices.
  • Creating a new layout is as easy as copying the current one into another folder!
  • PHP-based layout code allows any kind of customization or logic to be used
  • Intelligent Grid rendering with standard Joomla! jdoc calls is available for easy placement of content areas
  • The grid engine creates automatic CSS classes for easy styling: Need to edit the header of the bottom module in the first column of region3? CSS is as easy as: #region3 .firstcolumn .lastarea h3 {}
  • Use region-based layouts with selectable region display order
  • Easily switch column display order within a region
  • From simple to advanced template layouts, the choice is yours!

Style Management:


XTC delivers powerful CSS features to ease the styling of templates. For example, you can combine multiple CSS preset styles to obtain the right look for your site. XTC template CSS can be split in as many groups as needed, each one capable of sharing one or more template parameters to control what you want, and if you need more groups, creating new ones is really simple.
  • Use Parameters Groups to organize CSS in many ways: Colors and Graphics, Module suffixes, Typography, Menu styling, etc.
  • Use one CSS file with one or multiple Parameter Groups, or multiple CSS files for each group.
  • CSS files can be edited from template backend, or use the template.css file to override any other CSS.
  • Use PHP code inside CSS files with full access to all parameters for custom styles.
  • Does not require multiple calls for CSS files to server
  • Making an extra sets of parameters is as easy as copying one file!

Easy Menus:


Three menu modes included by default: Suckerfish, Two-column suckerfish and Drop line, each one selectable as a class in any mainmenu module!
  • Support list rendering
  • Automatic CSS classes added for easy styling
  • MooTools based for total compatibility

Framework Features:


  • Fast, Joomla! API standard
  • Select which components to show or hide in the frontpage
  • Include all the CSS as part of the HTML document, as separate files or as a single file with the flip of a switch.
  • Selectable CSS gzip compression for increased throughput
  • Mark any parameter as "public" to allow their values be set from URL calls
  • Public parameter values are independent by user/visitor
  • Customizable CSS for the administation panel
окт
19

Base Typography

This is an H1 Heading

<h1>This is an H1 Heading</h1>

This is an H2 Heading

<h2>This is an H2 Heading</h2>

This is an H3 Heading

<h3>This is an H3 Heading</h3>

This is an H4 Heading

<h4>This is an H4 Heading</h4>
This is an H5 Heading
<h5>This is an H5 Heading</h5>
D

ropcap Styling for article intros and much more. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut nunc lorem, eleifend vel, rhoncus sed, congue quis, leo. Aliquam dignissim dui quis purus. Phasellus vehicula, ante eu mollis pharetra, enim felis iaculis lacus, congue ullamcorper lorem eros at libero.

<div class="dropcap">D</div>ropcap Styling




This is the Example Quote Class this can be used to create quotes in article pages by using the code below

<blockquote class="opensmall">This is the Example Quote Class</blockquote>

Example LG Quote Class

<blockquote class="openlarge">This is the Example Quote Class</blockquote>
This is the code div class. Curabitur bibendum metus porta dui sagittis sagittis. Suspendisse placerat orci eget massa. Donec vitae nisi. Sed tincidunt adipiscing mauris. In lorem. Maecenas dapibus commodo sapien.


<div class="code">This is the code div class</div>


This is the highlight div class. Curabitur bibendum metus porta dui sagittis sagittis. Suspendisse placerat orci eget massa. Donec vitae nisi. Sed tincidunt adipiscing mauris. In lorem. Maecenas dapibus commodo sapien. Nam nulla.


<div class="highlight">This is the highlight div class</div>

Blog Div Styles

This is Blog Red

<div class="blog-red">blog-red</div>

This is Blog Blue

<div class=">blog-blue">blog-blue</div>

This is Blog Green

<div class="blog-green">blog-green</div>

This is Blog Cyan

<div class="blog-cyan">blog-cyan</div>
This is Blog Tan

<div class="blog-tan">blog-tan</div>

This is Blog Yellow

<div class="blog-yellow">blog-yellow</div>

This is Blog Grey

<div class="blog-grey">blog-grey</div>

This is Blog Pink

<div class="blog-pink">blog-pink</div>

Note Style

This the note style. Curabitur bibendum metus porta dui sagittis sagittis. Suspendisse placerat orci eget massa. Donec vitae nisi. Sed tincidunt adipiscing mauris. In lorem. Maecenas dapibus commodo sapien. Nam nulla.
<div class="note">This is note style</div>

Flat Button Styles



<button class="btnblue">Blue Button</button>




<button class="btnred">Red Button</button>




<button class="btngreen">Green Button</button>




<button class="btngrey">Grey Button</button>




<button class="btnyellow">Yellow Button</button>




<button class="btnorange">Orange Button</button>


UL List Styles

Check List

  • This is an
  • example of a
  • checlist ul

Article List

  • This is an
  • example of an
  • article list

Star List

  • This is an
  • example of a
  • star list

Arrow List

  • This is an
  • example of an
  • arrow list

Remove List

  • This is an
  • example of a
  • remove list

Bookmark List

  • This is an
  • example of a
  • bookmark list

Comment List

  • This is an
  • example of a
  • comment list

Marker List

  • This is an
  • example of a
  • marker list

Play List

  • This is an
  • example of a
  • play list

Asterisk List

  • This is an
  • example of a
  • asterik list

Notice List

  • This is an
  • example of a
  • notice list

Favorites List

  • This is an
  • example of a
  • favotites list

Font Awesome Icons v.4

rub
ruble (alias)
rouble (alias)
pagelines
stack-exchange
arrow-circle-o-right
arrow-circle-o-left
caret-square-o-left
toggle-left (alias)
dot-circle-o
wheelchair
vimeo-square
try
turkish-lira (alias)
plus-square-o

Web Application Icons

adjust
anchor
archive
arrows
arrows-h
arrows-v
asterisk
ban
bar-chart-o
barcode
bars
beer
bell
bell-o
bolt
book
bookmark
bookmark-o
briefcase
bug
building-o
bullhorn
bullseye
calendar
calendar-o
camera
camera-retro
caret-square-o-down
caret-square-o-left
caret-square-o-right
caret-square-o-up
certificate
check
check-circle
check-circle-o
check-square
check-square-o
circle
circle-o
clock-o
cloud
cloud-download
cloud-upload
code
code-fork
coffee
cog
cogs
comment
comment-o
comments
comments-o
compass
credit-card
crop
crosshairs
cutlery
dashboard (alias)
desktop
dot-circle-o
download
edit (alias)
ellipsis-h
ellipsis-v
envelope
envelope-o
eraser
exchange
exclamation
exclamation-circle
exclamation-triangle
external-link
external-link-square
eye
eye-slash
female
fighter-jet
film
filter
fire
fire-extinguisher
flag
flag-checkered
flag-o
flash (alias)
flask
folder
folder-o
folder-open
folder-open-o
frown-o
gamepad
gavel
gear (alias)
gears (alias)
gift
glass
globe
group (alias)
hdd-o
headphones
heart
heart-o
home
inbox
info
info-circle
key
keyboard-o
laptop
leaf
legal (alias)
lemon-o
level-down
level-up
lightbulb-o
location-arrow
lock
magic
magnet
mail-forward (alias)
mail-reply (alias)
mail-reply-all
male
map-marker
meh-o
microphone
microphone-slash
minus
minus-circle
minus-square
minus-square-o
mobile
mobile-phone (alias)
money
moon-o
music
pencil
pencil-square
pencil-square-o
phone
phone-square
picture-o
plane
plus
plus-circle
plus-square
plus-square-o
power-off
print
puzzle-piece
qrcode
question
question-circle
quote-left
quote-right
random
refresh
reply
reply-all
retweet
road
rocket
rss
rss-square
search
search-minus
search-plus
share
share-square
share-square-o
shield
shopping-cart
sign-in
sign-out
signal
sitemap
smile-o
sort
sort-alpha-asc
sort-alpha-desc
sort-amount-asc
sort-amount-desc
sort-asc
sort-desc
sort-down (alias)
sort-numeric-asc
sort-numeric-desc
sort-up (alias)
spinner
square
square-o
star
star-half
star-half-empty (alias)
star-half-full (alias)
star-half-o
star-o
subscript
suitcase
sun-o
superscript
tablet
tachometer
tag
tags
tasks
terminal
thumb-tack
thumbs-down
thumbs-o-down
thumbs-o-up
thumbs-up
ticket
times
times-circle
times-circle-o
tint
toggle-down (alias)
toggle-left (alias)
toggle-right (alias)
toggle-up (alias)
trash-o
trophy
truck
umbrella
unlock
unlock-alt
unsorted (alias)
upload
user
users
video-camera
volume-down
volume-off
volume-up
warning (alias)
wheelchair
wrench

Form Control Icons

check-square
check-square-o
circle
circle-o
dot-circle-o
minus-square
minus-square-o
plus-square
plus-square-o
square
square-o

Currency Icons

bitcoin (alias)
btc
cny (alias)
dollar (alias)
eur
euro (alias)
gbp
inr
jpy
krw
money
rmb (alias)
rouble (alias)
rub
ruble (alias)
rupee (alias)
try
turkish-lira (alias)
usd
won (alias)
yen (alias)

Text Editor Icons

align-center
align-justify
align-left
align-right
bold
chain (alias)
chain-broken
clipboard
columns
copy (alias)
cut (alias)
dedent (alias)
eraser
file
file-o
file-text
file-text-o
files-o
floppy-o
font
indent
italic
link
list
list-alt
list-ol
list-ul
outdent
paperclip
paste (alias)
repeat
rotate-left (alias)
rotate-right (alias)
save (alias)
scissors
strikethrough
table
text-height
text-width
th
th-large
th-list
underline
undo
unlink (alias)

Directional Icons

angle-double-down
angle-double-left
angle-double-right
angle-double-up
angle-down
angle-left
angle-right
angle-up
arrow-circle-down
arrow-circle-left
arrow-circle-o-down
arrow-circle-o-left
arrow-circle-o-right
arrow-circle-o-up
arrow-circle-right
arrow-circle-up
arrow-down
arrow-left
arrow-right
arrow-up
arrows
arrows-alt
arrows-h
arrows-v
caret-down
caret-left
caret-right
caret-square-o-down
caret-square-o-left
caret-square-o-right
caret-square-o-up
caret-up
chevron-circle-down
chevron-circle-left
chevron-circle-right
chevron-circle-up
chevron-down
chevron-left
chevron-right
chevron-up
hand-o-down
hand-o-left
hand-o-right
hand-o-up
long-arrow-down
long-arrow-left
long-arrow-right
long-arrow-up
toggle-down (alias)
toggle-left (alias)
toggle-right (alias)
toggle-up (alias)

Video Player Icons

arrows-alt
backward
compress
eject
expand
fast-backward
fast-forward
forward
pause
play
play-circle
play-circle-o
step-backward
step-forward
stop
youtube-play

Brand Icons

  • All brand icons are trademarks of their respective owners.
  • The use of these trademarks does not indicate endorsement of the trademark holder by Font Awesome, nor vice versa.
adn
android
apple
bitbucket
bitbucket-square
bitcoin (alias)
btc
css3
dribbble
dropbox
facebook
facebook-square
flickr
foursquare
github
github-alt
github-square
gittip
google-plus
google-plus-square
html5
instagram
linkedin
linkedin-square
linux
maxcdn
pagelines
pinterest
pinterest-square
renren
skype
stack-exchange
stack-overflow
trello
tumblr
tumblr-square
twitter
twitter-square
vimeo-square
vk
weibo
windows
xing
xing-square
youtube
youtube-play
youtube-square

Medical Icons

ambulance
h-square
hospital-o
medkit
plus-square
stethoscope
user-md
wheelchair