1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    2
    Vote Rating
    0
    yuval.a is on a distinguished road

      0  

    Default theming problem border 1px all over

    theming problem border 1px all over


    hi i started a new theme didn't change any variables yet
    but i see i have border 1px all over the place

    i noticed that under ex4 theme there is _panel.scss
    i have border 1px hard coded

    @include extjs-panel-ui(
    'default',


    $ui-base-color: $panel-base-color,
    $ui-border-width: $panel-border-width,
    $ui-border-color: $panel-border-color,
    $ui-border-radius: $panel-border-radius,

    $ui-header-color: $panel-header-color,
    $ui-header-font-size: $panel-header-font-size,
    $ui-header-font-weight: $panel-header-font-weight,
    $ui-header-border-color: $panel-header-border-color,
    $ui-header-background-color: $panel-header-background-color,
    $ui-header-background-gradient: $panel-header-background-gradient,


    $ui-body-color: $panel-body-color,
    $ui-body-border-color: $panel-body-border-color,
    $ui-body-border-width: 1px,
    $ui-body-background-color: $panel-body-background-color
    );

    how do i solve that problem?
    should i copy the scss _panel file to my theme directory and change it locally?
    or is there other way?
    thanks

  2. #2
    Sencha User
    Join Date
    Jan 2012
    Location
    Bethany CT, USA
    Posts
    7
    Vote Rating
    0
    nealbrandi is on a distinguished road

      0  

    Default Override default panel

    Override default panel


    I using ExtJs 4.1 had the same issue. My solution over ridings the default panel ui. The steps to implement are:
    1. Create a custom theme - Instructions here: http://www.sencha.com/learn/theming/
    2. Copy the panel mixing invocation starting line 152 of the <myApp>/EXT's/resources/themes/stylesheets/ext4/default/widgets/_panel.scss partial to your custom theme's sass file in <myApp>/resources/sass/my-custom-theme.sass. The position is the file should be after the standard declarations. Change the hard coded 1px border to 0px or specify a standard variable. Code below.
    3. Recompile and test
    my-custom-theme.sass
    Code:
    // Unless you want to include all components, you must set $include-default to false
    // IF you set this to true, you can also remove lines 10 to 38 of this file
    $include-default: false;
    
    
    // Insert your custom variables here.
    // $base-color: #aa0000;
    
    
    @import 'ext4/default/all';
    
    
    // You may remove any of the following modules that you
    // do not use in order to create a smaller css file.
    @include extjs-boundlist;
    @include extjs-button;
    @include extjs-btn-group;
    @include extjs-datepicker;
    @include extjs-colorpicker;
    @include extjs-menu;
    @include extjs-grid;
    @include extjs-form;
        @include extjs-form-field;
        @include extjs-form-fieldset;
        @include extjs-form-file;
        @include extjs-form-checkboxfield;
        @include extjs-form-checkboxgroup;
        @include extjs-form-triggerfield;
        @include extjs-form-htmleditor;
    @include extjs-panel;
    @include extjs-qtip;
    @include extjs-slider;
    @include extjs-progress;
    @include extjs-toolbar;
    @include extjs-window;
    @include extjs-messagebox;
    @include extjs-tabbar;
    @include extjs-tab;
    @include extjs-tree;
    @include extjs-drawcomponent;
    @include extjs-viewport;
    
    
    @include extjs-panel-ui(
         'default',
    
    
          $ui-base-color: $panel-base-color,
          $ui-border-width: $panel-border-width,
          $ui-border-color: $panel-border-color,
          $ui-border-radius: $panel-border-radius,
    
    
          $ui-header-color: $panel-header-color,
          $ui-header-font-size: $panel-header-font-size,
          $ui-header-font-weight: $panel-header-font-weight,
          $ui-header-border-color: $panel-header-border-color,
          $ui-header-background-color: $panel-header-background-color,
          $ui-header-background-gradient: $panel-header-background-gradient,
    
    
          $ui-body-color: $panel-body-color,
          $ui-body-border-color: $panel-body-border-color,
          $ui-body-border-width: 0px,
          $ui-body-background-color: $panel-body-background-color
    );
    
    
    // This line changes the location of your images when creating UIs to be relative instead of within the ExtJS directory.
    // You MUST set this to true/string value if you are creating new UIs + supporting legacy browsers.
    // This only applies to new UIs. It does not apply to default component images (i.e. when changing $base-color)
    // The value can either be true, in which case the image path will be "../images/"
    // or a string, of where the path is
    $relative-image-path-for-uis: true; // defaults to "../images/" when true
    Questions for the Sencha Theme developers:
    1. Why isn't there a $ui-body-border variable?
    2. Is there a better technique to have a panel with no visible borders?
    Thanks


  3. #3
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,506
    Vote Rating
    54
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    If you do not need Panel capabilities, then simply use a Container. They have no default styling.

    If you really do need what Panel can do (docked items), then I think border: false should do it.

Thread Participants: 2