so I'm building a custom firefox extension and I got to the step where the toolbar is showing up and I put in buttons etc with css
If you look at feedly's button (Feedly is a firefox extension), there is this nice rectangular background behind the button of the extension that makes it look like a legitimate clickable button: http://imageshack.us/photo/my-images/196/feedly.png/
whereas default extension buttons have no background behind it....
how do you style a custom extension button such that it has a button-like background just like the feedly button?
The <toolbarbutton> element has an image attribute that allows you to specify an image:
<toolbarbutton image="chrome://.../icon.png" label="My button"/>
However, usually you want to set the image from CSS using the list-style-image property. For example if your XUL code looks like this:
<toolbarbutton id="myButton" label="My button"/>
You would have the following CSS code:
#myButton
{
list-style-image: url("chrome://.../icon.png");
}
More info: https://developer.mozilla.org/en/XUL_Tutorial/Adding_Labels_and_Images
Related
I am using primeNG calendar and whenever the calendar opens under the input box it is behind all the other html elements. But when it opens above the input box everything is ok.
I fixed it by using appendTo="body" in the p-calendar html element.
Here is how the html element looks like now:
<p-calendar appendTo="body" [locale]="dk" placeholder="Inklusion dato" [(ngModel)]="patient.inclusionDate" showButtonBar="true"
readonlyInput="true" [showIcon]="true"></p-calendar>
In my case works well. Just add inline CSS of
<p-calendar [(ngModel)]="dateTo" [disabledDays]="[0,6]" (onSelect)="doOnSelect($event)" [showIcon]="true" [style]="{'overflow': 'visible', 'z-index': '9999','opacity':'1'}"></p-calendar>
Inline only work instead of working in style.css.
I have a CSS style at the top of my page that styles my buttons.
But when I change the color (or any propert) it doesn't update my button.
To fix this, I have to Change the name of my style and every where in my project where it's referenced, then only does it update the change of the style.
Why does this happen?
My style (for example - Basic style I know)
.CSSButtonStyle {
background: #FFFFFF;
}
My button
<asp:Button ID="btnSubmit" CssClass="CSSButtonStyle" runat="server" Text="Update/Submit" Width="150" Height="30" OnClick="btnSubmit_Click" />
In my design view, the button is white, but on the website its still blue or whatever previous color I had in my style
What I've tried
Add !important to the css. This makes sure it wont get overuled by any other css
Be sure to press Ctrl + F5 to reload the page instead of just F5. It forces a cache refresh.
Try this :
input[type="submit"].CSSButtonStyle
{
border:none;
background-color:#FFFFFF;
}
I have my own toolbar with toolbox and toolbarpalette.
I have followed this https://developer.mozilla.org/en/Skinning_XUL_Files_by_Hand
and background image for toolbar is not displaying, what can be wrong?
Cannot found any debug message in Error console
Note that Image #logoimage is displaying correctly
XUL
<toolbox id="navigator-toolbox" class="nav-box" crop="end">
<toolbarpalette id="BrowserToolbarPalette">
<image id="logoimage"/>
<toolbarbutton type="menu" label="&toolbar.quicklinks.label;" id="quicklinks">
<menupopup>
<menuitem class="menuitem-iconic" label="&toolbar.quicklinks.quicklink1;" image="chrome://tbar/skin/icon.png"/>
</menupopup>
</toolbarbutton>
</toolbarpalette>
<toolbar id="test-toolbar"
class="nav-bar"
mode="full"
iconsize="small"
customizable="true"
context="toolbar-context-menu"
toolbarname="Toolbar"
crop="end"
defaultset="logoimage,toolbarseparator,quicklinks">
</toolbar>
</toolbox>
CSS
toolbar.nav-bar {
background-image: url("chrome://tbar/skin/tbg.png");
}
#logoimage {
list-style-image: url("chrome://tbar/skin/logo.png");
}
As nobody could help, I asked in mozilla.dev.tech.xul Google group, and got an answer
Try adding "-moz-appearance: none;" to your CSS stanza. This turns off
OS-defined theming.
And that thing simply worked ! It also removes all OS specific look and feel effects
see: https://groups.google.com/group/mozilla.dev.tech.xul/browse_thread/thread/a4cd4452a72b9151#
Given that there are no issues in the code you show here I only see one explanation: the background image is being set to a different value elsewhere, maybe in some built-in CSS file. You can check the CSS rules applying to a particular UI element using DOM Inspector.
Does your toolbar have a height and width? I can't remember if they're block by default, but it might not be showing because it has no dimensions?
I'm using jquerybubblepopup plugin, as shown in the image:
In the IE (8, 7, 6) I’m unable to show button inside the JQuery Bubble plugin as shown in the above image (red rectangle). Other browsers(like Chrome, Opera, Firefox) render it correctly. Can anyone let me know how to show the button inside the bubble plugin.
<input type="submit" value="Add Comment" />
It's the position: relative (in combination with all the other styling, but that's the root cause) throwing it off in IE, just remove that styling from your button CSS.
I want to add an image, instead of the default button.
I already have a CSS class for the image, will this work?
<asp:Button ID="..." CssClass=""/>
I am trying it now, and the image is all scrunched up. Maybe it's a CSS issue?
Why not use an ImageButton control?
Although you can "replace" a button with an image using the following CSS...
.className {
background: url(http://sstatic.net/so/img/logo.png) no-repeat 0 0;
border: 0;
height: 61px;
width: 250px
}
...the best thing to do here is use an ImageButton control because it will allow you to use alternate text (for accessibility).
I actually prefer to use the html button form element and make it runat=server. The button element can hold other elements inside it. You can even add formatting inside it with span's or strong's. Here is an example:
<button id="BtnSave" runat="server"><img src="Images/save.png" />Save</button>
I dont know if I quite get what the issue is. You can add an image into the ASP button but it depends how its set up as to whether it fits in properly. putting in a background images to asp buttons regularly gives you a dodgy shaped button or a background image with a text overlay because its missing an image tag. such as the image with "SUBMIT QUERY" over the top of it.
As an easy way of doing it I use a "blankspace.gif" file across my website. its a 1x1 pixel blank gif file and I resize it to replace an image on the website.
as I dont use CSS to replace an image I use CSS Sprites to reduce queries. My website was originally 150kb for the homepage and had about 140-150 requests to load the home page. By creating a sprite I killed off the requests compressed the image size to a fraction of the size and it works perfect and any of the areas you need an image file to size it up properly just use the same blankspace.gif image.
<asp:ImageButton class="signup" ID="btn_newsletter" ImageUrl="~/xx/xx/blankspace.gif" Width="87px" Height="28px" runat="server" /
If you see the above the class loads the background image in the css but this leaves the button with the "submit Query" text over it as it needs an image so replacing it with a preloaded image means you got rid of the request and still have the image in the css.
Done.
Assuming a Css class of "image" :
input.image {
background: url(/i/bg.png) no-repeat top left;
width: /* img-width */;
height: /* img-height */
}
If you don't know what the image width and height are, you can set this dynamically with javascript.
.my_btn{
font-family:Arial;
font-size:10pt;
font-weight:normal;
height:30px;
line-height:30px;
width:98px;
border:0px;
background-image:url('../Images/menu_image.png');
cursor:pointer;
}
<asp:Button ID="clickme" runat="server" Text="Click" CssClass="my_btn" />
You can add image to asp.net button. you dont need to use only image button or link button. When displaying button on browser, it is converting to html button as default. So you can use its "Style" properties for adding image. My example is below. I hope it works for you.
Style="background-image:url('Image/1.png');"
You can change image location with using
background-repeat
properties. So you can write a button like below:
<asp:Button ID="btnLogin" runat="server" Text="Login" Style="background-image:url('Image/1.png'); background-repeat:no-repeat"/>