Results 1 to 1 of 1
  1. #1
    javaStooge is offline Senior Member
    Join Date
    Jan 2014
    Posts
    106
    Rep Power
    0

    Default Customizing Tabs In TabPane

    I'm doing a little practice and working with designing an interface that will consists of tabs, each containing its own set of data charts. I've done a lot of research online and for the most part its been very helpful; however, when its comes to modifying and customizing tabs, I am running into some issues. Firstly, I want to change the tab background color to match the background color of the tab content, so essentially, each tab will have it own custom color. I've setup a CSS file to keep all of my custom styles organized. I setup the following in my .css file:
    Java FX Code:
    .root {
        -fx-font-family: "Charter";
        -fx-font-size: 15;
    }
    
    .solartab .tab:selected  {
        -fx-background-color: #FFB84D;
    }
    
    .tab:selected .tab-label {
        -fx-font-weight: bold;
    }
    
    .tab-pane .tab-header-area .tab-header-background {
        -fx-background-color: #BDBDBD;
    }
    Within my JavaFX code :
    Java FX Code:
    Tab solarTab = new Tab("Solar Panel");       
            BorderPane solarPane = new BorderPane();
            //Solar Bar Chart
            CategoryAxis xHoursAxis = new CategoryAxis();
            xHoursAxis.setLabel("Hours");
            xHoursAxis.setCategories(FXCollections.<String>observableArrayList(time));
            NumberAxis yPowerAxis = new NumberAxis();
            yPowerAxis.setAutoRanging(true);
            yPowerAxis.setLabel("Power");
            BarChart solarChart = new BarChart(xHoursAxis, yPowerAxis);
            solarPane.setCenter(solarChart);
            solarTab.setStyle("-fx-background-color: #FFB84D");
            solarTab.setContent(solarPane);
    If I use the .setStyle() (above), the tab contains the custom color, all the time, but I would prefer it to change color only when selected as the .css file represents. When I try to use the custom tab from the css file, the code does not work and remains the default color.
    Java FX Code:
    solarTab.getStyleClass().add("solartab");
    Also, I've tried to set the background for each tab differently, but it too remains the default color (grey) when I implement the .css file code.
    Last edited by javaStooge; 03-29-2015 at 08:03 PM.

Similar Threads

  1. Layer customizing
    By atrodeyo in forum New To Java
    Replies: 4
    Last Post: 04-24-2012, 05:02 AM
  2. Customizing Swing
    By mDennis10 in forum AWT / Swing
    Replies: 3
    Last Post: 01-16-2012, 06:31 AM
  3. customizing menus
    By rotte001 in forum Eclipse
    Replies: 0
    Last Post: 02-06-2010, 07:04 PM
  4. Customizing a JList?
    By dbstudio in forum AWT / Swing
    Replies: 14
    Last Post: 09-11-2009, 07:43 PM
  5. JOptionPane (customizing)
    By Java Tip in forum Java Tip
    Replies: 0
    Last Post: 03-14-2008, 11:39 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •