I have a .NET core application with a jquery pageguide in it. The colors of the application, for example the menubars, can be configured by the user.
To achieve this, I add a HtmlString with a <style> tag from a Controller. In the tag are the user specific colors in classes.
var primaryColor = "rgb(28,67,104)"; //will be configurable
return new HtmlString(($".primarycolor{{background-color:{primaryColor}; }}"));
I want to make the colors of the jquery pageguide configurable by the user, but the color values in the pageguide.css file can't obviously be modified. I read about LESS, but i cant (and shouldn't) compile it on runtime.
How can I add dynamic color support to the pageguide? Is there an relative easy way to do this with js or server side code?
Read the users input by sending it to your .NET application
when rendering your page, overwrite it by generating a CSS-file or <style> tag which you can then implement on your HTML file. That CSS overwrites the default colors.
Related
I am working on a site like Codepen and we are trying to get it off the ground.
So, a user can write some code in React and then the site will display what they've written, and will also deploy it. The problem is that some of the elements have styles which are being inherited from the main site, and cannot be overridden via CSS; the only way to do it is via inline styling. Is there some sort of JS code to reset styles to default? Something like
H1.style.* = "default"
using !important works, but it would be really to be able to give the user a clean slate for CSS when they're coding...
You can see the actual notebook (as we call it) here: https://djit.su/dL22DiUPUmCf2kQMLBoAJ
As you can see, inline styling works
And also using !important works
I would like to develop a Javascript code which would get data from a Web Service and render html for displaying details.
Users need to just place this Javascript on any page on their Website to use this feature.
The problem I will face is that the html generated by my Javascript will have a different CSS to that of the Website which is using my Javascript. Is there any way that the html generated by my Javascript would inherit the CSS of the Website where my Javascript is being used.
If you are creating a script to run on any websites, you should expect the developer of that website to work on the styling of your generated HTML. Just simply display the HTML there, maybe with basic class names and styles.
A lot of cookie legals displaying that way on multiple websites.
Example: https://policy.app.cookieinformation.com/6f7f86/cubiscan.dk/declaration-da.js
That script is to put on any websites, to display few tables of cookie usage information.
If you want to overwrite their CSS, use iframe or inline styles, inline CSS.
I developed a project on Laravel and Vue Js. In a part of this site, I have made an App in Vue whom allow the user to drags a <img> tag on another <img> tag, both contained in a DIV.
There are many (and the most unsupported) CSS applied to both images, as filters, 3dtransforation, mask, background-source...It works smooth on both Chrome and Firefox.
What I have to do now, is to save in jpg/png the "result" of all the trasformations applied to those two images, or to say it better, the html of the div container have to be converted in a image file and saved on server/rendered on the page after a click.
I didn't realise this will have been the hardest part.. Whatever I tried until now didn't worked. I tried using
Domtoimage -> The problem that I have with this javascript library is that I'm loading 1 image from the server (local currently) and 1 image from an S3disk on the AWS, and there are cross-browser compatibility problems.
Browsershot -> The issue experienced for me here is again about having the files on different storages, but here the problem is on the localhost. Hww, doing a try with both image on S3, some of the CSS properties are not rendered (mask, opacity, transform)
HTML2CANVAS -> Again both issues: cross origin, and not rendering most of the required CSSs.
At this point I really not longer know where to look out for a solution. It seems that for as easy is to set the css for two elements that works, it's impossible to ask java or the server to just "print out" what you see, exactly as you are seeing it.
About "printing": I noticed (trying to find a workaround) that even if by pressing print page, on the preview, some CSS are missing, while they are clearly visible in the page.
I'll be definitively grateful if somebody have any suggestion
As I said in comments, here are some solutions. About the solution that involves wkhtmltoimage in server side, is as follow:
wkhtmltopdf and wkhtmltoimage are open source (LGPLv3) command line
tools to render HTML into PDF and various image formats using the Qt
WebKit rendering engine
Download and install wkhtmltopdf wich includes wkhtmltoimage
Send from client all what you need (more detail below)
In backend create a html file with all what you need, you could include css and javascript
run wkhtmltoimage http://yourHtml.html yourdesiredImage.jpg
You have your page with all rendered like a browser in yourdesiredImage.jpg
As you have to send to backend some behaviors that users perform with css,
you could use window.getComputedStyle(element) to store all properties applied to an element into an object.
You have to send the object created by window.getComputedStyle(element) to the backend with ajax and reapply the rules.
To reapply those styles you could use something like:
var stylesComputed = {}//My object from frontend
var source = document.getElementById("source");
var target = document.getElementById("target");
var copy = document.getElementById("copy");
copy.addEventListener("click", function(){
var styles = "";
for(let i = 0; i<stylesComputed.length-1; i++){
styles += stylesComputed[i]+":"+stylesComputed[stylesComputed[i]]+"; ";
}
target.setAttribute("style", styles);
document.getElementById("t2").innerHTML = "Target (copied)";
});
full example here: https://jsfiddle.net/5c9rhxbn/
I have a JSON file which will bring the style details .i.e. hexadecimal values of various buttons, font-size etc.
Developing the application in ReactJs.
And I want to use those style values in a custom class in React-Bootstrap.
But to define a custom class, a css file is needed.
Question: Any way to define a variable in CSS file which brings the values from JSON?
Any way to define a variable in CSS file which brings the values from JSON?
No, this is not possible with css3.
I haven't worked with react but can't you pass your styles object to component?
If this is not the case why not to use inline style, I don't think performance hit of inline style is that relevant these days.
As a last option you could generate temp file from json and dynamically add it to page.
I was following this tutorial on Microsoft's developer network concerning using asp.net and mvc model with sql database. Here is the link to the tutorial that I was following
http://www.asp.net/mvc/tutorials/mvc-5/introduction/getting-started.
So basically, I wanted to play around with the design of the file which is defined in these three files bootstrap.css, bootstrap.min.css, and web.css.
As to my understanding , bootstrap is an html, css, and javascript framework which has the design for the elements already defined. In Visual Studio, I began to edit the bootstrap.css file by changing background-color of the jumbotron element. However, when I saved the file and ran my web application , I noticed that the color remained the same and did not change. But, when I defined the design for the .jumbotron element in the web.css file, the element's background color changed accordingly to red.
Essentially, what I want to know is if bootstrap.css is restricted for editing within the template?
What is Bootstrap
I think you're trying to refer to the Twitter Bootstrap that is used all around the Internet. It contains most of the Styling techniques for the Elements, such as buttons, inputs etc.
When you edit a website's Stylesheet, (Bootstrap.css is a Style sheet and its name doesn't make it write/edit protected file) you get the style that you've applied to it.
http://getbootstrap.com/
Web.css
This file might be the default Style sheet that was created by the Developers at Microsoft while creating the Template for the Website that you're using.
Secondly, when you edit and create this file, it is also a Style Sheet which means it would apply the style to your website and all the web pages who are refering to it.
You're right. It has all the pre-defined methods and contains all of the contents and styles required to make a web page responsive. For more: https://en.wikipedia.org/wiki/Responsive_web_design
What might have caused this problem would be cache. When you first loaded the web page, it would have captured the New Style sheet from the file System and would have applied the styles. But second time it would have loaded the File from the Cache.
https://en.wikipedia.org/wiki/Cache_(computing)
This way, the browser would load the last successive layout of the Web Page. Without loading a new StyleSheet from the File System.
I really think, you need to reload the page using CTRL + F5 button. This would be helpfull in this manner! Because Bootstrap.css is editable and you can edit it. It doesn't prevent editing, only caching would be the problem here.