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
Related
I am using Kentico 8.2 and running into the issue where I need to have different styles for my forms. I have been able to alter the input attributes without a problem, and thereby create different styling for the forms in the site. However, I cannot get the .FormButton to change style if attached to my CSS for the button, ie .newPage .FormButton { background:red color:white }.
Is there another way to populate a CSS on top of the form button in 8.2 without having to add a class attribute in the code behind?
You don't have to touch the code behind. You can just wrap the form in a div with a CSS class using either content before/after or a web part container and leverage CSS Specificty by creating a more specific CSS selector including your new class (e.g. .myRedForm). The resulting selector would look something like this: .newPage .myRedForm .FormButton { background:red color:white }. The last resort would be using the !important directive which I would rather avoid.
Best way to do this is to render the form on a page and inspect the element by using F12 or FireBug. Either one will allow you to view the source and inspect the elements in order for you to get your selector to style it accordingly.
You can also specify a css class by creating your form layout manually and adding CSS around the button. Not ideal because you'd have to build your forms manually each time.
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.
I have a project that uses JQuery-UI. I recently found formee, which is a nice framework for building forms. One annoyance is that the formee submit button styling overrides the jquery-ui themed button style. How can I get all of the formee goodness but keep my jquery-ui button style? I realize I can edit the formee CSS to remove the button style, but I'm hoping to avoid that.
You can, as you said yourself, remove the offending CSS, which is what I would recommend.
Alternatively you can give the jQuery UI css classes that apply on the relevant button more specificity than the formee classes. This would be second best solution.
As a last case you could add !important; behind all CSS attributes in the classes for jQuery UI... I really wouldn't recommend this.
use this to bring front:
#your-div-id{
position:relative;
z-index:999999;
}
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.
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.