We moved to new unified forum!

Please post all new support queries in our New Forum.

T3 Community Discussion & Support

Let's build the best free Joomla template framework, together!
Subscribe via RSS  Subscribe via email
Recent
Categories
Tags
Users
Badges
Edit Profile
My Created Posts
My Favourites
My Subscriptions
Logout
View Replies (8)

Resolved Sidebar nav EXACTLY like the one on the t3 website

1
Votes
Undo
  1. Josh
    Josh
  2. General Discussion
  3. Wednesday, 19 June 2013
  4.  Subscribe via email
Hello,
I'm attempting to recreate the sidebar navigation like the one in the t3 site, seen here: http://t3-framework.org/documentation/customization.html

I added affix in Joomla but all that does it make it fixed on the page. It doesn't have any of the similar styling. Maybe I'm just confused and missing a step, how do I go about doing this exactly? Can I do so in the custom.css file or do I need to make modifications elsewhere?

Thank you
Comment
There are no comments made yet.
Responses (8)
Admin
Admin
Hole-in-One Sherlock Holmes The Voice
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Josh

You should follow the affix document on bootstrap.
http://twitter.github.io/bootstrap/javascript.html#affix

Have you try to add all class and javascript?
For example, on our site:

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('body').scrollspy({'target':'.docs-sidebar'});
jQuery('.docs-sidenav').affix({offset: {top:230, bottom: function(){ return jQuery('#t3-footer').outerHeight(true) + 40 }}});
});

jQuery(window).load(function(){
jQuery('body').scrollspy('refresh');
});
</script>

Please try to change those selector that match on your site.

Regards
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 1
Josh
Josh
Accepted Answer Pending Moderation
0
Votes
Undo
Sorry, I don't quite follow....

What file and where do I make these changes to?

Thanks
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 2
Admin
Admin
Hole-in-One Sherlock Holmes The Voice
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Josh,

You can put it anywhere that when the website run, it will output to browser.
As on our demo, we only have 1 article, so we put that block code inside that article.

You can put it beside the navigation markup or any file in /blocks folder.

Regards
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 3
Mainstwebguy
Mainstwebguy
Accepted Answer Pending Moderation
0
Votes
Undo
I'm also working on implementing this on my site. According to the bootstrap documentation, i need to add the data-spy="affix" to "the element i want to spy on." Do i add this to the menu module and if so, where/how do i add it?

Do i also need to add "data-spy" and "data-target" to the <body> tag?
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 4
Josh
Josh
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Josh,

You can put it anywhere that when the website run, it will output to browser.
As on our demo, we only have 1 article, so we put that block code inside that article.

You can put it beside the navigation markup or any file in /blocks folder.

Regards


I think I'm starting to understand. Can I do this in a custom html module and still have the functionality of the navspy or does the menu with the navspy have to be in the same article to function correctly??

Thanks
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 5
Admin
Admin
Hole-in-One Sherlock Holmes The Voice
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Mainstwebguy,

If you use the script, you may not need to add the data-spy and data-target and otherwise. :)
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 6
tungnd81
tungnd81
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Mainstwebguy,

If you use the script, you may not need to add the data-spy and data-target and otherwise. :)


I use exactly code like T3 website:
<script type="text/javascript">

  jQuery(document).ready(function(){

    jQuery('body').scrollspy({'target':'.docs-sidebar'});

    jQuery('.docs-sidenav').affix({offset: {top:230, bottom: function(){ return jQuery('#t3-footer').outerHeight(true) + 40 }}});

  });

  jQuery(window).load(function(){

    jQuery('body').scrollspy('refresh');

  });

</script>

<div class="row">

<div class="span3 docs-sidebar">

<ul class="span3 nav nav-list docs-sidenav">

<li><a href="#overview"> T3 Framework Overview</a></li>

<li><a href="#main-features"> Main Features</a></li>

<li><a href="#developer-network"> Developer Network Update</a></li>

<li><a href="#copy-rights"> Copyright and License</a></li>

<li><a href="#logo-branding"> Branding Logo </a></li>

</ul>

</div>

<div class="span9">

<section id="overview">

<div class="page-header">

<h2>I. About T3 Framework</h2>

</div>

<p>Our T3 framework is the most popular template framework for Joomla. It powers all our T3 based templates and is available for Joomla 1.5, 2.5 and 3.0. For the ease of upgrades the framework is in the plugin format and is installed separately. With over 3 years of active development T3 framework has come a long way and is more roburst, user friendly, feature rich, easy to customize and not to mention the responsive layouts support which not only looks good on all browsers and devices but also works like a charm.</p>

</section>

<section id="main-features">

<div class="page-header">

<h2>II. Main Features</h2>

</div>

<div class="row-fluid">

<div class="span6"><p><h3>Responsive </h3></p>

<p>JoomlArt has always been on the forefront on responsive design and our responsive templates, like <a href="http://www.joomlart.com/joomla/templates/ja-wall"><strong>JA Wall</strong></a>, <a href="http://www.joomlart.com/joomla/templates/ja-elastica"><strong>JA Elastica</strong></a>, <a href="http://www.joomlart.com/joomla/templates/ja-lens"><strong>JA Lens</strong></a>, <a href="http://www.joomlart.com/joomla/templates/ja-university"><strong>JA University</strong></a>, <a href="http://www.joomlart.com/joomla/templates/ja-zite"><strong>JA Zite</strong></a>... were a great success among our users. Now it is improved in T3 Framework. </p>

</div>

<div class="span6"><p><h3>Jooml! 2.5 and Joomla! 3.0 Native </h3></p>

<p>T3 framework is native with both Joomla! 2.5 and Joomla! 3.0 -the latest versions of Joomla!.</p>

</div>

</div>

<div class="row-fluid">

<div class="span6"><p><h3>MegaMenu</h3></p>

<p>This is a missing feature in Joomla! T3 has powerful Menu system - Mega menu (a feature supported in JA T3v2 already).</p>

</div>

<div class="span6"><p><h3>Integrate Bootstrap</h3></p>

<p>Integrated in full features and components from Bootstrap to standardize your grid, typography, and modules with less efforts.</p>

</div>

</div>

<div class="row-fluid">

<div class="span6"><p><h3>Utilize LESS CSS</h3></p>

<p>T3 is built in LESS CSS that making CSS development more powerfull and intuitive.</p>

</div>

<div class="span6"><p><h3>HTML5</h3></p>

<p>Stepping stone to ensure your web experience and visualization quality that benefits from rich markup and compatibility.</p>

</div>

</div>

<div class="row-fluid">

<div class="span6"><p><h3>Multiple Layouts</h3></p>

<p>With multiple layouts supports such as: Left Content Right, Left Content, Right Content, Multiple columns, Full width, you can display your content flexibly.</p>

</div>

<div class="span6"><p><h3>Multiple Themes</h3></p>

<p>4 themes supported by default: default, dark, green, red, you can switch theme easily. You can created unlimited themes and customize them as you expect.</p>

</div>

</div>

<div class="row-fluid">

<div class="span6"><p><h3>Typography</h3></p>

<p>Integrate with Bootstrap then T3 uses typography from Bootstrap with styling for forms, buttons, tables ...</p>

</div>

<div class="span6"><p><h3>ThemeMagic</h3></p>

<p>T3 Framework is powerful by its easy customization with ThemeMagic. You can allow unlimited parameters to be configured in the ThemeMagic. </p>

</div>

</div>

</section>

<section id="developer-network">

<div class="page-header">

<h2>III. Developer Network Update</h2>

</div>

<ul>

<li><strong>Nov 2011:</strong> With the first stable release, JoomlArt officially move monthly template development to T3 </li>

<li><strong>Dec 2012: </strong>A handful independent Joomla developer and group started using T3 as their codebase for custom work: http://pbwebdev.com/, http://www.qubesys.com/, Themeforest.com authors</li>

<li><strong>Jan 2013: </strong>The JoomlaBamboo Club adopted T3 http://www.joomlabamboo.com/blog/template-news/zen-to-the-power-of-t3 </li>

<li><strong>23rd Jan 2013: </strong>Bang2Joom.com team adopts T3 </li>

<li><strong>25th Jan 2013: </strong>ThemeRox adopts T3</li>

</ul>

</section>

<section id="copy-rights">

<div class="page-header">

<h2>IV. Copyright and License</h2>

</div>

<ul>

<li>Copyright (C) 2005 - 2013 T3-Framework.org. All rights reserved.</li>

<li>Distributed under the GNU General Public License version 2 or later.</li>

<li>Speical Thanks to Anthony & JoomlaBammbo team for their continous support & Contribution. </li>

</ul>

</section>

<section id="logo-branding">

<div class="page-header">

<h2>V. Branding Logo </h2>

</div>

<div class="well" style="background-color: #e5e5e5;">

<div class="row-fluid">

<div class="span4">

<a href="http://t3-framework.org" title="Powered By T3 Framework" target="_blank" class="t3-logo t3-logo-dark" style="margin-top: 20px;"> Powered by <strong>T3 Framework</strong></a>

</div>

<div class="span8" style="margin-bottom: -20px;">

<pre class="prettyprint linenums"><a class="t3-logo t3-logo-dark" target="_blank" title="Powered By T3 Framework" href="http://t3-framework.org" rel="nofollow">

Powered by<strong>T3 Framework</strong>

</a></pre>

</div>

</div>

</div>

<div class="well" style="background-color: #e5e5e5;">

<div class="row-fluid">

<div class="span4">

<a href="http://t3-framework.org" title="Powered By T3 Framework" target="_blank" class="t3-logo t3-logo-color" style="margin-top: 20px;"> Powered by <strong>T3 Framework</strong></a>

</div>

<div class="span8" style="margin-bottom: -20px;">

<pre class="prettyprint linenums"><a class="t3-logo t3-logo-color" target="_blank" title="Powered By T3 Framework" href="http://t3-framework.org" rel="nofollow">

Powered by<strong>T3 Framework</strong>

</a></pre>

</div>

</div>

</div>

<div class="well" style="background-color: #e5e5e5;">

<div class="row-fluid">

<div class="span4">

<a href="http://t3-framework.org" title="Powered By T3 Framework" target="_blank" class="t3-logo t3-logo-light" style="margin-top: 20px;"> Powered by <strong>T3 Framework</strong></a>

</div>

<div class="span8" style="margin-bottom: -20px;">

<pre class="prettyprint linenums"><a class="t3-logo t3-logo-light" target="_blank" title="Powered By T3 Framework" href="http://t3-framework.org" rel="nofollow">

Powered by<strong>T3 Framework</strong>

</a></pre>

</div>

</div>

</div>

<div class="well" style="background-color: #e5e5e5;">

<div class="row-fluid">

<div class="span4">

<a href="http://t3-framework.org" title="Powered By T3 Framework" target="_blank" class="t3-logo-small t3-logo-dark" style="margin-top: 35px; margin-left: 50px"> Powered by <strong>T3 Framework</strong></a>

</div>

<div class="span8" style="margin-bottom: -20px;">

<pre class="prettyprint linenums"><a class="t3-logo-small t3-logo-dark" target="_blank" title="Powered By T3 Framework" href="http://t3-framework.org" rel="nofollow">

Powered by<strong>T3 Framework</strong>

</a></pre>

</div>

</div>

</div>

<div class="well" style="background-color: #e5e5e5;">

<div class="row-fluid">

<div class="span4">

<a href="http://t3-framework.org" title="Powered By T3 Framework" target="_blank" class="t3-logo-small t3-logo-color" style="margin-top: 35px; margin-left: 50px"> Powered by <strong>T3 Framework</strong></a>

</div>

<div class="span8" style="margin-bottom: -20px;">

<pre class="prettyprint linenums"><a class="t3-logo-small t3-logo-color" target="_blank" title="Powered By T3 Framework" href="http://t3-framework.org" rel="nofollow">

Powered by<strong>T3 Framework</strong>

</a></pre>

</div>

</div>

</div>

<div class="well" style="background-color: #e5e5e5;">

<div class="row-fluid">

<div class="span4">

<a href="http://t3-framework.org" title="Powered By T3 Framework" target="_blank" class="t3-logo-small t3-logo-light" style="margin-top: 35px; margin-left: 50px"> Powered by <strong>T3 Framework</strong></a>

</div>

<div class="span8" style="margin-bottom: -20px;">

<pre class="prettyprint linenums"><a class="t3-logo-small t3-logo-light" target="_blank" title="Powered By T3 Framework" href="http://t3-framework.org" rel="nofollow">

Powered by<strong>T3 Framework</strong>

</a></pre>

</div>

</div>

</div> 

</section>

<footer id="t3-footer" class="wrap t3-footer">

</footer>

but when i scroll down the menu on left hand is disappear. What is wrong in this code?
and also the menu look very simple not nice like your menu. How can i do it?

Thanks in advance.
Tung
Attachments (2)
affix-code-1.JPG affix-code-1.JPG
affix-code-2.JPG affix-code-2.JPG
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 7
Admin
Admin
Hole-in-One Sherlock Holmes The Voice
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Tung,

You should check for CSS style also. The function will turn the block to position fixed when you scroll below its default position.

On your T3 site, we have

.docs .docs-sidebar .docs-sidenav {
top: 80px;
margin: 0 !important;
padding: 0 !important;
}

It mean, the block will stay at top: 80px.

You also need to check for other style, such as z-index. width, height of the block.

Regards
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 8
  • Page :
  • 1


There are no replies made for this post yet.
However, you are not allowed to reply to this post.