CMSB v3.66 Beta (Admin Shortcuts & Developer Console)

14 posts by 4 authors in: Forums > CMS Builder
Last Post: March 21, 2024   (RSS)

  • Archived  

By Deborah - March 19, 2024

Jeff,

I noticed the new style rule also is applied to the list page thumbs. There's more width in the image table column on the list page, so those images were much larger than desired.. I added max-width to tame them.

.img_preview {
width: 100%;
max-width: 300px;
height: auto;
}

~ Deborah

  • Archived  

By Dave - March 19, 2024

Hi All, 

Yea, I like that CSS solution, thank you.  I'll remove the plugin filter and use the suggested CSS class and provide these examples in custom.css.readme: 

/* CMS List View - increase image preview width */
.img-preview {
    width: 100%;
    height: auto;
}

/* Example: CMS List View - increase image preview width for "articles" table */
table[data-table='articles'] .img-preview {
    width: 200px;
    height: auto;
}

I've also increased the default thumbnail sizes a little bit and removed the padding on their containers.  Should have another beta out with that soon.

Dave Edis - Senior Developer
interactivetools.com
  • Archived  

By kitsguru - March 19, 2024

Here is more custom css you can use:

/* make the list action taller */
.listActions {
    line-height: 2.1 !important;
}

/* make the list action look like a button */
.listActions >  a {
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 3px;
    background: #ddd;
    white-space: nowrap;
}

/*
    limit the width of a column in editor list
    [data-table="blog"] can be use to limit it to a table
*/
[data-column="start_date"],
[data-column="permalink"],
[data-column="name"],
[data-column="title"] {
    max-width: 20rem;
}

/*
    limit the width of a select column in the editor list
    when inlineEditing plugin is used
    use ire__columnName
    [data-table="blog"] can be used to limit it to a table
*/
select[name*="ire__lookup_option"],
select[name*="ire__location"] {
    min-width: 15rem;
    width: 100%;
    max-width: 20rem;
}

/* increase font size for extra wide monitor */
@media (min-device-width: 1921px) {
    body,
    ul.main-navigation-menu li > ul > li > a {
        font-size: 1.6rem !important;
        line-height: 1.25 ;
    }
}
Jeff Shields