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

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?

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

1toolbar? Empty toolbar? Wed Feb 17, 2010 2:44 pm

Joel

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

http://www.advertisehotspot.info/

2toolbar? Empty Re: toolbar? Wed Feb 17, 2010 5:33 pm

ankillien

ankillien
Administrator
Administrator
Hi Joel!

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

3toolbar? Empty Re: toolbar? Wed Feb 17, 2010 8:23 pm

shamzblueworld

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

4toolbar? Empty Re: toolbar? Thu Feb 18, 2010 3:32 pm

Joel

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/

5toolbar? Empty Re: toolbar? Thu Feb 18, 2010 6:59 pm

shamzblueworld

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?

6toolbar? Empty Re: toolbar? Thu Feb 18, 2010 9:05 pm

ankillien

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.

7toolbar? Empty Re: toolbar? Thu Feb 18, 2010 10:12 pm

Kratos

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

8toolbar? Empty Re: toolbar? Thu Feb 18, 2010 10:58 pm

Kratos

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

9toolbar? Empty Re: toolbar? Fri Feb 19, 2010 12:16 pm

Joel

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

http://www.advertisehotspot.info/

10toolbar? Empty Re: toolbar? Fri Feb 19, 2010 1:50 pm

Kratos

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

11toolbar? Empty Re: toolbar? Fri Feb 19, 2010 2:40 pm

Joel

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

http://www.advertisehotspot.info/

12toolbar? Empty Re: toolbar? Fri Feb 19, 2010 3:59 pm

Kratos

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

Code:

<style>
the css code here
</style>

13toolbar? Empty Re: toolbar? Fri Feb 19, 2010 5:12 pm

Joel

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/

14toolbar? Empty Re: toolbar? Fri Feb 19, 2010 5:55 pm

Sanket

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



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

http://www.webartzforum.com

15toolbar? Empty Re: toolbar? Fri Feb 19, 2010 9:57 pm

Joel

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

http://www.advertisehotspot.info/

16toolbar? Empty Re: toolbar? Fri Feb 19, 2010 10:01 pm

Sanket

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

17toolbar? Empty Re: toolbar? Fri Feb 19, 2010 10:18 pm

Joel

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

http://www.advertisehotspot.info/

18toolbar? Empty Re: toolbar? Fri Feb 19, 2010 10:20 pm

Sanket

Sanket
Administrator
Administrator
Nopes, add it to the homepage message.

http://www.webartzforum.com

19toolbar? Empty Re: toolbar? Fri Feb 19, 2010 10:22 pm

Joel

Joel
Registered Member
Registered Member
thanks!

http://www.advertisehotspot.info/

20toolbar? Empty Re: toolbar? Fri Feb 19, 2010 10:22 pm

Joel

Joel
Registered Member
Registered Member
WAIT DONT LOCK IT YET

http://www.advertisehotspot.info/

21toolbar? Empty Re: toolbar? Fri Feb 19, 2010 10:25 pm

Joel

Joel
Registered Member
Registered Member
Okay, can be locked:) Thanks for your help!

http://www.advertisehotspot.info/

22toolbar? Empty Re: toolbar? Fri Feb 19, 2010 10:26 pm

Sanket

Sanket
Administrator
Administrator
Solved | Locked

http://www.webartzforum.com

Sponsored content


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

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