Landing page

Landing page

05/04/2014

I need to customise this page to look more like my original design

Top Menu

I will need to override my layout
http://docs.joomla.org/Layout_Overrides_in_Joomla

It looks like that only menu type can use nav-pills

I move the menu to position 1, assuming that related with the lack of space, but it didn't work.

Set in up as Main menu, only make put the menu in the main, as it is stated by the template.

I tried all I can but the problem is still there I cannot make my top menu Horizontal.

Well, now I would try to Override the code
http://docs.joomla.org/J3.2:How_to_use_the_Template_Manager

However I need to consider what I want to overwrite

For Layout overrides http://docs.joomla.org/Layout_Overrides_in_Joomla


I create a new template based on t3_bs3_blank

I will take care about the visuals later, I just want to adjust the Template to what I want.



To overwrite a Module, in order to make my menu appear horizontal, I visited this site:
http://docs.joomla.org/Layout_Overrides_in_Joomla



This thread show how to change the Top menu when the user is logged in.
http://forum.joomla.org/viewtopic.php?t=494254

WARNING: DELETE/UNINSTALL EXTENSION AS THEY STATE.

I delete some of the extensions and I couldn't open the templates again, so I have to install everything again.

These are all component I installed

Here the new layout, well at least a tide up.

Some of the feature of Purity  III that I prefer: Sticky menu, and go up bottom.


Now, let's work with the top menu again. I would create my own template.

Top menu using Login Form

I'll try to work now with the Login form to do my top menu.

First Try to change Module style:
Extensions >> Module Manager>> Login Form>> Advance

but this is what I've got, still not what I want.

Inherited and T3Xhtml

Feature row

T3 Tabs

T3slider: you hover over and a animation appear showing the options

T3modal: not working

T3 popover

Now try to create an Alternative Layout

mod_login overwrite

Using Template manager

upsss!!!! I should back up FIRST.....DONE

Too complicate to trying to change the login form, so back to the Top menu.

I use Firebug with Firefox

I made Topmenu in the Navhelper position. Every position has its own configuration.

I located where my menu was on Firefox

Now some tests change html using bootstrap other navbar

Using the template manager I'm changing the code, I just need to be aware to comply the grid.

I deleted the navhelper menu

After commented the lines, is not there any more:

Now let's go to the top menu

I try in Firefox and this what I need to change, it is stated nag-stacked

in header php onley I found this as head-search

Or create an alternative layout in the Menu module

I have to check this video

The folder that I can change is /template/fregleedirect and in to this, I can change /less (similar to css I have then to compile to css) and /tpls

adding this navbar-nav

I've got

adding nav nav-pills

I'll create the custom css, create the style for this and customise this header.

This is what I get

I think that it is cause by some .less file overriding my css.

I tried to change the modules.less but it doesn't reflect any change so I change colours in navigation.less.

Done with my position, my CSS custom and screen shot

@charset "UTF-8";
/* CSS Document */

/*My top menu style */
/*=================*/

.nav-topmenu {
  color: #fff;
  background-color: #5ECA24;
  font-size: 12px;
}

.nav-topmenu > li {
  float: left;
}
.nav-topmenu > li > a {
  border-radius: 0;
}
.nav-topmenu > li + li {
  margin-left: 0;
}

.nav-topmenu > li > a:hover,
.nav-topmenu > li > a:focus {
  text-decoration: underline;
  /*color: #333;*/
  background-color: #5ECA24;
}

.nav-topmenu > li.active > a,
.nav-topmenu > li.active > a:hover,
.nav-topmenu > li.active > a:focus {
  color: #333;
  background-color: #5ECA24;
}
/*=================*/
/*END My top menu style */

Now, I want my Top menu to do this:

 Code: http://forum.joomla.org/viewtopic.php?t=494254

Just wanted to jump in and share some code, I used the mod_flexi_customcode module which allows custom PHP code, I liked this better than hard-coding into the template. Below is the code that I used to create a "Welcome, ______ (Logout)" and "Welcome, (Sign in or Register)" module:

<?php
$user = &JFactory::getUser();
if($user->aid > 0){
echo 'Welcome, ' . $user->name . ' (<a href = "index.php?option=com_login&Itemid=97">Logout</a>)';
} else {
echo 'Welcome, (<a href="index.php?option=com_login&Itemid=97">Sign In</a> or <a href = "index.php?option=com_virtuemart&page=shop.registration&Itemid=96">Register</a>)';
}
?>

You'll need to change the URL's and ItemID's in my code to match what you've got set up on your site.

Hope this is helpful...

Thanks,
-Nate

======================
mod_login:default.php
<?php
/**
 * @package     Joomla.Site
 * @subpackage  mod_login
 *
 * @copyright   Copyright (C) 2005 - 2014 Open Source Matters, Inc. All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

defined('_JEXEC') or die;

require_once JPATH_SITE.'/components/com_users/helpers/route.php';

JHtml::_('behavior.keepalive');
JHtml::_('bootstrap.tooltip');

?>
<form action="<?php echo JRoute::_('index.php', true, $params->get('usesecure')); ?>" method="post" id="login-form" class="form-inline">
<?php if ($params->get('pretext')) : ?>
<div class="pretext">
<p><?php echo $params->get('pretext'); ?></p>
</div>
<?php endif; ?>
<div class="userdata">
<div id="form-login-username" class="control-group">
<div class="controls">
<?php if (!$params->get('usetext')) : ?> GET USER PARAM
<div class="input-prepend">
<span class="add-on">
<span class="icon-user hasTooltip" title="<?php echo JText::_('MOD_LOGIN_VALUE_USERNAME') ?>"></span>
<label for="modlgn-username" class="element-invisible"><?php echo JText::_('MOD_LOGIN_VALUE_USERNAME'); ?></label>
</span>
<input id="modlgn-username" type="text" name="username" class="input-small" tabindex="0" size="18" placeholder="<?php echo JText::_('MOD_LOGIN_VALUE_USERNAME') ?>" />
</div>
<?php else: ?>
<label for="modlgn-username"><?php echo JText::_('MOD_LOGIN_VALUE_USERNAME') ?></label>
<input id="modlgn-username" type="text" name="username" class="input-small" tabindex="0" size="18" placeholder="<?php echo JText::_('MOD_LOGIN_VALUE_USERNAME') ?>" />
<?php endif; ?>
</div>
</div>
<div id="form-login-password" class="control-group">
<div class="controls">
<?php if (!$params->get('usetext')) : ?>
<div class="input-prepend">
<span class="add-on">
<span class="icon-lock hasTooltip" title="<?php echo JText::_('JGLOBAL_PASSWORD') ?>">
</span>
<label for="modlgn-passwd" class="element-invisible"><?php echo JText::_('JGLOBAL_PASSWORD'); ?>
</label>
</span>
<input id="modlgn-passwd" type="password" name="password" class="input-small" tabindex="0" size="18" placeholder="<?php echo JText::_('JGLOBAL_PASSWORD') ?>" />
</div>
<?php else: ?>
<label for="modlgn-passwd"><?php echo JText::_('JGLOBAL_PASSWORD') ?></label>
<input id="modlgn-passwd" type="password" name="password" class="input-small" tabindex="0" size="18" placeholder="<?php echo JText::_('JGLOBAL_PASSWORD') ?>" />
<?php endif; ?>
</div>
</div>
<?php if (count($twofactormethods) > 1): ?>
<div id="form-login-secretkey" class="control-group">
<div class="controls">
<?php if (!$params->get('usetext')) : ?>
<div class="input-prepend input-append">
<span class="add-on">
<span class="icon-star hasTooltip" title="<?php echo JText::_('JGLOBAL_SECRETKEY'); ?>">
</span>
<label for="modlgn-secretkey" class="element-invisible"><?php echo JText::_('JGLOBAL_SECRETKEY'); ?>
</label>
</span>
<input id="modlgn-secretkey" autocomplete="off" type="text" name="secretkey" class="input-small" tabindex="0" size="18" placeholder="<?php echo JText::_('JGLOBAL_SECRETKEY') ?>" />
<span class="btn width-auto hasTooltip" title="<?php echo JText::_('JGLOBAL_SECRETKEY_HELP'); ?>">
<span class="icon-help"></span>
</span>
</div>
<?php else: ?>
<label for="modlgn-secretkey"><?php echo JText::_('JGLOBAL_SECRETKEY') ?></label>
<input id="modlgn-secretkey" autocomplete="off" type="text" name="secretkey" class="input-small" tabindex="0" size="18" placeholder="<?php echo JText::_('JGLOBAL_SECRETKEY') ?>" />
<span class="btn width-auto hasTooltip" title="<?php echo JText::_('JGLOBAL_SECRETKEY_HELP'); ?>">
<span class="icon-help"></span>
</span>
<?php endif; ?>

</div>
</div>
<?php endif; ?>
<?php if (JPluginHelper::isEnabled('system', 'remember')) : ?>
<div id="form-login-remember" class="control-group checkbox">
<label for="modlgn-remember" class="control-label"><?php echo JText::_('MOD_LOGIN_REMEMBER_ME') ?></label> <input id="modlgn-remember" type="checkbox" name="remember" class="inputbox" value="yes"/>
</div>
<?php endif; ?>
<div id="form-login-submit" class="control-group">
<div class="controls">
<button type="submit" tabindex="0" name="Submit" class="btn btn-primary"><?php echo JText::_('JLOGIN') ?></button>
</div>
</div>
<?php
$usersConfig = JComponentHelper::getParams('com_users'); ?>
<ul class="unstyled">
<?php if ($usersConfig->get('allowUserRegistration')) : ?>
<li>
<a href="<?php echo JRoute::_('index.php?option=com_users&view=registration&Itemid='.UsersHelperRoute::getRegistrationRoute()); ?>">
<?php echo JText::_('MOD_LOGIN_REGISTER'); ?> <span class="icon-arrow-right"></span></a>
</li>
<?php endif; ?>
<li>
<a href="<?php echo JRoute::_('index.php?option=com_users&view=remind&Itemid='.UsersHelperRoute::getRemindRoute()); ?>">
<?php echo JText::_('MOD_LOGIN_FORGOT_YOUR_USERNAME'); ?></a>
</li>
<li>
<a href="<?php echo JRoute::_('index.php?option=com_users&view=reset&Itemid='.UsersHelperRoute::getResetRoute()); ?>">
<?php echo JText::_('MOD_LOGIN_FORGOT_YOUR_PASSWORD'); ?></a>
</li>
</ul>
<input type="hidden" name="option" value="com_users" />
<input type="hidden" name="task" value="user.login" />
<input type="hidden" name="return" value="<?php echo $return; ?>" />
<?php echo JHtml::_('form.token'); ?>
</div>
<?php if ($params->get('posttext')) : ?>
<div class="posttext">
<p><?php echo $params->get('posttext'); ?></p>
</div>
<?php endif; ?>
</form>


mod_login:default_logout.php

<?php
/**
 * @package     Joomla.Site
 * @subpackage  mod_login
 *
 * @copyright   Copyright (C) 2005 - 2014 Open Source Matters, Inc. All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

defined('_JEXEC') or die;

JHtml::_('behavior.keepalive');
?>
<form action="<?php echo JRoute::_('index.php', true, $params->get('usesecure')); ?>" method="post" id="login-form" class="form-vertical">
<?php if ($params->get('greeting')) : ?>
<div class="login-greeting">
<?php if ($params->get('name') == 0) : {
echo JText::sprintf('MOD_LOGIN_HINAME', htmlspecialchars($user->get('name')));
} else : {
echo JText::sprintf('MOD_LOGIN_HINAME', htmlspecialchars($user->get('username')));
} endif; ?>
</div>
<?php endif; ?>
<div class="logout-button">
<input type="submit" name="Submit" class="btn btn-primary" value="<?php echo JText::_('JLOGOUT'); ?>" />
<input type="hidden" name="option" value="com_users" />
<input type="hidden" name="task" value="user.logout" />
<input type="hidden" name="return" value="<?php echo $return; ?>" />
<?php echo JHtml::_('form.token'); ?>
</div>
</form>

==========================

mod_menu:default.php

<?php
/**
 * @package     Joomla.Site
 * @subpackage  mod_menu
 *
 * @copyright   Copyright (C) 2005 - 2014 Open Source Matters, Inc. All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

defined('_JEXEC') or die;

// Note. It is important to remove spaces between elements.
?>
<?php // The menu class is deprecated. Use nav instead. ?>
<ul class="nav menu<?php echo $class_sfx;?>"<?php
$tag = '';

if ($params->get('tag_id') != null)
{
$tag = $params->get('tag_id') . '';
echo ' id="' . $tag . '"';
}
?>>
<?php
foreach ($list as $i => &$item)
{
$class = 'item-' . $item->id;

if ($item->id == $active_id)
{
$class .= ' current';
}

if (in_array($item->id, $path))
{
$class .= ' active';
}
elseif ($item->type == 'alias')
{
$aliasToId = $item->params->get('aliasoptions');

if (count($path) > 0 && $aliasToId == $path[count($path) - 1])
{
$class .= ' active';
}
elseif (in_array($aliasToId, $path))
{
$class .= ' alias-parent-active';
}
}

if ($item->type == 'separator')
{
$class .= ' divider';
}

if ($item->deeper)
{
$class .= ' deeper';
}

if ($item->parent)
{
$class .= ' parent';
}

if (!empty($class))
{
$class = ' class="' . trim($class) . '"';
}

echo '<li' . $class . '>';

SELECT items for the menu... the default_ (ext) is show in ''
// Render the menu item.
switch ($item->type) :
case 'separator':
case 'url':
case 'component':
case 'heading':
require JModuleHelper::getLayoutPath('mod_menu', 'default_' . $item->type);
break;

default:
require JModuleHelper::getLayoutPath('mod_menu', 'default_url');
break;
endswitch;

// The next item is deeper.
if ($item->deeper)
{
echo '<ul class="nav-child unstyled small">';
}
elseif ($item->shallower)
{
// The next item is shallower.
echo '</li>';
echo str_repeat('</ul></li>', $item->level_diff);
}
else
{
// The next item is on the same level.
echo '</li>';
}
}
?></ul>

==========================

mod_menu:default_component.php

<?php
/**
 * @package     Joomla.Site
 * @subpackage  mod_menu
 *
 * @copyright   Copyright (C) 2005 - 2014 Open Source Matters, Inc. All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

defined('_JEXEC') or die;

// Note. It is important to remove spaces between elements.
$class = $item->anchor_css ? 'class="' . $item->anchor_css . '" ' : '';
$title = $item->anchor_title ? 'title="' . $item->anchor_title . '" ' : '';

if ($item->menu_image)
{
$item->params->get('menu_text', 1) ?
$linktype = '<img src="' . $item->menu_image . '" alt="' . $item->title . '" /><span class="image-title">' . $item->title . '</span> ' :
$linktype = '<img src="' . $item->menu_image . '" alt="' . $item->title . '" />';
}
else
{
$linktype = $item->title;
}

switch ($item->browserNav)
{
default:
case 0:
?><a <?php echo $class; ?>href="<?php echo $item->flink; ?>" <?php echo $title; ?>><?php echo $linktype; ?></a><?php
break;
case 1:
// _blank
?><a <?php echo $class; ?>href="<?php echo $item->flink; ?>" target="_blank" <?php echo $title; ?>><?php echo $linktype; ?></a><?php
break;
case 2:
// window.open
?><a <?php echo $class; ?>href="<?php echo $item->flink; ?>" onclick="window.open(this.href,'targetWindow','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes');return false;" <?php echo $title; ?>><?php echo $linktype; ?></a>
<?php
break;
}

==========================

mod_menu:default_separator.php

<?php
/**
 * @package     Joomla.Site
 * @subpackage  mod_menu
 *
 * @copyright   Copyright (C) 2005 - 2014 Open Source Matters, Inc. All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

defined('_JEXEC') or die;

// Note. It is important to remove spaces between elements.
$title = $item->anchor_title ? ' title="' . $item->anchor_title . '" ' : '';
if ($item->menu_image)
{
$item->params->get('menu_text', 1) ?
$linktype = '<img src="' . $item->menu_image . '" alt="' . $item->title . '" /><span class="image-title">' . $item->title . '</span> ' :
$linktype = '<img src="' . $item->menu_image . '" alt="' . $item->title . '" />';
}
else
{
$linktype = $item->title;
}

?>
<span class="separator"<?php echo $title; ?>>
<?php echo $linktype; ?>
</span>

==========================

mod_menu:default_url.php

<?php
/**
 * @package     Joomla.Site
 * @subpackage  mod_menu
 *
 * @copyright   Copyright (C) 2005 - 2014 Open Source Matters, Inc. All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

defined('_JEXEC') or die;

// Note. It is important to remove spaces between elements.
$class = $item->anchor_css ? 'class="' . $item->anchor_css . '" ' : '';
$title = $item->anchor_title ? 'title="' . $item->anchor_title . '" ' : '';

if ($item->menu_image)
{
$item->params->get('menu_text', 1) ?
$linktype = '<img src="' . $item->menu_image . '" alt="' . $item->title . '" /><span class="image-title">' . $item->title . '</span> ' :
$linktype = '<img src="' . $item->menu_image . '" alt="' . $item->title . '" />';
}
else
{
$linktype = $item->title;
}

$flink = $item->flink;
$flink = JFilterOutput::ampReplace(htmlspecialchars($flink));

switch ($item->browserNav) :
default:
case 0:
?><a <?php echo $class; ?>href="<?php echo $flink; ?>" <?php echo $title; ?>><?php echo $linktype; ?></a><?php
break;
case 1:
// _blank
?><a <?php echo $class; ?>href="<?php echo $flink; ?>" target="_blank" <?php echo $title; ?>><?php echo $linktype; ?></a><?php
break;
case 2:
// window.open
$options = 'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,'.$params->get('window_open');
?><a <?php echo $class; ?>href="<?php echo $flink; ?>" onclick="window.open(this.href,'targetWindow','<?php echo $options;?>');return false;" <?php echo $title; ?>><?php echo $linktype; ?></a><?php
break;
endswitch;

================================
Let's override the mod_menu http://docs.joomla.org/Layout_Overrides_in_Joomla

I've got my alternative Layout in the Module Manager/Top menu

I add this line from mod_login and:

http://www.ostraining.com/blog/joomla/overrides/


//****MT lines for Topmenu Greeting... NOTE I need to check the Log out Routine

$user = &JFactory::getUser();

if ($user->id != null)
{
echo 'Welcome, ' . $user->name . ' (<a class="nav-topmenu"; href = "index.php?option=com_users&task=user.logout">Logout</a>)';
} else {
echo 'Welcome, (<a class="nav-topmenu"; href="index.php?option=com_users&view=login">Login</a> or <a class="nav-topmenu"; href = "index.php?option=com_users&view=registration">Register</a>)';
}

I still need to improve the Layout, by putting on line all options, also I need to work out the Logout routine.

Landing page

07-04-2014

I added a image slider using the component DJ_Imageslider http://extensions.joomla.org/index.php?option=com_mtree&task=viewlink&link_id=13119

================================

Where is my template that make the home page?

I change the order of the slideshow for spotlight 1

on the template I can see the change

============JOOMLA IS GONE======================

Bootstrap

11-04-2014

I checked all information contained in http://getbootstrap.com which it is very comprehensive and simple to understand.  I tried to use their customiser but I think it got some problems.

I found this solution

I opened in Firefox and it works, it downloaded a zip containing all files for the framework. I'll built the prototype then I did some colour changing to the Brand Freegle.

I downloaded the source code from http://getbootstrap.com/getting-started/

This folder contain examples which I'll use to build my prototype.

Some of these are:
Blog: I can use this for the Board/News

Carrusel: on the first Page, and to show others Offer or Wanted when the user is creating a post.

Jumbotron: an alternative of the previous:

NARROW

Dashboard for My freegle:

navbar_fixed-top: For my main menus, I prefer that the top menu is sticky on the top as people scroll down.

Sign in: to work forms

For my Landing Page I'll use Navbar adding Jumbotron.

Wow that was quiet straight forward.  I will work with default colours at the moment to really appreciate how they use them in Bootsrap.

My drop down menu is not working I need to check.  I check the html, and fix the call to javascript as the one that it is in the template is not connecting to.

I reset the css to the original, I'll check colours when I finish.

I added the footer, and a top link

I wrapped into the class "container" so it looks align to the top.

1. Add search bar.
2. Add Carrusel with Latest posts.
3. Footer:

• Consider use a vertical menu
• Divide in three columns in order to include Connect with us and Sponsors/Donate Op.
• Top button should be mobile, and consider to use an arrow to the top.

============================================
The search bar disappear when collapse

I disable the <div> so is not going to disappear when collapse

I use <select> to create the drop down in the search.  I would need to style them.

============================================

12/04/2014

I added the Logo, but I would like more space on the top, I increase the topand this happened. As I scroll I can see the content at the back, this remain me parallax effect.

so far:

I'll fix the footer

Social icons from http://glyphicons.com, however I decide to use the ones from Facebook and twitter page.

24/04/2014

After some testing I had to review all the information architecture of the website to be more user centred.

I review back other websites in order to see how they solve my navigation problems spotted during testing phase.

Friday Ad

They have a big button on the right han "Place a Free ad" and also in the main navigation. This main navigation include general categories of the search results.

They place in two different areas the same option.

Gumtree
Again a big button to place an ad, they main navigation is based on the search.

SnaffleUp
The actions to be taken by the user are placed in the main navigation.

Footer

25/04/2014

I think "My Freegle" is redundant, and instead of Offered and requested I'll unify this information between Post I published and Posts of my interest, this can be clearer.

I feel this Layout is better, I need to test it.  These are the options under Freegle.

I ordered depending on the frequency that the user is going to click or more popular links

I added a background to the search area in order to separated from the Offer an item button.

Layout so far:

I would like to see another distribution, as it looks boring.

I think that the additional info at the right it's better as the attention is draw to the items recommend to the user.

I need to check how nested columns work. When I nested the nested columns should add 12 again.

Include donate, as I still need to cover the Client "Freegle" needs

After I reviewed the site map

28/04/2014

I design a page when the user is Login and when is not.

Not Login

I don't like the way all the controls look, so I change the youtube parameter, as describe in this link: https://developers.google.com/youtube/player_parameters?csw=1#Parameters

//www.youtube.com/embed/dTmxsbnAlkA?rel=0&theme=light&showinfo=0&controls=2

change this the interface looks cleaner

I include all elements of the main navigation of the website, however the user would be asked to Login. The user can look at the stories to encourage them to Register, also show some of the latest Free items available for them to pick.  A box explaining briefly what it is the purpose of the site with an action button to Register.

Login

For the everyday user when they are Login, the main page will show recommendation of items based on User search preferences.  As for the stake holder is important "Give as you Live for Freegle" I include the banner. This year they are promoting this:

I'm having this problem with Firefox, Chrome and Explorer

=======

Another aspect noticed in many website is the location of login to the far right hand side, I'll move it to do some testing.

01/05/2014

During testing one of the user manifest a bigger label for the top menu and also icon help to visual find info.

Now I'll work with the search bar, I need to be sure that work responsive.

Some consideration http://insideintercom.io/7-things-wish-every-search-did/
"Everywhere that makes sense to your users should be searched: name, title, tags, location, company, author, merchant, factory, platform, etc. And it must do so seamlessly, without the need for your users to specify the attribute they want to search in."

"You don’t want to force users to learn specific syntax just to use search. Display filters that make sense according to the results offered. "
"We all make mistakes when we type. You need your search engine to be forgiving when it comes to spelling. "

I try to implement a smart search that show matches as user write but was not posible at the moment, I'll try after I finish.
http://brianreavis.github.io/selectize.js/

TRY LATER I'm wasting too much time

Carry on trying layou of search to work well responsive I tried different solution to wrap the items but it doesn't work well. If I fixed in mobil y get messy in desktop. My main device is desktop for my audience.

This looks better
md screen 992 px to 1200px

sm screen 768px to 991 px

I tried to add an space between the search button and the input but it didn't work. I have to change padding and media queries and swap search for this range

If I place add search with out space it looks as follow, so I prefer to leave just the icon.

Some adjustment Header and Footer

*************

Message

I tried to use carrusel to implement my Join page, however I could manage to fix it. also it has a glitch when it gets to the last, if I pressed next open the main page.

I build my own Join Box

Now I need to make the video it responsive:

I tried
https://www.concrete5.org/marketplace/themes/bootstrap/forums/responsive-youtube-iframe-within-bootstrap-expandcollapse/

which is  setup with 100% <iframe width="100" height="315" src..., however these are the results, I don't like how the image get crop.

I checked this https://gist.github.com/jgarber/2302238

I'll position the Join bottom to the right so the mobile user can see the video first.

Now the search bar...  I include with the Join box 

however I don't think is the solution to make them browse... so I'll create a spy content or anchor a part of the content.

Add a bottom border to the main menu

========

Lates Freebies

=============

03/05/2014

Some improvements 04/05/2015