List Manager Forum
css questions
Hello,
You can find css original file unzipping module mod_listmanager and in assets/css you can find default.css.
If you want to remove top bar, the best option is add display:none to .lm_toolbar in css file :
.lmtoolbar{
display:none;
}
Also if you want to remove backgrounds see .lm_trblack and .lm_trwhite in css file.
Hope this helps. Regards,
Moonsoft Team
Edited by MSTeam - 12.12.2011 11:48
Thank you very much!
Toolbar and backgrounds removed successfully but the whole list is now quite far down - is there anything I can do about this?
Also the titles of the lists are still showing despite of me choosing "no" for menu title in the menu item edit. (I'm probably just being stupid - sorry to bother you with these problems!) I just want the list first thing in my content area.
Thanks a lot for your help!
Hello,
about the titles, if you already have checked 'no titles' for your menu, maybe what you are seeing are the own title and description of the list, not the module or component title. Please go to your list configuration and delete fields Name and Description of your list, in order to remove all titles.
And about the space, you can try to add a border to the main div (lm_general), so you could find out if the space you're getting is inside listmanager or due to any margin outside the component. Before the list content, and once the titles are removed, you only can find the div with form section (lm_add), lm_form (which is already hidden), and the toolbar, so display:none should remove any blank lines at any of these sections.
Hope this helps, best regards
Moonsoft Team
Hello again,
Thank you very much for your help! Inserting "display: none;" solved most issues, but I had to write
.lm_info{
font-size: 1em ;
margin-bottom:-22px;
}
in order to have the text all the way up to the top. Does that make sense to you?
A few more questions I'm afraid - how can I align all content of each section in the top? I changed all the vertical-aligns that I could find to "top" (from middle" but they don't seem to change anything.
Also, can I have one of the columns in bold? Or does that only work for rows?
And when I insert a border (I've taken all others off):
.lm_list_table tr { border-bottom: 1px solid #7aaaaa;}
they only show in Google Chrome but not in Firefox. Why could that be?
And lastly, is it possible to change the date to a different format from 2011-12-30? I'd prefer it to show up as 30 December 2011.
Many thanks!
Edited by yamamotojoomla - 18.12.2011 19:16
Hello,
we're not using any other css to apply styles to the extension, so if you're getting some css properties with unexpected values, we suggest to look for your template styles to check if the tables, divs...etc, have inherited some properties from your template. If this is your case, then you only have to override them at extension css.
About styling columns, we don't know if it is possible to do such a definition with css, there is a tag called colgroups, but not even sure it works for all navigators and properties of css.
Date format is defined when creating calendar objects, so you should search for this block:
Calendar.setup({inputField:\'fld_'.$seed.$field.'\',ifFormat:\'%Y-%m-%d\',button:\'fld_'.$seed.$field.'_img\'});
and modify the ifFormat parameter (for example, to get 25-12-2011, the line would be as follows:)
Calendar.setup({inputField:\'fld_'.$seed.$field.'\',ifFormat:\'%d-%m-%Y\',button:\'fld_'.$seed.$field.'_img\'});
The file you have to edit is different for the module or component view:
Component view:
joomla\components\com_listmanager\views\listmanagerfront\tmpl\default.php
Module view:
joomla\modules\mod_listmanager\tmpl\default.php
Hope this helps.
Best regards
Moonsoft Team
Hello,
For some reason the date display thing hasn't worked yet but I'll try again.
In the meantime could you explain to me how the column widths of the list can be adjusted - at the moment the left column is extremely short. And I'd like to align the content of the list top but it doesn't work! (when I change "vertical-align" to "top" it doesn't change anything.
Attached is my css in case it helps you understand what I'm doing wrong.
Many thanks!
.lm_selectable { cursor: pointer;}
.lm_general{font: normal 0.90em verdana,tahoma, arial, sans-serif;}
.lm_general .lm_name{
font-size: 12px ;
font-weight:bold;
}
.lm_info{
font-size: 1em ;
margin-bottom:-22px;
}
.lm_add{
float:left;
margin-bottom: 10px ;
}
.lm_message{
visibility: hidden;
float:left;
text-align: center;
margin-left: 100px ;
margin-bottom: 10px ;
padding-left: 10px ;
padding-right: 10px ;
border:1px solid;
border-color:#ffcc00;
border-radius: 10px 10px 10px 10px;
}
.lm_divmessage{
visibility: hidden;
vertical-align:middle;
text-align: center;
align:center;
font-size: 1.1em;
font-weight: bold;
}
.lm_form{
clear:both;
/*background: #f3f3fa;*/
background:#fcfcfc;
border-radius: 10px 10px 10px 10px;
border: 1px solid #DDDDDD;
margin-left: 3px ;
margin-right: 3px ;
padding-top:10px;
text-align: center;
width:97%;
padding-bottom:5px;
*padding-bottom:7px;
}
.lm_form td{ padding-right:5px;}
.lm_form .inputbox{
border-radius: 5px 5px 5px 5px;
border: 1px solid #DDDDDD;
background: url("../img/content_bg.gif") repeat-x scroll 0 0 transparent;
padding: 2px;
}
.lm_form .inputbox:focus{
border-radius: 5px 5px 5px 5px;
border: 1px solid #DDDDDD;
background: url("../img/content_bg.gif") repeat-x scroll 0 0 transparent;
}
.lm_tdseparation{height:5px}
.lm_asterisk{
color: #f72929;
padding-right:2px;
}
.lm_asterisk_text{
font-size: 0.875em ;
padding-right:4px;
}
.lm_list_tableform{
border : 0px;
margin-bottom: 5px ;
margin-left:auto
margin-right:auto;
text-align:center;
width:100%;
}
.lm_list_tableform tr { border : 0px; }
.lm_list_tableform td { border : 0px; }
.lm_list_tableform .lm_nameform {
text-align:right;
width:35%;
font-weight: bold;
vertical-align:top;
}
.lm_list_tableform .lm_value {
text-align:left;
width:65%;
}
.lm_list_tableform .lm_value img {
vertical-align:middle;
}
.lm_list_tableform .lm_value input {
vertical-align:middle;
}
.lm_toolbar{
clear:both;
padding-top:3px;
padding-bottom:4px;
overflow:hidden;
font-size:0.90em;
}
.lm_toolbar img { vertical-align:middle; }
.lm_toolbar input { vertical-align:middle; }
.lm_search{
display: none;
float:left;
*margin-top:5px;
}
.lm_search .lm_toolbarleft{ font-size:0.90em; }
.lm_nav{ float:right; display: none;}
.lm_nav .lm_nav_text{
float:left;
margin-top:3px;
padding-right:5px;
*padding-top:4px;
*margin-left:-35px;
}
.lm_nav .lm_toolbar{ font-size:0.90em;}
.lm_nav img{
padding-left:2px;
padding-right:2px;
}
.lm_nav .lm_toolbarnoedit{ font-size:1em;}
.lm_result{ clear:both;}
.lm_list_table{
border : 0px;
margin-bottom: 5px ;
margin-left:auto
margin-right:auto;
text-align:left;
width:100%;
border-collapse:separate;
}
.lm_list_table tr { border-bottom: 1px solid #7aaaaa;}
.lm_list_table td { border : 0px; }
.lm_tableheader {
display: none;
background: url("../img/content_bgnoedit.gif") repeat-x left bottom #FFFFFF;
border-radius: 0px 0px 0px 0px;
border: 1px solid #DDDDDD;
text-align:center;
}
.lm_tableheader img{
vertical-align:middle;
padding-left:5px
}
.lm_tableheader_empty{ width:65px; }
.lm_trblack {
background:none;
height:25px;
}
.lm_trblack td {
padding:4px;
*padding:1px;
}
.lm_trwhite {
background:none;
height:25px;
}
.lm_trwhite td {
padding:4px;
*padding:1px;
}
.lm_trtotal {
border: 1px solid #111111;
background:#eeeeee;
font-weight:bold;
height:25px;
}
.lm_trtotal td {
border: 1px solid #111111;
padding:4px;
*padding:1px;
}
.lm_tr_hover {
background:none;
}
.lm_trwhite .lm_lasttd{
background-position:center;
text-align:center;
padding:0px 8px 0px 0px;
*padding:0px 5px 0px 0px;
*width:67px;
}
.lm_trblack .lm_lasttd{
text-align:center;
background-position:center;
padding:0px 8px 0px 0px;
*padding:0px 5px 0px 0px;
*width:67px;
}
.lm_lasttdon{ background: url("../img/bgoptionson.png") no-repeat scroll left top #FFFFFF; }
.lm_lasttdoff{ background: url("../img/bgoptions.png") no-repeat scroll left top #FFFFFF; }
.lm_trblack .lm_lasttd img{
float:right;
vertical-align:top;
padding-right:3px;
}
.lm_trwhite .lm_lasttd img{
float:right;
vertical-align:top;
padding-right:3px;
}
.lm_button_save {
background: url("../img/btsave.gif") no-repeat scroll left top #FFFFFF;
border: 1px solid #DDDDDD;
color: #444444;
cursor: pointer;
line-height: 1.2em;
padding: 3px 5px 3px 15px;
}
.lm_button_save:hover {
background: url("../img/btsaveon.gif") no-repeat scroll left top #FFFFFF;
color: #000000;
}
.lm_button_save:active { border: 1px solid #DDDDDD; }
.lm_button_save:focus { border: 1px solid #DDDDDD; }
.lm_button_cancel {
background: url("../img/btcancel.gif") no-repeat scroll left top #FFFFFF;
border: 1px solid #DDDDDD;
color: #444444;
cursor: pointer;
line-height: 1.2em;
padding: 3px 5px 3px 15px;
}
.lm_button_cancel:hover {
background: url("../img/btcancelon.gif") no-repeat scroll left top #FFFFFF;
color: #000000;
}
.lm_button_cancel:active { border: 1px solid #DDDDDD; }
.lm_button_cancel:focus { border: 1px solid #DDDDDD; }
.lm_buttonadd {
background: url("../img/btadd.gif") no-repeat scroll left top #FFFFFF;
border: 1px solid #DDDDDD;
color: #444444;
cursor: pointer;
line-height: 1.2em;
padding: 3px 5px 3px 15px;
}
.lm_buttonadd:hover {
background: url("../img/btaddon.gif") no-repeat scroll left top #FFFFFF;
color: #000000;
}
.lm_buttonadd:active { border: 1px solid #DDDDDD; }
.lm_buttonadd:focus { border: 1px solid #DDDDDD; }
.lm_exportpdf{
font: normal 0.875em tahoma, arial, sans-serif;
margin-top: 0px ;
margin-bottom: 3px ;
margin-left: auto ;
margin-right: 3px ;
padding-left: 15px ;
float:right;
cursor: pointer;
}
/* Tooltips */
.tool-tip {
float: left;
background: #ffc;
border: 1px solid #D4D5AA;
padding: 5px;
max-width: 200px;
text-align:left;
}
.tool-title {
padding: 0;
margin: 0;
font-size: 100%;
font-weight: bold;
margin-top: -15px;
padding-top: 15px;
padding-bottom: 5px;
background: url(../../system/images/selector-arrow.png) no-repeat;
}
.tool-text {
font-size: 100%;
margin: 0;
}
.lm_progress{
border: 1px solid #555;
width: 100px;
background: url("../img/progressoff.jpg") repeat-x;
}
.lm_progresson{
font: normal 0.875em tahoma, arial, sans-serif;
font-weight: bold;
background: url("../img/progresson.jpg") repeat-x;
}
.lm_text{
}
.lm_number{
text-align:right;
}
.lm_option{
color: #010101;
}
.lm_calendar{
}
.lm_value_title{
font-weight: bold;
}
Hello,
the table which contains the list is a standard html table , which has the
lm_list_table class. Each row is styled to get different backgrouds with classes
lm_trblack and lm_trwhite
If you want to style your table from scratch we suggest to delete all classes regarding the table, and begin building your css. At the default css we have some paddings defined that maybe are creating your alignment not to get to the top. Without component styling, you can debug the result to check if your template is applying some classes to all tables that you may want to override. What we use is firefox+firebug utility to dinamically test styles.
About width of the columns, there is not a value set by default, so they spread along space available. You can try to fix the columns width (for ex. 250px each) when creating styles for tm_trblack td and tm_trwhite td.
Hope this helps
Best regards
Moonsoft Team
Hello,
I accidentally massacred the default css - where can I find another original?
Also I wondered how I simplify the top bar, I don't need the search box or the next/previous or "show all" buttons - how can I remove them? I just want a simple sortable list without background.
Thank you very much for your help!