I don't have dyslexia, yet still feeling much hard to read any text on the screen. So I want to add letter-spacing & word-spacing on my Kinder app by changing its local files. The problem is, after I changed contents of the local files, Kinder won't be launched. It simply doesn't response.
Here's what I have done on app-index.js file;
// app-index.js
<style>
* {
letter-spacing: 1em;
word-spacing: 1em; // values are just for testing.
}
</style>
In bundle.js file(optimised);
g(e,"table.amazon-table-style-0 tr th","border:none; padding:1px; text-align:justify; letter-spacing:1em; word-spacing:1em")
I would like to have some solutions to resolve my problem. (I'm working on Mac)
Thanks.
======= Progress Updated =======
I found styles.css file later in /Applications/Kindle.app/Contents/Resources and I modified it. However, the app still won't open.
// styles.css
* {
letter-spacing: 15px;
}
Related
I wrote a Google Chrome extension, which popups a dialog with an autocomplete field and it's own style, but there are some sites where my CSS gets totally broken, which doesn't look very nice.
I know about isolating styles with iFrames, but in Google Chrome extension there is no way to isolate my HTML and CSS in this way. Another method is to wrap all my stuff into a separated div with it's own id and relative styles for that id, and I do so, but it seems that it doesn't work on some sites with "hard" tags style overloading or "!important" directives in the CSS code.
So, I want to know is there any way to really isolate my styles in z convenient way or it's my bad carma to overload every little CSS property to fix one or another style issue for each site?
By the way: I set up my manifest to load all the things at the "document_end", but I see it's not being applied to the stylesheets which is every time loaded whenever the DOM is ready.
At the time of asking the question, your only option was to either use iframes, or stylesheets with a very high specificity and explicitly set all properties that might affect styles. The last method is very cumbersome, because there will always be some property that is overlooked by you. Consequently, the only usable method for isolating stylesheets was to use iframes.
The solution to this problem -isolation of styles without iframes- is Shadow DOM (since Chrome 25). You can find a tutorial at HTML5 Rocks. For a real-world Chrome extension that uses Shadow DOM to isolate styles, see Display #Anchors (source code here).
As I've recently gone through the gauntlet of this issue, I want to share some information I think is valuable.
First, Rob W's answer is correct. Shadow DOM is the correct solution to this problem. However, in my case not only did I need CSS isolation, I also needed JavaScript events. For example, what happens if the user clicks a button that lives within the isolated HTML? This gets really ugly with just Shadow DOM, but we have another Web Components technology, Custom Elements, to the rescue. Except that as of this writing there is a bug in chrome that prevents custom element in chrome extensions. See my questions here and here and the bug here.
So where does that leave us? I believe the best solution today is IFrames, which is what I went with. The article shahalpk linked is great but it only describes part of the process. Here's how I did it:
First, create an html file and js file for your isolated widget. Everything inside these files will run in an isolated environment in an iframe. Be sure to source your js file from the html file.
//iframe.js
var button = document.querySelector('.my-button');
button.addEventListener('click', function() {
// do useful things
});
//iframe.html
<style>
/* css */
</style>
<button class='my-button'>Hi there</button>
<script src='iframe.js'></script>
Next, inside your content script create an iframe element in javascript. You need to do it in javascript because you have to use chrome.extension.getURL in order to grab your iframe html file:
var iframe = document.createElement('iframe');
iframe.src = chrome.extension.getURL("iframe.html");
document.body.appendChild(iframe);
And that's it.
One thing to keep in mind: If you need to communicated between the iframe and the rest of the content script, you need to chrome.runtime.sendMessage() to the background page, and then chrome.tabs.sendMessage from the background page back to the tab. They can't communicate directly.
EDIT: I wrote a blog post detailing everything I learned through my process, including a complete example chrome extension and lots of links to different information:
https://apitman.com/3/#chrome-extension-content-script-stylesheet-isolation
In case my blog goes down, here's the sources to the original post:
Blog post
Example source
Either use all
.some-selector {
all: initial;
}
.some-selector * {
all: unset;
}
or use Shadow DOM
Library
function Widget(nodeName, appendTo){
this.outer = document.createElement(nodeName || 'DIV');
this.outer.className = 'extension-widget-' + chrome.runtime.id;
this.inner = this.outer.createShadowRoot();
(appendTo || document.body).appendChild(this.outer);
}
Widget.prototype.show = function(){
this.outer.style.display = 'block';
return this;
};
Widget.prototype.hide = function(){
this.outer.style.display = 'none';
return this;
};
Usage
var myWidget = new Widget();
myWidget.inner.innerHTML = '<h1>myWidget</h1>';
You can access the widget contents via myWidget.inner and the outer via myWidget.outer.
Styles
/*
* Reset Widget Wrapper Element
*/
.extension-widget-__MSG_##extension_id__ {
background: none;
border: none;
bottom: auto;
box-shadow: none;
color: black;
cursor: auto;
display: inline;
float: none;
font-family : "Helvetica Neue", "Helvetica", "Arial", sans-serif;
font-size: inherit;
font-style: normal;
font-variant: normal;
font-weight: normal;
height: auto;
left: auto;
letter-spacing: 0;
line-height: 100%;
margin: 0;
max-height: none;
max-width: none;
min-height: 0;
min-width: 0;
opacity: 1;
padding: 0;
position: static;
right: auto;
text-align: left;
text-decoration: none;
text-indent: 0;
text-shadow: none;
text-transform: none;
top: auto;
vertical-align: baseline;
white-space: normal;
width: auto;
z-index: 2147483648;
}
/*
* Add your own styles here
* but always prefix them with:
*
* .extension-widget-__MSG_##extension_id__
*
*/
.extension-widget-__MSG_##extension_id__{
position: fixed;
top: 100px;
margin: 0 auto;
left: 0;
right: 0;
width: 500px;
}
.extension-widget-__MSG_##extension_id__::shadow h1 {
display: block;
margin: 0 auto;
padding: 20px;
background-color: yellow;
border: 10px solid green;
font-size: 20px;
text-align: center;
}
I recently created Boundary, a CSS+JS library to solve problems just like this. Boundary creates elements that are completely separate from the existing webpage's CSS.
Take creating a dialog for example. After installing Boundary, you can do this in your content script
var dialog = Boundary.createBox("yourDialogID", "yourDialogClassName");
Boundary.loadBoxCSS("#yourDialogID", "style-for-elems-in-dialog.css");
Boundary.appendToBox(
"#yourDialogID",
"<button id='submit_button'>submit</button>"
);
Boundary.find("#submit_button").click(function() {
// some js after button is clicked.
});
Elements within #yourDialogID will not be affected by the existing webpage. And find() function returns a regular jQuery DOM element so you can do whatever you want with it.
Hope this helps. Please let me know if you have any question.
https://github.com/liviavinci/Boundary
Use iframes. It's a workaround, but works fine.
Maxime has written an article on it.
I am not sure if this is something I did wrong when installing Bootstrap 5, but a lot of my buttons are using a black font instead of the white font as is seen on the Bootstrap 5 Documentation
For example, the .btn-primary on the Bootstrap docs looks like this:
However when I use the identical HTML I get this as a result:
For reference the HTML in both their example and mine is:
<button type="button" class="btn btn-primary">Primary</button>
Not only is the text colour a different colour, but the background colour is different as well. In fact looking through my compiled .css file, a good chunk of the bootstrap colours used all across the code has this "washed out" appearance similar to the blue colour in the button. From the Chrome dev tools the style appears to be coming from Bootstrap files themselves, not from any style I am inadvertently applying. The SCSS is being compiled down to CSS files via the normal Laravel setup (webpack mix). I am just using the NPM packages for bootstrap 5.
window.bootstrap = require('bootstrap'); and NPM package "bootstrap": "^5.1.3",
My app.scss file doesn't have much at all in it:
// Fonts
#import url('https://fonts.googleapis.com/css?family=Nunito');
// Variables
#import 'variables';
// Bootstrap
#import '~bootstrap/scss/bootstrap';
#import "~bootstrap-icons/font/bootstrap-icons";
// "Lobster" Font for H1's
#import "https://fonts.googleapis.com/css2?family=Cuprum&family=Lobster&display=swap";
// Flatpickr Styles
#import "~flatpickr/dist/flatpickr.min.css";
// Font Awesome Free
#import "~#fortawesome/fontawesome-free/css/all.min.css";
// DataTables Styles
#import "~datatables.net-bs5/css/dataTables.bootstrap5.min.css";
#import "~datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css";
h1 {
font-family: 'Lobster', cursive;
}
a.torn-link {
color: $orange;
}
.ttt-title {
font-family: 'Lobster', cursive;
}
.card-title {
font-family: 'Cuprum', sans-serif;
}
html {
background-color: #fff;
color: #636b6f;
}
body {
background-color: #fff;
color: #636b6f;
}
.links {
>a {
color: #636b6f;
padding: 0 25px;
font-size: 13px;
font-weight: 600;
letter-spacing: .1rem;
text-decoration: none;
text-transform: uppercase;
}
}
#settings-button {
&:hover {
fill: rgba(189, 189, 189, 0.25);
}
}
.ui-dialog-title {
font-family: 'Cuprum', sans-serif;
}
thead, th {
text-align: center;
}
Edit: Even all the Bootstrap Colored links appear to be washed out. For example the .link-warning yellow is not possible to use as the colour is too washed out to be able to read it. Whereas the yellow on their page is completely readable. So it's not even that I am just accidentally applying a style to a button or something.
Edit2:
Here is what my button looks like in the dev tools (note the colours differ from what the Bootstrap 5 docs colours have
and the buttons CSS is just coming from the compiled app.css file generated via the webpack:
Edit 3: My _variables.scss file:
// Body
$body-bg: #f8fafc;
// Typography
$font-family-sans-serif: 'Nunito', sans-serif;
$font-size-base: 0.9rem;
$line-height-base: 1.6;
// Colors
$blue: #3490dc;
$indigo: #6574cd;
$purple: #9561e2;
$pink: #f66d9b;
$red: #e3342f;
$orange: #f6993f;
$yellow: #ffed4a;
$green: #38c172;
$teal: #4dc0b5;
$cyan: #6cb2eb;
In the _variables.scss file at some point in adding Bootstrap 5 to Laravel 8 it looks like one of the scripts added colours, or I messed up at some point and added a colour pallet into the variables file.
All of the colours in the variables file were similar to the Bootstrap default colours, but instead were a more washed out version. This is what was causing anything in Bootstrap which used these variables to appear washed out.
Simply removing all the colours I had defined in the _variables.scss file fixed the problem.
Thanks for your answer ComputerLocus, I was experiencing the same problem. Since I couldn't add a comment due to reputation I will write this answer.
The solution stated was correct. In more detail you need to accesss _variables.scss which can be found in resources/sass/. Once you delete the conflicting declared colours, you will need to run npm run dev in the terminal inside your main project directory. If changes still not showing, refresh your page using ctrl + F5.
That's all, folks :)
I'm working on implementing different themes across my website. I've refactored my main stylesheet to feature variables, and have three other "theme" stylesheets that define those variables at the :root level. The final HTML then links to two stylesheets: The main stylesheet and one of the three theme stylesheets, which are switched on button click by changing the link's href attribute. Somehow, only some of the variables are working.
/* dark.css (theme stylesheet only containing the custom properties) */
/* Only --background works */
:root {
--background: #000000;
--seperator: rgba(1,1,1,0.12);
--text: #FFFFFF;
--block-border: #404040;
--block-shadow: #000000;
--block-background: #151017;
}
/* All properties work except for --comment */
code {
--keyword: #F72057;
--type: #FF9519;
--call: #FF5700;
--property: #FF5700;
--number: #F72057;
--string: #F72057;
--comment: #FFFFFF;
--dot-access: #FF5700;
--preprocessing: #646485;
}
When I then go into the inspector, everything seems to be alright. I can see the proper inheritance, and I can even click on the variable where it's used and see the intended color.
Some examples of how the variables are used:
/* styles.css (main stylesheet) */
body {
...
background: var(--background);
color: var(--text);
}
pre code .comment {
color: var(--comment);
opacity: 0.4;
}
Other approaches
I've tried several other approaches, all of which led to the same result (only some variables working).
Instead of linking to another stylesheet, directly change the variables with javascript on the HTML tag
Instead of linking to multiple stylesheets, having three separate main stylesheets
Changing a custom attribute in the HTML tag and defining all variables like [theme="dark"] {...} in one main stylesheet
As #Pushkin and #Temany Afif have pointed out, there were strange characters all over my code. A quick project-wide find and replace solved the problem.
So, I'm building a hybrid app using the Ionic framework and AngularJS.
I created a volume slider with a custom style, using the code below:
style.css
input[type=range] {
-webkit-appearance: none;
height: 9px;
background-image: url("/img/bar.png");
border: none;
width: 280px;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: none;
height: 30px;
width: 30px;
background-image: url("/img/slider.png");
}
When I test it in the browser it works fine. But the problem is: to run it in Android I have to add "android_asset/www/" in the image path. For all the images that I'm using in the html, I made a function in the js file that detects if the app is running in Android, and if it returns true, the function automatically add the "android_asset/www/". But in my case, the images for the volume slider's style are added in the CSS, so I can't call the js function.
So, how can I fix it? How to add "android_asset/www/" to the image's path in the CSS only if it is running in Android? Is there a way to call the js function in CSS? Is it possible to change the image's path in CSS from the html?
This is the js function's code:
app.js
$scope.convertAndroid = function(src){
if(device.platform.toLowerCase() === "android") { src = "/android_asset/www" + src; }
return src;
};
And this is how I invoke the function in the html
index.html
<img src={{convertAndroid('/img/something.png')}}>
Well, there is a mistake in the general concept here. A hybrid application creates separate WWW folders for each platform, i.e. web, Android, IOS, etc. For example, following is the general hierarchy:
root project
----wwww
--------platforms
------------android
----------------assets
--------------------www
------------ios
It means that, every platform sees the related WWW folder as the root directory. If you are running on Android, it will read the WWW inside assets. You just have to create the same content for every WWW folder in your project.
I have broken it down to it simplest form but still cannot find out why this is not working. All files resolve and the imports in Bootstrap are loaded yet, the styles aren't loaded.
bootstrap 1.4.0
less 1.1.3
<html>
<head>
<title>ahhhhhh...</title>
<link rel="stylesheet/less" href="/less/bootstrap/1.4.0/bootstrap.less">
<script src="/less/less-1.1.3.min.js"></script>
</head>
<body>
<h1>WTF!!!</h1>
</body>
</html>
I made a simple style.less which works fine! Am I missing something glaringly obvious ?
Update:
style.less as requested by Todd :
#primary_color: green;
h1 {
color: #primary_color;
}
Update 3/5/2012: The Bootstrap guys have fixed this problem in version 2.0.2 of Bootstrap (not yet released). See this commit.
The underlying bug is that the present version of less.js doesn't allow you to use a variable for for the url() value directly (e.g. url(#iconWhiteSpritePath)) -- instead you have to use string interpolation (e.g. url("#{iconWhiteSpritePath}")), which accomplishes the same thing. The bootstrap guys just updated their syntax to take this quirk into account.
Original Answer
I ran into the exact problem today and figured out the cause of it. Since your stack is a few versions before mine (I'm using Bootstrap 2.0 and less.js 1.2.2) I can't be sure it's the same issue, but it's possibly related.
Anyhow, the problem for me was that Twitter Bootstrap is defining some variables:
#iconSpritePath: "../img/glyphicons-halflings.png";
#iconWhiteSpritePath: "../img/glyphicons-halflings-white.png";
And then using them directly in the url() value for a background-image in sprites.less:
[class^="icon-"],
[class*=" icon-"] {
display: inline-block;
width: 14px;
height: 14px;
line-height: 14px;
vertical-align: text-top;
background-image: url(#iconSpritePath);
background-position: 14px 14px;
background-repeat: no-repeat;
.ie7-restore-right-whitespace();
}
.icon-white {
background-image: url(#iconWhiteSpritePath);
}
Per the discussion in this Github issue that's causing a major problem. When less.js chokes on this value, the whole compilation fails.
The good news is there is a fix in that issue, provided by csnover. Just change this line in tree.URL:
if (typeof(window) !== 'undefined' && !/^(?:https?:\/\/|file:\/\/|data:|\/)/.test(val.value) && paths.length > 0) {
to
if (typeof(window) !== 'undefined' && typeof(val.value) !== 'undefined' && !/^(?:https?:\/\/|file:\/\/|data:|\/)/.test(val.value) && paths.length > 0) {
and you should be set. In other words, we just ensure that val.value is set so that that charAt() doesn't choke on an undefined.
Hopefully this fix will be committed to the project soon and Bootstrap will work with less.js in the browser environment out of the box.
If you are developing this locally, make sure that the browser is using the correct protocol. It should display http: in the address bar, not file:.
On my Windows 7 machine using Chrome (with a XAMPP setup), I was having the same CSS problem using less.js with Bootstrap when accessing the .html file at:
file:///C:/xampp/htdocs/index.html
However, it did render properly via http at:
http://localhost/index.html
Not certain why, but I imagine that less.js relies on HTTP headers.
for me worked
[class^="icon-"],
[class*=" icon-"] {
display: inline-block;
width: 14px;
height: 14px;
line-height: 14px;
vertical-align: text-top;
background-image: url(../img/glyphicons-halflings.png);
background-position: 14px 14px;
background-repeat: no-repeat;
.ie7-restore-right-whitespace();
}
.icon-white {
background-image: url(../img/glyphicons-halflings-white.png);
}
so replace
url(#iconSpritePath);
with
url(../img/glyphicons-halflings.png);
on less.js v1.2.1 and Bootstrap v2.0.1
Is it the problem with your file structure?
/less/bootstrap/1.4.0/bootstrap.less will point to the root of your domain regardless of your html file.
If you are hosting with apache and you have the following project structure:
www/
your project/
less/
index.html
another project/
others/
When you access index.html from http://localhost, it will look up the less file from the domain root which is www/. Thus as no less folder is under this root directory, it will returned as 404 (not found).
So, the solution is to use relative url for your less files. If you have the above structure, remove the '/' and use less/bootstrap/1.4.0/bootstrap.less instead.