[trendoman]

I am trying to use default CouchCMS GridCSS layout (from couch\addons\bootstrap-grid\theme\grid12.css) to fix some fields in Admin-panel to a better layout.

Along the way I came up to needing to update the CSS. Is there any better or stock ways to achieve what I want (layout on attached screenshots)?

Meanwhile tode that I think helps extend the grid:

Code: Select all

..
.col-lg-extra-4 {
  margin-right: 33.33333333%;
}
.col-xs-extra-3 {
  margin-right: 25%;
}
.col-xs-extra-2 {
  margin-right: 16.66666667%;
}
.col-xs-extra-1 {
  margin-right: 8.33333333%;
}

Desired effect

expanded-column.png (13.43 KiB) Viewed 3433 times

Hello, trendoman

I don't know your whole CSS. So I can't see what real problem is.
But according to Your Desired effect, your offset need to change like "col-lg-offset-3".

[trendoman]

Hello, trendoman

I don't know your whole CSS. So I can't see what real problem is.
But according to Your Desired effect, your offset need to change like "col-lg-offset-3".

This CSS is in Admin-panel. I found a way adding a new class to grid css (addons/bootstrap-grid/theme/grid12.css) via theme. And I loaded it in "content_form": <cms:admin_load_css "<cms:show k_theme_link />assets/css/grid12_ex.css" />. Offset? See the second screenshot where offset did not help.

Code: Select all

/* Anton S.: GridCSS extension: add space after column to the right */

.col-xs-extra-12 {margin-right: 100%;}
.col-xs-extra-11 {margin-right: 91.66666667%;}
.col-xs-extra-10 {margin-right: 83.33333333%;}
.col-xs-extra-9  {margin-right: 75%;}
.col-xs-extra-8  {margin-right: 66.66666667%;}
.col-xs-extra-7  {margin-right: 58.33333333%;}
.col-xs-extra-6  {margin-right: 50%;}
.col-xs-extra-5  {margin-right: 41.66666667%;}
.col-xs-extra-4  {margin-right: 33.33333333%;}
.col-xs-extra-3  {margin-right: 25%;}
.col-xs-extra-2  {margin-right: 16.66666667%;}
.col-xs-extra-1  {margin-right: 8.33333333%;}
.col-xs-extra-0  {margin-right: auto;}
@media (min-width: 768px) {
    .col-sm-extra-12 {margin-right: 100%;}
    .col-sm-extra-11 {margin-right: 91.66666667%;}
    .col-sm-extra-10 {margin-right: 83.33333333%;}
    .col-sm-extra-9  {margin-right: 75%;}
    .col-sm-extra-8  {margin-right: 66.66666667%;}
    .col-sm-extra-7  {margin-right: 58.33333333%;}
    .col-sm-extra-6  {margin-right: 50%;}
    .col-sm-extra-5  {margin-right: 41.66666667%;}
    .col-sm-extra-4  {margin-right: 33.33333333%;}
    .col-sm-extra-3  {margin-right: 25%;}
    .col-sm-extra-2  {margin-right: 16.66666667%;}
    .col-sm-extra-1  {margin-right: 8.33333333%;}
    .col-sm-extra-0  {margin-right: auto;}
}
@media (min-width: 992px) {
    .col-md-extra-12 {margin-right: 100%;}
    .col-md-extra-11 {margin-right: 91.66666667%;}
    .col-md-extra-10 {margin-right: 83.33333333%;}
    .col-md-extra-9  {margin-right: 75%;}
    .col-md-extra-8  {margin-right: 66.66666667%;}
    .col-md-extra-7  {margin-right: 58.33333333%;}
    .col-md-extra-6  {margin-right: 50%;}
    .col-md-extra-5  {margin-right: 41.66666667%;}
    .col-md-extra-4  {margin-right: 33.33333333%;}
    .col-md-extra-3  {margin-right: 25%;}
    .col-md-extra-2  {margin-right: 16.66666667%;}
    .col-md-extra-1  {margin-right: 8.33333333%;}
    .col-md-extra-0  {margin-right: auto;}
}
@media (min-width: 1200px) {
    .col-lg-extra-12 {margin-right: 100%;}
    .col-lg-extra-11 {margin-right: 91.66666667%;}
    .col-lg-extra-10 {margin-right: 83.33333333%;}
    .col-lg-extra-9  {margin-right: 75%;}
    .col-lg-extra-8  {margin-right: 66.66666667%;}
    .col-lg-extra-7  {margin-right: 58.33333333%;}
    .col-lg-extra-6  {margin-right: 50%;}
    .col-lg-extra-5  {margin-right: 41.66666667%;}
    .col-lg-extra-4  {margin-right: 33.33333333%;}
    .col-lg-extra-3  {margin-right: 25%;}
    .col-lg-extra-2  {margin-right: 16.66666667%;}
    .col-lg-extra-1  {margin-right: 8.33333333%;}
    .col-lg-extra-0  {margin-right: auto;}
}

Hello, trendoman

In the offset-does-not-do.png, it says "col-lg-offset-1". So you can try "col-lg-offset-3".

[trendoman]

Hello, trendoman

In the offset-does-not-do.png, it says "col-lg-offset-1". So you can try "col-lg-offset-3".

It goes more to the right, adding a margin-left: 25%;

[trendoman]

@gem3, why don't you want to test the new theme? You haven't asked for password in pm

Hello, trendoman

Now. I'm still working in a company. So I don't enough time to use your new theme.

When I get enough time to try new theme, I really want to use your new theme!!

[trendoman]

Hello, trendoman

Now. I'm still working in a company. So I don't enough time to use your new theme.

When I get enough time to try new theme, I really want to use your new theme!!

Ok, hopefully by that time there will be more features in it. Thank you for coming to forum and checking out my posts. I am working on something really new and interesting for our community.