Joomla Templates Club 406,261 posts

[sobe Friend sobeJoin date: June 2010Posts: 249Downloads:13Uploads:20 Thanks: 32 Thanked: 4 times in 1 posts]

#162676

How can I add a button on the top-right corner? (*in the same position as the CPANEL button)

[WPStrong Friend WPStrongJoin date: October 2012Posts: 36Downloads:0Uploads:8 Thanks: 2 Thanked: 8 times in 9 posts]

#386141

Hi,

Open templates/ja_rave/css/template.css, add following code to end of file :


/* for floating top-right button */

#btn_float_wrap{
font-size: 12px;
position: fixed;
right: 80px;
top:0px;
z-index: 9000;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.9);
}
#btn_float_wrap a{
background: none repeat scroll 0 0 #333333;
color: #CCCCCC;
display: block;
font-size: 10px;
line-height: 24px
padding: 0 10px;
right: 0;
text-transform: uppercase;
top: 0;
padding: 4px;
}

#btn_float_wrap a:hover,
#btn_float_wrap a:active,
#btn_float_wrap a:focus {
text-decoration: none;
}

#btn_float_wrap a:hover{
color: #fff;
background: #069;
}

Create new HTML module and add following HTML code :
<div id=”btn_float_wrap”><a href=”#”><span>Sample button</span></a></div>

set parameters for the module as the attachment below

---

Attachments:

1. 

[sobe Friend sobeJoin date: June 2010Posts: 249Downloads:13Uploads:20 Thanks: 32 Thanked: 4 times in 1 posts]

#386302

Hi tronglp,
Thanks for helping. I tried what you suggested but it didn’t work. The button never shows up, and the code writen in the custom module ends up appearing at the bottom of the page.

Is there a specific location to add the additional code in the “template.css”? Is there something else I might be doing wrong?

Thanks again

[WPStrong Friend WPStrongJoin date: October 2012Posts: 36Downloads:0Uploads:8 Thanks: 2 Thanked: 8 times in 9 posts]

#386306

Oh I’m sorry, you have to switch your editor to HTML mode by click on “toogle editor”. Let’s give a try.

1 user says Thank You to WPStrong for this useful post

1. sobe

[sobe Friend sobeJoin date: June 2010Posts: 249Downloads:13Uploads:20 Thanks: 32 Thanked: 4 times in 1 posts]

#386491

Thanks tronglp, that worked great!

Could you tell me how to add a thin black border around the button?

[WPStrong Friend WPStrongJoin date: October 2012Posts: 36Downloads:0Uploads:8 Thanks: 2 Thanked: 8 times in 9 posts]

#386507

After

#btn_float_wrap a{
add following code :
<blockquote>border: 1px solid #FFF;</blockquote>
#FFF is your border color. I picked white.

1 user says Thank You to WPStrong for this useful post

1. sobe

[sobe Friend sobeJoin date: June 2010Posts: 249Downloads:13Uploads:20 Thanks: 32 Thanked: 4 times in 1 posts]

#386663

Thank you!

[Author]

Posts