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.
Related
Using bootstrap 3 on a drupal site, how can I change the color and weight of links pointing to the currently active page? I tried using a:active but that does not do what I was expecting.
Drupal is adding an "active" class to the links to the current page. This is different than setting the property of an <a> to "active". Use the selector a.active in your CSS instead of a:active. You should be able to inspect the properties in developer tools to ensure the class being added and how to target it.
On the server-side, you can make it with javascript.
The theory
Make a css class with the styles you want (you can name it .nav-active or whatever you want.
Then append the class to an element with a javascript click function, here's an example using jQuery.
$(".nav-item").click(function(){
$(".nav-item").removeClass("nav-active");
$(this).addClass("nav-active");
});
Here's a pen so you can see how it works:
http://codepen.io/edfreitas/pen/PqbWbP
In light of GMail's questionable support for CSS, I'd like to apply style elements to everything in the HTML email I'm assembling.
I'm currently using MVC3's Razor to construct the email, then sending off the generated HTML. Is there any way for me to write the template with a style sheet, then transform it such that each element gets a style attribute with the appropriate styles?
For instance, in a normal web page, I would have something like
<style>
a { color:#1c5567; }
</style>
Click here!
If a GMail user looks at this, they won't see it in that shade of teal. However, if I do
Click here!
they will. But that is a huge maintainability headache. Thus I want a process that can take HTML with the former style and output it in the latter.
. For this, I want to take that existing CSS style and transform it such that style="color:#1c5567;" gets added to every <a> on the page.
It might be the lamest way to do this but you could use a simple CSS parser like this one CSS Parser and add style attribute as required.
Since you're overriding the style in gmail from an external stylesheet, you need to use !important to override the style.
a {
color:#1c5567 !important;
}
I've developed a dynamic ad banner that consits of html and styles loaded into the host site via javascript. On one particular site, certain styles in the stylesheet for the main page are affecting the html that I'm dynamically loading.
Is there a technique for having the dynamically loaded html only render styles from the css I have loaded along with the html, and ignoring any styles in the host page?
Any advice appreciated.
Put your banner into an iframe.
Add !important to your CSS like
p { color: #ff0000 !important; }
Yeah there is a real easy way. Why dont you have your classes separated form the main page HTML. Give them a unique identification if you want there to be no conflict.
Example
Your main page has a css class .input
Give your dynamically loading page as .Dybamically_input this will server something as a namespace.Also you can use !important to the properties which you definitely want to added.
There is an evolving standard to introduce scope blocks to CSS but that isn't yet supported enough to be of any use. You can use the !important directive, but that is likely also to affect the underlying document if you don't apply it carefully.
The best solution is to create a scope by including all the the HTML in your add banner inside a div with a uniquely named class (and use your own namespace eg. 'cog_myAd' to try to guarantee uniqueness. Then apply styles just to that class, using !important where you might need to override styles that could be changed lower down the cascade of styles.
If you have attached your CSS file to the HTML page then the only solution to it would be using !important for all conflicting CSS properties -
.className{
color: red !important;
}
Use inline styles (the style attribute on all your banner elements you want to style) instead of external css file - this way you will never have a conflict.
The other option as others suggested is to use IFrame.
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.