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.
Related
I seriously have worked on this FOR-EVER!!!
Why the heck isn't my menu color change via the CSS?
I don't know if it's the Wordpress theme interfering or what, but I need a fresh pair of eyes on this website: http://rivercityhopestreet.org/
Help!!!
GoingBananas
You should learn how to use web debugging tools. For chrome it's right click -> inspect element. Then you can find Your menu element and see what's setting the styles.
In added image You can see that Your style is accepted, but overridden by style in index file. Either it's style in php file itself or some Javascript.
You can either change the setting in the index file or (not the best way) set it to background: #40c2a6; !important` in your style.min.css
Also if You cannot figure something out, in Developer Tools click on the Html element, then click on "Computed" on the right side and then click on the specific style - it will show you where that real value is set at.
Hope this helps You in the future!
#menu-primary-items>li a {
color: #888;
}
search this and change the color..
Edit this in custom css.
#menu-primary-items>li a{
color : #000;
}
if it not works then put !important in color attribute.
I was given a Wordpress theme to install for a new website and then asked to make some customizations.
The site is here: http://centergrovepto.org/townsend/ (I'm not sure where the original theme came from.)
There are 3 buttons along the right side of the front page slider. "Employers", "Candidates", and "Open Positions". The buttons were initially clickable and all they did was change the current slider image.
I'm trying to make them clickable so that they open the corresponding page. If you hover over each button you can see in the status bar that the link paths are setup correctly, but when I click the button nothing happens.
I'm guessing it is a CSS issue and some layer is covering up the actual buttons, but I don't know enough CSS to figure out what the cause is. I have the Firebug plugin for Firefox installed so I can more easily inspect the CSS. I've played around with changing the z-index of various elements, but I just can't get it to work.
I actually think it's your jQuery Faded plugin. It looks as if this:
if (o.pagination) {
if (o.autopagination) {
$t.append("<ul class="+o.pagination+"></ul>");
$c.children().each(function(){
$("."+o.pagination+"",$t).append("<li><a rel="+number+" href=\"#\" >"+(number+1)+"</a></li>");
number++;
});
}
$("."+o.pagination+" li a:eq(0)",$t).parent().addClass("current");
$("."+o.pagination+" li a",$t).click(function(){
current = $("."+o.pagination+" li.current a",$t).attr("rel");
clicked = $(this).attr("rel");
if (current != clicked) {animate("pagination",clicked,current);}
if(o.autoplay){pause();}
return false; //THIS LINE PREVENTS DEFAULT ACTION WHEN <a> LINK IS CLICKED
});
}
Is preventing the default action of your links. I'm not sure what will happen, but try commenting the "return false" line out. See if any unwanted side-effects happen. Otherwise, add this code to your (or what I assume is yours) custom.js file:
jQuery(".pagination ul li a").click(function()
{
window.location = this.href; //UPDATED FOR EPHRAIM
});
I'm not exactly sure why this is happining, because if you open the link in a new tab, it works perfectly. It's possible that it's a css problem, but more likely, it has to do with your HTML.
What I would try is adding a target to your link. This will tell it to open the link specifically in the window your in, which may solve the problem. (I haven't tested it myself though)
Instead of
Try changing it to one of the following:
Or, if that one doesn't work, try this one as well
Let me know if that helps!
as I've seen on your site, the 3 buttons are linked like this:
a href="/townsend/employers/"
But i think it should be like this to work because a href="/townsend/employers/" does not refer to anywhere in your server
try changing it like so:
<a href="http://centergrovepto.org/townsend/employers/">
I am trying to use a CSS selector to click on a link in Selenium but it fails to recognize it.
The link called "Cancel" appears in two places in the page.
The xpath for the first Cancel link is:
//html/body/div[#id='c_account']/div[#id='a_returns']/div[#id='container']/div[#id='main']/div[#id='main_col']/div/div[#id='create-return']/div[1]/div/a[2]/span
The xpath for the second link is:
/html/body/div[#id='c_account']/div[#id='a_returns']/div[#id='container']/div[#id='main']/div[#id='main_col']/div/div[#id='create-return']/div[4]/div/a[2]/span
When I inspect both links in Firebug I get the same CSS path.
html body.p div#c_account.c_wrapper div#a_returns.a_wrapper div#container div#main div#main_col div.main_content div#create-return div.return-process-actions div.return-process-action-buttons a.return-process-cancel
And when I use Selenium to click on the second link it clicks the first because the css path is the same for both.
Is there a way to distinguish between the two links through css path?
Use the x:nth-child(n)
Look up this site: http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/ ... what you need is #22
Also, you really might not need such a long css selector, you can just use
a.return-process-cancel:nth-child(1)
a.return-process-cancel:nth-child(2)
You'd be better off in the long run adding an id with a meaningful name to the links you want to click. Your test will be much easier to read later when you have lines like
selenium.click("firstCancelLink");
than
selenium.click("css=html body.p div#c_account.c_wrapper div#a_returns.a_wrapper div#container div#main div#main_col div.main_content div#create-return div.return-process-actions div.return-process-action-buttons a.return-process-cancel");
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.
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";
};