- b2evolution CMS Support Forums
- b2evolution Support
- Templates, skins, XHTML and CSS
- [4.0.5] jquery/CSS conflict with skin Natural Remedy [Fixed]
1 amanitam Aug 26, 2011 13:56
My b2evolution Version: 4.0.5
I initially posted the issue over on the Support forum.
Having a think I considered it may be a CSS/Skin issue.
I am using a modified Natural Remedy Skin
http://susanglover.com/theprocess/skins/NaturalRemedy/style.css?v=4.0.5
I hacked the header to include the following:
<script type="text/javascript" src="http://susanglover.com/jscript/js/jquery.js"></script>
<script type="text/javascript" src="http://susanglover.com/jscript/js/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="http://susanglover.com/jscript/css/jquery.lightbox-0.5.css" media="screen">
Direct URLs to scripts:
http://susanglover.com/jscript/js/jquery.js
http://susanglover.com/jscript/js/jquery.lightbox-0.5.js
http://susanglover.com/jscript/css/jquery.lightbox-0.5.css
Script (lightbox) functions. You can see it in action at: http://susanglover.com/theprocess/blog1.php/this-is-a-tutorial-not
(still need to tweak the lightbox to include Close function)
The Problem:
When logged into the BO, the toolbar hover goes tits up and the pulldown menus are permanently ... pulled down!
Tested same scripts and config on Blog B with another skin: Toolbar works fine. http://susanglover.com/theprocess/blog2.php/the-stump
I've validated all the pertinent CSS files. Nat Remedy pulled more errors but nothing unlivable (I think)
I've had a look at the CSS files but don't see a glaring conflict such as a class or styling with the same name.
Any help, much appreciated.
Cheers,
Susan
*EDIT* Moved this bit of CSS from the post
<style type="text/css">
/* jQuery lightBox plugin - Gallery style */
#gallery {
background-color: #;
padding: 2px;
width: 200px;
}
#gallery ul { list-style: none; }
#gallery ul li { display: inline; }
#gallery ul img {
border: 5px solid #3e3e3e;
border-width: 5px 5px 5px;
}
#gallery ul a:hover img {
border: 5px solid #fff;
border-width: 5px 5px 5px;
color: #fff;
}
#gallery ul a:hover { color: #fff; }
</style>
into its own CSS doc at http://susanglover.com/jscript/css/lightboxgallery.css
made the lightbox hover function as intended. Did nothing to sort out the Toolbar
Screen Capture
http://susanglover.com/images/lightbox_scap.jpg
Fixed
http://forums.b2evolution.net/viewtopic.php?p=109642#109642