I'm writing a ServerControl in ASP.NET 3.5, and I'm exposing CssClass, so the user can manipulate the visual appearance of the control. My problem is that I want to establish reasonable defaults, so that the user doesn't have to configure CSS unless he wants to change the defaults.
My specific problem is that my control is emitting html divs, that need to display background images. I want the user to be able to specify a different image in CSS, but I want to display a default background image, and I can't make that work.
The entire server control is emitted as a div, with a class name set to the value the user provided in CssClass. The div that needs the background image is enclosed within this outer div, with a class name of its own. I am currently setting the background image in CSS on the page that contains the control:
<style type="text/css">
.cssClass .innerDiv {
background-image: url("http://....");
}
</style>
With this the proper image is drawn. But if it's not there, no image is drawn.
What I want is for the ServerControl to emit some CSS that will define these image urls, that would be over-ridden by any css that was added by the user, and for that default CSS to include URLs to images embedded in the ServerControl's assembly.
And I'm not sure of how to do either. Nor, for that matter, am I sure this is the best approach.
Any ideas?
Expose various properties with CSS classes, such as HeaderCssClass, ItemCssClass, if you need more than one style.
Also, you can do a check that if the user has a CSS class name specified, you use that; otherwise, use your default and omit the custom CSS from the control.
In your rendering logic, you can render the right CSS class name as the attribute of the DIV depending on whether the user has specified anything. So you can do:
if (this.HeaderCssClass != null)
writer.AddAttribute("class", this.HeaderCssClass);
else
writer.AddAttribute("class", "standard");
writer.RenderBeginTag("div");
And only write out your standard CSS if the HeaderCssClass is null.
Related
I am writing code that allows a user to build a theme for the application, so they need to be able to effectively communicate that they want to change something about some element of JavaFX.
Suppose I have a bar on the top of every view that lets a user change the way some set of things look: button, label, text, and so on.
Here is a basic stylesheet that I am working with. It just puts style on root and button.
basetheme.css
.root {
-fx-background-color: "teal";
}
Button {
-fx-background-color: "orange";
-fx-font-size: 2em;
-fx-text-fill: #0000ff
}
Right now, all the views I have would load this sheet each time they are loaded:
view.getStylesheets().add("views/basetheme.css");
The Button class and its fx properties here would apply to all buttons in the view.
This is the behavior I want. I want the user to have leverage over Button and its properties during runtime.
For instance, if they want to change Button's -fx-font-size property from -fx-font-size: 2em to -fx-font-size: 3em, they can do that. Is this possible?
Currently, I know setStyle will set properties on some elements, but I am looking for a way to do this for not just a single Button, Label, and so on, but for all them. I want there to be run-time changes. For instance, after a user changes some element like button and one of its properties, it reloads that view and the change is applied.
I want to do something like view.setStyle("Button: some properties") and then it add those properties to Button class or overrides it, instead of view.setStyle("some properties") adding properties to root. The latter would not recognize that the property goes on a button, let alone all Buttons in view.
The obvious reason why this might not work this way is that we are not really changing the css file when we do those inline setStyle calls, just setting over the existing property and thus that inline has higher precedence and is updated.
I know I could technically do somebutton.setStyle("some properties"), but I want the user to be able to modify properties for all Button elements by specifying it at the root of a view so the styles trickle down to subelements in the view. This makes things easier.
You could use CSSFx to constantly pull in a CSS file that has bee written by your app.
I have an ExtJS form that uses hbox-layout containers to create sentences that contain form inputs and there is a requirement to disable the form under certain conditions. The hbox-layout containers have a series of radio, text, checkbox, and textfield components. You can see an example on jsfiddle.
This is an answered question here on SO that doesn't fully work for me because if you disable something that isn't a field (like the text component I'm using) the disable style is different - it appears to mask the component instead of just graying out the text. When nested components are disabled, the mask gradients stack. Examples of this scenario are illustrated on this jsfiddle.
Is there a way to override how text handles its styling when it becomes disabled? I think that may be the easiest solution.
You'll have to handpick each style fix, but yes that's completely possible. Just addCls to give a hook for your CSS...
For example, using the following CSS:
.my-disabled-ct text {
opacity: .3;
}
You can give a similar disabled look both to fields and text items with the following code:
var rootCt = Ext.getCmp('lotsOfItems');
rootCt.query('field').forEach(function(field) {
field.disable();
});
rootCt.query('container').forEach(function(ct) {
ct.addCls('my-disabled-ct');
});
You should probably avoid using disable on field since Ext put a mask over them then (though you could probably hide it with CSS).
You could add the class and target the CSS directly to text items however, why not? In this case, you would query for 'text' and use addCls on them, with this kind of CSS:
text.my-disabled-cls {opacity: .3;}
That goes without saying that you'll restore your components look to "not disabled" by removing the CSS class with the same query and the removeCls method.
I have a css based layout with a generic header image at the top of the page in my Rails app. There is a Course model will have a optional logo image which will hopefully replace the header image if it is present, when a user is viewing the course material. Is this possible and how do I go about it?
The css for the header is below...
#header{height:116px;width:100%;background:url('logo.jpg') top center no-repeat;}
The app is located at ... and when the user logs in, and clicks on a course, I want the course logo to replace the header image.
If I understood your problem correctly, some model defines a logo. In such case I would not mess with CSS - or at least not with assets files, because they are expected to be static.
You may define the logo in the layout: app/viev/layouts/application.html.erb Just create there something like this:
<head>
..
<style type="text/css">
#header { background-image: url("<%= #logo_path || 'logo.jpg' %>"); }
</style>
or
<head>
<% if #logo_path %>
<style type="text/css"> #header { .... } </style>
<% end %>
Then, in some controllers or actions or some views, just set the instance variable #logo_path if you want to have the logo different from the default.
In your static CSS you may define the default background-image, and just make sure that this rule from your layout has bigger importance than the rule from your static assets. If in doubt, add !important clause to the rule in layout.
Of course, if talking about dynamically you mean JavaScript, then you may just include the script and the logo path directly in an onclick attribute of given element, in a way similar to this:
<span onclick="replace_logo('<%= model.logo_path %>')">....</span>
The function replace_logo will not be difficult to write.
u can do in two ways by defining different classes for each images u want to show in header and then change claa depends on some variable(controller or action name ...etc) or by adding yield :style in head and overwriting header style depends on your requirements by using content_for :style.
I would just include that small specific portion of css in my main code and use a simple if...else statement, and change 'logo.jpg' depending on whether the user is logged in or not.
For example, if the user is logged in, the variable for the logo would be changed from the default value. If the user isn't logged in, then use the original logo.
Can't really provide more detail as there is no code to work with.
I am using the jQuery UI library out of the box, based on a theme.
Having links rendered as buttons is great, however I need to override some buttons with different colours.
How do I specify an specific class for a particular button to use?
I recommend looking at the CSS for the jQuery UI buttons and duplicating the structure of the CSS which specifies the buttons, but with your own class instead of the jQuery UI classes. Make the overrides that you need in this CSS and include it after the jQuery UI CSS. CSS uses a combination of the most specific selector and ordering to determine which values to apply. By doing this you will make sure that you have the same specificity for each of the CSS selectors used by jQuery so that your CSS takes precedence based on order.
Smashing Magazine has an article that probably has more information than you care to know about the specificity issue.
You can also:
Use Developer Tools in the browser (Chrome has great ones).
See what class from jQuery UI defines the button color.
Override it in your CSS file with the "!important" attribute.
For example, when I needed to override jQuery UI spinner control and remove the borders, I found the class that defines the borders using Chrome Dev Tools. Then in CSS: I added something like that:
.<jquery-ui-class-that-i-found> { border: 0px !important; }
Works great!
I would say, give the particular button or buttons an id, and:
$("#buttonId").removeClass().addClass("myClass");
If you want to apply it to multiple buttons each with its own id:
$("#buttonId, #anotherButton").removeClass().addClass("myClass");
I think the button API should include a configuration like this where you can change color etc. by passing parameters
$("button").button({background:"FFFFFF",hover:"FFFFF"});
this is just an idea where you can change some of its visual attributes.
I found this worked for me:
$(".btnSave").removeClass("ui-state-default").addClass("SaveButtonStyling");
Basically needed to remove the ui-state-default class and then add my own for the background colour etc.
Thsi meant that the rounded corner class etc stayed put and I was able to amend the background colour etc.
If you simply wish to have some additional/different for particular buttons, simply give the buttons some classes like class="mybuttonclass otherbuttonclass" - multiple classes are allowed. Then, just add css rules for your class(es)
.mybuttonclass
{
background-color: red;
}
.otherbuttonclass
{
color:white;
}
thus the background is red with white text - or whatever combination you wish, which would override items in the cascade (CSS) above it. (assumption is that your .CSS file is linked in AFTER the jquery UI css file, or is in-line on the page, both of which would override the jQuery UI css.
I have a Skin File that contains:
< asp:TextBox runat="server" CssClass="FixedFont"/>
In the same folder as the Skin file, is the following css file. The Css file contains:
.FixedFont
{
font-family:Courier;
}
Lastly, I have an ASPX page which contains the following control:
<asp:TextBox ID="TextBox1" runat="server">Test</asp:TextBox>
When I view the ASPX page in design mode or run the page, I see that the font-family attribute on the style does effect the textbox control, namely, it is changed to Courier.
However, what I would also like to do is to define a local style on my ASPX page,
.DefaultWidth
{
width: 300px;
}
...and have all of my TextBoxes so that they are the same width.
If I set the CssClass property of TextBox1 to "DefaultWidth"...
<asp:textbox ID="TextBox1" CssClass="DefaultWidth">Hello</asp:TextBox>
...the width of the textbox is changed to 300px but I lose the effect of the skin appling the fix font Courier style.
To get BOTH effects to be applied, the DefaultWidth and the fixed font textbox effect, I have to set the CSSClass property to "DefaultWidth FixedFont", which to me, seems like it defeats the advantage of having the skin in the first place. I guess I expected the effect to be CUMULATIVE, unless I added a style that conflicted with the SKIN, in which case, I expected the local class to be applied over the skin's effect. For example, If I applied a second class, Class2, that also included a font-family specification in addition to other effects, I would expect the font specified in Class2 to override that in the FixedFont style. But that doesn't appear to be what is going on here.
What is the best way to manage such a situation? I imagine very often wanting to have a series of textboxes that all match in width, so I imagine that I will very often want to specify a CssClass on a control in addition to using the effects applied to the control in type in the skin file.
Is the solution NOT to use CSS in the SKIN itself? This seem like it has disadvantages, too, on the side of maintenance.
A secondary problem that I am having is that if I declare a stylesheet with the following class..
.Button
{
background-image: url('/images/button.gif')
}
...and set the CSSClass property of an ASP Button to "Button", I see the image tiled over the button.
However, if I enter the following code in the skin file
it does not find the image.
The images folder is a first-levl folder off of the root of the website.
Any idea why it is not picking up the image. I;'ve tried various other paths, but that is the only one that seems to make sense to me.
By the way, the image is applied in design mode, but it disappears when ity is run.
I don't know if I understood your question but as I'm seeing from here, what you should have to declare this in your "local" style:
textbox.fixedfont { width:200px; }
or simply to every textbox if you are sure about affecting every textbox with the same width, doesn't matter the skin...
textbox { width:200px; }
If this not what you were asking for, please be clearer.