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,498
    Vote Rating
    47
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi