|
Place Custom Menu Code with CSS & Javascript Looks Ugly
What is the way to have the theme code leave custom CSS & Javascript code alone that is contained in a Text Widget?
Do you have to put !important before the closing ";" in each line of code? Thanks Glenn |
it depends on the selectors. If the text widget has a div with a unique ID and you use that in the CSS there should be no conflict. It is all about how qualified the CSS Selector is.
|
OK, here is a small snippet of code in one of the files that is generated by a menu program I use which works perfectly on my main web site...
Maybe you can give me some guidance on how to have the theme ignore all this code. //Core CSS document.write('<style type="text/css">.imcm ul,.imcm li,.imcm div,.imcm span,.imcm a{text-align:left;vertical-align:top;padding:0px;margin:0;list-style:none outside none;border-style:none;background-image:none;clear:none;float:none;display:block;pos ition:static;overflow:visible;line-height:normal;}.imcm li a img{display:inline;border-width:0px;}.imcm span{display:inline;}.imcm .imclear,.imclear{clear:both;height:0px;visibility :hidden;line-height:0px;font-size:1px;}.imcm .imsc{position:relative;}.imcm .imsubc{position:absolute;visibility:hidden;}.imcm li{list-style:none;font-size:1px;float:left;}.imcm ul ul li{width:100%;float:none !important;}.imcm a{display:block;position:relative;}.imcm ul .imsc,.imcm ul .imsubc {z-index:10;}.imcm ul ul .imsc,.imcm ul ul .imsubc{z-index:20;}.imcm ul ul ul .imsc,.imcm ul ul ul .imsubc{z-index:30;}.imde ul li:hover .imsubc{visibility:visible;}.imde ul ul li:hover .imsubc{visibility:visible;}.imde ul ul ul li:hover .imsubc{visibility:visible;}.imde li:hover ul .imsubc{visibility:hidden;}.imde li:hover ul ul .imsubc{visibility:hidden;}.imde li:hover ul ul ul .imsubc{visibility:hidden;}.imcm .imea{display:block;position:relative;left:0px;fon t-size:1px;line-height:1px;height:0px;width:1px;float:right;}.imcm .imea span{display:block;position:relative;font-size:1px;line-height:0px;}.dvs,.dvm{border-width:0px}/*\*//*/.imcm .imea{visibility:hidden;}/**/</style><!--[if IE]><style type="text/css">.imcm .imea span{position:absolute;}.imcm .imclear,.imclear{display:none;}.imcm{zoom:1;} .imcm li{curosr:hand;} .imcm ul{zoom:1}.imcm a{zoom:1;}</style><![endif]--><!--[if gte IE 7]><style type="text/css">.imcm .imsubc{background-image:url(ie_css_fix);}</style><![endif]-->'); |
well since every CSS selector begins with '.imcm' that means this css applies to html elements with a class of 'imcm' and since no Atahualpa html uses that, it won't effect any of the atahualpa generated HTML.
No will the Atahualpa CSS effect the menu's HTML...without seeing the menu's HTML and not knowing the URL of the site, there is no way to tell |
Could the reason the menu CSS code displays correctly on my web pages and not in the theme be due to the DocType?
All my web pages use this DocType... <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> I'm not sure what the theme uses. |
what version of Atahualpa and WP?
What is the url? |
WordPress 3.3.1, Atahualpa 3.6.4, http://www.selfdefensegearco.com/personal-protection
The menu can be seen on the left sidebar all the way down the page. I put it there so, it doesn't look bad when people view my blog. Normally it is at the top of the sidebar. The menu should look just like the one I have on my retail web site at http://www.selfdefensegearco.com/JPX...ectorBlack.htm Thanks, Glenn |
You need to use firebug in firefox and look at the li's and see what CSS is being applied - remember that CSS cascades if you want the widgets to look different, you need to find the css that is being applied and override it.
|
| All times are GMT -6. The time now is 07:30 PM. |
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.