The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Login slide

View previous topic View next topic Go down

Login slide

Post by mark456123 on August 29th 2012, 1:44 am

Can someone make a tutorial like this for phpBB2?

mark456123
New Member

Posts : 18
Reputation : 1
Language : English, Filipino, Japanese, French

Back to top Go down

Re: Login slide

Post by xDroiidx on August 29th 2012, 2:09 am

Hello , that tutorial works for punBB and Phpbb2.

xDroiidx
Forumember

Posts : 95
Reputation : 2
Language : English

http://www.epicstep.forumotion.com

Back to top Go down

Re: Login slide

Post by mark456123 on August 29th 2012, 3:54 am

Rideem3 wrote:As the user above me said, it is already possible on a phpBB2 forum. Have you tried it?
Well.. I can't find the
Code:
<body>

mark456123
New Member

Posts : 18
Reputation : 1
Language : English, Filipino, Japanese, French

Back to top Go down

Re: Login slide

Post by xDroiidx on August 29th 2012, 6:09 am

use the search bar at the top of the template to search for it

xDroiidx
Forumember

Posts : 95
Reputation : 2
Language : English

http://www.epicstep.forumotion.com

Back to top Go down

Re: Login slide

Post by mark456123 on August 29th 2012, 6:48 am

@xDroiidx wrote:use the search bar at the top of the template to search for it
I did. No result..

mark456123
New Member

Posts : 18
Reputation : 1
Language : English, Filipino, Japanese, French

Back to top Go down

Re: Login slide

Post by DarkGlow on August 29th 2012, 8:23 am

Hi,

No, you have to type this into the search bar (click on 'spoiler'):

Spoiler:
<body


Then you will find it. After you've found it, click right after '<body' AND NOT ''<body>" (so don't get confused). Hit space once then paste the code. Don't forget to reupload the images.

Good luck.

DarkGlow
Forumember

Male Posts : 629
Reputation : 92
Language : English | Hebrew | Arabic
Location : Israel

Back to top Go down

Re: Login slide

Post by mark456123 on August 29th 2012, 9:33 am

@DarkGlow wrote:Hi,

No, you have to type this into the search bar (click on 'spoiler'):

Spoiler:
<body


Then you will find it. After you've found it, click right after '<body' AND NOT ''<body>" (so don't get confused). Hit space once then paste the code. Don't forget to reupload the images.

Good luck.

Thank you! It works but when I click it nothing happens.. and it makes the forum font black.

mark456123
New Member

Posts : 18
Reputation : 1
Language : English, Filipino, Japanese, French

Back to top Go down

Re: Login slide

Post by DarkGlow on August 29th 2012, 9:39 am

@mark456123 wrote:
@DarkGlow wrote:Hi,

No, you have to type this into the search bar (click on 'spoiler'):

Spoiler:
<body


Then you will find it. After you've found it, click right after '<body' AND NOT ''<body>" (so don't get confused). Hit space once then paste the code. Don't forget to reupload the images.

Good luck.

Thank you! It works but when I click it nothing happens.. and it makes the forum font black.


Have you published the template? You can do so by clicking on the Add icon that's east of the overall-header template.

DarkGlow
Forumember

Male Posts : 629
Reputation : 92
Language : English | Hebrew | Arabic
Location : Israel

Back to top Go down

Re: Login slide

Post by mark456123 on August 29th 2012, 9:44 am

@DarkGlow wrote:
@mark456123 wrote:
@DarkGlow wrote:Hi,

No, you have to type this into the search bar (click on 'spoiler'):

Spoiler:
<body


Then you will find it. After you've found it, click right after '<body' AND NOT ''<body>" (so don't get confused). Hit space once then paste the code. Don't forget to reupload the images.

Good luck.

Thank you! It works but when I click it nothing happens.. and it makes the forum font black.


Have you published the template? You can do so by clicking on the Add icon that's east of the overall-header template.

Yes I did. When I click the login or the register button nothing happens.

mark456123
New Member

Posts : 18
Reputation : 1
Language : English, Filipino, Japanese, French

Back to top Go down

Re: Login slide

Post by DarkGlow on August 29th 2012, 9:50 am

Ok, here's a quick guide:

Please follow every step by step to avoid mix-ups.

=> I want you to completely delete the JavaScript page you created from that tutorial.
=> Leave the templates as they are, do not touch them.
=> Go back to that tutorial, see what does the CSS code contain then go to your own CSS and remove it. Be careful, though.

I'll post this as a quick reply for you to do all of that while I'm gathering the codes with (a) better explanation(s).

EDIT; of course do not forget to save after removing the stuff I told you about.

DarkGlow
Forumember

Male Posts : 629
Reputation : 92
Language : English | Hebrew | Arabic
Location : Israel

Back to top Go down

Re: Login slide

Post by mark456123 on August 29th 2012, 10:03 am

@DarkGlow wrote:Ok, here's a quick guide:

Please follow every step by step to avoid mix-ups.

=> I want you to completely delete the JavaScript page you created from that tutorial.
=> Leave the templates as they are, do not touch them.
=> Go back to that tutorial, see what does the CSS code contain then go to your own CSS and remove it. Be careful, though.

I'll post this as a quick reply for you to do all of that while I'm gathering the codes with (a) better explanation(s).

EDIT; of course do not forget to save after removing the stuff I told you about.

I don't know which one to remove.. I have 0 knowledge about css and html

Heres my css
Code:
a.mainmenu{
filter:alpha(opacity=80);
-moz-opacity: .80;
opacity: .80;
  }

a.mainmenu:hover{
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
    }



.info, .success, .warning, .error, .mes, .tips, .chat, .cnb {
    margin: 10px 0px;
    padding: 10px 10px 15px 50px;
    background-repeat: no-repeat;
    background-position: 10px center;
    border-radius: 4px 4px 4px;
}

.info {
    background-color: #d1e4f3;
    background-image: url("http://cdn1.iconfinder.com/data/icons/musthave/24/Information.png");
    color: #00529B;
    border: 1px solid #4d8fcb;
}

.success {
    background-color: #effeb9;
    background-image: url("http://cdn3.iconfinder.com/data/icons/fatcow/32x32_0020/accept.png");
    color: #4F8A10;
    border: 1px solid #9ac601;
}
.warning {
    background-color: #ffeaa9;
    background-image: url("http://cdn3.iconfinder.com/data/icons/fatcow/32x32_0400/error.png");
    color: #9F6000;
    border: 1px solid #f9b516;
}
.error {
    background-color: #fccac3;
    background-image: url("http://cdn1.iconfinder.com/data/icons/CrystalClear/32x32/actions/messagebox_critical.png");
    color: #D8000C;
    border: 1px solid #db3f23;
}

.mes {
    background-color: #F2F2F2;
    background-image: url("http://cdn2.iconfinder.com/data/icons/fugue/bonus/icons-32/mail.png");
    border: 1px solid #AAAAAA;
    color: #545454;
}

.tips {
    background-color: #FEEAC9;
    background-image: url("http://cdn5.iconfinder.com/data/icons/woocons1/Light%20Bulb%20On.png");
    border: 1px solid #D38E49;
    color: #bb640c;
}

.chat {
    background-color: #daecfb;
    background-image: url("http://cdn2.iconfinder.com/data/icons/drf/PNG/iChat.png");
    border: 1px solid #2078c9;
    color: #066ac4;
}

tr.post > td:first-child {
    text-align: center;
}

    .postprofile dt:first-child a:first-child {
    font-size: 15px;
    display: block;
    margin-bottom: 5px;
    text-align:center;
    }


.novo {
background-color: #1F1F1F;
border: 1px solid #dfdfdf;
color: #DF0EF2;
margin-top: 2px;
padding-bottom: 3px;
padding-left: 10px;
padding-right: 3px;
padding-top: 3px;
text-align: left;
width: 154px;
}

body{cursor: url('http://cur.cursors-4u.net/cursors/cur-2/cur116.cur'), progress;}
a:hover, a {cursor: url('http://cur.cursors-4u.net/cursors/cur-2/cur117.cur'), progress;}






#tabs_container {
    border-bottom: 1px solid #ccc;
}
#stabs {
    list-style: none;
    padding: 5px 0 4px 0;
    margin: 0 0 0 10px;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 13px;
}
#stabs li {
    display: inline;
}
#stabs li a {
    border: 1px solid #ccc;
    padding: 4px 6px;
    text-decoration: none;
    background-color: #323232;
    border-bottom: none;
    outline: none;
border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
}
#stabs li a:hover {
    background-color: #dddddd;
    padding: 4px 6px;
}
#stabs li.active a {
    border-bottom: 1px solid #fff;
    background-color: #FFFFFF;
    padding: 4px 6px 5px 6px;
    border-bottom: none;
}
#stabs li.active a:hover {
    background-color: #eeeeee;
    padding: 4px 6px 5px 6px;
    border-bottom: none;
}
 
#tabs_content_container {
    border: 1px solid #ccc;
    border-top: none;
    padding: 10px;
border-radius: 0px 0px 5px 5px;
}
.tab_content {
    display: none;
}






#first {
  margin-left:250px;
  margin-top:40px;
  width:150px;
  background-color: transparent;
  position:relative;
}
#first img {
  position:absolute;
 -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}
#first img.top:hover {
  opacity:0;
}
#second {
  margin-top:40px;
  margin-left: 500px;
    width:150px;
 background-color: transparent;
    position:relative;
}
#second img.top:hover {
 opacity:0;
}
#second img {
  position:absolute;
 -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}
#third {
  margin-top:40px;
  margin-left:750px;
    width:150px;
 background-color: transparent;
    position:relative;

}
#third img.top:hover {
 opacity:0;
}
#third img {
  position:absolute;
 -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}










a:link { 
    text-decoration: none; 
    text-shadow: none; 
    -webkit-transition: 200ms linear 0s; 
    -moz-transition: 200ms linear 0s; 
    -o-transition: 200ms linear 0s; 
    transition: 200ms linear 0s; 
    outline: 0 none; 


a:link:hover, a:link:focus 

    color: #fff; 
    text-shadow: -1px 1px 8px #ffc, 1px -1px 8px #fff; 
}



a:hover{text-decoration: none !important;}
a {text-decoration: none !important;}
a:link {text-decoration: none;}
a:visited {text-decoration: none;}












.secondarytitle h2{
    background: #333;
    display: inline;
    padding: 3px 6px;
    border-radius: 3px 3px 3px 3px;
}




a[href="/g10-donators-admin"] {
    background: url("http://i45.servimg.com/u/f45/15/95/60/34/glitte10.gif");
}



.genmed > b {
background: url("http://i43.servimg.com/u/f43/14/73/12/96/quote_11.png") no-repeat scroll left center transparent;
padding-left: 25px;
}

mark456123
New Member

Posts : 18
Reputation : 1
Language : English, Filipino, Japanese, French

Back to top Go down

Re: Login slide

Post by DarkGlow on August 29th 2012, 10:11 am

@mark456123 wrote:
@DarkGlow wrote:Ok, here's a quick guide:

Please follow every step by step to avoid mix-ups.

=> I want you to completely delete the JavaScript page you created from that tutorial.
=> Leave the templates as they are, do not touch them.
=> Go back to that tutorial, see what does the CSS code contain then go to your own CSS and remove it. Be careful, though.

I'll post this as a quick reply for you to do all of that while I'm gathering the codes with (a) better explanation(s).

EDIT; of course do not forget to save after removing the stuff I told you about.

I don't know which one to remove.. I have 0 knowledge about css and html

Heres my css
Code:
a.mainmenu{
filter:alpha(opacity=80);
-moz-opacity: .80;
opacity: .80;
  }

a.mainmenu:hover{
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
    }



.info, .success, .warning, .error, .mes, .tips, .chat, .cnb {
    margin: 10px 0px;
    padding: 10px 10px 15px 50px;
    background-repeat: no-repeat;
    background-position: 10px center;
    border-radius: 4px 4px 4px;
}

.info {
    background-color: #d1e4f3;
    background-image: url("http://cdn1.iconfinder.com/data/icons/musthave/24/Information.png");
    color: #00529B;
    border: 1px solid #4d8fcb;
}

.success {
    background-color: #effeb9;
    background-image: url("http://cdn3.iconfinder.com/data/icons/fatcow/32x32_0020/accept.png");
    color: #4F8A10;
    border: 1px solid #9ac601;
}
.warning {
    background-color: #ffeaa9;
    background-image: url("http://cdn3.iconfinder.com/data/icons/fatcow/32x32_0400/error.png");
    color: #9F6000;
    border: 1px solid #f9b516;
}
.error {
    background-color: #fccac3;
    background-image: url("http://cdn1.iconfinder.com/data/icons/CrystalClear/32x32/actions/messagebox_critical.png");
    color: #D8000C;
    border: 1px solid #db3f23;
}

.mes {
    background-color: #F2F2F2;
    background-image: url("http://cdn2.iconfinder.com/data/icons/fugue/bonus/icons-32/mail.png");
    border: 1px solid #AAAAAA;
    color: #545454;
}

.tips {
    background-color: #FEEAC9;
    background-image: url("http://cdn5.iconfinder.com/data/icons/woocons1/Light%20Bulb%20On.png");
    border: 1px solid #D38E49;
    color: #bb640c;
}

.chat {
    background-color: #daecfb;
    background-image: url("http://cdn2.iconfinder.com/data/icons/drf/PNG/iChat.png");
    border: 1px solid #2078c9;
    color: #066ac4;
}

tr.post > td:first-child {
    text-align: center;
}

    .postprofile dt:first-child a:first-child {
    font-size: 15px;
    display: block;
    margin-bottom: 5px;
    text-align:center;
    }


.novo {
background-color: #1F1F1F;
border: 1px solid #dfdfdf;
color: #DF0EF2;
margin-top: 2px;
padding-bottom: 3px;
padding-left: 10px;
padding-right: 3px;
padding-top: 3px;
text-align: left;
width: 154px;
}

body{cursor: url('http://cur.cursors-4u.net/cursors/cur-2/cur116.cur'), progress;}
a:hover, a {cursor: url('http://cur.cursors-4u.net/cursors/cur-2/cur117.cur'), progress;}






#tabs_container {
    border-bottom: 1px solid #ccc;
}
#stabs {
    list-style: none;
    padding: 5px 0 4px 0;
    margin: 0 0 0 10px;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 13px;
}
#stabs li {
    display: inline;
}
#stabs li a {
    border: 1px solid #ccc;
    padding: 4px 6px;
    text-decoration: none;
    background-color: #323232;
    border-bottom: none;
    outline: none;
border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
}
#stabs li a:hover {
    background-color: #dddddd;
    padding: 4px 6px;
}
#stabs li.active a {
    border-bottom: 1px solid #fff;
    background-color: #FFFFFF;
    padding: 4px 6px 5px 6px;
    border-bottom: none;
}
#stabs li.active a:hover {
    background-color: #eeeeee;
    padding: 4px 6px 5px 6px;
    border-bottom: none;
}
 
#tabs_content_container {
    border: 1px solid #ccc;
    border-top: none;
    padding: 10px;
border-radius: 0px 0px 5px 5px;
}
.tab_content {
    display: none;
}






#first {
  margin-left:250px;
  margin-top:40px;
  width:150px;
  background-color: transparent;
  position:relative;
}
#first img {
  position:absolute;
 -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}
#first img.top:hover {
  opacity:0;
}
#second {
  margin-top:40px;
  margin-left: 500px;
    width:150px;
 background-color: transparent;
    position:relative;
}
#second img.top:hover {
 opacity:0;
}
#second img {
  position:absolute;
 -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}
#third {
  margin-top:40px;
  margin-left:750px;
    width:150px;
 background-color: transparent;
    position:relative;

}
#third img.top:hover {
 opacity:0;
}
#third img {
  position:absolute;
 -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}










a:link { 
    text-decoration: none; 
    text-shadow: none; 
    -webkit-transition: 200ms linear 0s; 
    -moz-transition: 200ms linear 0s; 
    -o-transition: 200ms linear 0s; 
    transition: 200ms linear 0s; 
    outline: 0 none; 


a:link:hover, a:link:focus 

    color: #fff; 
    text-shadow: -1px 1px 8px #ffc, 1px -1px 8px #fff; 
}



a:hover{text-decoration: none !important;}
a {text-decoration: none !important;}
a:link {text-decoration: none;}
a:visited {text-decoration: none;}












.secondarytitle h2{
    background: #333;
    display: inline;
    padding: 3px 6px;
    border-radius: 3px 3px 3px 3px;
}




a[href="/g10-donators-admin"] {
    background: url("http://i45.servimg.com/u/f45/15/95/60/34/glitte10.gif");
}



.genmed > b {
background: url("http://i43.servimg.com/u/f43/14/73/12/96/quote_11.png") no-repeat scroll left center transparent;
padding-left: 25px;
}

I told you to go back to the tutorial in your link, and see the CSS code in there and then remove it in your OWN. However; apparently you removed it, if that's your CSS you copied from above ^^^.

Anyway, since you appear that you've removed it, have you removed the JavaScript page Nera's tutorial told you about (you for sure have created it while following the tutorial. u know Wink ).

You can go back to JavaScript management and click on the red X icon to remove the page.

DarkGlow
Forumember

Male Posts : 629
Reputation : 92
Language : English | Hebrew | Arabic
Location : Israel

Back to top Go down

Re: Login slide

Post by mark456123 on August 29th 2012, 10:23 am

Okay now it works! Thanks! Very Happy
But it changes the font color to black. I tried changing the color to red in the color tab and it's still black.

mark456123
New Member

Posts : 18
Reputation : 1
Language : English, Filipino, Japanese, French

Back to top Go down

Re: Login slide

Post by DarkGlow on August 29th 2012, 10:38 am

@mark456123 wrote:Okay now it works! Thanks! Very Happy
But it changes the font color to black. I tried changing the color to red in the color tab and it's still black.

I suggest you do as I'm going to say lol, you seemed to do it by your own.

=> Please remove the JavaScript page you've previously created from that tutorial. You can do so by going to:

1) ACP.
2) Advanced mode.
3) Modules tab.
4) Scroll to bottom, then look at bottom-left and click on ''JavaScript codes management''.
5) You'll get a list of JavaScript pages displayed in the middle of the page/screen, tick the square next to the JavaScript page and then hit delete beneath.
6) It will probably ask you if you're sure about the deletion, however confirm it if it asks.

Now, to completely do this accordingly, please follow the upcoming guidelines.

Since I've told you about templates, that part is done and may be surpassed. Next step:

Go to your CSS StyleSheet by:

1) ACP.
2) Advanced mode.
3) Display tab.
4) Pictures and colors box > Colors.
5) CSS StyleSheet tab.
6) Scroll down to an open space in your CSS StyleSheet window and paste the following:

Code:
/*
Name: Sliding Login Panel with jQuery 1.3.2
Author: Jeremie Tisseau
Author URI: http://web-kreation.com/
Date: March 26, 2009
Version: 1.0
*/

/***** clearfix *****/
.clear {clear: both;height: 0;line-height: 0;}
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
.clearfix {height: 1%;}
.clearfix {display: block;}

/* Panel Tab/button */
.tab {
    background: url(http://i49.tinypic.com/19bg4o.png) repeat-x 0 0;
  height: 42px;
  position: relative;
    top: 0;
    z-index: 999;
}

.tab ul.login {
  display: block;
  position: relative;
    float: right;
    clear: right;
    height: 42px;
  width: auto;
    font-weight: bold;
  line-height: 42px;
  margin: 0;
  right: 150px;
    color: white;
    font-size: 80%;
  text-align: center;
}

.tab ul.login li.left {
    background: url(http://i50.tinypic.com/2llk56p.png) no-repeat left 0;
    height: 42px;
  width: 30px;
  padding: 0;
  margin: 0;
    display: block;
  float: left;
}

.tab ul.login li.right {
    background: url(http://i49.tinypic.com/35j9t84.png) no-repeat left 0;
    height: 42px;
  width: 30px;
  padding: 0;
  margin: 0;
    display: block;
  float: left;
}

.tab ul.login li {
    text-align: left;
    padding: 0 6px;
  display: block;
  float: left;
  height: 42px;
    background: url(http://i47.tinypic.com/ip8g2f.png) repeat-x 0 0;
}

.tab ul.login li a {
  color: #15ADFF;
}

.tab ul.login li a:hover {
  color: white;
}

.tab .sep {color:#414141}

.tab a.open, .tab a.close {
  height: 20px;
  line-height: 20px !important;
  padding-left: 30px !important;
  cursor: pointer;
  display: block;
  width: 100px;
  position: relative;
  top: 11px;
}

.tab a.open {background: url(http://i48.tinypic.com/30w3w5z.png) no-repeat left 0;}
.tab a.close {background: url(http://i47.tinypic.com/2nlw7z4.png) no-repeat left 0;}
.tab a:hover.open {background: url(http://i48.tinypic.com/30w3w5z.jpg) no-repeat left -19px;}
.tab a:hover.close {background: url(http://i47.tinypic.com/2nlw7z4.jpg) no-repeat left -19px;}

/* sliding panel */
#toppanel {
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 999;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

#panel {
  width: 100%;
  height: 270px;
  color: #999999;
  background: #272727;
  overflow: hidden;
  position: relative;
  z-index: 3;
  display: none;
}

#panel h1 {
  font-size: 1.6em;
  padding: 5px 0 10px;
  margin: 0;
  color: white;
}

#panel h2{
  font-size: 1.2em;
  padding: 10px 0 5px;
  margin: 0;
  color: white;
}

#panel p {
  margin: 5px 0;
  padding: 0;
}

#panel a {
  text-decoration: none;
  color: #15ADFF;
}

#panel a:hover {
  color: white;
}

#panel a-lost-pwd {
  display: block;
  float: left;
}

#panel .content {
  width: 960px;
  margin: 0 auto;
  padding-top: 15px;
  text-align: left;
  font-size: 0.85em;
}

#panel .content .left {
  width: 280px;
  float: left;
  padding: 0 15px;
  border-left: 1px solid #333;
}

#panel .content .right {
  border-right: 1px solid #333;
}

#panel .content form {
  margin: 0 0 10px 0;
}

#panel .content label {
  float: left;
  padding-top: 8px;
  clear: both;
  width: 280px;
  display: block;
}

#panel .content input.field {
  border: 1px #1A1A1A solid;
  background: #414141;
  margin-right: 5px;
  margin-top: 4px;
  width: 200px;
  color: white;
  height: 16px;
}

#panel .content input:focus.field {
  background: #545454;
}

/* BUTTONS */
/* Login and Register buttons */
#panel .content input.bt_login,
#panel .content input.bt_register {
  display: block;
  float: left;
  clear: left;
  height: 24px;
  text-align: center;
  cursor: pointer;
  border: none;
  font-weight: bold;
  margin: 10px 0;
}

#panel .content input.bt_login {
  width: 74px;
  background: transparent url(http://i49.tinypic.com/bh9g2.png) no-repeat 0 0;
}

#panel .content input.bt_register {
  width: 94px;
  color: white;
  background: transparent url(http://i47.tinypic.com/23r0okn.png) no-repeat 0 0;
}

#panel .lost-pwd {
  display: block;
  float:left;
  clear: right;
  padding: 15px 5px 0;
  font-size: 0.95em;
  text-decoration: underline;
}

>>>>>The pictures have been AUTOMATICALLY re-uploaded and set in their proper positions, you do not have to re-upload the images, just paste the code into your CSS.<<<<<

After doing all of that, go and create the same JavaScript page by going to:

1) ACP.
2) Advanced mode.
3) Modules tab.
4) JavaScript codes management.
5) Click on ''Create a new javascript''.

========DON'T FORGET TO ENABLE JAVASCRIPT==========

6) Title: Login Slider.
7) Placement: mark 'In all pages' AND NO OTHER PLACE.
Cool JavaScript code:

Code:
$(document).ready(function(){$("#open").click(function(){$("div#panel").slideDown("slow");});$("#close").click(function(){$("div#panel").slideUp("slow");});$("#toggle a").click(function(){$("#toggle a").toggle();});});

You see that dollar ($) icon in the JavaScript code? It might not function occasionally and change to another icon. You can check after saving and going to the modify icon (bolt) to check the script (if the $ has changed to another icon). If it changes to another icon, re-paste the code (yes; remove the one you previously put and just re-paste) and hit save. You sometimes have to do this various times for the dollar to function properly.

That's it, you're all set. You can also edit the login phrases in it once you display it by going back to the templates (overall_header), locate '<body' and not '<body>' lol. Then edit it as you wish. Do not mix-up again lol.

Good luck. Cool

DarkGlow
Forumember

Male Posts : 629
Reputation : 92
Language : English | Hebrew | Arabic
Location : Israel

Back to top Go down

Re: Login slide

Post by mark456123 on August 29th 2012, 8:56 pm

Okay thanks but how do I fix the black font thing?

mark456123
New Member

Posts : 18
Reputation : 1
Language : English, Filipino, Japanese, French

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum