I have found a very nice set of buttons that I would like to use in an ASP.NET Web App here:
http://www.red-team-design.com/just-another-awesome-css3-buttons#comment-168128
They designed those buttons using pure CSS3. If I use the CSS classes they have there and set my <asp:button CssClass = "button">, it will just take some of the elements from that CSS class (background color, border style, etc.), but it won't use the icons.
I know it can't use any of the icons because I can't use CSS subclasses (e.g. <asp:button CssClass = "button add">... please correct me if there is a way to do so), so I was willing to create a different class for each button.
For instance, for the button with the plus icon, which I named .buttonPlus, I moved the CSS attribute content: "\271A"; (that is the + icon) to be part of its .buttonPlus:before selector, and still it won't render the icon. If I use the button as they suggest (using an HTML link):
Add
The button gets rendered with the icon, as it should. Of course, I wan't to use my ASP.NET server side button for obvious reasons.
If anyone has good experience with both CSS3 and ASP.NET, please let me know how to go about this.
Thanks!
You need to use a LinkButton server control instead of a Button.
That will ensure an html anchor tag instead of a button tag in the rendered html.
<asp:LinkButton CssClass="button" />
You might want to use linkbutton which will be rendered as anchor and applying respective class should give you the same output as shown in that link.
Related
I wonder can I put button inside the a tag in pug! Code is like below.
a(href=routes.menu)
button
I would appreciate your reply. thank you
HTML forbids buttons from appearing inside anchors.
If you want a link, use an <a>.
If you want to submit a form, use a <button>.
If you want something to trigger JavaScript from and cannot write Unobtrusive JS, then use a <button type="button">.
Then apply CSS to make it look the way you want.
Does anyone know how do I specify that jQuery UI's datepicker will have my own CSS class?
I'm not talking about the div\input that the datepicker is "made on", rather about the pop-up that comes up when you open up the datepicker.
This div's id is: ui-datepicker-div
I can define my own styles for that pop-up using
.ui-datepicker { blah }
but, what if I have several datepickers, and want different styles for each?
I can't even do something like
.myContainer .ui-datepicker { blah }
Since the datepicker's div is added by jQuery such that it is right under "body" in the DOM. That's why I'm asking if there is a way to specify to jQuery UI to add my own class to that div, sort of like the "dialogClass" option that exists with jQuery UI's dialog ...
Thanks
You are correct that there is only one actual datepicker UI element on the page, but you could use the beforeShow event to add a class or change a theme for different elements. I added a small demo here that changes the border for different datepickers. You could add in other styles as you need. Might even be possible to swap to different jquery themes with enough effort :-)
I don't think it is possible with a simple option, but it is possible i think, the code can be seen here.
You should be able to see where the classes are set, I'm no javascript guru, but it should be possible to do something like this:
Datepicker.prototype._currentClass = Datepicker.prototype._currentClass + '-theme1';
then define a class as ui-datepicker-current-day-theme1
Somebody may correct me though!
By default JQuery UI doesn't support multiple calendar styles on 1 page. It could be possible to alter the datepicker component to include it, but you would have to take the time to figure out how to modify the javascript.
Im a complete beginner with jquery and need some help please.
Im using jqueryui, Im using the modal form: http://jqueryui.com/demos/dialog/#modal-form
Ive got this working fine, However I want it so that a regular looking hyperlink can invoke this dialog. Anything I use just appears as the "create new user" like from the example above.
How can I remove all this styling, and just make a regular unstyled hyperlink invoke the dialog
The button's classes are as follows:
.ui-state-default, .ui-widget-content .ui-state-default
You can find these in CSS and change the styles to fit your design :)
OR you can override them by putting them further down teh cascade (Nearer the bottom of teh CSS file) and this will override any default CSS styles.
I found it actually much easier to do something like this:
Login
i have few listbox widget, and i need to change the color of the arrow that opens the drop down list, and its surrounding box
how can i do it with the CSS?
is there an attribute list for all styles that can be applied on a widget?
Me
The javadoc for GWT specifies what styles you get by default on each of the Widgets:
See ListBox javadoc page, it states that it has the .gwt-ListBox { } style. For this particular style GWT doesn't have any property defined.
Open the css file inside your applications "war" folder and paste .gwt-ListBox { }, then put any CSS property you want to use inside that style, like .gwt-ListBox {
color: red;
}
You should probably notice that ListBox is using a select HTML element (have a look at the generated HTML code), and AFAIK you cannot style the color of the arrow, as it is browser dependent.
If you really need to do that you are going to have to try more complicated things like the ones suggested in here, but this involves doing some javascript hackery.
FWIW, I had a quasi-related problem, which may or may not help you. I needed to be able to set the color of the text in the label of a checkbox programmatically, depending on where the checkbox was in a list of checkboxes and a couple of other factors.
It turned out to be possible to construct the checkbox with some html, roughly like this (sorry, currently away from my code): "new CheckBox(new Html(""));
Hope that helps at all; I don't know for sure that the ListBox enables construction with additional html. And it took a bunch of experimentation to figure out exactly what worked in there. But now it does.
I am using the AJAX Control Toolkit Popup Calendar Control in a datagrid. When it is in the footer it looks fine. When it is in the edit side of the datagrid it is inheriting the style from the datagrid and looks completely different (i.e. too big).
Is there a way to alter the CSS so that it does not inherit the style from the datagrid?
Open the page in firefox. However, first, download the firebug extension. Then, right click on the offending version and go down to inspect element.
Firebug is awesome because it let's you navigate the css of any element. You have two options here:
1) Assign the topmost element an css class and work it that way.
or
If that's not an option, you can use firebug to get the xpath to the offending element.
Xpaths look like body/table/tr/td/table/tr[2]
what you want to do with that in css is
body table tr td table tr {
/*css goes here */
}
Option 1 is definitely the better pick. Option 2 is more of a dirty way of getting things
done when things like asp.net doesn't let us have the fine grain of control we want.
It would be really awesome if you used a pastebin and posted the link to your rendered page's html.
It uses the style from the grid, because it's in it. If you want to change it's style, change the style of the control. What do you want it to do?
Here is the pastebin link:
http://pastebin.com/m17d99f8a
I am using a stylesheet for the grid that I got from Matt Berseth's blog located here:
http://mattberseth.com/blog/2007/10/a_yui_datatable_styled_gridvie.html
I am using a similar stylesheet for the calendar that I cannot find the link for anymore.