Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

joomla ja_purity problem drop down menu

Posted on 2010-08-20
9
Medium Priority
?
1,538 Views
Last Modified: 2012-06-27
I modified the ja_purity template to add user modules under the menu.  I copied the spotlight code from the index.php and pasted it where I want the new modules to appear and also modified the the templatedetails.xml file.  It works except for an issue with the drop down menu.  The background color does not appear when the menu is over my new modules.  If the menu extends lower than my new module the color appears on those parts below the new modules.  How do I fix this?
You will see from the image that the menu item for google is okay and a small part of the menu item above it.


Modified templatedetails.xml

<positions>
<position>hornav</position>
<position>user6</position>
<position>user7</position>
<position>user8</position>
<position>user9</position>
<position>breadcrumbs</position>
<position>banner</position>
<position>left</position>
<position>right</position>
<position>top</position>
<position>user1</position>
<position>user2</position>
<position>user3</position>
<position>user4</position>
<position>user5</position>
<position>footer</position>
<position>syndicate</position>
<position>debug</position>
</positions>

modified index.php
<?php
$spotlight = array ('user6','user7','user8','user9');
$botsl = $tmpTools->calSpotlight ($spotlight,99,22);
if( $botsl ) :
?>
<!-- BEGIN: TOP SPOTLIGHT -->
<div id="ja-botslwrap">
<div id="ja-botsl" class="clearfix">

<?php if( $this->countModules('user6') ): ?>
<div class="ja-box<?php echo $botsl['user6']['class']; ?>" style="width: <?php echo $botsl['user6']['width']; ?>;">
<jdoc:include type="modules" name="user6" style="xhtml" />
</div>
<?php endif; ?>

<?php if( $this->countModules('user7') ): ?>
<div class="ja-box<?php echo $botsl['user7']['class']; ?>" style="width: <?php echo $botsl['user7']['width']; ?>;">
<jdoc:include type="modules" name="user7" style="xhtml" />
</div>
<?php endif; ?>

<?php if( $this->countModules('user8') ): ?>
<div class="ja-box<?php echo $botsl['user8']['class']; ?>" style="width: <?php echo $botsl['user8']['width']; ?>;">
<jdoc:include type="modules" name="user8" style="xhtml" />
</div>
<?php endif; ?>

<?php if( $this->countModules('user9') ): ?>
<div class="ja-box<?php echo $botsl['user9']['class']; ?>" style="width: <?php echo $botsl['user9']['width']; ?>;">
<jdoc:include type="modules" name="user9" style="xhtml" />
</div>
<?php endif; ?>

</div>
</div>
<!-- END: TOP SPOTLIGHT -->
<?php endif; ?>

Open in new window

menuscreenshot.png
0
Comment
Question by:iepaul
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 4
9 Comments
 
LVL 9

Expert Comment

by:Snarfles
ID: 33484038
It looks like a background transparancy thing which means it is a css issue.

filter: alpha(opacity=65);

this is how to make a background semi transparent so look for that in the css for the drop down menu
0
 

Author Comment

by:iepaul
ID: 33484081
Could not find any reference to opacity.  I did find the following which I think is whats used -

#ja-mainnav ul.menu li ul {
      border: 1px solid #2A84B1;
      background: url(images/opaque.png);
}

The menu works fine with the new user modules disabled so it is definitely something to do with them and most likely is the CSS.


menuscreenshotok.png
0
 
LVL 9

Expert Comment

by:Snarfles
ID: 33484155
Have you checked the opaque.png file for transparency because png allows for it.
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:iepaul
ID: 33484164
It works everywhere else except when I use the new modules I created.
0
 
LVL 9

Expert Comment

by:Snarfles
ID: 33484166
Sorry I just want to clarrify that it is the fact that the menu background isn't solid that you need help with isnt it? Want to make sure I'm thinking about the right problem.

If the above doesn't help can you provide a link to look at?
0
 

Author Comment

by:iepaul
ID: 33484209
No problem.  Unfortunately it is not available on the web and would take a bit of time to setup.  You will see in the second screenshot above that Google and Golden Pages have a light blue transparent background.  The Contractor Directory was the item the mouse was hovering over and is darker.

In the first screenshot you will see that the Google menu item and part of the Golden Pages have the correct lighter transparent colour, then rest of the menu has a darker blue.  It is as if the background for the menu is going behind my new modules.

You will also notice in the first screenshot that Eircom Phonebook is not transparent, that is correct as that is where the mouse was hovering.

Is it possible that the opaque.png is being used for the background of the menu but has a lower priority than the new modules?
0
 
LVL 9

Accepted Solution

by:
Snarfles earned 2000 total points
ID: 33484273
Ok so what you want is the lighter colour that 'google' has in the first menu to be the colour for the whole menu?

I'm unsure if you know what transparency means so just to clarify the meaning of transparancy is that it is see through..which is what all of your menu backgrounds are except for the one the mouse is over. What the mouse is over is called the 'hover' state. So in css you can see some styles for the element as it is normally as well as another style for its hover state.

If this "#ja-mainnav ul.menu li ul" is indeed the css for the menu element (I only say that because I can't confirm myself) then there will also be a "#ja-mainnav ul.menu li ul:hover" one which will contain the style for when the mouse is hovering over it.

So.... what all that means is that the images/opaque.png image is transparent... and the image that is applied in the "#ja-mainnav ul.menu li ul:hover" style will not be.

What you are probably better off doing is removing the background url from both of these styles and replacing it with a solid colour background property

The background colour property is like so

background-color:#b0c4de;

so... for an example what you would have is....

#ja-mainnav ul.menu li ul {
      border: 1px solid #2A84B1;
      background-color:#b0c4de;
}

and

#ja-mainnav ul.menu li ul:hover {
      border: 1px solid #2A84B1;
      background-color:#b0c4de;
}

Just change the colours to what you need and it should all be solid colours in your menu.
0
 

Author Comment

by:iepaul
ID: 33484445
I replace the image with a solid color but the menu backgrounds were then brown, it looks like it also has another image in the default css.  So I then decided to remove the transparency from the opaque.png which fixes the problem.  It would have been nice to keep the transparency but it probably not the effort.

Thanks for your help.
0
 
LVL 9

Expert Comment

by:Snarfles
ID: 33484492
No worries, glad its fixed :)
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Welcome Friends, This is the tutorial for how to create new simple module in joomla 1.5. In the module has two important files. One is XML file and another file is PHP controller file. First you need to create the XML file. (CODE) …
Have you ever wanted to use that sweet jQuery gallery plugin on your Joomla site but couldn't get it working due to jQuery conflicts or your lack of knowledge about what's under the Joomla hood? This article will step you through the process of impl…
Do you want to know how to make a graph with Microsoft Access? First, create a query with the data for the chart. Then make a blank form and add a chart control. This video also shows how to change what data is displayed on the graph as well as form…
We’ve all felt that sense of false security before—locking down external access to a database or component and feeling like we’ve done all we need to do to secure company data. But that feeling is fleeting. Attacks these days can happen in many w…
Suggested Courses

721 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question