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
Related
In reference to my testing site's page:
http://thepfjstudios.com.au/testing/content/NewAbout.php
I have a Spry menu on the left side, that when is being used, seems to kill the <p> tags in the content section on the right side.
The .css file used is:
http://thepfjstudios.com.au/testing/SpryAssets/SpryMenuBarVertical.css
and the .js file is in the same folder but is SpryMenuBar.js
I've been playing with this for 2 days now and can't figure out why there is no longer a space between paragraphs in the content section on the right side. If I don't use the Spry menu, the content section shows just fine.
I would post code here but all 3 pages are relevant to this question and would take up a very large space.
SpryMenuBarVertical.css on 12 line defines:
* { margin:0; padding:0}
margin:0 is affecting your paragraphs. I suggest that you delete that line and adjust the menu's styles to suit your needs.
Edit: I think I should tell you how I figured it out in case you encounter a similar problem in the future. Here are steps for Google Chrome, and it should be similar in other browsers.
Right click on the affected element (in this case, any of the paragraphs).
Select Inspect Element.
Under the Styles tab, you can see all styles that do or would apply to the element. Try unchecking some of them to see what they do.
Under the Computed tab, you can see what styles the element is using.
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'm editing an existing template in Joomla and I need to change the menu icons text. In Joomla Administrator, I cannot find the place where I can do this. So, in FireBug I found DIV container that I was searching for. But if I change the text in FireBug, my changes are obviously not saved. Now very basic question is: how can I know the name of PHP or HTML file, where this DIV container is located? Or how can I save my changes?
FireBug will only change web browsers content, it will not affect files on the server. If you know DIV's id you can search for files with this string on the server. To save changes - edit file and save - but on the server.
I use TestWrangler app (I'm on a mac) - open blank TW, click on Search, browse to target a folder to search through. I always search through a copy of my website folders on my hard drive rather than live site files. Search for the text string you're wanting to find which file contains it. Give TW a few seconds or more and it will tell you exactly which file contains the string.
http://www.barebones.com/products/textwrangler/
When you right click on an HTML element and select "Inspect with firebug", on the right hand side of the firebug screen you will see the styles applied to that element, and where it says the line number, if you just hover your mouse over it it will show you the exact location of the file.
Use a file search tool, it is included in most IDE's, if your editor doesn't have such a feature try a file grep tools like wingrep (http://www.wingrep.com/)
I just thought I'd share this as a possible 'answer' as well.
there is a joomla extension that enables you to search through your source code within joomla itself.
Here is the link:
http://extensions.joomla.org/extensions/miscellaneous/development/22858
I'm sure it will come in handy instead of going through the hassle of a complex setup on localhost.
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
How can I give the user the ability to change the style of a webpage, of course I have to make several CSS files , but how can I make the code that permits the change upon the user's choice
We're all pretty unlikely to give an answer as thorough as A List Apart's.
They even provided some freely-usable code for you.
You would basically have css classes for all the major components of the page such as header, content, footer, nav_menu items, heading, etc. Everything that you want the user to be able to customize you would create a css class/ID for it.
Then you would show all these classes to the user and let him either type in the CSS code manually, or show him dropdown boxes with all the possible colors, for example, or other settings.
When the user changes an option, you could use javascript to change that property of the css ID/class he selected. E.g if he changes the background color of the header from black to blue, you could do this:
document.getElementById("header").style.background-color="#ABCDEF";
(Jquery might have an easier way of doing this)
At the end of the page you could have a submit button which would POST all the css settings to a php script, which would write these settings to the database. Then you would do a query like:
SELECT css_id,css_class,css_code FROM css_styles WHERE user_id='$user_id';
This would return all the css code, and then you would put this in the <head> command instead of an external css file.