How can I modify the color of JavaFX text using CSS?

Looking to jazz up my JavaFX application with some custom CSS styling.

Managed to link a stylesheet to my app using the following code:

//Java code
FXMLLoader loader = new FXMLLoader(MainApp.class.getResource("/path/to/fxml"));
        Scene scene = new Scene(loader.load());
        
        scene.getStylesheets().add(getClass().getResource("/path/to/css").toExternalForm());

Trying to change the text color, but can't find a default style class for text objects here.

Designed FXML files through SceneBuilder. Assigned a text object to a class by entering the class name in the appropriate text field (Sidebar >> JavaFX CSS >> Style Class).

https://i.stack.imgur.com/0dIUw.png

CSS file snippet:

.myText {
    -fx-text-fill: #ffffff;
}

However, applying this method doesn't seem to have any effect when running the app. Any suggestions on how to tackle this issue?

Answer №1

for instance, consider the following scenario:

<Button fx:id="stop" layoutX="100.0"
     layoutY="14.0" mnemonicParsing="false"
     onAction="#onActionStopBtn"
     style=" -fx-background-color:
                    #000000, 
                    linear-gradient(#7ebcea, #2f4b8f),
                    linear-gradient(#426ab7, #263e75),
                    linear-gradient(#395cab, #223768);
             -fx-background-insets: 0,1,2,3;
             -fx-background-radius: 3,2,2,2; 
             -fx-padding: 12 30 12 30;
             -fx-text-fill: white;
             -fx-font-size: 12px;"
     text="Stop" />

introduce certain styling to the FXML Button
refer to this resource for more information

Answer №2

At last, I managed to uncover the source of the issue. It turns out that adding a stylesheet to FXML in SceneBuilder was the solution.

Subsequently, everything began functioning properly.


Interestingly enough, I am puzzled as to why I had to incorporate the stylesheet in SB when I had already included it in my code beforehand. Could this possibly be a glitch? Or perhaps I'm just being foolish?

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Changing the class of a div in JavaScript from one class to another

On my HTML page, I have a div with a CSS class assigned to it. The goal is to switch the current class for another when a button is clicked. It's crucial that not a single CSS property within the class is altered - the entire class must be replaced en ...

Ensure consistency in CSS3 background color transitions

There are multiple elements on the webpage with background transitions that change from one color to another: @-moz-keyframes backgroundTransition /* Firefox */ { 0% {background-color:#ff7b7b;} 33% {background-color:#7fceff;} 66% {backgr ...

fewer security personnel leads to a higher success rate

I've tried searching for it online, but unfortunately, I couldn't find any helpful results. What I'm attempting to achieve is a mixin that can lighten or darken a color based on a given percentage. If the percentage is less than 0, then I w ...

The dropdown in MaterializeCSS does not display any data retrieved from VUE

Good evening. I am currently utilizing VUE along with MaterializeCSS. I have been trying to populate a selection menu without success. Although I am receiving the data from the database correctly, the options in the select tag remain blank when using V-F ...

Leverage the retrieved JSON data from the database within an HTML template using the Play

Currently, I am facing a challenge with implementing a login feature in my project. I am struggling to figure out how to showcase the JSON string that is returned on the webpage. Below is a snippet of my code: Security.java: public Person webLogin(Perso ...

What is the best way to eliminate all styles from an element with jQuery?

body{ font-family: Arial; } div{ color: red; margin: 20px; background: blue; font-size: 17px; } <div id="div1">this should be styled with a blue background, red text, and 17px Arial font</div> <div id ...

How can I stop the page from jumping when a Button is clicked in ReactJS?

I've created a ShowcaseMovie component that fetches data using componentDidMount(), stores it in state, and renders Card components to display the data. The component also features four button elements for toggling between different filters: upcoming, ...

Personalizing the mat-checkbox

I'm trying to customize the checked icon in angular material mat-checkbox. Currently, it displays a white tick icon inside a colored background box, but I want to replace the tick with a cross when it is checked. After spending all day searching, I ha ...

What are the steps for rearranging a table column?

I am trying to show a text file in a table and allocate some code to each entry. I can display the text file. I can assign the code for each record (though this part is still under development). However, I have encountered an issue. The columns of the t ...

Utilizing Paragraph Styles Within a CSS Stylesheet

I'm attempting to create two unique styles for a pair of paragraphs in an xhtml document by utilizing a CSS style sheet. Despite my efforts and extensive search, I have yet to find a clear solution. ...

Increasing the boundary width beyond a specified limit with CSS

Need help extending the border-top of an element beyond a container width set to 1024px, while maintaining center alignment on the page with left alignment. Thank you! Here is the code snippet: HTML <main> <div> <span>Hello& ...

Issue encountered while initializing an HtmlPage with HTMLUnit

When attempting to execute the following code: try (final WebClient webClient = new WebClient(BrowserVersion.FIREFOX_45)) { webClient.getOptions().setJavaScriptEnabled(true); final HtmlPage page = webClient.getPage("http://www.chem ...

How can I synchronize two webkit-animations at the same speed but with one covering a greater distance?

[Update: The solution involved creating two containers, with the second animation container configured to have left: 100%.] I designed a simple animation that moves a large gif image across the page horizontally, where the width of the gif is 1536px. Sin ...

What is the best way to paste plain text into a Textarea without any formatting?

A challenge I am facing in my project is related to copying and pasting text into a Textarea. When a user copies text, the style of the text is also inserted along with it. However, when the user manually types the text, it gets inserted correctly without ...

Error 403 with Firefox on Font Loading for CodeIgniter Website

Utilizing font-face in CSS to integrate custom fonts onto a web application being developed with CodeIgniter. This is the CSS code: @font-face { font-family: 'UniversLT-UltraCondensed'; src: url('../Fonts/LTUnivers/universlt59ultrac ...

Dealing with a section that won't stay in place but the rest of the webpage is

I recently came across the angular-split library while trying to address a specific need. It partially solved my problem, but I still have some remaining challenges. In my setup, I have divided my content into 2 sections using angular-split. The goal is f ...

Top approach for creating/previewing a website using PHP, CSS, and MYSQL

When creating a website that will eventually be hosted on a remote server, what is the most effective way to code and test? Here are some examples of what I mean: - Develop locally on your computer and access files from there. Should libraries and databa ...

Exploring ways to customize the selected text color within a jQuery mobile division using CSS

Is there a way to change the color of selected text to #3C3 for the div one only and not for div two? <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link ...

Connect button with entry field

I want to create a connection between an input element and a button, where the button triggers the input and the input remains hidden. Here is a solution that I came across: <a href="javascript:void(0)" id="files" href=""> <button id="uploadDe ...

Selenium for uploading a file on a Mac device

I am facing a challenge when trying to upload a file on my MAC using selenium with Java. The button I need to interact with does not have an input tag, so I attempted to use robot script and even apple script but haven't been successful. Is there anyo ...