WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You


You are not connected. Please login or register

WebArtz - The Web Design Forum » Web Designing & Coding » CSS (Cascading Style Sheets) » toolbar?

Goto page : 1, 2  Next

View previous topic View next topic Go down  Message [Page 1 of 2]

1 toolbar? on Wed Feb 17, 2010 1:14 pm

Joel


Registered Member
Registered Member
how do i make a personal toolbar like http://advertisingplanet.forumsmotion.com/?

http://www.advertisehotspot.info/

2 Re: toolbar? on Wed Feb 17, 2010 4:03 pm

ankillien


Administrator
Administrator
Hi Joel!

It can be done via template editing. You can do it if you have phpBB2 or punBB.

3 Re: toolbar? on Wed Feb 17, 2010 6:53 pm

shamzblueworld


Registered Member
Registered Member
I am looking forward to it too! I might add the addthis widget there as a floating toolbar.

4 Re: toolbar? on Thu Feb 18, 2010 2:02 pm

Joel


Registered Member
Registered Member
i like the tool bar of Webartz! It allows you to change colors to your preference! How do i do something like that too?

http://www.advertisehotspot.info/

5 Re: toolbar? on Thu Feb 18, 2010 5:29 pm

shamzblueworld


Registered Member
Registered Member
wow great work guys, this toolbar is awesome i mean the functions in it. is it the tut of theme changer at work?

6 Re: toolbar? on Thu Feb 18, 2010 7:35 pm

ankillien


Administrator
Administrator
@Joel,
We already have a tutorial which shows how to install a theme changer on a forumotion forum via templates. If you want toolbar like on WebArtz, you might need to write some custom JavaScript codes depending on your requirements.

@sham,
No, we don't use the tut that we have on tutorial section here since it is for template editing only. For phpBB3, I have used a different technique.

7 Re: toolbar? on Thu Feb 18, 2010 8:42 pm

Kratos


Registered Member
Registered Member
Joel wrote:how do i make a personal toolbar like http://advertisingplanet.forumsmotion.com/?


I ll give u a code to do this in 24 hours from now

8 Re: toolbar? on Thu Feb 18, 2010 9:28 pm

Kratos


Registered Member
Registered Member
The CSS

Code:

div.pre{
background:#f9f9f9;
border:1px solid #cacaca;
position:fixed;
width: 800px;
top: auto;
right: 0;
margin: 0 auto;
bottom: 0;
left: 0;"
z-index:1000;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
height:25px;
}


div.pre2{
background:#f9f9f9;
border:1px solid #cacaca;
width:40px;
position:fixed;
top: auto;
right: 0;
margin: 0 auto;
bottom: 0;
left: 0;"
z-index:1000;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
padding:5px;
display:none;
}

div.pre img{
margin-top:-37px;
margin-left:10px;
margin-right:10px;
opacity:0.6
}

div.pre img:hover{
opacity:1.0;
}


The HTML

Code:

<div class=pre id=close>
<a href=url u want><img src=http://www.iconspedia.com/uploads/6285341431613075153.png><a>
<a href=url u want><img src=http://www.iconspedia.com/uploads/6285341431613075153.png><a>
<a href=url u want><img src=http://www.iconspedia.com/uploads/6285341431613075153.png><a>
<a href=url u want><img src=http://www.iconspedia.com/uploads/6285341431613075153.png><a>
<a href=url u want><img src=http://www.iconspedia.com/uploads/6285341431613075153.png><a>
<a href=url u want><img src=http://www.iconspedia.com/uploads/6285341431613075153.png><a>
<a href=url u want><img src=http://www.iconspedia.com/uploads/6285341431613075153.png><a>
<a href=url u want><img src=http://www.iconspedia.com/uploads/6285341431613075153.png><a>
<a href = "javascript:void(0)" onclick ="document.getElementById('close').style.display='none';document.getElementById('open').style.display='block'"><img

src=http://www.iconspedia.com/uploads/19418748531634207784.png height=40 width=40></a>
<br>

</div>

<div class=pre2 id=open>
<a href = "javascript:void(0)" onclick ="document.getElementById('close').style.display='block';document.getElementById('open').style.display='none'"><img

src=http://www.iconspedia.com/uploads/1316536084.png height=40 with=40 align=right></a>
</div>



I have coded this myself...So i give u the full permission to use & abuse this code however you like Very Happy

9 Re: toolbar? on Fri Feb 19, 2010 10:46 am

Joel


Registered Member
Registered Member
Thanks Blackcat! But once the toolbar is completed, where do i paste it ?

http://www.advertisehotspot.info/

10 Re: toolbar? on Fri Feb 19, 2010 12:20 pm

Kratos


Registered Member
Registered Member
you can put it in your homepage message...or if u have template editing you can put this in your overall_header

11 Re: toolbar? on Fri Feb 19, 2010 1:10 pm

Joel


Registered Member
Registered Member
hmm....i tried it on my spare forum. It appears like this

http://www.advertisehotspot.info/

12 Re: toolbar? on Fri Feb 19, 2010 2:29 pm

Kratos


Registered Member
Registered Member
you didnt put the css.... add it in home page message itself

Code:

<style>
the css code here
</style>

13 Re: toolbar? on Fri Feb 19, 2010 3:42 pm

Joel


Registered Member
Registered Member
I added

Code:
<style>div.pre{
background:#f9f9f9;
border:1px solid #cacaca;
position:fixed;
width: 800px;
top: auto;
right: 0;
margin: 0 auto;
bottom: 0;
left: 0;"
z-index:1000;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
height:25px;
}


div.pre2{
background:#f9f9f9;
border:1px solid #cacaca;
width:40px;
position:fixed;
top: auto;
right: 0;
margin: 0 auto;
bottom: 0;
left: 0;"
z-index:1000;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
padding:5px;
display:none;
}

div.pre img{
margin-top:-37px;
margin-left:10px;
margin-right:10px;
opacity:0.6
}

div.pre img:hover{
opacity:1.0;
}</style>


to the homepage message. Nothing appears.

http://www.advertisehotspot.info/

14 Re: toolbar? on Fri Feb 19, 2010 4:25 pm

Sanket


Administrator
Administrator
Nopes, add that thing to the css
Display>Colors
Css Stylesheet tab.



Last edited by Sanket on Fri Feb 19, 2010 8:29 pm; edited 1 time in total

http://www.webartzforum.com

15 Re: toolbar? on Fri Feb 19, 2010 8:27 pm

Joel


Registered Member
Registered Member
well, nothing still. Do i have to deactivate the basic css?

http://www.advertisehotspot.info/

16 Re: toolbar? on Fri Feb 19, 2010 8:31 pm

Sanket


Administrator
Administrator
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title></title>
  <meta http-equiv="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)" />
  <meta name="created" content="Fri, 19 Feb 2010 14:59:32 GMT" />
  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  <meta name="description" content="" />
  <meta name="keywords" content="" />
  <style>
div.pre{
background:#f9f9f9;
border:1px solid #cacaca;
position:fixed;
width: 800px;
top: auto;
right: 0;
margin: 0 auto;
bottom: 0;
left: 0;"
z-index:1000;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
height:25px;
}


div.pre2{
background:#f9f9f9;
border:1px solid #cacaca;
width:40px;
position:fixed;
top: auto;
right: 0;
margin: 0 auto;
bottom: 0;
left: 0;"
z-index:1000;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
padding:5px;
display:none;
}

div.pre img{
margin-top:-37px;
margin-left:10px;
margin-right:10px;
opacity:0.6
}

div.pre img:hover{
opacity:1.0;
}</style>
</head>
<body>
<div class=pre id=close>
<a href=url u want><img src=http://www.iconspedia.com/uploads/6285341431613075153.png><a>
<a href=url u want><img src=http://www.iconspedia.com/uploads/6285341431613075153.png><a>
<a href=url u want><img src=http://www.iconspedia.com/uploads/6285341431613075153.png><a>
<a href=url u want><img src=http://www.iconspedia.com/uploads/6285341431613075153.png><a>
<a href=url u want><img src=http://www.iconspedia.com/uploads/6285341431613075153.png><a>
<a href=url u want><img src=http://www.iconspedia.com/uploads/6285341431613075153.png><a>
<a href=url u want><img src=http://www.iconspedia.com/uploads/6285341431613075153.png><a>
<a href=url u want><img src=http://www.iconspedia.com/uploads/6285341431613075153.png><a>
<a href = "javascript:void(0)" onclick ="document.getElementById('close').style.display='none';document.getElementById('open').style.display='block'"><img

src=http://www.iconspedia.com/uploads/19418748531634207784.png height=40 width=40></a>
<br>

</div>

<div class=pre2 id=open>
<a href = "javascript:void(0)" onclick ="document.getElementById('close').style.display='block';document.getElementById('open').style.display='none'"><img

src=http://www.iconspedia.com/uploads/1316536084.png height=40 with=40 align=right></a>
</div>

</body>
</html>


Try adding this. Earlier i was wrong in asking you to paste the code in the css stylesheet. Remove that thing from there.

http://troubleshoot.forumotion.net/index.htm
Check out, i have added it on there.

http://www.webartzforum.com

17 Re: toolbar? on Fri Feb 19, 2010 8:48 pm

Joel


Registered Member
Registered Member
add it to the css style sheet?

http://www.advertisehotspot.info/

18 Re: toolbar? on Fri Feb 19, 2010 8:50 pm

Sanket


Administrator
Administrator
Nopes, add it to the homepage message.

http://www.webartzforum.com

19 Re: toolbar? on Fri Feb 19, 2010 8:52 pm

Joel


Registered Member
Registered Member
thanks!

http://www.advertisehotspot.info/

20 Re: toolbar? on Fri Feb 19, 2010 8:52 pm

Joel


Registered Member
Registered Member
WAIT DONT LOCK IT YET

http://www.advertisehotspot.info/

View previous topic View next topic Back to top  Message [Page 1 of 2]

Goto page : 1, 2  Next

WebArtz - The Web Design Forum » Web Designing & Coding » CSS (Cascading Style Sheets) » toolbar?

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