I use Firebug and Web Developer Firefox extensions. One feature I am looking for and which I am not sure if they exist in these extensions is when I am looking at a webpage source, I want to click on a class or id name and somewhere it displays the definition of that class or id. Not the css inheritance hierarchy. Just the particular class or id if they exist
For example:
.....
I click on "header" and I get the css definition or it tells me there are none. I want to filter the css tree hierarchy to just display that class.
Any extensions can do that?
Firebug can do that. Open the HTML-tab, select the element you are interested in. Look in the right box of the firebug window under the style-tab. There you will see each style applied to the element be it by id, class or any other type of selector. You can also check out the layout-tab to see the offset, margin, padding and width of the selected element.
For instance, here on StackOverflow, when I click on the body-element, I see the following:
body { /* File: all.css?v=3496 (row 1) */
background:#FFFFFF none repeat scroll 0 0;
color:#000000;
font-family:Arial,Helvetica,sans-serif;
font-size:80%;
text-align:center;
}
body { /* File: all.css?v=3496 (rad 1) */
line-height:1;
}
/* + A lot of reset styles for all elements */
This doesn't do it from the source (I don't believe) but does do it on the page. Would CSSViewer help?
https://addons.mozilla.org/en-US/firefox/addon/2104
Related
I want to apply a piece of code (for example, a specific font) to all parts of a widget
What selector or what should I call to be able to do this?
In the following code snippet, the font is applied to the selectors and part of the comments, but when a new comment is registered in the comments section of the site, the previous font is displayed again for the new comment.
/* Widget post comments */
.elementor-element-3d8990cd .elementor-widget-post-comments{
font-family:'IRANSansWeb_FaNum';
}
.elementor-element-3d8990cd .elementor-widget-post-comments{
font-family:'IRANSansWeb_FaNum';
}
/* Wpdiscuz sort button active */
.wpd-thread-filter .wpdf-sorting .wpdiscuz-sort-button-active{
font-family:'IRANSansWeb_FaNum';
}
You can use [attribute*=value] CSS Selector in this case.
/* Widget post comments */
div[class*="elementor-element-"] .elementor-widget-post-comments{
font-family:'IRANSansWeb_FaNum';
}
/* Wpdiscuz sort button active */
.wpd-thread-filter .wpdf-sorting .wpdiscuz-sort-button-active{
font-family:'IRANSansWeb_FaNum';
}
You can also add a specific common comment parent class with div if needed.
you can use the body element tag to apply font on every part of element as we should write the code of element in body only.
The code written in body element (css) will be applied to every part of the body code and used to write background color so that it can be applied to whole page and used to write font size and family etc using css in style tag in head part.
using
<style> body{ font-size=34px;} </style>
What are all the css style classes that has to be changed to restyle dojo filtering select ?
Note: I am using claro theme.
I want to
1.Set the style for one particular filteringselect with id QuickSearchPane_SelectBox
2.Set the style for all other filteringselect
I found a few like:
.claro .dijitTextBox .dijitInputInner
.claro .dijitInputField .dijitPlaceHolder
.claro .dijitSelect
But these are not giving the desired effect. I am not even able to change the background colors.
For Menu
[dijitpopupparent="QuickSearchPane_SelectBox"] > .dijitComboBoxMenu .dijitMenuItem
This seems to work.
You can use the following CSS class to start styling your dijit/form/FilteringSelect;
This example will style all instance of dijit/form/FilteringSelect:
https://jsfiddle.net/ofgcd24n/
.dijitInputInner {
background-color: green !important;
}
.dijitMenuItem {
background-color: orange;
}
This other example below will style only ONE instance of dijit/form/FilteringSelect, please note the use of Descendant combinator as selector (where you use the ID for your widget DOM):
#widget_stateSelect .dijitInputInner {
/* your style*/
}
Generally you can use (in Chrome Dev Tool) Event Listen Breakpoints for click/mouse down, so when you open you FilteringSelect, you can block execution, and check with the inspector its HTML structure and see additional CSS classes you want to override with your styles.
More about CSS selector:
https://www.w3.org/TR/css3-selectors/
If you need more details, please post your HTML and CSS and desired layout so we can work out a specific solution.
I'm new to Dojo and CSS, so maybe I'm missing something obvious here.
I have a page with several Dijit buttons that are created programmatically, and I want to make one of them bigger- leave the text alone and increase the space between the text and the edge of the button. I don't want to override the CSS for .dijiButtonNode to do so because there are other Dijit buttons the page that shouldn't be altered.
I tried adding this to the widget declaration:
style: { padding: "1em" }
and this:
class: "PaddedButton"
.PaddedButton
{
padding: 1em;
}
but since Dijit buttons are rendered as nested spans it padded the area around the button instead.
The best way to work with CSS is using one of the browser debugging tools (that you should already be using) like Firebug or the Chrome developer tools. You can find an element's DOM node easily with inspect_element and then directly edit its CSS styles until they do what you want. You can also see what CSS rules are active and what are being ignored or overwritten.
I have come up with a working example here:
http://jsfiddle.net/missingno/FrYdx/2/
The important part is the following CSS selector:
.paddedButton.dijitButton .dijitButtonNode {
padding: 1em;
}
This selects any node with class dijitButtonNode that descends from a node that has both of the paddedButton and dijitButton classes. I couldn't do just a .paddedButton .dijitButtonNode because then the rule would end up being cascaded by a more specific selector.
I have two css files:
A main file (main.css)
A specific page file (page5.css). My page.css contains main.css (#import url(main.css));)
My main.css has this as one part of it that sets the height of the page
#content {
background:url(../images/image.png) no-repeat;
width:154px;
height:356px;
clear:both;
}
This works fine for all the other pages, but at page 5, I need a little bit more height.
How would I go about doing it?
You don't even need a separate CSS file necessarily. You can add classes to your body for various purposes, identifying page or page type being one of them. So if you had:
<body class="page5">
Then in your CSS you could apply:
.page5 #content {
height: XXXpx;
}
And it would only apply to that page as long as it occurs after your main #content definition.
Just re-define it somewhere after your #import directive:
#content { height: 456px }
for identical CSS selectors, the latter rule overwrites the former.
In page5.css, simply re-define the height.
page5.css
#content {
height:400px;
}
The other answers did not help me on a more complex page.
Let's suppose you want something different on page X.
On your page X, create a class at the body tag (body class="myclass").
Open the Developer tools (I use chrome) and select the item to be modified. Let's say it's a link ( a.class - 'class' is your class name of your anchor, so change it accordingly). The browser will give something rather generic that works on the developer tool - but messes up in real life.
Check the parent of the modified field.
Add the HTML tag to your developer tool as testing
f your new CSS path does not grey out, you are good. If it greys out, your selected path still needs fixing.
Let's suppose that the parent is a div with a class 'parent'. Add this path "div.parent >" to the already chrome selected a.class
The symbol > means you are going up on the tree.
You can keep going backward on the DOM all the way to body.myclass, or you may not need. There is no need to add the classes for the parents, but you can add them if there are great similarities on your pages.
This works for me.
I have a simple website with a master-page. To set properties to elements on a content page (such as Textbox) I use CSS. In designer it works well but when I launch a site a style isn't apllied to controls. The reason is simple. To say, I have a TextBox with id="TextBox1" in content page, it is placed in ContentPlaceHolder1. In CSS file I set properties for object with id #TextBox1. When I launch a site due to master page name mangling it gets an id like ctl00_ContentPlaceHolder1_TextBox1 which is not defined in CSS file included in masterpage.
What is a correct solution of this problem? Hardcoding mangled name doesn't seem to be good.
Use CssClass on the controls, like this: CssClass="myClass", then in your stylesheet instead of this:
#TextBox1 { /* styles */ }
You'd have this:
.myClass { /* styles */ }
It's worth noting that .Net 4 fixes, or allows you to better manage the ID generated in the html, see here for details.
As Nick and SLaks have both said classes are best. You can assign multiple classes in the class property and it will aggregate all the properties from all the classes specified overwrite any of the properties that it shares with earlier classes. The order of the classes definition in the css file sets the order that they get applied.
<style type="text/css">
.genericTextBox
{
background-color: #eee;
color: black;
}
.textbox1
{
background-color: #3ee;
font-size: larger;
}
</style>
<asp:TextBox id="textBox1" CssClass="textbox1 genericTextBox" runat="server"></asp:TextBox>
The order the styles get applied is first genericTextBox, because its the first defined in the style (essentially the order in class gets ignored). It sets the color and the background-color, then the style textbox1 gets applied and it overwrites the background-color and adds font-size to. So in the end you end with the color from generictextbox, the background-color and font-size from textbox1.
EDIT: on the TextBox changed class to CssClass
The simplest solution is to apply your CSS rules using classnames (Which don't get mangled) instead of IDs.
The correct solution is to use the ClientID property, which returns the mangled ID.
For example:
.Something #<%=TextBox1.ClientID %>` {
color: red;
}
However, you can only do that for inline stylesheets.