B4J Question Tableview column marker color CSS

[ThRuST]

Hi all!
I really want to change the white column marker as seen on the screenshot.
It would look better as black, to correspond with the left column. How to change this in CSS anyone?

Thanks,
Roger

 

[Chris2]

I'm not sure about using CSS for this, but I think that the column lines pick up their colour from the 'Background Properties > Drawable > Color' in the designer...

If your screen shot is of a single tableview, then I don't know why the first column separator would be a different colour to the second one.

 

[ThRuST]

Hi @Chris2, I tested to change the color in the designed but it's dark. I also changed the opacy level which had no effect.
I am using a CSS design that I share here as a reference to solve this. I really want the lines to be black like the listview on the left.

Here's a part of my CSS for the Tableview. Somehow I have not localed the correct class for this. Help me solve this ?

/* ----------------------------- */
/* -         TableView         - */
/* ----------------------------- */
.table-view {
    
        -fx-table-cell-border-color: Black;
        -fx-font-family: Consolas;
        -fx-font-size: 12px;
        -fx-text-weight: Normal;
        -fx-background-insets: 0, 0 0 0 0;
        -fx-padding: 0;


}

/* ----------------------------- */




/* ----------------------------- */
/* -     TableView Corner      - */
/* ----------------------------- */
.table-view .corner {

    -fx-background-color: #1a1a1a;
    -fx-table-cell-border-color: #000000;
    -fx-background-insets: 0;
    -fx-padding: 0;

}

/* ----------------------------- */
/* -      TableView Focus      - */
/* ----------------------------- */
.table-view:focused {

    -fx-border-Width: 0;
        -fx-table-cell-border-color: Black;
        -fx-background-insets: 0, 0 0 0 0;
        -fx-padding: 0;

}


/* ----------------------------- */
/* -  TableView Column Header  - */
/* ----------------------------- */
.table-view .column-header-background {

    -fx-background-color: linear-gradient(#131313 0%, #424141 100%);

}


    .table-view .column-header,
    .table-view .column-header .filler,
    .table-view .column-header-background .filler {

        -fx-background-color: linear-gradient(#131313 0%, #424141 100%);

}

/* ----------------------------- */
/* -   TableView Header Text   - */
/* ----------------------------- */
.table-view .column-header-background .label {

        -fx-background-color: transparent;
        -fx-font-size: 11px;
        -fx-font-weight: Bold;
        -fx-text-fill: #f1f1f1;


}

/* ----------------------------- */
/* -   TableView row textsize   - */
/* ----------------------------- */
.table-view .column-header {

        -fx-table-cell-border-color: transparent;
        -fx-background-color: transparent;

}

/* ----------------------------- */
/* -   TableView row textsize  - */
/* ----------------------------- */
.table-view .table-cell {

        -fx-background-color: transparent;
        -fx-table-cell-border-color: #a2a2a2;
        -fx-font-size: 13px;
        -fx-font-weight: Bold;
    -fx-text-fill: #f1f1f1;

}

/* ----------------------------- */
/* -       Table-Row-Cell      - */
/* ----------------------------- */
.table-row-cell {

       -fx-background-color: -fx-table-cell-border-color, #1a1a1a;
        -fx-background-insets: 0, 0 0 0 0;
        -fx-padding: 0;
        -fx-cell-size: 20px;

}

.table-view .column-line {
    -fx-background-color: red;
}

/* -    TableView List Cell    - */
/* ----------------------------- */
.table-view .list-cell {


/* -fx-cell-size: 40px; */

}


/* ----------------------------- */
/* -   Table-Row-Cell Odd      - */
/* ----------------------------- */
.table-row-cell:odd {

        -fx-background-color: -fx-table-cell-border-color, #1e1e1e;
        -fx-background-insets: 0, 0 0 0 0;
        -fx-padding: 0;

}

/* ----------------------------- */
/* -  Table-Row-Cell Selected  - */
/* ----------------------------- */
.table-row-cell:selected {

        -fx-background-color: linear-gradient(#ff0000 0%, #480000 10%, #480000 40%, #480000 90%, #ff0000 100%);
        -fx-background-insets: 0;
        -fx-background-radius: 0;

}


/* ----------------------------- */
/* -   Table-View ScrollBars   - */
/* ----------------------------- */
.table-view .scroll-bar:horizontal .thumb,
.table-view .scroll-bar:vertical .thumb {

        -fx-background-color:derive(black,40%);
    -fx-background-insets: 2, 0, 0;
    -fx-background-radius: 2em;

    -fx-effect: dropshadow( one-pass-box , rgba(0,0,0,0.8) , 0, 0.0 , 0 , 1);

}

 

[Chris2]

I tested to change the color in the designed but it's dark.

Can you explain what you mean by '..it's dark'?

like the listview on the left.

OK, so the 'Categories' column is a listview, and 'Document' & 'Date' are the tableview columns, is that correct?

 

[Chris2]

There's something in your css that is settings the column divider lines to the lighter colour.
I've ran the same test I did in post #2, but with your css applied, and it comes out like this now:

 

[Chris2]

/* ----------------------------- */
/* -   TableView row textsize  - */
/* ----------------------------- */
.table-view .table-cell {

        -fx-background-color: transparent;
        -fx-table-cell-border-color: #a2a2a2;   <--- this line is setting the column divider, overriding the background properties colour set in the designer.
        -fx-font-size: 13px;
        -fx-font-weight: Bold;
    -fx-text-fill: #f1f1f1;

}

 

[ThRuST]

@Chris2 Indeed, it works now!! This means a lot to me since I am working hard to make this as good as I possibly can.
Here's a screenshot. I changed the colors to black. Might look better with the same width as the listview.
That's correct the left listview is for the categories and the right is a tableview. About that I mentioned it's dark is because
I changed the opacity for tableview background in the designer which made it black when empty by default, so I changed
the opacity setting and it turned brighter. I like it better, anyway it can be seen it the final version.
This is not the place to advertise my commercial visions, but you're welcome to follow my work. Find my post in the share my creations section.
Just search for "Athena Lite". However it's not released yet at the time of writing, but today I worked hard to implement some new features that
seems to work well on Windows, Macintosh and Linux now. I'll send you a notification once I release it, and put you in the special hello's section on
the credits page if you don't mind. Thanks ?

 

[ThRuST]

Here's a screenshot of the changes thanks to your help. I'm really busy these days so I missed that I had already added it

 

[ThRuST]

Border width in designer made it looks better ??

Result:

 

[SimonAndroid]

Hi, one question this interface so with metallic effect, very nice, could be transferred to B4A and B4i as well?

 

[ThRuST]

@SimonAndroid Hi, sure the background pane uses a metallic image which creates a nice contrast to the static colors. I have a conversion in mind but from my current mountain of workload it's not a priority unless the software becomes a success since it is a commercial project. On the other hand a mobile version might boost the popularity. I am open for expanding the concept further and like you say the integration between mobile devices is a great addition can make it very useful, the problem is that all my time is consumed to have the version done for Win, Mac and Linux which are huge, and I hope that will last a long way to start with so once these versions are released I will evaluate the time schedule to plan out the mobile version. I could write pages about my visions about this concept, but I'll keep it brief with the respect for the community. The layout is simple yet extremely powerful since it's based on a customized SQLite template that is encrypted and associated with a server account.

 

[SimonAndroid]

thanks