How to edit selectors to test something in Firebug?
alt text http://shup.com/Shup/365060/1105167712-My-Desktop.png
for example if i want to test
this
#Homepage #thirdCol a
as a
#Homepage #thirdCol > a
how to test like this in firebug
In Firebug, select the CSS tab.
The daughter bar will now show: a pause button, an "Edit" control, and the "first" CSS file, next to a down arrow.
Click on that down arrow to select the appropriate CSS file -- which you can identify in the HTML/CSS view.
Then click "Edit" and you can add, change, delete, or comment-out CSS selectors as much as needed.
ETA: See also seanizer's answer. Firebug's HTML+Style pane has direct links to the editable source of the style rules it displays.
Right click an element that has the selector you want to change
Choose 'Inspect Element' from the menu
In the 'Styles' tab, look for the selector you want to change, click the link next to it
the style sheet will open, click the selector label and edit it. changes apply immediately
Edit the HTML (using FireBug) and add a new style element.
<style type="text/css">
#Homepage #thirdCol > a {
...
}
</style>
Right click once on the '#Homepage #thirdCol a' text that is in your screen shot
Choose 'Inspect in CSS Tab' from the context menu.
Left click once on '#Homepage #thirdCol a' (after the css tab is opened)
you should now be able to edit the selector.
Related
i tried to hidden the subcategory and sub-subcategory menu in topmenu horizontal in Clasic Theme Prestashop 1.7.3 but i didnt find the correct code css and php code in tpl.
If anybody can help me? Only need change the code in css or .tpl too?
Thanks.
By CSS is really easy, with google chrome you can do...
Right click in the element of the menu you want to hide.
Click on Inspect
Now in the DevTool will be highlighted the element.
Do right click on it.
In the contextual menu, make click on Copy > Copy selector
After this, you will have the CSS selector that you need to hide in your clipboard, just paste it in some style sheet (CSS file) to create your rule to hide the element, something like this:
#category-3 > a {
display: none;
}
In some of this style sheets should works:
/themes/YOUR_THEME/assets/css/custom.css
/themes/YOUR_THEME/assets/css/theme.css
Once made, don't forget to clear the cache.
i'm using google chrome, when ever i'm inspecting elements some css rules define particular path like (template.css:44) but some properties are in locallhost:22 (body a {
color: #EB540A;), then how can i reach this property and where this css is placed ??
Right click on your mouse and then click "view page source". Now one new window will open and you able to see the path of the css file(template.css) and you able to edit.
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
I'm using Zend Framework and I have a form input button with a style that I defined.
I need to replace the main data-theme once the button gets pressed.
I have in mind something like this:
$this->form->go->setAttrib("onclick", "this.data-theme='new_theme'");
.. but is not working.
any ideas??
thanks!
It depends if you mean 'on press' or 'after'; if on press, then the :active psuedoclass (as Simone states) is correct; if you want the different style to be persistent after you've clicked the button, then the :visited psuedoclass should work (although having said this, I'm not sure if :visited is only valid for a href links; if so, you could style a link to look like a button, which is fairly common)
You could just declare the new style in your stylesheet, with the :active pseudoclass.
Should be something like
input[type=button]:active {
/* type here your rules, i.e. background-color:red; */
}
Hope it helps!
Why in IE7 does it prohibit me from dragging URL's/images links...etc into a TextArea?
This does not work:
In IE go to Tools > Internet Options > Security
Select Internet from the list of Zones and click the Custom level... button.
Scroll down to the Miscellaneous section and look for Drag and drop or copy and paste files.
Make sure Enable is selected.
Click OK, Apply, OK.
*NOTE: I can drag to tabs.
RESOURCE URL FOR ACCEPTED ANSWER:
http://msdn.microsoft.com/en-us/library/ms533743%28VS.85%29.aspx
Adding the following JavaScript code into you page enables dragging links to textarea in IE.
/* FIX IE of not allowing dropping links into textarea. */
document.ondragstart = function () {
window.event.dataTransfer.effectAllowed = "copyLink";
};