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.

how to install vertical Info panel slide with JQuery?

View previous topic View next topic Go down

In progress how to install vertical Info panel slide with JQuery?

Post by indoromance on October 17th 2011, 10:44 pm

brother, how to install vertical Info panel slide with JQuery like this?



where i must install this code:
first code:

Code:
.panel{position:fixed;top:20px;left:0;background:#000;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;border:1px solid #444;width:330px;height:auto;filter:alpha(opacity=85);-moz-opacity:0.85;opacity:0.85;display:none;padding:30px 30px 30px 100px}
.panel p{color:#ccc;margin:0 0 15px;padding:0}
.panel a,.panel a:visited{color:#9FC54E;text-decoration:none;border-bottom:1px solid #9FC54E;margin:0;padding:0}
.panel a:hover,.panel a:visited:hover{color:#fff;text-decoration:none;border-bottom:1px solid #fff;margin:0;padding:0}
a.trigger{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#333 url(<a class="linkification-ext" href="http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png" title="Linkification: http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png">http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png</a>) 85% 55% no-repeat;border:1px solid #444;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}
a.trigger:hover{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#222 url(<a class="linkification-ext" href="http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png" title="Linkification: http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png">http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png</a>) 85% 55% no-repeat;border:1px solid #444;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}
a.active.trigger{background:#222 url(<a class="linkification-ext" href="http://lh3.ggpht.com/_xcD4JK_dIjU/S4QDvxbreOI/AAAAAAAAD2M/Cz3Q2r5pdTM/d/minus.png" title="Linkification: http://lh3.ggpht.com/_xcD4JK_dIjU/S4QDvxbreOI/AAAAAAAAD2M/Cz3Q2r5pdTM/d/minus.png">http://lh3.ggpht.com/_xcD4JK_dIjU/S4QDvxbreOI/AAAAAAAAD2M/Cz3Q2r5pdTM/d/minus.png</a>) 85% 55% no-repeat}
.columns{clear:both;width:330px;line-height:22px;padding:0 0 20px}
.colleft{float:left;width:130px;line-height:22px}
.colright{float:right;width:130px;line-height:22px}
a:focus{outline:none}
.panel img{background-color:#262626;border:1px solid #333;float:right;margin:3px 3px 6px 8px;padding:5px}
.panel h3{border-bottom:1px solid silver;margin-bottom:5px;padding-bottom:3px;text-align:left;clear:both;color:#FFF;font-size:12px;font-weight:700}
.columns ul,.columns ul li{list-style-type:none;margin:0;padding:0}

second code:

Code:
<script src='<a class="linkification-ext" href="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" title="Linkification: http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js">http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js</a>' type='text/javascript'/>
<script type="text/javascript">
$(document).ready(function(){
$(".trigger").click(function(){
 $(".panel").toggle("fast");
 $(this).toggleClass("active");
 return false;
});
});
</script>

Third code:
Code:
<div class='panel'>
<h3>Selamat Datang</h3>
<p style='text-align:justify'>Selamat datang di Kotretan Hendriono - saya senang Anda berada di sini, dan berharap Anda sering datang kembali. Silakan berselancar di sini dan membaca lebih lanjut tentang artikel dunia teknik (elektronika, otomotif, komputer) yang kami susun. Ada banyak hal tentang kami, Anda mungkin akan menemukan sesuatu yang menarik. <a href='http://dedehendriono.blogspot.com/' title='Hendriono Online'>Selengkapnya tentang kami</a></p>

<h3>Sepintas Tentang Kotretan Hendriono</h3>
<img src='http://4.bp.blogspot.com/_xcD4JK_dIjU/Sp_7hWIVDpI/AAAAAAAADZE/pAq20C0z2mg/S220/eyelashes_mascara.gif' width='73px' height='73px'/>
<p>Nama saya Hendriono, Saya seorang freelance designer, blogger, teknisi. Spesialisasi pada Blogger blogs, CSS, XHTML dan jQuery</p>
<div style='clear:both;'/>
<div class='columns'>
 <div class='colleft'>
 <h3>Navigasi</h3>
  <ul>
  <li><a href='#' title='home'>Home</a></li>
  <li><a href='#' title='about'>About</a></li>
  <li><a href='#' title='portfolio'>Portfolio</a></li>
  <li><a href='#' title='contact'>Contact</a></li>
  <li><a href='#' title='blog'>Blog</a></li>
  </ul>
 </div>

 <div class='colright'>
 <h3>Social Stuff</h3>
  <ul>
  <li><a href='http://twitter.com/hendriono' title='Twitter'>Twitter</a></li>
  <li><a href='http://facebook.com/hendriono' title='Facebook'>Facebook</a></li>
  <li><a href='http://digg.com/users/hendriono' title='Digg'>Digg</a></li>
  <li><a href='http://delicious.com/hendriono' title='Del.Icio.Us'>Del.Icio.Us</a></li>
  <li><a href='mailto:hendriono@gmail.com' title='Gmail'>Gmail</a></li>
  </ul>
 </div>
</div><div style='clear:both;'/>
</div>
<a class='trigger' href='#'>Info</a>


source: http://modification-blog.blogspot.com/2010/03/info-panel-slide-vertikal-dengan-jquery.html

indoromance
Forumember

Male Posts : 84
Reputation : 1
Language : Indonesian
Location : Indonesia

http://www.indoromance.friendhood.net

Back to top Go down

In progress Re: how to install vertical Info panel slide with JQuery?

Post by Nera. on October 18th 2011, 12:01 am

Hi,

Original tutorial & more styles here
http://spyrestudios.com/how-to-create-a-sexy-vertical-sliding-panel-using-jquery-and-css3/

AP > Display > Colors > CSS and add this:

Code:
.panel {
position: absolute;
top: 50px;
left: 0;
display: none;
background: #000000;
border:1px solid #111111;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
width: 330px;
height: auto;
padding: 30px 30px 30px 130px;
filter: alpha(opacity=85);
opacity: .85;
}

.panel p{
margin: 0 0 15px 0;
padding: 0;
color: #cccccc;
}

.panel a, .panel a:visited{
margin: 0;
padding: 0;
color: #9FC54E;
text-decoration: none;
border-bottom: 1px solid #9FC54E;
}

.panel a:hover, .panel a:visited:hover{
margin: 0;
padding: 0;
color: #ffffff;
text-decoration: none;
border-bottom: 1px solid #ffffff;
}

a.trigger{
position: absolute;
text-decoration: none;
top: 80px; left: 0;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px 40px 20px 15px;
font-weight: 700;
background:#333333 url(http://i45.servimg.com/u/f45/15/95/60/34/plus12.png) 85% 55% no-repeat;
border:1px solid #444444;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
display: block;
}

a.trigger:hover{
position: absolute;
text-decoration: none;
top: 80px; left: 0;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px 40px 20px 20px;
font-weight: 700;
background:#222222 url(http://i45.servimg.com/u/f45/15/95/60/34/plus12.png) 85% 55% no-repeat;
border:1px solid #444444;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
display: block;
}

a.active.trigger {
background:#222222 url(http://i45.servimg.com/u/f45/15/95/60/34/minus12.png) 85% 55% no-repeat;
}

.columns{
clear: both;
width: 330px;
padding: 0 0 20px 0;
line-height: 22px;
}

.colleft{
float: left;
width: 130px;
line-height: 22px;
}

.colright{
float: right;
width: 130px;
line-height: 22px;
}

ul{
padding: 0;
margin: 0;
list-style-type: none;
}

ul li{
padding: 0;
margin: 0;
list-style-type: none;
}

AP > Display > Homepage message > Message content (P.S. You can add the HTML anywhere else according where you want it to display, message content will display it on main index only)

Code:
<div class="panel">
   <h3>Sliding Panel</h3>
   <p>Here's our sliding panel/drawer made using jQuery with the toggle function and some CSS3 for the rounded corners</p>
   <p>This panel could also be placed on the right. This could be particularly useful if, <a href="http://spyrestudios.com" title="SpyreStudios">like me</a>, you have a left-aligned website layout.</p>

   <h3>A Little Something About Me</h3>
   <img class="right" src="images/jon_image.jpg" alt="Jon Phillips" />
   <p>My name's Jon, I'm a freelance designer, blogger, musician. I run SpyreStudios and I specialize in WordPress blogs, CSS, XHTML and PHP</p>
<div style="clear:both;"></div><div class="columns">
   <div class="colleft">
   <h3>Navigation</h3>
      <ul>
         <li><a href="http://spyrestudios.com/" title="home">Home</a></li>
         <li><a href="http://spyrestudios.com/about/" title="about">About</a></li>
         <li><a href="http://spyrestudios.com/portfolio/" title="portfolio">Portfolio</a></li>
         <li><a href="http://spyrestudios.com/contact/" title="contact">Contact</a></li>
         <li><a href="http://spyrestudios.com" title="blog">Blog</a></li>
      </ul>
   </div>

   <div class="colright">
      <h3>Social Stuff</h3>
      <ul>
         <li><a href="http://twitter.com/jophillips" title="Twitter">Twitter</a></li>
         <li><a href="http://designbump.com/user/147" title="DesignBump">DesignBump</a></li>
         <li><a href="http://digg.com/users/jophillips" title="Digg">Digg</a></li>
         <li><a href="http://delicious.com/jon.phillips" title="Del.Icio.Us">Del.Icio.Us</a></li>
         <li><a href="http://designmoo.com/users/jonphillips" title="DesignMoo">DesignMoo</a></li>
      </ul>
   </div>
</div><div style="clear:both;"></div>

</div>
<a class="trigger" href="#">infos</a>

AP > Modules > JS managment

Code:
$(document).ready(function(){
$(".trigger").click(function(){
 $(".panel").toggle("fast");
 $(this).toggleClass("active");
 return false;
});
});

Example of it working on Forumotion after trying it: Exclamation

Very good

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

In progress Re: how to install vertical Info panel slide with JQuery?

Post by GraafikaMeister on October 18th 2011, 6:40 am

Wont work on me :/
Nera pm me plssss.
Can u do it for me iff u can then pm me ! Smile

GraafikaMeister
Forumember

Female Posts : 143
Reputation : 6
Language : Estonian | Html | Php | Css | MySQL
Location : Photoshop CS5

http://www.graafika.forum.co.ee

Back to top Go down

In progress Re: how to install vertical Info panel slide with JQuery?

Post by Nera. on October 18th 2011, 9:01 am

Did you add the HTML to message content?

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

In progress Re: how to install vertical Info panel slide with JQuery?

Post by indoromance on October 18th 2011, 9:24 am

@Nera. wrote:Hi,

Original tutorial & more styles here
http://spyrestudios.com/how-to-create-a-sexy-vertical-sliding-panel-using-jquery-and-css3/

AP > Display > Colors > CSS and add this:

Code:
.panel {
position: absolute;
top: 50px;
left: 0;
display: none;
background: #000000;
border:1px solid #111111;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
width: 330px;
height: auto;
padding: 30px 30px 30px 130px;
filter: alpha(opacity=85);
opacity: .85;
}

.panel p{
margin: 0 0 15px 0;
padding: 0;
color: #cccccc;
}

.panel a, .panel a:visited{
margin: 0;
padding: 0;
color: #9FC54E;
text-decoration: none;
border-bottom: 1px solid #9FC54E;
}

.panel a:hover, .panel a:visited:hover{
margin: 0;
padding: 0;
color: #ffffff;
text-decoration: none;
border-bottom: 1px solid #ffffff;
}

a.trigger{
position: absolute;
text-decoration: none;
top: 80px; left: 0;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px 40px 20px 15px;
font-weight: 700;
background:#333333 url(http://i45.servimg.com/u/f45/15/95/60/34/plus12.png) 85% 55% no-repeat;
border:1px solid #444444;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
display: block;
}

a.trigger:hover{
position: absolute;
text-decoration: none;
top: 80px; left: 0;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px 40px 20px 20px;
font-weight: 700;
background:#222222 url(http://i45.servimg.com/u/f45/15/95/60/34/plus12.png) 85% 55% no-repeat;
border:1px solid #444444;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
display: block;
}

a.active.trigger {
background:#222222 url(http://i45.servimg.com/u/f45/15/95/60/34/minus12.png) 85% 55% no-repeat;
}

.columns{
clear: both;
width: 330px;
padding: 0 0 20px 0;
line-height: 22px;
}

.colleft{
float: left;
width: 130px;
line-height: 22px;
}

.colright{
float: right;
width: 130px;
line-height: 22px;
}

ul{
padding: 0;
margin: 0;
list-style-type: none;
}

ul li{
padding: 0;
margin: 0;
list-style-type: none;
}

AP > Display > Homepage message > Message content (P.S. You can add the HTML anywhere else according where you want it to display, message content will display it on main index only)

Code:
<div class="panel">
   <h3>Sliding Panel</h3>
   <p>Here's our sliding panel/drawer made using jQuery with the toggle function and some CSS3 for the rounded corners</p>
   <p>This panel could also be placed on the right. This could be particularly useful if, <a href="http://spyrestudios.com" title="SpyreStudios">like me</a>, you have a left-aligned website layout.</p>

   <h3>A Little Something About Me</h3>
   <img class="right" src="images/jon_image.jpg" alt="Jon Phillips" />
   <p>My name's Jon, I'm a freelance designer, blogger, musician. I run SpyreStudios and I specialize in WordPress blogs, CSS, XHTML and PHP</p>
<div style="clear:both;"></div><div class="columns">
   <div class="colleft">
   <h3>Navigation</h3>
      <ul>
         <li><a href="http://spyrestudios.com/" title="home">Home</a></li>
         <li><a href="http://spyrestudios.com/about/" title="about">About</a></li>
         <li><a href="http://spyrestudios.com/portfolio/" title="portfolio">Portfolio</a></li>
         <li><a href="http://spyrestudios.com/contact/" title="contact">Contact</a></li>
         <li><a href="http://spyrestudios.com" title="blog">Blog</a></li>
      </ul>
   </div>

   <div class="colright">
      <h3>Social Stuff</h3>
      <ul>
         <li><a href="http://twitter.com/jophillips" title="Twitter">Twitter</a></li>
         <li><a href="http://designbump.com/user/147" title="DesignBump">DesignBump</a></li>
         <li><a href="http://digg.com/users/jophillips" title="Digg">Digg</a></li>
         <li><a href="http://delicious.com/jon.phillips" title="Del.Icio.Us">Del.Icio.Us</a></li>
         <li><a href="http://designmoo.com/users/jonphillips" title="DesignMoo">DesignMoo</a></li>
      </ul>
   </div>
</div><div style="clear:both;"></div>

</div>
<a class="trigger" href="#">infos</a>

AP > Modules > JS managment

Code:
$(document).ready(function(){
$(".trigger").click(function(){
 $(".panel").toggle("fast");
 $(this).toggleClass("active");
 return false;
});
});

Example of it working on Forumotion after trying it: Exclamation

Very good

woah, awesome.......thx very much brother.....it's work for my forum...... :wouhou:
Proof:
click here

indoromance
Forumember

Male Posts : 84
Reputation : 1
Language : Indonesian
Location : Indonesia

http://www.indoromance.friendhood.net

Back to top Go down

In progress Re: how to install vertical Info panel slide with JQuery?

Post by Nera. on October 18th 2011, 9:31 am

Welcome indoromance Very Happy, I will leave the topic open untill it's solved for GraafikaMeister since nothing seems to be working for him lol!

@GraafikaMeister send me a test admin account info via PM.

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

In progress Re: how to install vertical Info panel slide with JQuery?

Post by indoromance on October 18th 2011, 9:41 am

@Nera. wrote:Welcome indoromance Very Happy, I will leave the topic open untill it's solved for GraafikaMeister since nothing seems to be working for him lol!

@GraafikaMeister send me a test admin account info via PM.

but that script still have weakness:

that panel cannot move, when i move down my pointers to go to statistic......, please compare with my first source.

indoromance
Forumember

Male Posts : 84
Reputation : 1
Language : Indonesian
Location : Indonesia

http://www.indoromance.friendhood.net

Back to top Go down

In progress Re: how to install vertical Info panel slide with JQuery?

Post by Nera. on October 18th 2011, 9:48 am

No, that's not the script it is just a different CSS rule. Find this in CSS position: absolute; and change it to position: fixed;
You have it in three places in CSS, change it in all three & it will move Very Happy

Example: http://movingagain.forumcroatian.com/forum

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

In progress Re: how to install vertical Info panel slide with JQuery?

Post by indoromance on October 18th 2011, 10:10 am

@Nera. wrote:No, that's not the script it is just a different CSS rule. Find this in CSS position: absolute; and change it to position: fixed;
You have it in three places in CSS, change it in all three & it will move Very Happy

Example: http://movingagain.forumcroatian.com/forum

thank' u again....and again....... Very Happy Very Happy
finish

indoromance
Forumember

Male Posts : 84
Reputation : 1
Language : Indonesian
Location : Indonesia

http://www.indoromance.friendhood.net

Back to top Go down

In progress Re: how to install vertical Info panel slide with JQuery?

Post by Nera. on October 18th 2011, 10:14 am

Welcome king

Will wait for GraafikaMeister now Very Happy

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

In progress Re: how to install vertical Info panel slide with JQuery?

Post by GraafikaMeister on October 18th 2011, 1:48 pm

Nera i cant send u pm ! :S

GraafikaMeister
Forumember

Female Posts : 143
Reputation : 6
Language : Estonian | Html | Php | Css | MySQL
Location : Photoshop CS5

http://www.graafika.forum.co.ee

Back to top Go down

In progress Re: how to install vertical Info panel slide with JQuery?

Post by Nera. on October 18th 2011, 1:51 pm

Send it now, but I'll login tonight.

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

In progress Re: how to install vertical Info panel slide with JQuery?

Post by GraafikaMeister on October 18th 2011, 2:20 pm

Please login now i beg u ! Smile

GraafikaMeister
Forumember

Female Posts : 143
Reputation : 6
Language : Estonian | Html | Php | Css | MySQL
Location : Photoshop CS5

http://www.graafika.forum.co.ee

Back to top Go down

In progress Re: how to install vertical Info panel slide with JQuery?

Post by indoromance on October 18th 2011, 2:30 pm

fast solution.......change your forum version to invision..... Arrow Arrow

indoromance
Forumember

Male Posts : 84
Reputation : 1
Language : Indonesian
Location : Indonesia

http://www.indoromance.friendhood.net

Back to top Go down

In progress Re: how to install vertical Info panel slide with JQuery?

Post by X-jvlr.FR3$H-X on October 18th 2011, 2:55 pm

how can i get it to follow all the way down the forum

X-jvlr.FR3$H-X
Forumember

Posts : 45
Reputation : 2
Language : english

Back to top Go down

In progress Re: how to install vertical Info panel slide with JQuery?

Post by indoromance on October 18th 2011, 3:24 pm

@X-jvlr.FR3$H-X wrote:how can i get it to follow all the way down the forum

Find this in CSS position: absolute; and change it to position: fixed;
You have it in three places in CSS, change it in all three & it will move

indoromance
Forumember

Male Posts : 84
Reputation : 1
Language : Indonesian
Location : Indonesia

http://www.indoromance.friendhood.net

Back to top Go down

In progress Re: how to install vertical Info panel slide with JQuery?

Post by Nera. on October 18th 2011, 11:04 pm

@GraafikaMeister wrote:Please login now i beg u ! Smile

Done.


Please do change the login details you gave me to something else.

Solved?

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

In progress Re: how to install vertical Info panel slide with JQuery?

Post by indoromance on October 19th 2011, 12:43 am

how to add underline below text "sliding panel"

indoromance
Forumember

Male Posts : 84
Reputation : 1
Language : Indonesian
Location : Indonesia

http://www.indoromance.friendhood.net

Back to top Go down

In progress Re: how to install vertical Info panel slide with JQuery?

Post by Nera. on October 19th 2011, 1:01 am

Add this to CSS

Code:
.h3, h3 {
    border-bottom: 1px solid #595959;
}

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

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