1. Репетиции

  2. Антон Урман

  3. Рекламные компании

  4. Наши ученики

  5. Партнёры и спонсоры

  6. Мюзикл-шоу " True Me"

  7. Анна Калинина

Новости ArtisMusic

Cобытия

Новость 1

Automatic List Columnizer!

By adding class «listcols[x]» (where [x] is the number of columns you want the list to have) to your unordered list, you can produce up to 6 columns in which to display your list like this:

  • Table-less design
  • Valid CSS
  • Fixed or Fluid Width
  • Easy List Columnizer
  • Zoombox
  • Lazy-Load for Images
  • 15 Module Styles
  • Wow! This list is really cool!
  • And it will divide into columns
  • Automatically!
  • All I did was apply the class!
  • Table-less design
  • And Here's some more…
  • Fixed or Fluid Width
  • Easy List Columnizer
  • Zoombox
  • Lazy-Load for Images
  • 15 Module Styles
  • Wow! This list is really cool!
  • And it will divide into columns
  • Automatically!
  • All I did was apply the class!
 

To create a nice frame around your image, simply select the image and from joomla's styles dropdown, select the class «frame». You can also choose the class «frame-left» or «frame-right» to add margin if the image is aligned to the left or right.

This is the style Heading 1.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce nec ligula eget sapien rhoncus egestas. Nunc ac enim. Aliquam tempus nisl ut libero. Sed purus. Mauris pellentesque interdum magna.

This is the style Heading 2.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce nec ligula eget sapien rhoncus egestas. Nunc ac enim. Aliquam tempus nisl ut libero. Sed purus. Mauris pellentesque interdum magna.

This is the style Heading 3.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce nec ligula eget sapien rhoncus egestas. Nunc ac enim. Aliquam tempus nisl ut libero. Sed purus. Mauris pellentesque interdum magna.

This is the style Heading 4.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce nec ligula eget sapien rhoncus egestas. Nunc ac enim. Aliquam tempus nisl ut libero. Sed purus. Mauris pellentesque interdum magna.

This is the style Heading 5.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce nec ligula eget sapien rhoncus egestas. Nunc ac enim. Aliquam tempus nisl ut libero. Sed purus. Mauris pellentesque interdum magna.

This is the style Heading 6.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce nec ligula eget sapien rhoncus egestas. Nunc ac enim. Aliquam tempus nisl ut libero. Sed purus. Mauris pellentesque interdum magna.

  • Here's a sample Unordered List.
  • Point #2.
  • Point #3.
  • And so on…

  1. This is a sample Ordered List.
  2. Point #2.
  3. Here's point #3.
  4. And the final point….

  • This is a sample Checklist. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Fusce nec ligula eget sapien rhoncus egestas.
  • Nunc ac enim. Aliquam tempus nisl ut libero.
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

  • This is a sample Pluslist. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Fusce nec ligula eget sapien rhoncus egestas.
  • Nunc ac enim. Aliquam tempus nisl ut libero.
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Make your code standout by using the div class «code» around your text:

pre,.code
{padding: 10px 15px;
background: #999;margin: 5px 0 15px;
border-left: 5px solid #4A4643;
border-bottom: 5px solid #4A4643;}

You can also highlight specific text by using the «highlight» class

Новость 2

This template incorporates our fabulous menu system. There is no need to install a module, or configure anything! Our menu system is now built right-into the template.

  • Suckerfish with animation - This is what we've setup up by default for this demo in the topMenu module position. If you prefer that all sublevels be the animated suckerfish, this is the menu for you!
  • Vertical Flyout - When used in the side columns, as we have here, this menu makes navigating your site fun and easy.

Even More…

  • Subtext Support - As you see on the menus on this page, you can have a descriptive text under your menu item. When giving your menu item a title, simply separate the main title from the subtext by inserting two colons like this Home:: Welcome Friends!

Социальные сети

Icons

We've taken a creative approach to this and implemented a social media toolbar right into this template.

In the template manager, you can easily enable or disable each one, and give a special hover text for your icon! Using our source graphics, and a little coding, you can easily implement others as well!

We've included the following in this template:

  • Facebook
  • LinkedIn
  • Twitter
  • RSS

Новость 3

Template Documentation

Thanks for taking the time to read over the content of this (non-exhaustive) documentation before posting to the forum or writing for support.

In these notes, we'll cover the basic usage and customization of this template, and are assuming a basic level of familiarity with joomla on the part of the reader.


Recommendations

Over the years, we've used many different tools and resources for designing our templates. We've found the following tools to be very helpful and recommend them highly.

Uniform Server (FREE)

When developing for joomla, we've found the Uniform Server to provide a great local development environment. When compared to its peers, we find it to be the easiest to use. Get it Here

Notepad++ (FREE)

This is not your average notepad. It's lightning-fast, expandable, and powerful. We've found this editor to be the easiest and most straight-forward code editing software around. It's absolutely free, so give it a try! Get it Here

Adobe Fireworks (Try for free)

This is the graphics program we use for creating the elements used in our templates. Get it Here


Installation

There are basically two options when it comes to installation of this template: 1) PJ Package (Demo Installer) or 2) Conventional joomla! Template Installation.

PJ Package Installation

This allows you to install a clone of this demo with all of its functionality on your hosting environment. You can then edit its content and graphics to achieve your personalized joomla site. We have packaged the installation using the Akeeba backup component.

Installation Steps:

1) Download the pj-package.zip file. Upload and unzip to your website's root directory.

2) Create a new database for the installation to use.

3) Navigate to your website and follow the installer directions. Installation typically takes about 5 minutes. It is important that during the installation, you create your Super Administrator password.

Conventional joomla! Template Installation

If you prefer installing this template onto an existing joomla site, follow these steps:

1) Install the template as you would any other joomla! Template, by navigating to the extensions >> Extension Manager >> Installer and browsing to the template file (e.g. pj_template_17.zip)

2) Be sure to publish the main menu module to the «topMenu» position.


Width Configuration (s)

WidthsThe overall width of this template can be set to display as either a fixed number of pixels, or a fluid, percentage-based width.

Within the confines of this overall width, it is possible to have up to 5 columns displaying, dictated by the publication of the following modules: Outer-Left, Left, Right, Outer-Right. Each of these 4 modules' widths are set as a number of pixels via the template manager.

Whenever these modules are published on a page, the central «content» column will adjust automatically to accommodate them.


Module Positions

This template incorporates two methods for placing your modules into its layouts.

Classic Module Positions

Using the traditional module positioning scheme, you can publish your module to any of the following:

  • Header
  • Top
  • Top2
  • Top3
  • Outer-Left
  • Outer-Right
  • Left
  • Right
  • Footer
  • Banner
  • User1
  • User2
  • User3
  • User4
  • User5
  • User6
  • User7
  • User8
  • User9
  • User10
  • User11
  • User12
  • User13
  • User14
  • User15
  • User16
  • User17
  • Bottom-Fixed

Since the module positions are contractible, if you choose not to publish a certain module on a page, then the template's layout will auto-adjust to accommodate that space. This allows you a great deal of flexibility in choosing where to publish your modules, without having to make any changes to the css of the template. Certain module groupings, like User1-User3, will adjust to equally* share the space attributed to the group by width. The same is true for the groupings: User4 & User5, User6-User9, User10-User13 and User14-User17.

*Module Width Distribution

Width DistributionIn the template parameters, you will note a setting called «Module Width Distribution». With this set to «Equal», if only two modules from the group are published on a page, then they will equally share the space for that group. If set to «Offset», then the first module will occupy approx 70% of the group width, and the second module with be allotted 30% of the width.

Zones

Self-Columnizing Module Zones

This template also has self-columnizing module «zones», which allow you to achieve an unlimited number of columns across for your modules' layout. This is achieved by using a jQuery-based columnizer plugin to handle the splitting and positioning of any modules published to the same position. The module zones are mapped as follows:

  • TopZone1 (Beneath Group User1-User3)
  • TopZone2 (Above Left, Right and Main Content)
  • TopZone3 (Between Left and Right but Above Main Content)
  • MidZone1 (Beneath Group User4-User5)
  • BotZone1 (Beneath Group User6-User9)
  • BotZone2 (Beneath Group User10-User13)
  • FooterZone1 (Beneath Group User14-User17)

While each of these Zones arranges modules published to them ordered from left to right, you can also stack up to three rows per zone by denoting A, B, or C to the position.

Here's an example: You have four modules, each is published to position TopZone1A. They will equally split that zone space and arrange from left to right according to their ordering as modules.

You also publish 5 modules to TopZone1B. These create a new row beneat the «A» row, and columnize according to their ordering as modules.

Click Here for a screenshot of this scenario.

Load a Module in Your Content

You can place a module inside of your content articles with ease. Here's how:

1) Choose the module you want to display in a content article, and instead of choosing the position from the dropdown, simply type in a unique position name, such as «contentmodule1» and publish that module to all pages.

2) Now open the article in which you want to place the new module, and insert the following — BUT REMOVE THE * (asterisk):

{*loadposition contentmodule1}

No_Component Module Position

Sometimes you will wish to display a module on the page without having the component area showing up. We've found this to be useful in many front-page layouts. To do this, simply create a new module and publish it to the «no_component» position. Any page to which you publish this module will not display the central area of the template, allowing, for example, the display of only a slideshow published to the header on that page.


JS-based Template Features

LazyLoad Images

LazyLoad is a jQuery plugin which keeps images on your page from loading until they enter the viewport of the browser. On pages which are long and incorporate a lot of images in the content, this plugin can decrease the page load time significantly. You can choose to enable or disable this feature. Also, you can specify images which should not use the feature specifically by adding the class «nolazy» to the <img> tag.

Zoombox

Zoombox (here's the dev site) is a fantastic jQuery-based plugin which allows you to create very nifty zooming lightbox-like effects for any link on your page. This plugin can also be disabled if you wish not to load the script. To use it in your content, simply employ the «zoombox» class.

ToolTips

This template includes our own jQuery-based tooltip script and allows you to customize the look and feel of the tips with css in the templates_css.css file (Search 'Tooltips'). The script is triggered by adding the class «pjTips» to any element on your page. The title and main text of the tips is delineated by two colons (i.e.— TooltipTitle:: Tooltip main text.) This, too can be disabled if desired via the template manager. Here's an example: HOVER OVER ME

Other Template Settings

Show Pure joomla Footer Logo?

The logo linked to our website can be disabled here.

Show IE6 Warning

This template includes a warning for users of IE6 which will present the following message, as well as links to modern browser downloads, in a lightbox on their screen:

«Did you know that your Internet Explorer is out of date?
Internet Explorer 6 is no longer supported by Microsoft and it has also proven to have significant security flaws. To get the best possible experience using our website we recommend that you upgrade to a newer version or other web browser. A list of the most popular web browsers can be found below.»

Show Date/Format

The date can be shown or hidden and formatted in several possible formats.

Social Networking Icons

The social networking icons we've included in this template can individually be enabled or disabled and the message which appears when you hover over them can easily be customized in the template manager. If you wish to create another of your own, we have made the source graphic files available in our downloads section, and you only need to take a peek at the file scripts/pj_social_icons.php to see how to add another linked button. These buttons are styled via the template_css.css file (Search 'Social')


Customizing Graphic Elements

We produce our graphics using Adobe Fireworks (natively produced as 32-bit.PNG format), but also publish each original as a layered PSD.

Logo

LogoEach of our templates has a main logo file (logo.png) which can be found in the images/ directory. To customize this file, you will only need to open the source graphic file we provide (usually named 'logo_SOURCE.png'), customize the graphics, and export a 32-bit transparent PNG called 'logo.png'. You then overwrite the existing logo.png with your new one. In some cases, it may be necessary to make a bigger or smaller image, and so the corresponding css will also need to be manipulated. The pertinent css can be found in template_css.css (Search 'logo')

The sample below shows (in bold) which parts of the css might need to be changed to match your new file's dimensions and any positional changes:


/*logo*/

#logo_frame {position:relative;height:0px;width:100%;}

#logo { height:90px; width:240px; background: url('/../images/logo.png') no-repeat;position:absolute; top:0px; right:-17px;}


HABEPX