I have wordpress installed on my system. I am using twentyten theme, in the theme directory there is style.css file. In that file I tried
body {
background-color: red;
}
but nothing happens, no matter what change in style.css it does not reflects in browser.
Please help.
Have you cleared your browser's cache? Often the browser will cache the css files to be more efficient, so any changes you make to it require you to clear the cache.
If you're using a windows machine: ctrl + shift + del should bring up the clear cache dialog
Edit: it appears that your css was in the #media print section of the stylesheet - which only applies to printed material
The best way to figure this stuff out is to install Firebug in Firefox or use the built-in Inspector in Chrome.
Right-click on the page, do 'Inspect Element' and check what the Inspector tells you. Probably the background-color you're setting is being overruled by another style rule (Inspector will tell you this) or there are other elements with another background-color which are placed on top of the body, thus hiding the red background-color.
Either way, doing an 'Inspect Element' will make this clear. We can only guess from here.
First of all ensure that you're editing the right style sheet. For example try to erase all the styling code inside this file and refresh your website. If you loose your style then you're in the right place.
Second try to use Firebug Addon it will help you to inspect the html Element then you can show the corresponding CSS for this element. you can change whatever you want and see the effects directly on your page then you can write these changes to the style sheet.
hope it helps you.
Maybe that style is overwritten by another background attribute on the body a few lines below (browser will always render the last css attributes of elements). Something you can check easily with firebug.
If you have plugins, disable them just to be sure.
Other then that and the suggestions already made I'm not entirely sure what could cause this
Related
I just started working on a Wordpress theme, but it won't reload the stylesheet after I update. I searched throughout here and tried the common remedies, including:
Reload holding ctrl/shift
Reload while Developer Tools is open
Reload twice quickly in a row
Get firefox/firebug
Add the timestamp generator to the end of the href
Install an extension, specifically this one: https://chrome.google.com/webstore/detail/clear-cache/cppjkneekbjaeellbfkmgnhonkkjfpdn?utm_source=chrome-app-launcher-info-dialog\
It seems like it only reloads every once in a while, and it really impedes my ability to write CSS...
Does anyone here have any ideas to fix this?
Thanks.
edit: I think it may have something to do with my host (it's free). I'm just going to move offline for development, I think.
You can always go into Incognito which does not use any chached data. It also does not save any history information.
To use it you can press Crtl+Shift+N then navigate to the page / website that you want to see.
You can also access Incognito by pressing the ☰ icon in the top right of your chrome window and click on New incognito window:
If your page is still not updating I would make sure that the file is even being saved. Because at this point your issue would not be because of files being cached..
My only other thought is that it could be your CSS itself... Sometimes your CSS is not applied due to an error in your code, another piece of code counteracting it, etc...
So see what is being applied:
press F12
OR
right click somewhere on your page and press Inspect Element.
You should see something like this (except with your code / webpage):
The parts of the "Inspect Element" will be sized slightly different but you can change those around...
Essentially click on the html element that you are trying to change the css on...
You will now see what css elements are being displayed... If they are crossed out, it most likely means that there is some other parent (or just some other property) that is canceling out the css you are adding.
These are just some of the reasons why the CSS may not be working! But I hope this helps!
When working with child theme, make sure you are loading the right css file. Sometimes you load the parent's css file.
Make sure to disable cache plugin in development time.
If you go to "Game rules" section and click around the sections "Backgammon, Narde, Nackgammon, Tavla, Old English" you will see that some sections load normally and the scrollbar works fine. Bigger sections like Backgammon and Narde do not load fully. The content in backgammon section is going out of the margin and the Narde section simply won't load fully.
What could be the issue here? All of the sections with scrollbar have the same identical settings. The only difference is that Backgammon and Narde sections have more text and more images. Could this be a reason for the glitch? Maybe the plugin somehow doesn't get to load all the content and already locks itself in place? What could be the possible solutions?
EDIT: I'm pretty sure it has something to do with tinyscrollbar plugin loading a bit too fast (before the inside content has loaded). What method could I use to put a timer on the plugin so it doesn't load as quickly or refreshes?
first it seems that your "p" elements styles do not have width set to it and when rendered they hide behind the scroll bar making some of the text not visible.
This may not answer you question directly but it may have something to do with portions of text being hidden by overflow:hidden / overflow:scroll that is being used for the scroll bar.
You could also try using the jScrollPage plug in as it simplifies the scroll bar coding.
I am working on a page and having problem with the Fancybox close action for the Image gallery in the first button at the bottom, the gallery is closed but overaly is still there. Here is the test link
How ever the same settings are working for the second link "Floor Plan".
Secondly I am using a Tiny Scrollbar plugin for the gallery on the page. The thumbs on the left side have blue scroll bar if they are larger in contents. This scroll bar does not appear in Google Chrome, and sometime don't show up even in other browser if the page loads first time, then I have to refresh the page to show it. Any idea about the problem will be greatly helpful.
Thank you!
First off, I noticed you're suing jQuery 1.3, why?
Here's 1.6:
http://jquery.com/
It isn't that much larger, and its an updated library. That may fix your problem.
If that didn't work, then delete the fancybox.js, re-downlod and put it in again, same with css. Make sure the css is called at the end of your css document.
If that doesn't work, I suggest getting rid of your javascript files one by one until there is only fnaycbo xleft, it's obviously some conflicting code at this point, so you'll have to troubleshoot by trial and error, going through one by one to findout what script is preventing close. I don't have access to your server, so I can't test it.
It's most likely in main.js, so remove that first, and see if fancybox works then!
ETA: Scrollbar fix.
The problem is something is adding a disabled selector, it's javascript. But you could change up tinyscrollbar.js to fix it, or you could go to your css, find the line:
'#scrollbar1 .disable {display:none}
and remove that line entirley, it's causing your scrollbar not to appear in browsers the javascript is (for some reason) disabling in.
In my case I solved with the next modification:
$(document).bind("load", function() { $('#myTinyScrollbar').tinyscrollbar(); });
Well you have an error in console:
d.onClosed is not a function
It could be because:
Your using an old version of jQuery possibly not supported by Fancybox. Try updating to 1.6, though beware legacy plugins or code that could break due to the steep upgrade.
A compression issue. It's possible i.e. the Google Closure could of removed what it saw as "unneeded" code and therefore broke the functionality. Try using uncompressed Fancybox to see if it fixes it, if it does then you know this the issue, rather than your jQuery version.
Wonder if anyone can give some advice.
Bascially this is something I come across from time to time - I'm learning to debug using firebug and trying to track down where a style attribute is being set in a complex bunch of wordpress/fancy box files.
Bascially I'm trying to get fancybox to autosize to width of element, I know the fancybox option to enable this, but the whole box seems to be overriding with a fixed width, which i can't find anywhere in the stylesheets.
element.style {
border-width:10px;
height:84px;
width:987px;
Now, this doesn't have a style sheet associated on the right hand side in firebug, so I'm assuming this means its computed on the fly somewhere in the js/php ?
What I'm after is a pointer on how to track down where it's being set, and how I can maybe use firebug to identify that if it's being set outside the stylesheets? it's so I can be a better debugger too :) thanks for looking.
in mozilla browser using firebug click on arrow icon at (left top corner) and select any control on page. it will display their style(css) at right side. here you can made any changes and it will display at browser.
think it will helpful for you.
When element.style is specified as the origin of the style information, it means that the style is inline (i.e. specified as an attribute to the tag).
E.g.
<div style='border-width:10px;height:84px;width:987px;>This is a box</div>
If you can't see that in the source code, it's possible it's been added in by some javascript
Using the web-developer addon for Firefox, you can not only view the source, you can view the generated source which will give you the source after any javascript has acted on it.
First locate the element
Once you do this, trigger the event, you will see the change
Right now I'm trying to modify the motion theme for Wordpress. As of now I'm not sure if it's the theme are the wordpress app that is highlighting my tables on a mouseover. I was wondering if anybody had any idea how to remove the table highlighting mouse over feature in a wordpress app using the Motion theme.
I think it's the theme... I analysed the preview: http://wp-themes.com/motion/
Try to search the source-code of that page (Ctrl + U) for
table tr:hover td
If you want to change this definition, search through all your theme files. You could use Notepad++ for that, for example...
I am running one site with this theme but I do not quite understand what mouseover effect you are referring to.
Generally, you should determine the CSS rules that are applied to the element:
in Chrome browser, right click the element, choose "inspect element" (or similar function in any other browser, Chrome is very good at this)
if needed, locate the element in the tree on the left (sometimes the right click picks another element)
look at the CSS in the "Styles" acoordion-style table on the right side, expand Computed Style and locate a rule that handles a "hover" modifier. Determine the rules that specify this behavior and path to the CSS file.
modify the CSS - remove the rules that are applied on hover