jquerycssjquery-layout

Alter border and cursor using jquery layout


I am trying to do 2 things

1) remove the border between section (currently grey area)

2) remove area around the cursor ( you should only see '<' or '>' not dark area around it

here is my current code

http://jsfiddle.net/dan_vitch/KSuck/1/


Solution

  • Add following to your css:

    body > div {
        border: 0 solid white !important;
    }
    
    .ui-layout-toggler {
        background-color: transparent !important;
    }
    

    The first overwrites the border definitions and the second sets the background color of the toggle to transparent.

    Also see the updated jsfiddle.

    === UPDATE ===

    An alternative is setting them by jquery:

    $('body > div').css({
        border: '0 solid white'
    });
    
    $('.ui-layout-toggler').css({
        'background-color': 'transparent'
    });
    

    Also see the next jsfiddle.

    Or shorter:

    $('body > div').css('border', '0 solid white');
    $('.ui-layout-toggler').css('background-color', 'transparent');
    

    Also see the next jsfiddle.

    === UPDATE ===

    Do you mean this?

    $('.ui-layout-resizer-west').css('background-color', 'transparent');
    

    Also see the next jsfiddle.

    Or with css

    .ui-layout-resizer-west {
        background-color: transparent !important;
    }
    

    Also see the next jsfiddle.