Page 1 of 1

How to customize layout

Posted: 04 Sep 2018, 03:41
by loengkhuoch
Dear sir or madam,

I have problem with customize layout, could you give me some information, please.

Thanks

Re: How to customize layout

Posted: 05 Sep 2018, 12:32
by merve7
How do you want to customize layout? Could you give me an example or say me your problem?

Re: How to customize layout

Posted: 06 Sep 2018, 03:49
by loengkhuoch
merve7 wrote:
05 Sep 2018, 12:32
How do you want to customize layout? Could you give me an example or say me your problem?
I see in the California theme, there are many themes, like blue, green, grey, etc.
I want to resize the height "breadcrumb", I need to go "assets->layout->css->theme name.css (blue). It works well, but when switch to grey theme, the "breadcrumb" will come to original layout.
what is the method to change only one layout, and it change all theme in California.

Thanks,

Re: How to customize layout

Posted: 10 Sep 2018, 09:01
by merve7
You don't need to change the codes in the themename.css files. You need to change in "assets->sass->layout->*.scss " files or override in your_style.scss file or styles.css for your want to changes. For example to resize the height "breadcrumb";
1. change min-height in assets->sass->layout->_content.scss

Code: Select all

.layout-wrapper {
    .layout-main {
        @include transition(margin-left $transitionDuration);
        .route-bar {
            @include clearfix();
            @include border-box();
            min-height: 31px;  //you can change this number
            //other code
And build your changes with sass -w src/assets --sourcemap=none

2. add your stylesheet like the below code (src/styles.css)

Code: Select all

.layout-wrapper .layout-main .route-bar {
    min-height: 60px;
}
We recommend you the second solution because if layout files change in a release, your changes in the first solution is removed.