Hpanel turns into a Registration Portal!

[MiCCAS]

This is an UNOFFICIAL modification to the current products served by JoomlArt. To be legally entitled to use this modification you MUST use this on a licensed domain. The 2 scripts required for this template can be found in JA Quillaja or JA Teline
++++++++++++++++++++++++++++++++++++++++++++++++++ ++++++

Yep, it's time for me to bragg again. I hope you don't mind watching my adventures of pulling apart bits of the JoomlArt templates.

Anyway, I sat down flicking through all the amazing JoomlArt templates (don't we all) and then I saw Quillaja and Teline that has the hpanel (hidden panel aka. Members Area). Now yes, I've seen them before but it gave me inspiration.

Now, I'm using a seperate custom system than what those templates use, including my own custom designed Joomla template. But, I really really wanted that on my site but didn't have any experience with javascript before.

So, I pulled bits, I prodded bits, until finally I have what I have on my site now. Go to www.miccas.net and press REGISTER. Or here's some screenshots:

http://i18.tinypic.com/674fnu0_th (http://i18.tinypic.com/674fnu0.png) - Panel Closed
http://i9.tinypic.com/4zcmdts_th (http://i9.tinypic.com/4zcmdts.png) - Panel Opening
http://i19.tinypic.com/53rpidl_th (http://i19.tinypic.com/53rpidl.png) - Panel Open

How I did it - yes, you all want to know :)

Firstly, I copied and pasted the two script files (ja.script.js and ja.hiddenpanel.js) to your templates folder.

Next, open the index.php file found in your template and put these lines of code just before the </head> tag.

<script language="javascript" type="text/javascript" src="http://www.yoursite.com/joomla/templates/templatename/ja.script.js"></script>
<script language="javascript" type="text/javascript" src="http://www.yoursite.com/joomla/templates/templatename/ja.hiddenpanel.js"></script>
<script type="text/javascript">
/*<![CDATA[*/
document.write ('<style type="text\/css">#ja-hpwrap{height:0;overflow:hidden;visibility:hidden; }<\/style>/*]]>*/
</script>

Make sure you change the site url to make sure it is directed at ja.script.js and ja.hiddenpanel.js

Next, copy and paste this code to where you'd like the panel to OPEN.

<div id="ja-hpwrap"><div id="ja-hp"><div class="ja-hpmodule">
Congratulations, you're hidden panel is working!
</div></div></div>

Obviously you can replace "Congratulations, you're hidden panel is working!" with your own text or code.

Next is the code that will display your button. Copy/paste this line of code wherever you'd like the SHOW/HIDE button to go.
<span id="ja-hp-switch">SHOW/HIDE</span>

Next, open your CSS file (/css/template_css.css) and add these lines of code:

#ja-hp-switch {
float: right;
color: #CCCCCC;
display: none;
font-weight: bold;
cursor: pointer;
padding: 0 5px;
}

.ja-hp-active {
color: #FFFFFF !important;
background: #FF9A48;
border-bottom: 1px solid #000000;
}

#ja-hpwrap {
background: #EFEFEF;
font-size: 11px;
}

#ja-hp {
line-height: normal;
}

div.ja-hpmodule {
float: right;
padding: 3px 0 2px;
}

html>body div.ja-hpmodule {
float: right;
padding: 5px 0 5px;
}

div.ja-hpmodule form {
float: left;
}

div.ja-hpmodule form label {
float: left;
padding: 0 5px;
}

div.ja-hpmodule form input.button {
padding: 0px 3px;
background: #333333;
border: 1px solid #333333;
color: #CCCCCC;
font-size: 11px !important;
}

div.ja-hpmodule form #mod_login_username,
div.ja-hpmodule form #mod_login_password {
background: #F7F7F7;
border: 1px solid #CCCCCC;
width: 70px;
margin-bottom: 0;
}

div.ja-hpmodule form #mod_login_remember {
margin-bottom: 0;
}

div.ja-hpmodule form a {
padding-left: 5px;
border-left: 1px solid #CCCCCC;
}
#ja-hpwrap {
clear: both;
width: 100%;
}

#ja-hp {
margin: 0 auto;
width: 750px;
text-align: left;
}

.wide #ja-hp {
margin: 0 auto;
width: 950px;
text-align: left;
}
}

Now, for the fun part! Upload the files and check your site.. yep, should be working! Well done :)

[Hung Dinh]

Thank you MiCCAS for sharing this modification. I am thinking of developing more features for the module so that we can release for our JAEC members

[MiCCAS]

Thank you MiCCAS for sharing this modification. I am thinking of developing more features for the module so that we can release for our JAEC members
Now THAT would be awesome :)

[ErikThorsen]

Excellent stuff MiCCAS. What about getting a "contribution" part of the forum? I think this would be a great add-on to an already great forum. That way licensed users could have even more reasons to join!