Recent Topics

[4.0.5] jquery/CSS conflict with skin Natural Remedy [Fixed]

Started by on Aug 26, 2011 – Contents updated: Aug 26, 2011

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


Form is loading...

powered by b2evolution free blog software – This forum is powered by b2evolution CMS, a complete engine for your website.