[SOLVED] Line Space in Category Menu

[MAD King]

I have to install it first on the server. Right now it is local on xampp.

[AH]

Darn!

[MAD King]

I am close to figure it out.
I wrote LINE BREAK in the code of modules/mod_virtuemart_category/tmpl/default.php and it shows it right next to the bullet.
So I think there is some class specification missing.

Code Select Expand

<li <?php echo $active_menu ?>>LINE BREAK
<div >
<?php echo JHTML::link($caturl, $cattext);
if ($category->childs) {
?>
<span class="VmArrowdown"> </span>
<?php
}
?></div>




[attachment cleanup by admin]

[AH]

Are you using firefox as your browser?

Ar you using firebug plugin for firefox?

You can easily see with firebug the css

And (one of the best and most usful features for anyone messing with their CSS) you can manipulate the on page CSS to identify what changes to the actual css are required for the effect you want.

You should not really need to adjust the code in order to see what is being output to the HTML page

[MAD King]

I am using FF, IE and Opera.
In FF 21.0 is already something similar to firebug ( or did they included it now?)
No extra add on needed. So, yes, I am using kind of firebug. But it does not give me anything from the CSS.

[AH]

Firebug is better at finding css and adjusting than the included CSS displayer in FF21

It must be CSS (I , of course, will be proved incorrect as soon as I post this!)

[MAD King]

I installed firebug and I have say that you are right about. It show by far more than the FF included one.
Now I can see that the template.css is just forcing its style in when I remove the VMmenu style in the vmsite-ltr.css to leave it empty.

Code Select Expand

ul.VMmenu,.VMmenu ul,.VMmenu li{}


firebug also shows a VmClose class which I can't find in the css file.

EDIT:

Here is a picture of VMClose which template.css forcing the style.



[attachment cleanup by admin]

[AH]

So I guess that this is fixed, Yes?

[MAD King]

Not fixed. I am still not able to tell vmsite-ltr.css to use the style I want.

[AH]

Just give the module a suffix and copy the style you want into the base site template and adjust for the new suffix

[MAD King]

Thats what I am trying, but I think I am doing something wrong and I cant find a how to anywhere on the internet.

[AH]

Post the code that is showing in firebug around this menu and the css that is being applied

[MAD King]

Hello Andrew,

thank you so much. You are a great moderator.

I tried to add this to the Module Class Suffix and Menu Class Suffix:  _menu VMmenu
I added then

Code Select Expand

div.VMmenu
{
  content: url('../images/blockbullets.png');
  margin-right: 6px;
  bottom: 2px;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  font-size: 0;
  line-height: 0;
  margin-left: 16px;
}

to the template.css, but it doesn't work.

Here are the codes what firebug shows. I also added to each of the codes a screenshot.

For

art-blockcontent

Code Select Expand

.art-blockcontent {
    border: 1px solid #9CAFC4;
    color: #303F50;
    font-family: Arial,'Arial Unicode MS',Helvetica,Sans-Serif;
    font-size: 13px;
    line-height: 100%;
    margin: 0 auto;
    padding: 0;
}

VMmenu _menu VMmenu

Code Select Expand

ul.VMmenu, .VMmenu ul, .VMmenu li {
    background-image: none !important;
    list-style-type: none !important;
    padding: 2px;
}

VmClose

Code Select Expand

.art-block ul > li:before {
    bottom: 2px;
    content: url("../images/blockbullets.png");
    display: inline-block;
    font-size: 0;
    line-height: 0;
    margin-left: -16px;
    margin-right: 6px;
    position: relative;
    vertical-align: middle;
}

EDIT: Just noticed that half of the image views are missing.
Here are links to the full size images

http://imageshack.us/a/img594/4268/vmmenumenuvmmenu.jpg
http://imageshack.us/a/img13/2107/vmclose.jpg
http://imageshack.us/a/img594/4268/vmmenumenuvmmenu.jpg

[attachment cleanup by admin]

[AH]

Phew that helps

The LI has a  content: setting. This is not a great thing and I have never used it.

Try getting rid and using "background"

Style the "a" attribute of the menu

.VMmenu ul li a{
  background: url("../images/blockbullets.png") no-repeat scroll 1px center transparent;
  color: #d01313;
  display: block;
  font-weight: bold;
  padding: 5px 9px 5px 18px;  (to be the same as required to show the bullet)
  text-decoration: none;
}

[MAD King]

Thank you Andrew. Now I am getting double bullets.
No matter where I put the code in. Template.css or vmsite-ltr.css
That is really weird. Something is not overriding.


[attachment cleanup by admin]