This is generic question, is it possible to monkey patch the CSS from link tag? I want to modify PrismJS library that have color and background and patch it to have --color and --background. Is something like this possible dynamically using JavaScript?
I would like this to be generic so no Service Worker, that will work only for local files that can be changed by modifying the file, I want to affect every possible url the same I'm patching JavaScript file. I can assume that the CSS selectors will always be the same.
The problem is that without the monkey patch I will need to maintain all themes that PrismJS have for different colors, I can write script that will create those styles for me but I want to know if there is a way to monkey patch. Also I can have single CSS file to be used instead of the PrismJS CSS, but I will lose different styles.
I have other options but right now I only want to know if monkey patch of external CSS is possible? I can't find anything like this.
I need to add that PrismJS themes are pretty simple they are just few selectors with colors. I'm not sure if they all have same selectors though.
EDIT:
To give you context I need this for jQuery Terminal to render text that user type (any programming language to be in color). I have one CSS that I have locally but without that file it don't work exactly the same (mainly there is lack of style for text selection that I would like to be in color, to have 100% working code as I want). The idea is to use same monkey patch I have but to use prism.css.
Related
Hi I'm an average in CSS but I did not understand why in many websites I find that this file does not appear and many theme I do not find the css file in charge of this class is this way in css I do not know.
I want to edit this class from the file but can not find the file?
Strangely, it's not the automatic properties of the browser.
Not necessary that class must have css written. Sometimes classes written to manage JavaScript.
You are looking at the final result of what is probably a CSS-in-JS approach that many popular tools out there provide. The original classes that the developer writes in their code are transformed into the sort of garbled looking classes when the build process is run.
The result is CSS classes that are unique and do not conflict in the traditional global CSS sense. This also means you cannot so easily track down the source of the code through your inspector unless the developer has generated and provided source maps as well.
A good example of one of these CSS-in-JS tools is Styled Components (https://www.styled-components.com/) but there are many others out there.
I am new here.
Just want to ask several question to anyone experienced in this field.
So I have just bought a php website, and the case is that the owner of this theme seems a bit strict with copyright stuff, so he placed his own identity in almost every way.
In example, the website named "mcdonalds", he have almost in his entire css class after his name/brand, example .mcdonalds_header , or .mcdonalds_style.css , etc .
Now my question is,
Is it possible to change entire css class dynamically?
I meant, if I open it through text editor maybe I could replace them all by hitting Ctrl+H and replace "mcdonalds_" with [nothing].But of course it will return many errors as the entire php and js file are associated with those class.
What I want in example I have
index.php with 8 div have class "mcdonalds_grid"
style.css file with class "mcdonalds_grid"
is it possible to edit the class in css "mcdonalds_grid" to "gridStyle", and then the entire 8 class in the file changed automatically, too?
Because I am not sure to do it manually. In my case I have up to hundred thousands to be edited. It sicks. And if you asked the reason I need to do this, so it looks more professional using my own brand rather than using mcdonald's stuffs.
Any view would be appreciated.
Thanks!
Others have mentioned Jquery.
You could also do it dynamically with Less Mixins: https://www.gaslampmedia.com/mapping-css-styles-less/.
Or you could do it non-dynamically (I would recommend this). You could use an IDE (Integrated Development Environment) or an advanced text editor to search and replace all instances of a text string in the entire project at once. In your case, you could replace all instances of mcdonald with the name of your company or project. Advanced Text Editors like Sublime Text or Notepad++ could let you do this, but you would generally need to open all of the files at once. IDEs like Visual Studio or Dreamweaver would also let you do this, with the benefit of not having to open all of the files (you just add the files to your project).
I personally don't suggest to make these types of edit but if you must need to do then follow the process:
From the answer of the question
You can use IDE to change something in the whole project. I would suggest NetBeans. It's easy. Just add the project to NetBeans, click on edit (in the top left corner) and then click on Replace in project.. ( check in the bottom of the popup)
then
I just learned a lot about how to avoid inclusion of "jQuery-min.js". The reason I thought I needed jQuery was to use $('someTag'). That was the only jQuery call I had in my document.
So I buckled down and learned a little about NodeLists for the purpose of using document.getElementsByTagName. See Specify an array without jQuery and without NodeLists [SOLVED .. I think?]
Now, I've come across Modernizer in my effort to include certain styles for Javascript and other styles for non-Javascript.
Obviously its size is microscopic compared to jQuery-min.js ... but it is another file I need to include. Besides, the presence of Modernizer eliminates a bunch of older Browsers that might still be used. Heaven knows "non-js" and "js" classes are very appealing ... but another file??
So ... without Modernizer, how can I include certain styles for Javascript and other styles for non-Javascript?? display:none and display:block are neat, but I need to dynamically switch back and forth depending on the presence of Javascript.
Contribution of ideas would be awesome!
You can write a single line of Javascript code to add a CSS class to your <body> element:
document.body.classList.add('js');
I mean next thing: I want to add some specific class to table when it's creating in editor area (iframe) for default styling reasons. I now how to do this with changing it's source code of plugin table, but it is bad decision to change that files... And it is impossible to do through configs. Maybe there is some way to redefine table behaviour on the fly...
What will be the best solution in this case?
Thanks in advance!
You can write a plugin to modify the behavior of the table dialog or any other one on the fly. How far you can go with this approach depends on your abilities and which changes do you want. If it becomes too complex to adjust this way then the second approach is to copy the original plugin that you want to modify and create your own version based on that (but outside the CKEditor source folder)
This plugin for example adds a field in the Table and Cell dialogs to pick a background image: http://cksource.com/forums/viewtopic.php?f=18&t=23607
You can learn how to write your plugins by following the CKEditor tutorials.
I think changing the source code for "styling reasons" is a bad idea.
You can easily change the default CSS by changing the default skin (v2 skin I think) or by adding a custom skin to CKEditor.
Documentation
Developers Guide
I normally work with jQuery, which takes away most of the cross browser pain (although not, unfortunately, all). However, it doesn't seem to have any support for manipulation of the CSS DOM, and this still seems to be a bit of a minefield - QuirksMode has some information.
Our application allows users to theme their site to some extend by generating a CSS stylesheet with the colours that they have selected. It's pretty straightforward, but I'd like to let them "preview" it by applying the changes directly to the CSS DOM, before having them save it back to the database and generating the CSS file.
Does anyone know of a library which will make cross browser CSS DOM maniuplation easier? Just so we're clear, I'm not trying to change the css rules on an element, or set of elements (like with $.css()), or to add/remove classes. I would like to modify the stylesheets directly.
I highly recommend the YUI stylesheet utility. I haven't seen any other libraries with as much functionality or as clean an interface.
Couldn't you just add or replace a <style> element in the main document's DOM, and fill it with the generated CSS?
Best and easiest way, is to create a .jsp .php or whatever you're using which accepts colour parameters, which in turn renders a .css output with colours replaced.
Use JavaScript to make a request with colour parameters and append the css script to the page.
It is possible to do it directly on the styleSheet object, though this will take more time and create more maintenance. Everytime you want to change your custom stylesheet you actually use for production, you will also have to change the preview version. Ergo discrepancies will ensue.
Just reuse the stylesheet template you're going to use for production anyways.
Maybe you should try something like:
document.styleSheets[0].disabled = true;
This disabled the first stylesheet of the current page. Maybe if you play around with it you can resolve your problem.