• About Youscene
  • News
  • Contact
  • Music News
  • Music Videos
  • Music Headlines
  • Celebrity Gallery
  • Celebrity Gossip
  • Features
    • Menu TypesChoose Your Menu Type
      • YJ Mega CSS Dropdown
      • YJ Mega Smooth Dropdown
      • Joomla Split Menu
    • Template StylesChoose Your Template Style
      • Blue
      • Brown
      • Lime
      • Orange
    • Template BackgroundsChange background image
      • Crowd
      • 1210
      • discoball
    • TypographyStyle your site content
    • Module PositionsOver 50 module positions
    • ShortcodesTemplate Shortcodes
  • Jstuff
    • Content Views
      • Category Blog View
      • Category List View
      • Categories View
      • Archived View
    • Web links
    • Contacts
    • Newsfeeds
  • Grids Preview
  • Home
  • Jstuff
  • Content Views
  • Categories View
  • Template Settings

Template Settings

YJSG Module Positions

Category: Template Settings Published: 29 January 2011
Written by Super User Hits: 94
  • Print
  • Email

YJSimpleGrid Framework comes with 51 build in module positions . Adding new module grids is a very simple process and within few seconds you can adjust the layout to your own liking. Each  module positon is completely collapsible either by disabling module in module manager or by setting module size to 0 in template manager. Mainbody grid is completely flexible and can swithc sides by simply adjusting default mainbody layout in template manager. Logo width and height can also be adjusted in template manager or completely disabled.

yjsg_modulepoz

Typography

Category: Template Settings Published: 29 January 2011
Written by Super User Hits: 95
  • Print
  • Email

Headings



h1. Heading 1

Quisque ornare odio et mi congue varius. Etiam tempus mattis bibendum. Duis a congue ipsum. Curabitur odio est, convallis blandit metus sit amet faucibus.

h2. Heading 2

Quisque ornare odio et mi congue varius. Etiam tempus mattis bibendum. Duis a congue ipsum. Curabitur odio est, convallis blandit metus sit amet faucibus.

h3. Heading 3

Quisque ornare odio et mi congue varius. Etiam tempus mattis bibendum. Duis a congue ipsum. Curabitur odio est, convallis blandit metus sit amet faucibus.

h4. Heading 4

Quisque ornare odio et mi congue varius. Etiam tempus mattis bibendum. Duis a congue ipsum. Curabitur odio est, convallis blandit metus sit amet faucibus.

h5. Heading 5

Quisque ornare odio et mi congue varius. Etiam tempus mattis bibendum. Duis a congue ipsum. Curabitur odio est, convallis blandit metus sit amet faucibus.

h6. Heading 6

Quisque ornare odio et mi congue varius. Etiam tempus mattis bibendum. Duis a congue ipsum. Curabitur odio est, convallis blandit metus sit amet faucibus.

Big headings

Jumbo font

Add class .yjsg-font-jumbo

Quisque ornare odio et mi congue varius. Etiam tempus mattis bibendum. Duis a congue ipsum. Curabitur odio est, convallis blandit metus sit amet faucibus.

Mega font

Add class .yjsg-font-mega

Quisque ornare odio et mi congue varius. Etiam tempus mattis bibendum. Duis a congue ipsum. Curabitur odio est, convallis blandit metus sit amet faucibus.

Lists



Default

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit

Ordered

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit

Unstyled - add class .unstyled

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit

Custom Lists



Add class .video

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit

Add class .check

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit

Add class .star

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit

Add class .yjt_iconlist

  • Using .fa fa-book class
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit

Buttons


Button sizes

Button colors

Large colored buttons

Medium colored buttons

Small colored buttons

markup:

<button type="button" class="yjsg-button-blarge">Large button</button>
<button type="button" class="yjsg-button-bmedium">Medium button</button>
<button type="button" class="yjsg-button">Default</button>
<button type="button" class="yjsg-button-bsmall">Small button</button>
<button type="button" class="yjsg-button-color">Default color</button>
<button type="button" class="yjsg-button-blue">Blue button</button>
<button type="button" class="yjsg-button-red">Red button</button>
<button type="button" class="yjsg-button-green">Green button</button>
<button type="button" class="yjsg-button-yellow">Yellow button</button>
<button type="button" class="yjsg-button-dark">Dark button</button>
<button type="button" class="yjsg-button-gray">Gray button</button>
<button type="button" class="yjsg-button-color-blarge">Default color</button>
<button type="button" class="yjsg-button-blue-blarge">Blue button</button>
<button type="button" class="yjsg-button-red-blarge">Red button</button>
<button type="button" class="yjsg-button-green-blarge">Green button</button>
<button type="button" class="yjsg-button-yellow-blarge">Yellow button</button>
<button type="button" class="yjsg-button-dark-blarge">Dark button</button>
<button type="button" class="yjsg-button-gray-blarge">Gray button</button>
<button type="button" class="yjsg-button-color-bmedium">Default color</button>
<button type="button" class="yjsg-button-blue-bmedium">Blue button</button>
<button type="button" class="yjsg-button-red-bmedium">Red button</button>
<button type="button" class="yjsg-button-green-bmedium">Green button</button>
<button type="button" class="yjsg-button-yellow-bmedium">Yellow button</button>
<button type="button" class="yjsg-button-dark-bmedium">Dark button</button>
<button type="button" class="yjsg-button-gray-bmedium">Gray button</button>
<button type="button" class="yjsg-button-color-bsmall">Default color</button>
<button type="button" class="yjsg-button-blue-bsmall">Blue button</button>
<button type="button" class="yjsg-button-red-bsmall">Red button</button>
<button type="button" class="yjsg-button-green-bsmall">Green button</button>
<button type="button" class="yjsg-button-yellow-bsmall">Yellow button</button>
<button type="button" class="yjsg-button-dark-bsmall">Dark button</button>
<button type="button" class="yjsg-button-gray-bsmall">Gray button</button>

Dividers



markup:

<div class="yjsg-hr-hrsolid"></div>
<div class="yjsg-hr-hrdotted"></div>
<div class="yjsg-hr-hrdashed"></div>
<div class="yjsg-hr-small-hrsolid"></div>
<div class="yjsg-hr-large-hrsolid"></div>
<div class="yjsg-hr-small-hrsolid fa fa-star"></div>
<div class="yjsg-hr-small-hrsolid famedium fa fa-star"></div>
<div class="yjsg-hr-small-hrdashed falarge facolor fa fa-star"></div>
<div class="yjsg-hr-small-hrsolid-left falarge facolor fa fa-star"></div>
<div class="yjsg-hr-small-hrsolid-right falarge facolor fa fa-trophy"></div>
<div class="yjsg-hr-small-hrsolid-hrcircle"></div>
<div class="yjsg-hr-small-hrsolid-hrcircle-left"></div>
<div class="yjsg-hr-small-hrsolid-hrcircle-right"></div>
<div class="yjsg-hr-small-hrsolid-hrcircle-left-pull-small"></div>
<div class="yjsg-hr-small-hrsolid-right-pull-small famedium facolor fa fa-star"></div>
<div class="yjsg-hr-large-hrsolid-hrcircle-left-pull-large"></div>
<div class="yjsg-hr-large-hrsolid-right-pull-large famedium facolor fa fa-star"></div>

Dropcaps



YQuisque ornare odio et mi congue varius. Etiam tempus mattis bibendum. Duis a congue ipsum. Curabitur odio est, convallis blandit metus sit amet faucibus.

SQuisque ornare odio et mi congue varius. Etiam tempus mattis bibendum. Duis a congue ipsum. Curabitur odio est, convallis blandit metus sit amet faucibus.

JQuisque ornare odio et mi congue varius. Etiam tempus mattis bibendum. Duis a congue ipsum. Curabitur odio est, convallis blandit metus sit amet faucibus.

GQuisque ornare odio et mi congue varius. Etiam tempus mattis bibendum. Duis a congue ipsum. Curabitur odio est, convallis blandit metus sit amet faucibus.

markup:

<span class="dropcap">Y</span>lypian... 
<span class="dropcap2">J</span>lypian... 
<span class="dropcap3">S</span>lypian... 
<span class="dropcap4">G</span>lypian...

Blockquotes



Blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, conse ctetur adipiscing elit. Integer posuere erat

Someone famous in Source Title

Blockquote .pull-right

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, conse ctetur adipiscing elit. Integer posuere erat

Someone famous in Source Title

Blockquote quoted .quoted

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, conse ctetur adipiscing elit. Integer posuere erat

Someone famous in Source Title

Blockquote brackets .brackets

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, conse ctetur adipiscing elit. Integer posuere erat

Someone famous in Source Title

markup:

<blockquote>
    <p>
        Text...
    </p>
</blockquote>
<blockquote class="pull-right">
    <p>
        Text...
    </p>
</blockquote>
<blockquote class="quoted">
    <p>
        Text...
    </p>
</blockquote>
<blockquote class="brackets">
    <p>
        Text...
    </p>
</blockquote>

Big numbers



Blocknumber

01 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat

02 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat

03 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat

Blocknumber round

01 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat

02 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat

03 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat

markup:

<p class="blocknumber">
    <span class="bignumber">02</span> Sample...
</p>
<p class="blocknumber bnround">
    <span class="bignumber">02</span> Sample...
</p>

Additional



Emphasis 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.

markup:

<p class="muted">
    Fusce...
</p>
<p class="text-warning">
    Etiam...
</p>
<p class="text-error">
    Donec...
</p>
<p class="text-info">
    Aenean...
</p>
<p class="text-success">
    Duis...
</p>

Addresses

Some Web Studio, Inc.
1870 Northgate Hill DR
Atlanta, GA 30021
P: (123) 456-7890
Full Name
first.lastATyourmailDOTcom

markup:

<address>
    <strong>Twitter, Inc.</strong><br>
    795 Folsom Ave, Suite 600<br>
    San Francisco, CA 94107<br>
    <abbr title="Phone">P:</abbr> (123) 456-7890
</address>
<address>
    <strong>Full Name</strong><br>
    <a href="mailto:#">
        first.lastATyourmailDOTcom
    </a>
</address>

Quick menu:

  • Headings
  • Lists
  • Buttons
  • Dividers
  • Dropcaps
  • Blockquotes
  • Big numbers
  • Additional

Sample News item

Category: Template Settings Published: 27 January 2011
Written by Super User Hits: 487
  • Print
  • Email

Praesent posuere tempus nibh bibendum aliquam. Integer ullamcorper vestibulum nisl vitae ullamcorper. Donec fermentum ligula at tortor tincidunt rutrum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque blandit tellus vitae justo rutrum viverra. Proin semper sapien faucibus dolor ultrices a tempus leo porta. Integer sed lorem nisl, ac tincidunt diam. Sed ante felis, pellentesque in consectetur at, rutrum non turpis. Aenean id pellentesque lacus. Quisque ligula est, aliquam vitae lobortis ornare, posuere sit amet risus. Sed massa lacus, iaculis et venenatis nec, tempor mattis est. Sed placerat placerat volutpat. Integer ut orci metus. Etiam egestas, ante ac fermentum dapibus, arcu est semper odio, nec mattis metus elit eget nunc. Praesent posuere tempus

nibh bibendum aliquam. Integer ullamcorper vestibulum nisl vitae ullamcorper. Donec fermentum ligula at tortor tincidunt rutrum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque blandit tellus vitae justo rutrum viverra. Proin semper sapien faucibus dolor ultrices a tempus leo porta. Integer sed lorem nisl, ac tincidunt diam. Sed ante felis, pellentesque in consectetur at, rutrum non turpis. Aenean id pellentesque lacus. Quisque ligula est, aliquam vitae lobortis ornare, posuere sit amet risus. Sed massa lacus, iaculis et venenatis nec, tempor mattis est. Sed placerat placerat volutpat. Integer ut orci metus. Etiam egestas, ante ac fermentum dapibusInteger ut orci metus. Etiam egestas, ante ac fermentum dapibus

CSS Valid | XHTML Valid | Top | + | - | reset | RTL | LTR
Copyright © Youscene 2026 All rights reserved. Custom Design by Youjoomla.com
YJSimpleGrid Joomla! Templates Framework official website
Categories View