JSP1: has Dojo widget.Style theme "claro" is used on body tag.
JSP2: has a dojo widget - Dialog box. The style definitions are applied directly to the widget. (Functionally this jsp is a footer).
<div dojoType="dijit.Dialog" id="privacyDialog" style="background-color:#FFFFDF; border-style:solid; border-width:1px; border-color:#000; height:203px; width:350px; z-index:9999; display:none;">
JSP1 includes the JSP2
Issue: At run time, styles defined on Dialog box in JSP2 are getting overriden and the dialog box appears with the styles which are defined in claro.css (title bar with blue colour, close icon, etc).
Required: Dialog box should display as it was defined in the widget in JSP2.
I have tried overriding theme after reading http://dojotoolkit.org/reference-guide/dijit/themes.html#id24 but it still is partially displaying the theme(close icon, title bar) specified in claro.css
In my case: specified the class as "form1" and the code added in claro.css is
Your strategy is correct: create a style that is a more specific CSS selector, so it will override the default.
It must be that your selector (.form1 .dijitDialog) is not being applied to the element. Look at the element in Firebug inspector - is your style being found but overridden (in firebug style inspector, does it have strike-through)? There may be some style in claro that is more specific.
Or, is your style not being applied to the element at all?
Also, I would urge you not to put your styles into the claro.css file, but in your own .css file. This will make upgrading dojo less nightmarish.
Update
I see that:
At run time, styles defined on Dialog box in JSP2 are getting
overriden and the dialog box appears with the styles which are defined
in claro.css (title bar with blue colour, close icon, etc).
So that means your styles are found and being applied. The dojo theme style is just more specific. What is the selector that overrides yours?
Without seeing that, I might recommend adding a class to your body tag, something like <body class='claro myCompany'... and then add that to your selector:
.myCompany .form1 .dijitDialog
Related
I have a component and I want to place it centrally within a grid. The selector of the component is app-signup-component and the rule I have applied is
app-signup-component{
align-self:center;
width:100%;
}
The it seems the rule is not getting applied. I am unable to figure out why. What am I doing wrong?
The top level component is content-component. Its html is
<div id="content-div"> <!--this is a flex -->
<router-outlet></router-outlet>
</div>
Its css is
#content-div{
display:flex;
height:75vh;
}
app-signup-component{
align-self:center;
width:100%;
}
The app-signup-component component gets added dynamically. It is a form. When I run the code, I see in the debugger window that css rules for app-signup-component are not applied (see attached pic)
If I manually add the rule in the browser then the form moves to the center (see below pic)
I don't know why it worked but if I move the rule to styles.css which is the global css file applicable across all components then the code works. I suppose the issue might be that if a rule is added in component's local css then that component has to exist in the page when the page/component is loaded. In my case, content component has router-outlet and when content component some other component homepage at start up. When I click a button, signup component gets loaded. But because signup component was not present initially, the css rule doesn't gets applied to it when it is later loaded probably because the browser doesn't recalculate the css rules. I suppose my options are that I either redesign the architecture to keep css effects local or I add such rules in the global styles.css.
I was trying to add some css styling to my wordpress website. However, I'm quite confused how to select the element and add the css !
Let me explain it in detals in three scenarios:
Picture 1:
I'm going to change the color and width of that button with text "Submit your attendance" inside. I wanted to make it red.
First Try: Picture 2:
I selected the calss which is :
wpcf7-form-control wpcf7-submit
Added the background-color: red , but it didn't work.
Second Try: Picture 3:
I did the same for this class:
wpcf7-form-control
Thrd Try: Pictur 4:
In inline style, when I add background-color: red and width: 100% in workes. I noticed a style attribute is also added. However, I'm not sure how to add in my Custom CSS of wordpress. I mean which element should I select? Of course Inline-style is not an element.
This is not an issue with regard to WordPress. This is due to CSS Specificity. What this means is that the rule that is more specific will "win" and be applied. This is why inline styles typically work over non-inline styles.
In your example, the rule that is being applied is more specific than the one you're trying to override with.
There is a hierarchy when it comes to specificity and the order in which rules are applied. Here they are in order of most specific to less:
Inline Styles
Ids - targeting the ID of an element is more specific than targeting a class
Classes, attributes and pseudo-classes (for example :hover)
Elements (for example a "p" tag) and pseudo-elements (:before)
Either add an ID for the your button or target the class in a more specific manner. For example body .thecontainer .thediv .anothercontainer .myelement
This might be work. You need to add !important property.
wpcf7-form-control{ background-color:red !important; }
Try this.
To update worpress css you have to edit the file style.css
Appearance -> Editor -> style.css (search inside other files)
or
Appearance -> Customize -> Additional CSS (where you have to add manually every line of code)
Sometimes you need to add "!important;" at the end of line, something like:
background-color: red!important;
I'm a new user of GWT and I'm looking for some advice concerning "theme management".
I have to make a website that can handle theme changes. What I mean is that a user can make is own theme by filling a form, then the website will automatically and dynamically changes its color to display the new ones.
I thought using a CSS sheet for all the static properties and using some GWT lines (e.g. label.getElement.getStyle.setColor(...)) to change color. But I have many "hover" properties and I think creating many MouseOverHandler is not a good idea ...
Is there a way to edit CSS sheet dynamically or a magic trick to do that ?
Thanks.
You have many options - the most straight forward (to me) is to make use of the existing CSS classes that GWT introduces. If you look at javadocs for any of the widgets GWT provides, you'll notice the CSS Style Rules section. For example, Button:
.gwt-Button
the outer element
That means that every Button you add to the page has a .gwt-Button style applied to it. If you inject a CSS stylesheet with a rule that overrides this style:
.gwtButton {
background: red;
}
All your buttons will turn red. You can inject stylesheets using StyleInjector. Creating the stylesheet's content dynamically is up to you - but it's just text, it shouldn't be hard (but make sure the generated CSS rules are valid!).
To get you started, try hooking up this code to some button and see if clicking it triggers changing all the Buttons on the page red:
StyleInjector.inject(".gwt-Button { background: red; }");
If you have custom widgets that you want styled differently, just add an individual class to them (.customWidgetWhatever, like Button has .gwt-Button, etc.) that you will include in your custom stylesheet.
Make sure you understand how CSS works and what it can do for you. For example, if you want to style each button the same, you don't have to change each button's style individually, just use:
button {
background: green;
}
And all the <button>s will turn green.
The easiest way to change themes without reloading the whole application is to assign a theme class to the body element.
You'd want to prepend each CSS class in your app with a particular theme, e.g.:
.theme1 .myClass {
color: red;
}
.theme2 .myClass {
color: blue;
}
Then you'll apply a particular theme to the body element:
<body class="theme1">
When you want to change themes, you'll have to change the body class so it will become:
<body class="theme2">
this way, each element that has class myClass will have its color changed from red to blue.
You cannot edit a CSS file dynamically, but you can inject CSS style either as a new CSS file, or directly into your document.
For example, you can define all key CSS rules in your "main.css" file, and add your user-defined rules directly into the host HTML page with a style tag.
My custom css file from themeroller specifies the font-family and font-size of select elements.
This is causing trouble and I need to get those properties back to the values from the UA stylesheet.
Is there any way to set these back to the UA's values without knowing them? Or do I have to edit the css file from themeroller?
You can just target the jquery-ui element you wish to modify using the class it registers for the element. You can grab that class using a tool such as firebug or Chrome's Developer Tools.
Example:
Changing the font-size of jquery UI's Datepicker month day elements:
.ui-state-default, .ui-widget-content .ui-state-default {
font-size:20px;
color:pink;
}
You can add your overwritten css inside of your main CSS file and it will pick up your changes.
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.