I am trying to add
backgroundImage: { 'split-white-black': "linear-gradient(to bottom, #111827 60% , white 40%);" }
to the tailwind config file but cannot see to find the file or where to put the code in the Fresh framework directory.
Thanks :)
The official fresh website is open source and simply puts it at the root of the project.
https://github.com/denoland/fresh/blob/main/www/twind.config.ts
Related
I created an image folder in my first web application(web-forms) and copied images into that folder, I want to set a background image on div. I followed following steps
opened properties (div)
1. click style tab
2. select background-image
3. select images folder
But Content folder is not showing any image, its empty. I am beginner and unable to get where I am mistaken.
You need to include into de project the images you just copied to the images folder. For that you need to click onto the little button to the right of the update (blue one) in the solution explorer top bar and that will show all the files that are not included. Then you select all the images needed -> right click -> include files.
After that repeat the process you did and the imagess should show.
Hope this helps!
Are you sure its same folder ?
Reset visual studio and windows , but if you want doing this on code-side
create a css file and look at this code
body {
background-image:url('images/background.png');
}
Problem resolved. Right click on 'Images' folder, click 'Add' add and existing item, then I searched for images folder into project directory and added desired images.
Good day.
My structure is like this:
/
index.html
style/
main.css
images/
test/
test.html
/style/main.css says something like this:
body {
background-image: url('/images/SomeImage.png');
background-color: #000;
}
/index.html has a link to this CSS file, but, as the title says, no image will load. But it's connected though, cause the background is actually black, so the rest of the style (but images) does work.
Also, if I write the same style internally into /index.html the background will load.
Also, I created /test/test.html which says nothing but
<img src="/images/SomeImage.png" />
and the image is displayed on that page.
So, obviously, for some reason my /style/main.css can't reach files, that any other file from any other location reaches. Why does this happen? There's clearly nothing wrong with the syntax. I'm lost.
add ../ to the beginning of /images so it read ../images/imagename.jpg
Here's what your code should be:
body {
background-image: url('../images/SomeImage.png');
background-color: #000;
}
Because your image is in another folder (thats a level up than your style sheet), you need to start with "../" for a level up folder in hierarchy relative to the style sheet. So you need a relative URL:
background-image: url('../images/SomeImage.png');
Try to copy webpage, css and example image in one folder temporarily. Then use only image name for url a see what happens. If it works, it will be the image path, if not something else.. possibly position.. is this complete css you are posting?
Initially, it looks like your code is fine.
So how do you know the image isn't loading? Look in your browser's developer tools to see if the image is loading, or returning an error, or not even being referenced. My guess here would be that it is loading, but not display because of something in your CSS.
if you are in /styles/style.css you need to add:
../ 2 levels back to get to the root folder.
So as Rokin answered :
background-image: url('../images/SomeImage.png');
is the way to do it.
To link your CSS within your index file use the following:
<link href="./style/style.css" rel='stylesheet' type='text/css'>
./ 1 level back within the index.html to reach the root folder.
In addition your problem might also be a file permission problem, I always face this issue when i download images from my email and use them directly.
If you are working locally on a mac:
- Right click on the selected image
- click on **get info**
- In sharing and permissions, make sure that the **everyone** has the **Read only** permission instead of **No access**
If you are working directly on a live server:
- login using FTP (with any ftp client such as File Zilla)
- Go to the selected image
- Right click and select file permissions
- set permissions to : **664**
Ok, so basically, I replaced the not-working /style/main.css with the copy of it (test.css - described in post comments) and now it works. Why is still the question, but the problem is kinda solved I guess.
Same with me, I guess images that used in css must be in the same folder as css file. I tried every possible solution while checking with the browser tool and the only thing that works is when I put the image and stylesheet in the same folder.
I am having the same problem. Working with Visual Studio Community.
I went inspect elements in browser and found that the file directory "automatically" (i did not set it this way) says that my image folder is nested inside my css folder. dont know why yet... so I then went and moved my image folder into my css folder seeing that this is what my browser showed me in the dev tools...
so maybe for some reason when working with css your images inside your image folder should be located in your css folder and not the complete Webpage Folder..it worked.
We're using Strongloop's LoopBack for our REST APIs and would like to modify the CSS for the LoopBack Explorer. However, it's not clear which CSS files are being used (LoopBack vs Swagger) and where they're located. I was not able to find specific documentation for this.
You can modify more than just the css. And also, if you generate your Loopback application using slc loopback like I did, you'll find that your server/server.js doesn't look immediately in a way you can configure it like it's shown in the accepted answer.
Instead you can use server/component-config.json to instruct the loopback component explorer to use an alternative directory for static files for the swagger-ui. With the uiDirs configuration below I configured it to go look for static files in the server/explorer directory.
{
"loopback-component-explorer": {
"mountPath": "/explorer",
"uiDirs": "server/explorer",
"apiInfo": {
"title": "My API",
"description": "Description of my API"
}
}
}
* When using IISNode uiDirs has to be set to "explorer" otherwise it's "server/explorer" as per #phegde 's comment
In my server directory I created a index.html which is a copy from node_modules/loopback-component-explorer/public/index.html and also I created an images folder with a custom logo.
And finally, If you want to have custom css, copy node_modules/loopback-component-explorer/public/css/loopbackStyles.css into server/explorer/css/loopbackStyles.css
You can provide your own version of Swagger UI files via options.uiDirs.
Edit your server/server.js and add this config option to the explorer:
app.use(explorer(app, { uiDirs: path.resolve(__dirname, 'explorer') }));
Copy the directory node_modules/loopback-explorer/public/css to server/explorer/css
Customize the copied CSS files as you need.
You should lock loopback-explorer's major & minor version in your package.json. Newer versions of loopback-explorer may change the CSS in which case your customization may stop working.
If you didn't lock the loopback-explorer in package.json or if you started your application from the new release of loopback(v2.x), you have to make another change:
If you generated your loopback app with the generator tool, edit server/component-config.json and change it to this:
{
"loopback-component-explorer": null
}
2.Copy the directory node_modules/loopback-explorer/public/ to server/explorer/ as Miroslav said. If you copy the whole directory you can also change the index.html file.
Edit server/server.js file and add this line: app.use('/explorer',explorer.routes(app, { uiDirs: path.resolve(__dirname, 'explorer') })); also you have to add the explorer module at the top of the file: var explorer = require('loopback-component-explorer');
4.Customize the ui of your explorer, all the necessary files are in server/explorer
With the loopback-component-explorer the uiDirs defined in component-config.json should be added something like the below (which solved my issue).
"uiDirs": ["server/explorer"]
instead of
"uiDirs": "server/api-explorer",
I am able to apply custom css styles to loopback api explorer header.
Steps I followed as mentioned below
Goto node_modules > loopback-component-explorer > public > css folder
Copy loopbackStyles.css
Create a new folder called explorer under server folder
create css folder under explorer and paste the css file under css folder i.e., loopbackStyles.css
Add below config to component-config.json file
{
"loopback-component-explorer": {
"mountPath": "/explorer",
"generateOperationScopedModels": true,
"uiDirs": "server/explorer"
}
}
To change loopback header color I have just overrided backgroun-color with my own color in body #header css selector in loopbackStyles.css
To replace the default header logo name with our custom name. I have added following css styles in loopbackStyles.css
.swagger-ui-wrap #logo{
display: none;
}
.swagger-ui-wrap:after {
content: "MyOwn API Explorer";
color: #fff;
font-weight: bold;
}
Language: JavaFX
IDE: Netbeans
Problem: I'm trying to add a css file to the stylesheet, but the first line of the following code always generates a NullPointerException:
String css = this.getClass().getResource("double_slider.css").toExternalForm();
scene.getStylesheets().add(css);
I've tried replacing "double_slider.css" with the full path. double_slider.css is currently located in the same package as the class that makes this call. I've also tried all of the variations found at http://introjava.wordpress.com/2012/03/21/linking-a-css-style-sheet-to-javafx-scene-graph/, with no success. Clean and build doesn't help either.
If I place the css file in the build folder where the .class files are dumped, the NullPointerException goes away. But then the css file does not work properly because it references other files in my project.
put your yourname.css file directly under src directory.
scene.getStylesheets().add("yourname.css")
clean and build required
I think your're missing the slashes which causes that the CSS file can't be found. Try to correct your path reference.
For example:
-root
--app/Main.java
--assets/double_slider.css
would be:
String css = this.getClass().getResource("/assets/double_slider.css").toExternalForm();
I had the same problem. I use NetBeans 7.3 and JavaFX 2.2.7, JDK 7.0_21 on Win7.
My solution was to place the .css in the SAME folder as my Java file containing void start(Stage stage). So the Project view looks like this:
ProjectName
Source Packages
pkgWhatever
Main.java
MyCssFile.css
(So the CSS file is IN the package, which I find really weird and contraintuitive. Some doc told me to put it in the root of the project so it could be found at runtime, but that didn't work for me in NB. My app now runs regardless of whether I start the file containing "start(..)" by hitting Ctrl+U or clicking Run on the project's context menu. And it doesn't matter whether I let NB put everything into a JAR or not.)
Here's the code that loads the CSS in the above situation:
URL url = this.getClass().getResource("controlStyle1.css");
if (url == null) {
System.out.println("Resource not found. Aborting.");
System.exit(-1);
}
String css = url.toExternalForm();
scene.getStylesheets().add(css);
Whereas this didn't work:
scene.getStylesheets().add("controlStyle1.css");
Hope this helps.
I had the same problem (in NetBeans 8). I found a solution here : https://blog.idrsolutions.com/2014/04/use-external-css-files-javafx/
My resource file spreadsheet.css was here :
MyApp
-resources
--spreadsheet.css
-source packages
--fr.ccc.myapp.view
---mainView.java
---FXMLMain.fxml
In mainView.java :
File f = new File("resources/spreadsheet.css");
spreadsheet.getStylesheets().add("file:///" + f.getAbsolutePath().replace("\\", "/"));
Hope this helps.
All of the answers are missing one very important part and that's '/' before the name of the css file:
Folder structure:
src
resources
stylesheet.css
Load it like this, notice the starting slash before css file:
scene.getStylesheets().add(getClass().getResource("/stylesheet.css").toExternalForm())
Considering your old code:
String css =this.getClass().getResource("double_slider.css").toExternalForm();
scene.getStylesheets().add(css);
Try changing it to this new code and it will work:
screen.getStylesheets().add(getClass().getResource("double_slider.css").toExternalForm());
When you use getClass(), you don't need to use this keyword.
I hope this work for you. :)
You can add your style.css directly in your .fxml file as an attribute to your root element as this stylesheets="#your_relative_path/style.css".
You can use #../style.css if you want to access the css file that is in your src folder
It's pretty much simple.
this.scene.setUserAgentStylesheet(/resources/blabla.css);
This is what worked for me-
Hmmm, are you on Netbeans? Try to "Clean and Build" the project.
Have you initialized the scene object prior to setting style sheet?
scene = new Scene(myRootLayout, 600, 600); // for example
in your file .java use this
Application.setUserAgentStylesheet(getClass().getResource("application.css")
.toExternalForm());
Folder Structure
In the MedicalLibraryFx.java
scene.getStylesheets().add(getClass().getResource("/css/style.css").toString());
Folder structure when css is in the same directory as controller
scene.getStylesheets().add(getClass().getResource("style.css").toString());
Assuming the file structure is something like this:
-root
--src
---resources
----double_slider.css
---package
----JavaFXFile.java
This is what worked for me:
scene.getStylesheets().add((new File("src/resources/double_slider.css")).toURI().toString());
scene.getStylesheets().add("file:///home/fullpathname/file.css");
or
scene.getStylesheets().add("file:/home/fullpathname/file.css");
but after:
Run / Clean and Build Project
worked for me
NetBeans IDE 8.2 ; Java: 1.8.0_201 ;Linux 16.04
I made a small login example and this is how i link my styleshet.css
#Override
public void start(Stage stage) throws Exception {
Parent root = FXMLLoader.load(getClass().getResource("LoginUI.fxml"));
Scene scene = new Scene(root);
scene.getStylesheets().add(JavaFXLogin.class.getResource("stylesheet.css").toExternalForm());
stage.setScene(scene);
stage.show();
}
You can use this code line to link your css file. but the css file should be in your package.
scene.getStylesheets().add(JavaFXLogin.class.getResource("stylesheet.css").toExternalForm());
In a maven project you must define path for resources in the file.pom in the javafx-plugin section: something like this:
<configuration>
<mainClass>com.personale.ciaomondo.App</mainClass>
<resources>
<resource>
<directory>src/main/resources</directory>
</resource>
</resources>
</configuration>
Try putting '#' the name of the file. It worked for me.
ex:
'#main.css'
i have a website #local and lots of images in site, but after I deploy site to server images paths are broken(exception given in css file), and I need to fix this as soon as possible.
sample path:
imageurl = #"/Images/sample.gif";
how can i fix this?
thank you.
you can set a appsetting in web.config file with server url like
and get this path on code and add image name with it.
Images (like background-url) in CSS are always referenced relative to the css file.
you need to set in css file like...
background-image: url( '../../Images/image.gif' );
.. this will bring out one folder from current folder hierarchy