Hello,
how can I reduce the line space in the cat menu?
All other menus do not have a line space except the VM's.
Thank you
[attachment cleanup by admin]
If Firebug does not help with a solution you can edit the layout files in /modules/mod_virtuemart_category/tmpl/ and add a new class and an overriding css definition.
Hello Kelvin,
thank you for your response and help.
After hours of searching I finally found what this cause. The bullets I use cause a line brake in the table of the category box.
I wasn't able to figure out which file I have to modify and if this will be overriden by any future updates.
No one?
MAD
You think that waiting 3 days for a reply is too much.....
You may consider posting in paid section if you require things sorted out at your pace.
Hutson,
taking the time to write a rebuke instead of thinking I may can help this person is awesome for a moderator.
Or a better way would be not to write anything.
My response was intended to stop you posting against you original question to effectively bump it. And it would be remiss of me, as an unpaid moderator, to not try to prevent such practices.
I believe jenkinhill pointed you to the options for a solution on the same day as your original post.
If Firebug does not help with a solution you can edit the layout files in /modules/mod_virtuemart_category/tmpl/ and add a new class and an overriding css definition.
Any override you applied would be overwritten by updates to this module. So you would need to save a copy to re-apply.
Or you could change your bullets
The solution would be to reduce the size of your bullets
Hello Hutson,
thank you, but I already tried this and it is not in the VM CSS or template CSS.
I am trying to find the VM tmpl file which creates the category menu box.
Can you please tell me which one it is?
Thank you
Do you have a link to your site?
Are we talking about the same thing i.e
mod_virtuemart_category
Assuming this is about the category menu module, the template files for the module are in modules/mod_virtuemart_category/tmpl/ - if you edit a file be sure to use the edited file as a template override. The template files also show the links to the applied css files (eg modules/mod_virtuemart_category/css)
http://docs.virtuemart.net/tutorials/33-templating-layouts.html and http://www.ostraining.com/blog/joomla/overrides
This looks to be a CSS issue
There are no additional <br/> in the code
Great helpful post from jenkinhill regarding overrides - if you find you need them
I add an id to the <ul> code of each template so I can add style the layout to suit the site, so I do use template overrides.
I leave the code to do what it naturally does if I can.
So either use the
module suffix or the
class suffix then you get to style the CSS as you wish, leaving the code alone.
Class suffix gets added (example in cat module)
<ul class="VMmenu<?php echo
$class_sfx ?>" id="<?php echo "VMmenu".$ID ?>" >
Thank you guys.
I don't think it is in the VM CSS or template CSS. I renamed and deleted the VM CSS and palyed with the template CSS and the space was still there.
When I took the link to the bullet image out, the space disappears.
The weird thing is that the line spaces in all other boxes are fine except in the VM box. So I think it has something to do with the VM tmpl file which is responsible for this box.
I am trying right now to figure out how to do the template override. VM2 is totally different than VM 1.1x.
post a link, it will be simple to sort out
I have to install it first on the server. Right now it is local on xampp.
Darn!
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.
<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]
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
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.
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!)
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.
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]
So I guess that this is fixed, Yes?
Not fixed. I am still not able to tell vmsite-ltr.css to use the style I want.
Just give the module a suffix and copy the style you want into the base site template and adjust for the new suffix
Thats what I am trying, but I think I am doing something wrong and I cant find a how to anywhere on the internet.
Post the code that is showing in firebug around this menu and the css that is being applied
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
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
.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
ul.VMmenu, .VMmenu ul, .VMmenu li {
background-image: none !important;
list-style-type: none !important;
padding: 2px;
}
VmClose
.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/img594/4268/vmmenumenuvmmenu.jpg)
http://imageshack.us/a/img13/2107/vmclose.jpg (http://imageshack.us/a/img13/2107/vmclose.jpg)
http://imageshack.us/a/img594/4268/vmmenumenuvmmenu.jpg (http://imageshack.us/a/img594/4268/vmmenumenuvmmenu.jpg)
[attachment cleanup by admin]
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;
}
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]
Ah but at least we have progress!!
.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;
}
Get rid of this line to see the effect!
EDIT:
With the line
.art-block ul > li:before {
bottom: 2px;
[i][b]content: url("../images/blockbullets.png");[/b][/i]
display: inline-block;
font-size: 0;
line-height: 0;
margin-left: -16px;
margin-right: 6px;
position: relative;
vertical-align: middle;
}
out I still get double bullets.
[attachment cleanup by admin]
I really need to see live to be of much more help
Would it help if I send you the template?
Unfortunately I do not have time resources to be able to install a local copy of your site in my testing domain. If the site coudl be put on a publicly available server, I would be happy to help further.
I will set it up today and PM you.
Thank you
Thank you all for the help.
Problem solved