Is there a way to point the default CSS path to a different directory in Orchard? I would like to locate my CSS in the content directory.
Orchard uses the ~/Scripts folder to locate a stylesheet file in a given module or theme, if you provide a relative path. You can change that behavior, but that'd be a hard thing to do and would possibly introduce many errors.
I guess the best way to do would be to provide full path relative to the root, eg:
#{ Style.Include("~/Themes/MyThemeName/MyCustomFolder/Site.css"); }
If you provide a full path, Orchard will not look for your stylesheet in /Styles folder. Knowing that, you can create an extension method for ResourceRegister, providing your own implementation of Include method, that would append the custom path to the provided one.
Eg:
public static ResourceExtensions
{
public static RequireSettings CustomInclude(this ResourceRegister register, string path)
{
// Construct your own path, by eg.
// appending custom base path to given path
var myPath = ....;
return register.Include(myPath)
}
}
And now you can use Style.CustomInclude(...) instead of Style.Include(...) inside your shapes and get your custom stylesheet path.
What you probably want to do is create a theme. The way to do it is described in this page of the orchard documentation.
Related
I'm trying to access the logo image which is in public folder while my css folder is in src. I'm also using sass and I took into consideration that we need to write the path relatively to css file - not sass.
I tried different ways - with absolute path, with quotes and without - just hoped that maybe something will work.
I found someone's code https://codesandbox.io/s/musing-rosalind-21lsd?file=/src/App.js and played with it - I created same conditions as I have and it worked, but when I go back to my project it doesn't.
I'm using background-image: url('/logo.swg'), and it says Error: Can't resolve '/logo.swg'.
I'm aware of ejecting and webpack configuration changes, also I know that if I change the css and sass folders' path moving it outside of src it may theoretically work (with an absolute path I guess - since React does not allow us to refer to files outside of src directory).
I'm wondering if something changed in React, does anyone know? It works when I write the url as inline style, and it works when I import it in js files.
Thanks in advance.
versions:
react^17.0.1
react-scripts^4.0.1
create-react-app^4.0.2
You can use the following list as quick reference:
/ = Root directory
. = This location
.. = Up a directory
./ = Current directory
../ = Parent of current directory
../../ = Two directories backwards
The css, js and image directories are in public directory. In turn, the public directory is inside of views (I don't know if it's a good practice to add public directory inside of views directory).
The css files and the js files(in the public directory) are working but only one of the images (that is, the logo at the navbar section) gets loaded on the browser whenever I start up the server, the remaining images are showing little icons in there respective positions. All the images are in the same directory and I linked all of them in the same manner. Why is it that only one is appearing on the browser?
I don't know if it's a good practice to add the public directory inside of views directory, but when I added both on same path with app.js, all the files in public stopped working. But I know I'm on the wrong track because of the following reasons:
No difference is observed whether
app.use(express.static("public"); is added to app.js``` (that is, the server file) or not. This means that that line of code is not working, still the cssandjs` files work in both cases.
Only one of the images is being displayed on the browser even if all are linked in the same way.
The word public appears in the source of each of the static files, omitting it stops all the static files from working.
App structure:
med,
webapp,
main,
views,
partials
footer.ejs
header.ejs
public
bootstrap
css
js
images
home.ejs
post.ejs
news.ejs
about.ejs
contact.ejs
app.js
package.json
I hope indentation will help here since I'm not allowed to post pics yet.
The images in home.ejs are
img src="../views/public/images/syringe-pill-capsule.jpg,
img src="../views/public/images/dna-1811955_1920.jpg",
img src="../views/public/images/lab-217043_1280.jpg".
the only one that is loading on the browser is the logo at the navbar section,in header.ejs. The link is img src="../public/images/wd.jpg"
The problem is that you are not passing the correct path to express.static. You need to change the root to the actual root, i.e.:
app.use(express.static("./path-to-views/public")
Then, you need to make sure to use the correct paths in your html, which will be as simple as:
src="/images/syringe-pill-capsule.jpg"
EDIT:
The root for express.static you were using is correct, i.e.
app.use(express.static("views")
But you need to adjust the paths in the images src attributes to the following absolute path:
src="/public/images/syringe-pill-capsule.jpg"
Newbie question as stated above. How do I access the public folder of laravel in .css file? I have a custom css and I want to get the url of the image.
You can not use the asset() or public_path() functions there, they will not get called from a css file but you can use the traditional way to access file like this
../css/want_to_import.css
This is the only way you can access a file in a css file, unless you're writting your css dynamically then possibilities are different.
If your domain points to your public folder, you can reference it using /
Let's imagine you want to display a JPG file as a background image.
public/image/background.jpg
In your CSS, you can use background-image:url('/images/background.jpg')
I have developing custom button control. Code is very simple. I just create MyButton class extend Button class. And I adding css that in same file. like this
public class PrimaryButton extends Button {
public PrimaryButton(){
getStyleClass().add("primary-button");
getStylesheets().add("primarybutton.css");
}
}
My project structure is this.
I made this project file to jar. And I import this jar to scene builder. But css dose not apply. like this. What is wrong?
I think the problem is with in your CSS file path, and when i changed it,into
getStylesheets().add("sample/primarybutton.css");
it worked fine, and this also worked fine
getStylesheets().add("/sample/primarybutton.css");
NOTE: my app architecture is completely identical to yours
here's the complete sample
public class MyButton extends Button {
public MyButton(){
getStylesheets().add("sample/primarybutton.css");
//you can also use this
//getStylesheets().add("/sample/primarybutton.css");
getStyleClass().add("primary-button");
} }
Note : the "primary-button" is a css class in your "primarybutton.css" file
hope this is useful, and solve your problem
The string you pass to the list of stylesheets is treated as a URL. The documentation states:
The URL is a hierarchical URI of the form [scheme:][//authority][path].
If the URL does not have a [scheme:] component, the URL is considered
to be the [path] component only. Any leading '/' character of the
[path] is ignored and the [path] is treated as a path relative to the
root of the application's classpath.
Since both the class and the stylesheet are in the sample package, the URL of the stylesheet relative to the classpath is sample/primarybutton.css, so you could use
getStylesheets().add("sample/primarybutton.css");
If you want to make use of the fact the the stylesheet is in the same package as the class, and make the code more portable (i.e. not hard-code the package name), you can create a complete URL from the current class, and then convert it to a string:
getStylesheets().add(getClass().getResource("primarybutton.css").toExternalForm());
This works because getClass().getResource(...) creates a URL where the resource name, if it doesn't begin with a leading /, is interpreted as being relative to the current class.
I generally prefer the latter approach, though others may not agree.
I have page specific css files I would like to call automatically. Does anyone have a nice way of doing this elegantly?
This should do it
link(rel="stylesheet", href="#{req.path + '.css'}", type="text/css")
Where you pass either req (the request object) as a local variable when rendering the jade template (or even just pass in req.path as path). This could just be handled in your layout.jade and it will work for each of your route paths.
If you want to get fancy, you could establish a consistent pattern where a page's route maps 1 to 1 to a filesystem path for a .css file in your public directory. In that case you could easily but the stylesheet link tag inside a conditional and only link to the .css file if you find a matching one on disk.