Amministratore2021
Columns
Live fluid grid example
The default Bootstrap grid system utilizes 12 columns.The fluid grid system uses percents instead of pixels for column widths. It has the same responsive capabilities as our fixed grid system, ensuring proper proportions for key screen resolutions and devices.
[columns grid="yes"]
[column_item col="4"]Fourth [/column_item]
[column_item col="4"]Fourth [/column_item]
[column_item col="4"]Fourth [/column_item]
[/columns ]
[columns grid="yes"]
[column_item col="4"]Fourth [/column_item]
[column_item col="8"]Seventh [/column_item]
[/columns]
[columns grid="yes"]
[column_item col="6"]Sixth [/column_item]
[column_item col="6"]Sixth [/column_item]
[/columns]
[columns grid="yes"]
[column_item col="12"]Twelfth [/column_item]
[/columns]
Fluid offsetting
Operates the same way as the fixed grid system offsetting: add offset="1->12" to any column to offset by that many columns.
[columns grid="yes"]
[column_item col="5"] Fifth [/column_item]
[column_item col="6" offset="1"] Sixth offset 1 [/column_item]
[/columns]
[columns grid="yes"]
[column_item col="6"] Sixth [/column_item]
[column_item col="5" offset="1"] Fifth offset 1 [/column_item]
[/columns]
[columns grid="yes"]
[column_item col="7"] Seventh [/column_item]
[column_item col="4" offset="1"] Fourth offset 1 [/column_item]
[/columns]
Button
Default buttons
Button styles can be applied to anything with the .btn class applied. However, typically you'll want to apply these to only <a> and <button> elements for the best rendering.
Ex: element icon="user" then name of icons is "fa-user".
You can find the full examples of usage at Font Awesome - Font Awesome 4.0.3 [/message_box]| Button | Type | Icon | Description |
|---|---|---|---|
| [button icon="pencil" ]Default[/button] | pencil |
Standard gray button with gradient | |
| [button type="primary" icon="comment"]Primary[/button] | primary |
comment |
Provides extra visual weight and identifies the primary action in a set of buttons |
| [button type="info" icon="info-circle"]Info[/button] | info |
info-circle |
Used as an alternative to the default styles |
| [button type="success" icon="check"]Success[/button] | success |
check |
Indicates a successful or positive action |
| [button type="warning" icon="warning"]Warning[/button] | warning |
warning |
Indicates caution should be taken with this action |
| [button type="danger" icon="refresh"]Danger[/button] | danger |
refresh |
Indicates a dangerous or potentially negative action |
| [button type="inverse" icon="trash-o"]Inverse[/button] | inverse |
trash-o |
Alternate dark gray button, not tied to a semantic action or use |
| [button type="link" icon="twitter"]Link[/button] | link |
twitter |
Deemphasize a button by making it look like a link while maintaining button behavior |
[button target="_self" link="#"] Default icon="pencil" [/button] [button type="primary" icon="comment" target="_self" link="#"] Primary [/button] [button type="info" icon="info-sign" target="_self" link="#"] Info [/button] [button type="success" icon="check" target="_self" link="#"] Success [/button] [button type="warning" icon="warning" target="_self" link="#"] warning [/button] [button type="danger" icon="refresh" target="_self" link="#"] Danger [/button] [button type="inverse" icon="trash" target="_self" link="#"] Inverse [/button] [button type="link" icon="twitter" target="_self" link="#"] Link [/button]
Flat buttons
[button type="flat" target="_self" link="#"] Default Button [/button] [button type="flat primary" target="_self" link="#"] Primary Button [/button] [button type="flat success" target="_self" link="#"] Success Button [/button] [button type="flat warning" target="_self" link="#"] Warning Button [/button] [button type="flat inverse" target="_self" link="#"] Inverse Button [/button] [button type="flat info" target="_self" link="#"] Info Button [/button] [button type="flat danger" target="_self" link="#"] Danger Button [/button]
Cross browser compatibility
IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled button elements, rendering text gray with a nasty text-shadow that we cannot fix.
Button sizes
Fancy larger or smaller buttons? Add size= large, small, or mini for additional sizes.
[button type="primary" size="lg"]Large button[/button] [button size="lg"]Large button[/button]
[button type="primary" ]Default button[/button] [button ]Default button[/button]
[button type="primary" size="sm"]Small button[/button] [button size="sm"]Small button[/button]
[button type="primary" size="xs"]Mini button[/button] [button size="xs"]Mini button[/button]
[button type="primary" size="lg" target="_self" link="#"] Large button [/button] [button size="lg" target="_self" link="#"] Large button [/button] [button type="primary" target="_self" link="#"] Default button [/button] [button target="_self" link="#"] Default button [/button] [button type="primary" size="sm" target="_self" link="#"] Small button [/button] [button size="sm" target="_self" link="#"] Large Small [/button] [button type="primary" size="xs" target="_self" link="#"] Mini button [/button] [button size="xs" target="_self" link="#"] Mini button [/button]
Create block level buttons—those that span the full width of a parent— by adding .btn-block.
[button type="primary" size="lg" full="block"] Block level button [/button] [button size="lg" full="block"] Block level button [/button]
Disabled state
For disabled buttons, add the state=disabled class to links and the disabled attribute for <button> elements.
[button type="primary" size="lg" state="disabled"] Primary button [/button] [button size="lg" state="disabled"] Button [/button][space height="10"]
Customization Options / Features
- type : style of the button. You can combine the following options(primary, info, success, warning, danger, inverse, link, flat)
- icon : add any mini-icon (from the Icons section) here.
- size : available sizes ( xs, sm, default, lg)
- full : the full width of a parent
- target : link target (eg. target="_blank" will open link in a new window)
- state : disabled buttons, available ( true, disabled)
List Style
Unordered lists
A list of items in which the order does not explicitly matter.
[list type="disc"] [list_item] ... [/list_item] [/list]
[list type="circle"] [list_item] ... [/list_item] [/list]
[list type="square"] [list_item] ... [/list_item] [/list]
[list type="check"] [list_item] ... [/list_item] [/list]
[list type="arrow"] [list_item] ... [/list_item] [/list]
[list type="star"] [list_item] ... [/list_item] [/list]
[list type="check" color="#6B82A2" ] [list_item] ... [/list_item] [/list]
[list type="arrow" color="#6B82A2"] [list_item] ... [/list_item] [/list]
[list type="check" color="#6B82A2" ] [list_item] ... [/list_item] [/list]
Ordered lists
A list of items in which the order does explicitly matter.
[list type="roman"] [list_item] ... [/list_item] [/list]
[list type="decimal"] [list_item] ... [/list_item] [/list]
[list type="alpha"] [list_item] ... [/list_item] [/list]
Number Block
A list of items in which the order does explicitly matter.
[list type="numblocks1"] [list_item] ... [/list_item] [/list]
[list type="numblocks2"] [list_item] ... [/list_item] [/list]
[list type="numblocks3"] [list_item] ... [/list_item] [/list]
[list type="smallnumber1"] [list_item] ... [/list_item] [/list]
[list type="smallnumber2"] [list_item] ... [/list_item] [/list]
[list type="smallnumber3"] [list_item] ... [/list_item] [/list]
[list type="smallnumber4"] [list_item] ... [/list_item] [/list]
[list type="smallnumber6"] [list_item] ... [/list_item] [/list]
[list type="smallnumber5"] [list_item] ... [/list_item] [/list]
[space height="10"]
Customization Options / Features
- type (optional) – more optional type list (disc, circle, square, check, arrow, star, roman, decimal, alpha, numblocks1...)
- color (optional) – changes color of type list (disc, circle, square, check, arrow, star, roman, decimal, alpha)
Blockquote
For quoting blocks of content from another source within your document.
Default blockquote
Wrap <blockquote> around any HTML
as the quote. For straight quotes we recommend a <p>.
Vestibulum id urna eu tortor hendrerit iaculis sit amet in ipsum. Cras tempus ultrices leo, tempus iaculis eros tempor non. Aenean ac nisl molestie ligula placerat porta non cursus neque. Phasellus sagittis est at lorem tincidunt consequat.
[quote width="auto" align="none" border="#666" color="#666" title="SOMEONE_FAMOUS_TITLE"] ADD_CONTENT_HERE [/quote]
Blockquote options
Style and content changes for simple variations on a standard blockquote.
Vestibulum id urna eu tortor hendrerit iaculis sit amet in ipsum. Cras tempus ultrices leo, tempus iaculis eros tempor non. Aenean ac nisl molestie ligula placerat porta non cursus neque. Phasellus sagittis est at lorem tincidunt.
[quote width="45%" align="left" border="#666" color="#666" title="SOMEONE_FAMOUS_TITLE"] ADD_CONTENT_HERE [/quote]
Vestibulum id urna eu tortor hendrerit iaculis sit amet in ipsum. Cras tempus ultrices leo, tempus iaculis eros tempor non. Aenean ac nisl molestie ligula placerat porta non cursus neque. Phasellus sagittis est at lorem tincidunt.
[quote width="45%" align="right" border="#666" color="#666" title="SOMEONE_FAMOUS_TITLE"] ADD_CONTENT_HERE [/quote]
[quote align="none" border="#468847" color="#468847" title="SOMEONE_FAMOUS_TITLE"] ADD_CONTENT_HERE [/quote] [quote align="none" border="#F89406" color="#F89406" title="SOMEONE_FAMOUS_TITLE"] ADD_CONTENT_HERE [/quote] [quote align="none" border="#B24745" color="#B24745" title="SOMEONE_FAMOUS_TITLE"] ADD_CONTENT_HERE [/quote] [quote align="none" border="#3A87AD" color="#3A87AD" title="SOMEONE_FAMOUS_TITLE"] ADD_CONTENT_HERE [/quote][space height="10"]
Customization Options / Features
- Width : Select number unit (px, %, em...)
- Align : Select position align (left, right, none)
- Border : Changes border color Blockquote
- Color : Changes text color Blockquote
- Title : Someone famous in Source Title
Accordion
Get base styles and flexible support for collapsible components like accordions and navigation.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
[/acc_item] [acc_item title="Collapsible Group Item #2"] Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. [/acc_item] [acc_item title="Collapsible Group Item #3"] Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. [/acc_item] [acc_item title="Collapsible Group Item #4"] Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. a [/acc_item] [/accordion][accordion] [acc_item title='ITEM_TITLE'] ADD_CONTENT_HERE [/acc_item] [acc_item title='ITEM_TITLE'] ADD_CONTENT_HERE [/acc_item] [acc_item title='ITEM_TITLE'] ADD_CONTENT_HERE [/acc_item] [acc_item title='ITEM_TITLE'] ADD_CONTENT_HERE [/acc_item] [accordion][space height="10"]
Customization Options / Features
- Item title (optional) – Item Accordion title
EU Cookie Law - Channel Cookie Policy
- What are cookies?
- How do we use cookies?
- Cookies used on our site
- How to delete cookies or control them
Since 26th May 2012, all UK websites need to comply with the EU E-Privacy Directive 2009/136/EC. Cookies are only a small part of this directive, and whilst you are still allowed to use cookies on a website, it must be made clear to visitors to your site that cookies are being used. A message or warning must be displayed so that the visitor is aware of them.
At the top of our website we have displayed a message to warn you that our website makes use of cookies and that one has already been set. By displaying this message we hope that we are providing you with the information you require about our use of cookies, and presenting you with the option to consent to their use. This message will be displayed until such time as you agree to our site using cookies by clicking on the continue button.
What is a cookie?
A cookie is a small amount of data, often including a unique identifier, sent to the browser of your computer or mobile phone (referred to here as a "device") from a website's computer. It is stored on your device's hard drive. Each website can send its own cookie to your browser if your browser's preferences allow it. To protect your privacy, your browser only permits a website to access the cookies it has already sent to you, and not the cookies sent to you by other websites. Many websites do this whenever a user visits them to track online traffic flows.
On the Channel Digital website, our cookies record information about your online preferences so we can tailor the site to your interests. You can set your device’s preferences to accept all cookies, notify you when a cookie is issued, or not receive cookies at all. Selecting the last option means you will not receive certain personalised features, which may result in you being unable to take full advantage of all the website's features. Each browser is different, so please check the "Help" menu of your browser to learn how to change your cookie preferences.
During the course of any visit to our website, every page you see, along with a cookie, is downloaded to your device. Many websites do this because cookies enable website publishers to do useful things like find out whether your device (and probably you) has visited the website before. On a repeat visit this is done by the website’s computer checking to see, and finding, the cookie left there on the last visit.
How do we use cookies?
Information supplied by cookies can help us analyse the profile of our visitors, which helps us provide you with a better user experience. For example, if on a previous visit you went to our marketing pages, we might find this out from your cookie and highlight marketing information on subsequent visits.
Third party cookies on our pages
Please note that during your visits to our website you may notice some cookies which are unrelated to us. When you visit a page with content embedded from, for example, YouTube or Flickr, you may be presented with cookies from these websites. We do not control the dissemination of these cookies. You should check the third party websites for more information about these.
Cookies used on our site
We only use cookies to help us continuously improve our website and maintain a nice browsing experience for our visitors. Here is a list of cookies used on this website:
- Google Analytics - we use cookies to compile visitor statistics such as how many people have visited our website, what type of technology they are using (e.g. Mac or Windows which helps to identify when our site isn’t working as it should for particular technologies), how long they spend on the site, what page they look at etc.
- ShareThis, Quantcast and Gigya - social media share buttons that enable you to share our content
- Session cookie - this is a standard cookie just to remember user preferences (like font size and saves you logging in every time you visit)
How to delete cookies or control them
This site will not use cookies to collect personally identifiable information about you. However, if you wish to restrict or block cookies set by this or any other website, you can do this through your browser settings. The Help function within your browser should tell you how.
Alternatively, you may wish to visit www.aboutcookies.org which contains comprehensive information on how to do this for a wide variety of browsers. You will also find details on how to clear cookies from your computer as well as more general information about cookies. For information on how to do this on your mobile phone’s browser, you will need to refer to your handset manual.
The Channel Digital EU Cookie Directive Modules for Joomla and WordPress
You may have noticed a banner at the top of our website which informed you that this website uses cookies. If you would like a similar banner on your website, please look at our Joomla or WordPress Plugin pages. We offer an off the shelf solution for users of Joomla and WordPress websites, but can also offer a bespoke solution to your existing website if required.
Please be aware that restricting cookies may impact on the functionality of this website.
Shortcodes
[space height="20"]
[button type="flat inverse" target="_blank" link="http://demo.smartaddons.com/extensions/yt-shortcode/index.php"] View all example YT Shortcode [/button]
The shortcodes supports users to make content for web pages. In Joomla administrator, Yt Shortcodes button will be appeared below the text-area, you can choose shortcodes for the text-area to make content. We will show bonus pages for sample in some templates using shortcodes from now.
Note: Shortcodes only works in detail article (joomla! content, k2 content), custom html module.
YT Shortcode User-guide:
Let's go to here for reading full help documentation of YT Shortcode Plugin
Typography
Headings
All HTML headings, <h1> through <h6> are available.
h1. Heading 1
h2. Heading 2
h3. Heading 3
h4. Heading 4
h5. Heading 5
h6. Heading 6
Body copy
Bootstrap's global default font-size is 14px, with a line-height of 20px. This is applied to the <body> and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin of half their line-height (10px by default).
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
<p>...</p>
Lead body copy
Make a paragraph stand out by adding .lead.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
<pclass="lead">...</p>
Built with Less
The typographic scale is based on two LESS variables in variables.less: @baseFontSize and @baseLineHeight. The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple math to create the margins, paddings, and line-heights of all our type and more. Customize them and Bootstrap adapts.
Emphasis
Make use of HTML's default emphasis tags with lightweight styles.
<small>
For de-emphasizing inline or blocks of text, use the small tag.
This line of text is meant to be treated as fine print.
<p>
<small>This line of text is meant to be treated as fine print. </small>
</p>
Bold
For emphasizing a snippet of text with a heavier font-weight.
The following snippet of text is rendered as bold text.
<strong>rendered as bold text</strong>
Italics
For emphasizing a snippet of text with italics.
The following snippet of text is rendered as italicized text.
<em>rendered as italicized text</em>
Heads up! Feel free to use <b> and <i> in HTML5. <b> is meant to highlight words or phrases without conveying additional importance while <i> is mostly for voice, technical terms, etc.
Emphasis classes
Convey meaning through color with a handful of emphasis utility classes.
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
<p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p> <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p> <p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p> <p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p> <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
Labels and badges
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> |
Code
Inline
Wrap inline snippets of code with <code>.
<section> should be wrapped as inline.- For example, <code><section></code> should be wrapped as inline.
Note: Be sure to keep code within <pre> tags as close to the left as possible; it will render all tabs.
You may optionally add the .pre-scrollable class which will set a max-height of 350px and provide a y-axis scrollbar.
Basic block
Use <pre> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.
<p>Sample text here...</p>
<pre> <p>Sample text here...</p> </pre>
Prettify
To add colored syntax highlight to the <pre> tag, then use the .prettyprint class or the .prettyprint linenums class.
<?php /** Begin Debug **/ if ($yt->countModules('debug')) : ?>
<div id="yt-debug">
<div class="yt-container">
<php echo $yt->displayModules('debug','standard'); ?>
<div class="clear"></div>
</div>
</div>
<?php /** End Debug **/ endif; ?>
<?php /** Begin Debug **/ if ($yt->countModules('debug')) : ?>
<div id="yt-debug">
<div class="yt-container">
<php echo $yt->displayModules('debug','standard'); ?>
<div class="clear"></div>
</div>
</div>
<?php /** End Debug **/ endif; ?>
Extensions
SJ Thedaily Template is using: [list type="smallnumber5"] [list_item] Modules:
- Sj K2 Slider
- Sj K2 Gridslider
- Sj Contact Ajax
- Sj Twitter Slider
- Sj Module Tabs
- Sj Facebook
- Sj K2 Categories
- Sj K2 Mega News
- Sj K2 Splash
[/list_item] [list_item]
Plugins
[/list_item] [list_item]
Component
[/list_item] [/list]