I need to include a link to a css file, but, the name changes.
The problem is, I am working with MSCRM 2011, and I am integrating a custom pop up window, that I need to have the "CRM style"
The link looks like this:
<LINK rel=stylesheet type=text/css href="/MyOrgtest/_common/styles/fonts.css.aspx?lcid=1033&ver=-900509389">
The thing is, when I do it in a test environment (organization "MyOrgTest") the css link names includes the organization.
So, I need to, somehow, dynamically change this link, with something like a wildcard... I don't know, so I do not have to change the link manually.
Is this possible???
If you open your solution (Settings > Solutions > Open your solution) and select "Web Resources" you should be able to add an html page like you have done with your css file. It will have a url just like your css file:
<Microsoft CRM URL>/WebResources/<name of Web resource>
You can then reference your css file by a relative path like:
<link rel="stylesheet" type="text/css" href="/styles/fonts.css" />
An un-necessary alternative would be to dynamically generate the url of the css via javascript, using the context to get the server url:
var context = GetGlobalContext();
var serverUrl = context.getServerUrl();
var cssPath = serverUrl + "/WebResources/styles/fonts.css";
Once you had this you could check questions like this one to add the css file via javascript.
Related
As the title reads, I want to import an HTML-file as external CSS to a website.
Just hear me out: my problem is that I'm working with a very inconvenient CMS that doesn't let me upload CSS-files no matter what.
I'm able to write CSS inside the page directly via HTML-style-tag but that generates a lot of text on every site and also makes maintaining CSS tedious.
As I can't upload CSS-files, I thought maybe I can create a dummy-site inside the CMS with only CSS in it and then later import that site as CSS.
The idea was: when parsed, the HTML of the site (header, body, etc.) will just be skipped (as when CSS has i.e. type-errors) while any valid CSS found is going to be imported.
Now when I try importing this website with
<style type="text/css"> #import url(dummyCSSWebsiteURL); </style>
(as the CMS also doesn't grant me access to the header of a page),
I - of course - get the error:
"Resource interpreted as Stylesheet but transferred with MIME type text/html"
as I am obviously requesting an HTML-file and not CSS.
I also tried jQuery to simply include all the dummy-HTML into an element (that I would have just not displayed):
$("#cssDummy").load(dummyCSSWebsiteURL);
but I get 2 errors that are probably just showing what a horribly inefficient idea this is:
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience
A parser-blocking, cross site (i.e. different eTLD+1) script, ["..."], is invoked via document.write. The network request for this script MAY be blocked by the browser in this or a future page load due to poor network connectivity. If blocked in this page load, it will be confirmed in a subsequent console message.
maybe I am just disregarding (or not understanding) things on a conceptual level at all but I still wonder if there is a workaround for this problem?
EDIT: I found a workaround
Definitely don't recommend. Try using different server as pointed out in the comments if you can.
I used an XMLHttpRequest to get the external site's HTML, then used regEx to match the content of the div on the page that contains the css and - with added style-tags - inserted the matched css into a div on the page.
Code for external site that contains the CSS:
<div id="generalCode">.testBox{background-color: red; min-height: 200px;}</div>
Code on site that imports the external CSS:
<div class="testBox">
</div>
<div id="cssCodeOnPage">
</div>
<script>
// use onload if you want
getCssCode();
function getCssCode(){
// send request to page where div #generalCode contains css
var xhr = new XMLHttpRequest();
xhr.open('GET', dummyCSSWebsiteURL);
xhr.onload = function(){
// use regex to separate css from rest of html
var re = /<div id="generalCode">([\s\S]*?)<\/div>/;
var cssString = xhr.response.match(re)[1];
cssString = "<style>" + cssString +"</style>";
// insert css into div
var cssDivOnPage = document.getElementById('cssCodeOnPage');
cssDivOnPage.innerHTML = cssString;
}
xhr.send();
}
(sorry for this monstrosity of a question..)
I think the best option is to load that HTML page into an iframe, query the styles out of hte iframe, and then attach that to the current document. I created a live example on Glitch here.
Nothing but the <style> block will be copied from the HTML. The external HTML document does need to be an actual HTML document though (<html><head><style>....), otherwise the page won't be queryable to retrieve the CSS.
This is an example in plain JavaScript:
// Create an iframe
const iframe = document.createElement("iframe");
// Make it not visible
iframe.style.visibility = "hidden";
// This will run once the HTML page has loaded in the <iframe>
iframe.onload = () => {
// Find the <style> element in the HTML document
const style = iframe.contentDocument.querySelector("style");
// Take that <style> element and append it to the current document's <head>
document.querySelector("head").appendChild(style);
// Remove the <iframe> after we are done.
iframe.parentElement.removeChild(iframe);
};
// Setting a source starts the loading process
iframe.src = "css.html";
// The <iframe> doesn't actually load until it is appended to a document
document.querySelector("body").appendChild(iframe);
Its possible in a different way. However not through JS, but PHP include
For that however, your server needs to support PHP and need to use PHP instead of HTML as documents. Sounds more complicated now then it actually is. To use PHP the document has to becalled .php at the end instead of .html e.g. index.php.
The document itself can be written the very same way as you write HTML websites.
Now for the issue to use PHP include. you inlcude the CSS as head style:
index.php:
<html>
<head>
<?php
include('styles.css');
?>
</head>
<body>
content
</body>
</html>
the line <?php include('url'); ?> will load a file mentioned in the url server sided into the document. Therefor you only need to create another file with the name styles.css and write your css in there the normal way.
You Do
<link rel="stylesheet" href="css/style.css">
I'm using angular 1.6.
I'm dynamically pulling html from my nodejs server and writing it into a div on the page.
<p ng-bind-html="htmlSource"></p>
$scope.htmlSource = '<link rel="stylesheet" type="text/css" href="http://NOT-MY-SERVER/style.css"><div class='specialcss'></div>';
I'm able to display the rendered html fine. But I don't have the right formatting.
Things I need to do
Fetch the css, which is not from my server. (Shouldn't encounter cross-site scripting issues with css, right?)
Apply it just to the html snippet (and not override my site's default css)
Prevent any accompanying javascript in the html from running
Is this possible?
To add a css stylesheet to an 'html snippet' can be accomplished with shadow dom. However, shadow dom is not supported by all browsers.
It'd look be something like this:
var $compile = angular.element('body').injector().get('$compile');
var div = document.createElement('div');
var innerHtml = '<div ng-bind-html='myTemplate.html"/>'
innerHtml+='<link rel="stylesheet" type="text/css" href="http://NOT-MY-SERVER/style.css">';
var shadow = div.attachShadow({mode: 'open'});
shadow.innerHTML=innerHTML;
var element = $compile(shadow)(angular.element('body').scope());
angular.element('#parentElementInDomWhereYouWantYourTemplate').append(element)
The stylesheet would only cause CORS problems if it's not hosted on your server, or the server that is accessing the stylesheet is not whitelisted.
Plunkr
I am working on a shopping cart on Netsuite coded with nested tables... I know it sucks.
Because I only have access to fields to customize the website I need a JS snippet to be able to load a specific CSS file for the shopping cart (to avoid styling the rest of the website)
I have never done that before, here is how I would start:
<script type="text/javascript">
var path = window.location.pathname;
if(path.indexOf('/Cart') !=-1 {
// load css file
}
</script>
What code would do that for me?
Aside from closing your if(... with a ), this should get you going:
var styles = document.createElement("link");
styles.rel = "stylesheet";
styles.type = "text/css";
styles.href = "file.css"; // your file's URL
document.getElementsByTagName("head")[0].appendChild(styles);
While testing the url does work there is a better way to add tab and category specific markup.
In your website theme in the "Additions to Head" section add a tag <TAB_ADDONS> and add that to the site builder Tags but with a blank body
Then go to your list of tabs and find the shopping cart tab.
Edit it and select Tag Overrides
find TAB_ADDONS and enter:
<link rel="stylesheet" type="text/css" href="file.css">
you'd use the root relative url for the href.
This keeps your theme much cleaner and allows arbitrary code inclusions.
I am using jquery adapter for ckeditor, I am able to add custom css files in editor preview using CKEDITOR.config.contentsCss
Below is embedded javascript code to create ckeditor for textarea with #editor2 ID.
jQuery(function()
{
var config = {
contentsCss :['css/bootsrap/bootstrap.css', 'contents-custom.css'],
}
jQuery('#editor2').ckeditor(config);
I want to create a plugin which may be call "live preview" on click of this button these CSS files will be added. This button should be like toggle.
My question is, How can I control the config from adding and deleting contentCss configuration?
With jQuery, you'll be able to trick the page. I don't think there's a known way for doing that with CKEditor's API. But, you can delete the <link> your files.
//to remove styling:
$('#cke_ckeditor iframe').contents().find('html head link').remove();
//to reload CSS:
$('#cke_ckeditor iframe').contents().find('html head').append('<link href="customContents.css" rel="stylesheet" type="text/css" />');
If you want, you can control which file will be removed by removing only the first() or the last() link, as well in the reloading snippet.
Good luck!
I have a website where users can generate their own Codeigniter websites using a wizard in it users will provide module, fields and functions details. Based on the user input a website will be generated and deployed on my website and a demo will be shown to the user before they go with the download. Everything works fine.
Now I am planning to allow users to choose different styles/themes for the generated website when they are previewing it. How can allow users to see their changes immediately without reloading the entire page?
I tried by replacing their style sheet file on the generated website with the selected style and redirected to another page on the generated website. But the same style sheet file is used since it is already cached by browser. So please give me some options. If that can be done without redirecting the user it will be the best option for me.
pass a variable to the view, the variable holds the value of the filename of the stylesheet? As far as changing the style file when the user is in the same page... see this question: Is there an easy way to reload css without reloading the page?
<?php
$data['stylesheet_name'] = 'user1';
$this->load->view('viewname', $data);
/**
* View File
**/
<link rel="stylesheet" type="text/css" href="/css/user/<?= $stylesheet_name; ?>.css" />
I have used the below code and it is working without the need of changing the style sheet file name.
function reloadStylesheets() {
var queryString = '?reload=' + new Date().getTime();
$('link[rel="stylesheet"]').each(function () {
this.href = this.href.replace(/\?.*|$/, queryString);
});
}
This forces browser to reload the file since the parameter changed because of the time change.
This worked for me to replace a single stylesheet. The stylesheets are named "themegray", "themeblue", "themegreen", etc. "t" represents the new color, such as "blue".
function flipTheme(t) {
$('link[rel="stylesheet"]').each(function () {
if (this.href.indexOf(theme)>=0) {
this.href = this.href.replace(theme, t);
theme = t;
}
});
}