Toolbar Customization
-
- Posts: 38
- Joined: June 8th, 2006, 11:15 pm
Toolbar Customization
Hi
I have some questions.
1) How can I add my toolbar extension to the "Customizable Toolbar" list ? so that I drag and drop this toolbar.
2) When I customize the toolbar, and select "Show Icons only" my toolbar buttons removes the text in the buttons
but it does not reduce the width of the button. It shows the icon only in the middle of the button. How can I reduce
the widh when a user selects this option?
Thanks in advance
Ren
I have some questions.
1) How can I add my toolbar extension to the "Customizable Toolbar" list ? so that I drag and drop this toolbar.
2) When I customize the toolbar, and select "Show Icons only" my toolbar buttons removes the text in the buttons
but it does not reduce the width of the button. It shows the icon only in the middle of the button. How can I reduce
the widh when a user selects this option?
Thanks in advance
Ren
-
- Posts: 0
- Joined: December 31st, 1969, 5:00 pm
The answer to question on is to add this to the toolbar tag I think.
Code: Select all
customizable="true" context="toolbar-context-menu"
New [url=http://forums.mozillazine.org/profile.php?mode=viewprofile&u=299802:3o1quhg8]Michael Buckley[/url:3o1quhg8] account as old one was lost.
-
- Posts: 38
- Joined: June 8th, 2006, 11:15 pm
Hi
my toolbar already has it as follows
<toolbar id="My-Toolbar"
accesskey="T"
context="toolbar-context-menu"
toolbarname="MyExt"
hidden="false"
persist="hidden"
height="26"
class="chromeclass-toolbar-additional"
iconsize="small"
customizable="true"
crop ="end" >
But I can not see it in the customizable
my toolbar already has it as follows
<toolbar id="My-Toolbar"
accesskey="T"
context="toolbar-context-menu"
toolbarname="MyExt"
hidden="false"
persist="hidden"
height="26"
class="chromeclass-toolbar-additional"
iconsize="small"
customizable="true"
crop ="end" >
But I can not see it in the customizable
-
- Posts: 2810
- Joined: November 15th, 2004, 5:03 am
-
- Posts: 2810
- Joined: November 15th, 2004, 5:03 am
You may want to wrap your toolbar in a toolbaritem and add it to the BrowserToolbarPalette, if you wnt to drag and drop toolbar like toolbarbutton (toolbaritem).And create a class in the css to use on your toolberbuttons, after the other classesThe !important may or may not be needed. It'll likely need more work but it's a general idea.
Code: Select all
<toolbarpalette id="BrowserToolbarPalette">
<toolbaritem id="My-Toolbar-items" align="center">
<toolbar id="My-Toolbar">
Code: Select all
.mybuttons {
min-width: 20px !important;
max-width: 60px !important;
margin: 0px 0px 0px 0px !important;
padding: 0px 0px 0px 0px !important;
}
toolbar[mode="icons"][iconsize="small"] .mybuttons {
width: 20px !important
}
-
- Posts: 2810
- Joined: November 15th, 2004, 5:03 am
A toolbarbutton is already a toolbaritem. I suggested wrapping the toolbar in toolbaritem cause:
http://www.xulplanet.com/references/elemref/
http://developer.mozilla.org/en/docs/Cr ... ar_buttons
Note that was a toolbar not a toolbarbutton. If in Firefox you want to add individual toolbarbutton you can just add it to the <toolbarpalette id="BrowserToolbarPalette">, which is shown in the Customize Toolbar dialog. Otherwise put the toolbar in <toolbox id="navigator-toolbox"> which should add it to the list of toolbars in Firefox.1) How can I add my toolbar extension to the "Customizable Toolbar" list ? so that I drag and drop this toolbar.
http://www.xulplanet.com/references/elemref/
http://developer.mozilla.org/en/docs/Cr ... ar_buttons
-
- Posts: 38
- Joined: June 8th, 2006, 11:15 pm
Hi
I have changed it as you said. I have given all the buttons
inside the toolbarpalette. And now i can drag and drop my buttons
from and to the list of customizable toolbar buttons.
But the issue here is that the icon which gave for the button is lost,
when I move the buttons to the list of customizable toolbar buttons.
My button is as follows
<toolbarbutton id="mybutton" label="test this button" persist="width" image="" class="toolbarbutton-1" />
And in the css i have given as follows
.mybuttoncls
{
list-style-image: url(chrome://mytoolbar/skin/images/report.png);
min-width: 20px !important;
max-width: 103px !important;
margin: 0px 0px 0px 0px !important;
padding: 0px 0px 0px 0px !important;
}
toolbar[mode="icons"][iconsize="small"] .mybuttoncls
{
list-style-image: url(chrome://mytoolbar/skin/images/report.png);
width: 20px !important
}
In javascript I assign this class to my button as
document.getElementById("mybutton").className = "mybuttoncls";
the image size is 16X16.
Now when I drag this button to the list, I could see the button has a scary icon which is a combination of somany images! huh...
Please help me out of this.
Thanks
I have changed it as you said. I have given all the buttons
inside the toolbarpalette. And now i can drag and drop my buttons
from and to the list of customizable toolbar buttons.
But the issue here is that the icon which gave for the button is lost,
when I move the buttons to the list of customizable toolbar buttons.
My button is as follows
<toolbarbutton id="mybutton" label="test this button" persist="width" image="" class="toolbarbutton-1" />
And in the css i have given as follows
.mybuttoncls
{
list-style-image: url(chrome://mytoolbar/skin/images/report.png);
min-width: 20px !important;
max-width: 103px !important;
margin: 0px 0px 0px 0px !important;
padding: 0px 0px 0px 0px !important;
}
toolbar[mode="icons"][iconsize="small"] .mybuttoncls
{
list-style-image: url(chrome://mytoolbar/skin/images/report.png);
width: 20px !important
}
In javascript I assign this class to my button as
document.getElementById("mybutton").className = "mybuttoncls";
the image size is 16X16.
Now when I drag this button to the list, I could see the button has a scary icon which is a combination of somany images! huh...
Please help me out of this.
Thanks
-
- Posts: 2810
- Joined: November 15th, 2004, 5:03 am
In chrome.manifest ?Here's a small one (a button) you can save and unzip http://www.extensionsmirror.nl/index.php?showtopic=4892 and check out.
Just so you know, you can use more then one class in the xul, just leave a space between them.
class="first second third"
Code: Select all
style chrome://browser/content/browser.xul chrome://mytoolbar/skin/mytoolbar.css
style chrome://global/content/customizeToolbar.xul chrome://mytoolbar/skin/mytoolbar.css
Just so you know, you can use more then one class in the xul, just leave a space between them.
class="first second third"
-
- Posts: 38
- Joined: June 8th, 2006, 11:15 pm
Hi
it worked when, in css, I gave as follows
#button_id{
list-style-image: url("images/xp/norm.png") !important;
}
toolbar[iconsize="small"] #button_id{
list-style-image: url("images/xp/smaller.png") !important;
}
But my toolbar has got its own themes. I can dynamically
change my themes from my toolbar option window.
I use different classes for different themes.
And i change the button classname when my toolbar loads.
So i want my actual css as follows
////////////////////////////////////////////////////////
.button_xp{
list-style-image: url("images/xp/norm.png") !important;
}
toolbar[iconsize="small"] .button_xp{
list-style-image: url("images/xp/smaller.png") !important;
}
.button_default{
list-style-image: url("images/def/norm.png") !important;
}
toolbar[iconsize="small"] .button_default{
list-style-image: url("images/def/smaller.png") !important;
}
////////////////////////////////////////////////////////
and i need to change the button classname as follows.
var style = findtheme();
document.getElementById('button_id').className = "button_"+style;
But here my custromization doesnt work. the icon shown in the customization list
is not proper.
I hope you have understood the scenario. i.e. if I change the class name dynamically
there seems to be some problem.
Ren
it worked when, in css, I gave as follows
#button_id{
list-style-image: url("images/xp/norm.png") !important;
}
toolbar[iconsize="small"] #button_id{
list-style-image: url("images/xp/smaller.png") !important;
}
But my toolbar has got its own themes. I can dynamically
change my themes from my toolbar option window.
I use different classes for different themes.
And i change the button classname when my toolbar loads.
So i want my actual css as follows
////////////////////////////////////////////////////////
.button_xp{
list-style-image: url("images/xp/norm.png") !important;
}
toolbar[iconsize="small"] .button_xp{
list-style-image: url("images/xp/smaller.png") !important;
}
.button_default{
list-style-image: url("images/def/norm.png") !important;
}
toolbar[iconsize="small"] .button_default{
list-style-image: url("images/def/smaller.png") !important;
}
////////////////////////////////////////////////////////
and i need to change the button classname as follows.
var style = findtheme();
document.getElementById('button_id').className = "button_"+style;
But here my custromization doesnt work. the icon shown in the customization list
is not proper.
I hope you have understood the scenario. i.e. if I change the class name dynamically
there seems to be some problem.
Ren
-
- Posts: 2810
- Joined: November 15th, 2004, 5:03 am
Does it work for the toolbars? If yes perhaps your updating but not getting the Customize Toolbar dialog that's seperate. Probably have to overlay it to run script and update it onload. Some things to look at:
chrome://global/content/customizeToolbar.xulDon't know if that helps any.
Code: Select all
<window id="main-window"
</window>
chrome://global/content/customizeToolbar.xul
Code: Select all
<window id="CustomizeToolbarWindow" title="Customize Toolbar" onload="onLoad();"
onunload="onUnload();" onclose="onAccept(); return false;" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script type="application/x-javascript" src="chrome://global/content/customizeToolbar.js"/>
<script type="application/x-javascript" src="chrome://global/content/nsDragAndDrop.js"/>
<script type="application/x-javascript" src="chrome://global/content/nsTransferable.js"/>
<script type="application/x-javascript" src="customiseOverlay.js"/>
<script type="application/x-javascript" src="chrome://reporter/content/reporterOverlay.js"/>
</window>
-
- Posts: 38
- Joined: June 8th, 2006, 11:15 pm
-
- Posts: 2810
- Joined: November 15th, 2004, 5:03 am
Can't using mutiple stylesheet with different values for the same class and load the stylesheet of choice with the script, instead of using 1 stylesheet and changing the class, do this? I'm sure i saw that somewhere
base.css -- default and common
style1.css -- non default and different only
style2.css -- non default and different only
base.css -- default and common
style1.css -- non default and different only
style2.css -- non default and different only