I need an extra help with this, i'm just learning to code, already found this preview question but i don't understand completly how the css file must be done and upload. Or if any other way to do the same.
This is my page and this is the code that SCM provides
!-- SCM Music Player http://scmplayer.net -->
<script type="text/javascript" src="https://www.scmplayer.net/script.js"
data-config="{'skin':'skins/black/skin.css','volume':50,'autoplay':true,'shuffle':false,'repeat':1,'placement':'top','showplaylist':false,'playlist':[{'title':'blalbla','url':'test'}]}" ></script>
<!-- SCM Music Player script end -->
What I want to do it's hide it and delete the extra space that gives to the bottom.
You need something like
#playerW {
display: none!important
}
I don't like using !important because it's usually a sign of poor code, but here I think it's required as the css properties for the scm player are being set by javascript. The other method might be:
html body iframe #playerW {
display: none;
}
This adds more specificity to the target element. You want to load this after the scm.css link in your template.
However I would also check that these things are not already configurable within your theme.
Based on your last comment (and looking at the current implementation of your theme) I have this hack
#scmframe {
display: block;
background-color: transparent;
position: fixed;
top: -30px; // change this from 0px
left: 0px;
width: 100%;
height: 120%; //change this from 100%
z-index: 1667;
}
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 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.
Basically I have a client that needs us to add some information to their website that will basically add a note in the code that the accessibility reader can say something like:
If you need assistance viewing this website please call (Insert Phone Number here).
This note does not need to display on the front end of the website if they are just browsing normally without a accessibility reader.
Is this possible? Is there something like a meta tag that we can add to the site?
Consider that keyboard users may benefit from this as well. To that end, there are plenty of "skip nav" or "jump to content" patterns that may do what you want, including ones friendly to keyboard users.
I made a CodePen example of a keyboard-friendly skip nav, but here is the code...
HTML
Skip Navigation
<main id="Skip">
<h1>The Page Is About This</h1>
<p>
This is some page content
</p>
</main>
CSS
a[href="#Skip"] {
display: block;
color: #fff;
background: #000;
margin: 0;
padding: .5em 1em;
font-weight: bold;
}
a[href="#Skip"]:link,
a[href="#Skip"]:visited {
color: #fff;
text-decoration: none;
}
#media screen and (min-width: 62em) {
a[href="#Skip"] {
position: absolute;
left: -1000px;
z-index: 2;
}
a[href="#Skip"]:active,
a[href="#Skip"]:focus,
a[href="#Skip"]:hover {
display: block;
top: 0;
left: 0;
}
}
In your case you could just change the link to a phone number:
Call us if you...
And key your CSS off that href or a class or id attribute:
a#a11yCall { ... }
Just hide the text at the top level with a position:fixed and left:-9000px.
It should be read but not visible.
Just few words. Accessibility isn't only for the blind people !
There is no such common thing as an "accessibility reader".
You might be thinking about a "screen reader", but there is a small part of population using those tools, and they do not give any benefit to people with low vision, using for instance a screen magnifier or some other specific tool (enhanced contrast, ...), nor they give any benefit to people with auditive, cognitive, or musculoskeletal disorders.
The assumption that only blind people using a screen reader need to have assistance is the first problem in designing accessible websites.
Having a content not accessible to non-blind people is also discrimination.
Now, if you really still want a note designed specifically for screen reader users, use aria-label. Do not use any CSS trick.
I have problem with my text in wordpress I took this code from the source code and tried to write CSS in my wordpress template.
Code:
<div id="big-video-vid" class="video-js vjs-default-skin vjs-controls-disabled vjs-has-started vjs-playing vjs-user-active" style="width: 784px; height: 441px; display: block; top: 0px; left: -61.5px;">
I want to change the top and left in CSS in my template window..
Here is the website to check
www.produsers.qa
....... the glitch I need to fix in : venue to be confirmed
It's really not good practice to do this (override inline styles) and would be better that you can remove the inline styling from your html file, BUT you can do this by adding !important to the relevant css classes. So you could add the following to your external stylesheet
#big-video-vid {
top: new-value-here !important;
left: new-value-here !important;
}
so the styles would read (adapt the numerical values to what you need)
#big-video-vid {
top: 150px !important;
left: 100px !important;
}
But this is definitely somewhat a "hack" and should really only be done as a last resort in a situation where you cannot alter inline styles as I said
apologies for the question again my last question was poorly asked and code was missing.
I'm having trouble with my plugin I'm trying to implement the wordpress media uploader, unfortunately iv ran into a problem
i have it working and showing up when a upload button is clicked but it shows only half of the uploader
i think i found the problem for some reason the TB_window div opens with
margi-left: -334px;
i adjusted this in fire fox (fire bug) to auto it appears normally e.g. the current div looks like this.
<div id="TB_window" style="width: 670px; height: 351px; margin-left: -335px; top: 20px; margin-top: 0pt; display: block;">
and if i change it to
<div id="TB_window" style="width: 670px; height: 351px; margin-left auto; margin-right: auto; top: 20px; display: block; position: fixed;">
there must be a simple hook / way to change the css for this box for my plugin
how can i do this ?
Well I think the easiest would be to just edit the CSS file for your Wordpress installation. Log into Wordpress and navigate to Appearance -> Editor. Then find styles.css in bottom right. Add your CSS markup to here.
div#TB_window { margin-left: auto; }
If that doesn't work then you can insert code into the head of your blog using a callback.
add_action('wp_head', 'InsertMyStyleSheet');
function InsertMyStyleSheet() {
echo '<link href="pathToStylesheet" type="text/css" rel="stylesheet" />
}
And add your own CSS for your theme there.
As long as relying on Javascript isn't a problem, you could try the following:
_tbw = document.getElementById('TB_window');
_tbw.style.margin = "auto";
Or, if you're using jQuery:
$(document).ready(function(){
var _TBwindow = $('#TB_window');
_TBwindow.css('margin-left', 'auto');
}