How do I remove the grey, dotted line/border around videoes on certain webpages?
When I'm watching videos on kissanime, a grey, dotted line appears around the video when I have it "marked". It disappears when I click somewhere else, but then I can't use the space bar to pause my video, which is proving to be annoying. Anyone how I can remove it in a simple manner? I'm using a flash player. The dotted line does not appear on youtube videos.
Chosen solution
Hi Elisekv, here's a quick intro to Stylish.
After installation, there should be a new icon of an S in a box on the toolbar. If that's missing, you can use the Customize feature to add it in a convenient location: Customize Firefox controls, buttons and toolbars.
Click the "S" then Write New Style, then if you are only the site, you can pick one of the choices such as "For kissanime.com" or if you are not on the site, you can use Blank Style.
If you used Blank Style, you then will need to paste this:
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("kissanime.com") {
}
Then the actual style rule goes into the blank line between the { and }:
#divContentVideo, #centerDivVideo, .fluid_width_video_wrapper, #embedVideo, #my_video_1 {outline:0 !important;}
Click the Preview button and test whether it modified the site; for some modifications, you have to reload the page.
Once the rule is confirmed to work, you can name and save it.
Read this answer in context 👍 0All Replies (8)
You could try applying a custom style rule to the page such as the following:
#divContentVideo, #centerDivVideo, .fluid_width_video_wrapper, #embedVideo, #my_video_1 {outline:0 !important;}
That covers the video containers for both Flash and HTML5 (I don't see an outline for Flash myself).
To apply custom style rules to pages, you can use the Stylish extension or create a userContent.css file. Both of those require further explanation, but I am out of time for posting right now, sorry.
I downloaded the Stylish extension, but have no idea how to use it to remove the grey line :S
You can restrict rules to a specific domain by wrapping the code in an @-moz-document domain(){} block.
@-moz-document domain(kissanime.com){ #divContentVideo, #centerDivVideo, .fluid_width_video_wrapper, #embedVideo, #my_video_1 {outline:0 !important;} }
cor-el said
You can restrict rules to a specific domain by wrapping the code in an @-moz-document domain(){} block.@-moz-document domain(kissanime.com){ #divContentVideo, #centerDivVideo, .fluid_width_video_wrapper, #embedVideo, #my_video_1 {outline:0 !important;} }
I'm still a bit lost. I'm not familiar with codes and such and the webpage didn't help much... How do I do this?
you can also try this: enter about:config into the firefox address bar (confirm the info message in case it shows up) & search for the preference named browser.display.focus_ring_width. double-click it and change its value to 0.
You can install the Stylish extension if you feel uncomfortable with creating the chrome folder in the profile folder and the userContent.css file within this folder.
Add code to the userContent.css file.
The customization files userChrome.css (user interface) and userContent.css (websites) are located in the chrome folder in the Firefox profile folder.
You can use this button to go to the current Firefox profile folder:
- Help > Troubleshooting Information > Profile Directory: Show Folder (Linux: Open Directory; Mac: Show in Finder)
- http://kb.mozillazine.org/Profile_folder_-_Firefox
- Create the chrome folder (lowercase) in the <xxxxxxxx>.default profile folder if this folder doesn't exist
- Use a plain text editor like Notepad to create a (new) userContent.css file in the chrome folder (file name is case sensitive)
- Paste the code in the userContent.css file in the editor window
- Make sure that you select "All files" and not "Text files" when you save the file via "Save file as" in the text editor as userContent.css.
Otherwise Windows may add a hidden .txt file extension and you end up with a not working userContent.css.txt file
Chosen Solution
Hi Elisekv, here's a quick intro to Stylish.
After installation, there should be a new icon of an S in a box on the toolbar. If that's missing, you can use the Customize feature to add it in a convenient location: Customize Firefox controls, buttons and toolbars.
Click the "S" then Write New Style, then if you are only the site, you can pick one of the choices such as "For kissanime.com" or if you are not on the site, you can use Blank Style.
If you used Blank Style, you then will need to paste this:
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("kissanime.com") {
}
Then the actual style rule goes into the blank line between the { and }:
#divContentVideo, #centerDivVideo, .fluid_width_video_wrapper, #embedVideo, #my_video_1 {outline:0 !important;}
Click the Preview button and test whether it modified the site; for some modifications, you have to reload the page.
Once the rule is confirmed to work, you can name and save it.
philipp said
you can also try this: enter about:config into the firefox address bar (confirm the info message in case it shows up) & search for the preference named browser.display.focus_ring_width. double-click it and change its value to 0.
I tried it and it didn't work.
cor-el said
You can install the Stylish extension if you feel uncomfortable with creating the chrome folder in the profile folder and the userContent.css file within this folder.
Add code to the userContent.css file.
The customization files userChrome.css (user interface) and userContent.css (websites) are located in the chrome folder in the Firefox profile folder.
You can use this button to go to the current Firefox profile folder:
- Help > Troubleshooting Information > Profile Directory: Show Folder (Linux: Open Directory; Mac: Show in Finder)
- http://kb.mozillazine.org/Profile_folder_-_Firefox
- Create the chrome folder (lowercase) in the <xxxxxxxx>.default profile folder if this folder doesn't exist
- Use a plain text editor like Notepad to create a (new) userContent.css file in the chrome folder (file name is case sensitive)
- Paste the code in the userContent.css file in the editor window
- Make sure that you select "All files" and not "Text files" when you save the file via "Save file as" in the text editor as userContent.css.
Otherwise Windows may add a hidden .txt file extension and you end up with a not working userContent.css.txt file
Thank you for the info!
jscher2000 said
Hi Elisekv, here's a quick intro to Stylish.
After installation, there should be a new icon of an S in a box on the toolbar. If that's missing, you can use the Customize feature to add it in a convenient location: Customize Firefox controls, buttons and toolbars.
Click the "S" then Write New Style, then if you are only the site, you can pick one of the choices such as "For kissanime.com" or if you are not on the site, you can use Blank Style.
If you used Blank Style, you then will need to paste this:
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("kissanime.com") {
}
Then the actual style rule goes into the blank line between the { and }:
#divContentVideo, #centerDivVideo, .fluid_width_video_wrapper, #embedVideo, #my_video_1 {outline:0 !important;}
Click the Preview button and test whether it modified the site; for some modifications, you have to reload the page.
Once the rule is confirmed to work, you can name and save it.
This method worked! Thank you so much! :D