Alter border and cursor using jquery layout

Question

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/

Answer 1

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.