An interesting problem but maybe it has already been solved. I have a collection of CSS style sheets that apply to multiple domains. The way it has been architected, both domains share the same CSS files and add their own definitions and rules to the stylesheets. Our system is as such that anytime a developer makes a change to a CSS file that belongs to a particular domain, then that very same change needs to be done in another domain's style sheet as well.
For instance if I have two domains: Main, SubMain. BOth of these share a stylesheet called global.css and a developer working on the SubMain domain changes this stylesheet by adding a new rule. To ensure that things do not break in the Main domain, the developer needs to go ahead and add the same rule to global.css to the main domain's global.css stylesheet.
Why this does not have the same shared location is beyond me since this is a shared engineering project. My understanding is that the reason being that the changes were to be applied immediately and unfortunately the only option was to use the same stylesheet + directory structure across all the domains.
But this problem does exist and it is tremendous overhead. Is there anyway to extend CSS stylesheets such that domain specific CSS can be added to the extended stylesheets.
If not, what other solutions can be proposed ?
If you have the same code in two places, why have two files (and this goes for coding as well - methods or variables or whatever)? If you use something more than, keep it in one place and reference to it everywhere else.
What you need to do is to have the Main website point at a local copy of the CSS file (like so):
<link rel=stylesheet type=text/css href="/global.css">
... and then on the SubMain website, include in your headers a link to the Main website's CSS file (like so):
<link rel=stylesheet type=text/css href="http://mainwebsite.com/css/global.css">
To solve your problem, only have the editable CSS file/files on one domain (the Main one), and then link to them using absolute URLs in the other (SubMain) website.
I dont understand you. I dont know where your problem is. Do you want to add 2 css style sheets?
<link href="style.css" type="text/css" rel="stylesheet" />
<link href="style2.css" type="text/css" rel="stylesheet" />
Or do you want that 2 domains using 1 style sheet?
<link href="http://url.com/style.css" type="text/css" rel="stylesheet" />
Both of the domains can use this. You are not linking in the directory of the style sheet. You put the link of your style in it. This will solve your problem.
Both domains can use one CSS file.
<link rel="stylesheet" type="text/css" href="http://myotherdomain.com/css/global.css">
Just link to one CSS file.
Or if you really want to "sync" them you could create a rsync script but that doesn't make sense.
It's apparent that you know you can include stylesheets across domains:
<link rel=stylesheet type=text/css href="http://example.com/global.css">
But did you know that you can include multiple stylesheets? Create a single stylesheet that has all of the "master" styles and put it in global.css on one of the domains (your choice). The styles unique to each domain can be in a stylesheet specific to that domain.
<link rel=stylesheet type=text/css href="http://example.com/css/global.css">
<link rel=stylesheet type=text/css href="/css/specific.css">
Related
I have a simple flask application. It has flask-bootstrap installed and so I can access some CSS classes from there and my own style sheet in my static folder. However, I want to be able to add another stylesheet from a CDN in my index.html file.
I usually do something like place the following inside head tags.:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Is this possible? I don't think that using the
{{url_for('static' )}}
syntax would work here and I haven't found anything online that's describing what i'm doing (or I couldn't tell).
Yes, this is how I do it too. And then I link to my own stylesheet after the Bootstrap CDN.
Edit: and if you use a base template that is being extended by multiple templates for sub pages you can put the head tag in the base template so it precedes all templates.
I'm currently learning about html and css. I've learnt about this code,
<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
It was said that external stylesheets can be loaded with 3 ways, and that's one of the ways.
So my question is, does that mean I have to upload my stylesheet to a specific website so I can access the stylesheet my html document?
ps. sorry for bad english
edit: the link comes from w3schools, i'm learning the basics from there. if i shouldn't have done that please tell me so i can remove it.
The following
<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
Will download the styles.css file from www.w3schools.com/html/. In that case, you only have to upload your html file. The downside is that if the w3schools.com admin deletes the file you don't have control over his decision , your page will not find it anymore.
The best thing to do is to put a local my_styles.css file in the same folder as your html file and then
<link rel="stylesheet" href="my_styles.css">
This means you will have to upload your html file and my_styles.css. In this case the style will be always available for the webbrowsers to download.
does that mean I have to upload my stylesheet to a specific website so I can access the stylesheet
No. The stylesheet needs a URL so the browser can access it. It doesn't have to be a URL hosted by a particular website.
It doesn't matter where that URL resolves to (unless it is one that isn't accessible to the browser — e.g. if the URL is on a private LAN and the browser isn't on that LAN).
No it doesn't have to be uploaded anywhere. The href attribute simply expresses where the file is. The value of the href can be relative or absolute.
Relative
Relative paths are relative to the folder your HTML file is in. So imagine you have an HTML page webpage.html and a CSS file styles.css in the following folder structure:
My Website
|-- css
| `-- style.css
|-- images
`-- webpage.html
Your link element could use a relative path like this:
<link rel="stylesheet" href="../css/styles.css">
../ to go up a folder, then css/ to go into the css foler.
Absolute
An absolute path points to the same place no matter where you're pointing from. In the folder structure above, if My Website was the root directory of our website, we could use absolute paths a couple different ways:
<link rel="stylesheet" href="/css/styles.css">
/ to start at the root directory, then css/ to go into the css folder
OR
<link rel="stylesheet" href="http://www.mywebsite.com/css/styles.css">
This would directly load your CSS from the URL like the w3schools example.
https://www.w3schools.com/tags/tag_link.asp
<link rel="stylesheet" type="text/css" href="my_style.css" />
https://www.w3schools.com/tags/att_style_type.asp
<style type="text/css">
...
</style>
https://developer.mozilla.org/tr/docs/Web/CSS/#import
#import 'custom.css';
I'm editing an app on my website but the style sheet is located in this path:
home/aib23/public_html/wp-content/themes/striking_r/assets/affiliate_app_css
what would the stylesheet look like for that path? This is what I thought it was:
<link rel="stylesheet" file://home/aib23/public_html/wp-content/themes/striking_r/assets/app_css" />
but it did not seem to work. Note that this stylesheet is placed within my wordpress theme folder.
Any help would be appreciated! Thanks in advance to those that contribute! :)
The link to your stylesheet can be relative, but in this case you can harness WordPress's built in functions to make your life easier, like so:
<?php get_stylesheet_directory() ?>
get_stylesheet_directory() will automatically return the directory where WordPress is looking for the stylesheet. For example, if your stylesheet was named styles.css, you might use something like this:
<link rel="stylesheet" type="text/css" href="<?php get_stylesheet_directory() ?>/styles.css">
You don't need to link the complete path to the file -- WordPress will take care of that for you.
This kind of path is local to the client system. So if I visit a page with this link it will look for your CSS file on my computer, at /home/aib23/public_html/wp-content/themes/striking_r/assets/app_css
Also, you need to use the href attribute in your link element in order for it to work.
I suggest you use a link relative to your web root - like this:
<link rel="stylesheet" href="/wp-content/themes/striking_r/assets/affiliate_app_css/myfile.css" />
Replace myfile.css with the name of your stylesheet.
When linking to your stylesheet, you can either do it relatively or absolutely. For instance, if you're linking to a stylesheet in the same directory as your HTML document, you can simply put
<link rel="stylesheet" href="style.css" />
If, however, you want to refer to a main stylesheet throughout many HTML documents, you may want to stick with an absolute path. In your case, something like this:
<link rel="stylesheet" href="/wp-content/themes/striking_r/assets/app.css" />
Please note: Your stylesheet file name should always end with .css. Additionally, all href paths start after the public_html folder in your specific case.
i'm very confused about how to add css files to a blog a made on django following this tutorial: http://www.programmersbook.com/page/21/Django-Beginner-Tutorial-Part-I/
Basically, i want to add a css style sheet to my blog. I've looked around a bit and seen somethings about static and media files and urls. I read a bit about them on Django's website but coulnd't fully understand them.
So, could anyone kindly tell me how i should display:
<link rel="stylesheet" type="text/css" href="style.css" />
They styles work when i do it internally, but how do i show external stylesheets?
It's right in the Django docs, check here. Follow the instructions there and you will be able to use something like that:
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}style.css" />
EDIT:
You should sepearate you "static" files from your templates. So move all your .css, .js and images to one directory in your app (it's default name is /static). Honestly, everything is written in the link provided.
I need an easy way to load the same style sheet for two different installations of wordpress. One is at main.com and the other is at main.com/secondary. Thanks.
Hardcode your stylesheet link to wherever it's actually stored.
<link rel="stylesheet" type="text/css" href="http://example.com/css/yourstylesheet.css">
Don't use a relative link that looks like css/yourstylesheet/.
I got it! Inside main.com/secondary/wp-content/themes/mytheme/style.css, I removed all the code and inserted
#import url(main.com/wp-content/themes/mytheme/style.css);
and then added some code for the specific secondary banner. This of course overrides the banner definition in the imported file because of the cascade.
I would like to credit themeshaper.com/wordpress-child-theme-basics/
which gave me the basic idea. (I'm sort of doing the opposite of a child theme.)