Open Collective
Open Collective
Back to conversations

Small interface with some CSS

Eric Lugtigheid

Posted on January 14, 2021

I like the layout and structure but wondering, is there a way to make the interface smaller and less screen consuming? Yes there is, look below...

Eric

Martin Mueller

Posted on January 14, 2021

Currently not, but good point! 

OpenCutList is used in many different setups (from small laptop screens in the workshop to the multi-large screen designer workplace), one size does not fit all purposes.

Eric Lugtigheid

Posted on January 14, 2021

Make a backup first of  ''ladb-opencutlist.min.css''

I've been looking in the css file (ladb-opencutlist.min.css) and added at the Bottom!!!

(file path on Windows: C:\Users\Owner\AppData\Roaming\SketchUp\SketchUp 2018\SketchUp\Plugins\ladb_opencutlist\css)



* {
  font-size: 10px !important;
  margin: 0px !important;
}
*:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: -14px !IMPORTANT;
    margin: 0px !important;
}
.ladb-bottombar>ul{display:block!important;}

.table>thead>tr>th,
.table>tbody>tr>th,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>tbody>tr>td,
.table>tfoot>tr>td {
  line-height: 1;
  vertical-align: top;
  border-top: 1px solid #ddd;
  padding: 0px !IMPORTANT;

.ladb-minitools a {
    width: 10px;
}
.btn {
    padding: 2px 2px;
    line-height: 1;
}
.ladb-slide .ladb-container {
    padding: 26px 0px;
}
.ladb-bottombar>ul li.ladb-highlighted-sponsor>a {
    color: #fff;
    background-color: #f77f00;
}
.ladb-bottombar {
    min-height: 0px;   
    padding: 1px 1px!important;
}
.ladb-material-type-icon {
margin:1px !important;
    display: inline-block;
    width: 16px;
    height: 16px;
    line-height: 16px;

}
.ladb-bottombar>ul li>a {
    background-color: white;
    line-height: 10px;
    border: 1px solid #aaa;
    padding: 2px;
}
.modal-dialog {
    left: 90px;
    width: 70%;
}
.modal-body {
    position: relative;
    padding: 0px;
}
.ladb-part-thumbnail {
    padding: 5px;
    width: 50%;
    height: 50%;
    margin: auto !important;
}
.nav-tabs.nav-justified>li {
    float: left;
    margin: 1px!important;
}
.ladb-slide .ladb-header {  
    padding: 0px 0px; 
}
.ladb-leftbar .ladb-toggle-handle, .ladb-leftbar a {
    height: 50px; 
    z-index: 1;
}
.ladb-leftbar .ladb-toggle-handle.ladb-sponsored, .ladb-leftbar a.ladb-sponsored {
    width: 90px;
    height: 50px;
}
.nav.nav-tabs li .ladb-fake-tab, .nav.nav-tabs li>a {
    padding: 1px 5px;
}

and the UI gets very compact....
Change the font-size: to your needs...

Enjoy 

Boris Beaulant

Posted on January 27, 2021

Extremely compact solution :P

Conversation followers

Tags

ui