Is it possible to add css rule to an element at some page by adblock?
Something like this
#myElement {
color: white !important;
}
I tried to find a script that updates style of this element on page load but it seems that it is not a best way.
It's possible to do it on uBlock Origin and Adguard (as far as I know). Each has its own syntax for the styling rules, but uBlock is capable understanding both.
Here is an example of a CSS rule that changes Twitter background:
twitter.com#$#body.logged-in{ background-color: #8c8787 !important; }
The styling filters should be constructed like this:
<domain> + #$# + <selector> + { <style> }
Just avoid puting a space between the selector and the opening brace. Cause it can give you some trouble. Reference:
https://github.com/gorhill/uBlock/wiki/Static-filter-syntax#style
https://adguard.com/en/filterrules.html#cosmetic-css-rules
The other answers weren't working for me but there is a way to change an element's style:
example.com##h1:style(background-color: blue !important)
Make sure not to use curly brackets.
There is also some documentation on GitHub.
EDIT: As BeeLabeille mentioned this advice seems specific to uBlock.
I don't think it's possible for AdBlock to change CSS properties, you can use an extension like Stylish (available for Firefox and Chrome) to do just that though.
For AdBlock Plus, you can try this:
##.ytp-pause-overlay, .ytp-scroll-min
##.html5-endscreen, .ytp-player-content, .videowall-endscreen, .ytp-endscreen-paginate, .ytp-show-tiles
##.ytp-endscreen-content
This should disable the display of ads during the pause, and recommended videos, at the end of the video.
PS: Ah.. this is not the subject of the question.. this removes the class from the div element. Well, maybe someone will come in handy, to delete unnecessary blocks in the Youtube player.
Related
I'm experimenting with the Sphinx AutoAPI to make docs more maintainable. It's doing a great job, except for one thing: breadcrumbs.
Within the docs generated by AutoAPI, breadcrumbs don't work as I'd expect. Instead of adding a linked item at each depth, we get “Docs >> ”, followed by a single linked item.
This is a usability a problem, because you can’t navigate back up to a parent article after clicking into a child.
Note: I'm using the sphinx_rtd_theme, with a custom extrabody block for the header.
I haven't been able to find any documentation for the breadcrumbs in sphinx_rtd_theme.
Before diving into source code, I thought I'd ask if anyone else has seen/fixed this issue before. Thanks!
PS: You can see a draft PR for this work here: https://github.com/great-expectations/great_expectations/pull/1582
Thanks to Steve Piercy for a his helpful tip from the Pyramid project!
I added these lines at the end of my index.rst to activate breadcrumbs.
.. toctree::
:maxdepth: 2
autoapi/index
The breadcrumb links were still formatted like inline code, so I hacked my _static/style.css file like so:
ul.wy-breadcrumbs li code span.pre{
font-size: 16px;
font-family: HKGroteskPro, serif;
font-weight: 400;
color: rgb(155, 89, 182);
}
This styling isn't perfect, but close enough to not be jarring.
I don't have a lot of experience with Joomla and I'm sure how this will be a really simple question to someone who was work in Joomla before.
I'm working on existing project where I need to add inline css style to elements which are created on this way:
JHTML::_('grid.sort', $name[$id], 'a.'.$name[$id], $this->listDirn, $this->listOrder)
So I need something like this:
JHTML::_('grid.sort', $name[$id], 'a.'.$name[$id], $this->listDirn, $this->listOrder, 'style: height 500px; color: blue;')
Thanks in advance
Every kind of help will be appreciated
There is no way to pass styles to the sort element directly as you can see here in the code
https://github.com/joomla/joomla-cms/blob/staging/libraries/cms/html/grid.php#L74.
What you can do is to add the style on the document directly:
JFactory::getDocument()->addStyleDeclaration('#myelement {height 500px; color: blue;}');
perhaps you want to add !important to the style to enforce it.
I'm using Bamboo invoice as an invoice generator, and I'm trying to customize the invoice template, but no matter what I do, the font just won't seem to adjust.
currently I have
body {
margin: 0.5in;
font-family: 'helvetica';
font-size: 10pt;}
I've read up on it, and helvetica is an installed font, so it should work
to make sure I changed it to 'courier'; which is also in the lib/fonts directory, but the font remains the same.
Any help?
Kinda late, but still applicable for google visitors
I had a similar problem with DomPDF, but since BambooInvoice uses it... Anyway DomPDF has trouble with the font-family definition in the CSS. I applied inline style to the top div box to solve the problem.
<div id="container" style="font-family:sans-serif;">
....
</div>
I solved my problem by removing a font: inherit that was applied as a 'css-reset' to almost all elements as a first declariation. Apparently this is not overridden by later declarations, and/or inherit doesn't work properly.
I had similar problem with DomPDF 6b3 when trying to use font-family or font-size. Finally discovered that using font instead of those seems to be working.
Remove the quotes around helvetica.
I'm trying to "replace" text with an image in all of my h3 tags. I want the image to be in the html to avoid multiple h3 classes as this is being done for a portfolio and there will be about 10 h3 tags on the page. My image is 156x44. My question is, will this be viewed as an attempt to hide, stuff keywords by google for seo purposes? If it will then does anyone know a better way to accomplish this?
CSS:
h3 {
display: block;
width: 156px;
height: 44px;
overflow: hidden;
}
Html:
<h3><img src="images/project001.png" alt="Project 001" />Project 001</h3>
Matt Cutts addresses this question himself over at threadwatch. Pretty much he says to freely do text replacement, just don't try anything spamy like keyword stuffing. Later he clarifies that they:
...flag text that appears to be hidden
using CSS at Google. To date we have
not algorithmically removed sites for
doing that. We try hard to avoid
throwing babies out with bathwater.
So they might not be penalizing sites at all at this time for using CSS to hide text.
For example,
Text Here
will print out as...
Text Here(../somepage/page.aspx?qs=asdf)
In IE, it looks normal (doesn't print the url). Any ideas why this is acting in this fashion?
Extrapolating from Brett's answer, on Firefox 25, this CSS style removes the offending href:
#media print {
a:link:after,
a:visited:after {
content: "" !important;
}
}
Also, if you're using Twitter Bootstrap as a framework, this:
a[href]:after{
content:"";
}
... will do the trick! (at least in bootstrap 3)
The answer was in the css framework we are using (Blueprint). There was the below line in the style file:
a:link:after,a:visited:after{content:"(" attr(href) ")";font-size:90%}
Guess this might help others who use Blueprint.
If you want to to be more specific - say remove links within a table, then you could do the following with jQuery.
$(".tableclass tr td a").removeAttr("href");
Just add this in your layout page (Master Page)
a[href]:after {
content: none !important;
}
There is also the semantic reason to print the url next to the link.
Imagine you print the document without the url. You cannot be sure to completely understand the text as it is meant by the author.
It can be necessary for a quote to print the source as well. That is important i.e. for academic texts.
Indeed Bretts answer is correct.
You can avoid this problem altogether on the screen by including the media attribute on the print style link as follows
<link href="../../Content/blueprint/print.css" rel="stylesheet" media="print" type="text/css" />