×

Give a tip

edit blocking rules for custom font


Tony

Recommended Posts

Took me a few goes to figure this out, but I definitely learnt a few things trying to do it, so thanks for that :-) I have to get used to looking from the top down (starting at headings) rather than looking at the font first which where I got stuck initially.

Not sure if this is the best way to go about it, but this is the filter that I came up with:

##h3, h2, h1, div, {font-family: serif !important;}

Most of it uses standard headings (h2, h1 etc), the rest use defined div classes. font-family just overrides the default font style to the default serif font on the system. You can change that to sans serif if you prefer, or define a particular font with fallbacks if you like, eg: Arial, Helvetica, sans-serif

See here for some more info:

http://www.w3schools.com/cssref/css_websafe_fonts.asp

http://www.w3schools.com/cssref/pr_font_font-family.asp

Tip   Give
Link to comment
Share on other sites

[[Template forums/front/topics/post is throwing an error. This theme may be out of date. Run the support tool in the AdminCP to restore the default theme.]]

odyssee replied at 2014-7-12 07:46 back.gif

page looks fine here

(unicode utf 8 encoding)

have you tried it in both modes - in one its fine - in the other all thread titles are bold so it is not possible to see new/old threads - will post a couple of screen shots later

Tony     -  Vivaldi 4 on Windows 10 64Bit
Tip   Give
Link to comment
Share on other sites

2 images - different modes - image 2 is using the custom font all thread titles are bold which is wrong - only new posts should be bold

post-2400682-14315120212057_thumb.jpg

post-2400682-14315120212377_thumb.jpg

Tony     -  Vivaldi 4 on Windows 10 64Bit
Tip   Give
Link to comment
Share on other sites

tony. replied at 2014-7-12 09:17 back.gif

2 images - different modes - image 2 is using the custom font all thread titles are bold which is wr ...

Ok now I understand, all posts are new for me therefore I can't see any difference !

sigmax2.png

Tip   Give
Link to comment
Share on other sites

odyssee replied at 2014-7-12 09:06 back.gif

Ok now I understand, all posts are new for me therefore I can't see any difference !

had missed that Ody - can see why it would look ok - if i change the font in the settings it can work but that then makes a mess of other sites so hoping it can be a rule but its not something i understand

Tony     -  Vivaldi 4 on Windows 10 64Bit
Tip   Give
Link to comment
Share on other sites

So the rule I posted is no good then i'm guessing? As all it does is replace the font. The issue seems to be with the way certain headings get tagged bold to indicate new posts, rather than the font itself causing the problem. The custom font can be normal/bold etc, so that isn't the issue.

Tip   Give
Link to comment
Share on other sites

7twenty replied at 2014-7-12 10:02 back.gif

So the rule I posted is no good then i'm guessing? As all it does is replace the font. The issue see ...

sorry - had completely missed your post - off to try it now

and YES that works perfectly - many thanks

for me to learn - is the h1 h2 h3 referring to specific areas - so if i miss those out it would not change certain bits of the page - easy way is to mess - will be reading your links later

now if i can get noAds to work with the latest builds i can get that site sorted

Tony     -  Vivaldi 4 on Windows 10 64Bit
Tip   Give
Link to comment
Share on other sites

tony. replied at 2014-7-12 19:08 back.gif

sorry - had completely missed your post - off to try it now

and YES that works perfectly - many t ...

Yes, surprisingly enough font-size: XXpx !important; between the last set of braces.

But it will override EVERYTHING. If you want only certain parts changed (like headings), then you need to add separate rules for each of those.

Eg. Welcome and Announcements is using H2, so to change its size:

##h2 {font-size: 25px !important;}

I'm not sure if there's ways of adding it all to one line, I don't believe so. Have fun.

Tip   Give
Link to comment
Share on other sites

7twenty replied at 2014-7-12 10:42 back.gif

AdHunter works fine on the site for me? Can't see any ads at all :-S

ads are fine - i block those with admuncher - its the other function of noAds i want to hide certain areas

from a couple of builds back of MX4 i dont see the pull down for noAds and even if i do see it its flaky - i have learnt to build the exceptions in an early build of MX4 and then they usually carry over

except on this forum that is where i cannot get noAds to do anything - i used to hide various areas just to keep the screen tidy but cannot any more - may well be something conflicting - never got round to looking - it used to work on here

Tony     -  Vivaldi 4 on Windows 10 64Bit
Tip   Give
Link to comment
Share on other sites

am sort of understanding bits of it or at least see some logic but cannot understand how you found things that relate to areas

for example h1 - h2 etc - assume they are sections but where do you see them and where do you get the - from

trying to alter this and cannot see how

post-2400682-14315120214461_thumb.jpg

Tony     -  Vivaldi 4 on Windows 10 64Bit
Tip   Give
Link to comment
Share on other sites

tony. replied at 2014-7-12 21:58 back.gif

am sort of understanding bits of it or at least see some logic but cannot understand how you found t ...

I just go into dev tools via the inspect element context menu item.

It will scroll into view the code for that element, and from there you just plod around adjusting things till you understand what does what! hehe.

You can use the right side pane to turn on/off elements or adjust things on the fly (like font sizes/types/colours etc), and from there the css tags should lead you to the rules you need to add.

Where it gets tricky is if you're trying to make a change for something that is more global, you need to step back from the element and figure out where it gets it from. Without more than a basic knowledge it's about the only way I can figure it out.

It's annoying when you don't understand how everything works, as if you knew it all, you could probably take a quick look at the code and write the rule from scratch.

Will work on the bit you posted above tomorrow, if you don't figure it out by then.

Tip   Give
Link to comment
Share on other sites

7twenty replied at 2014-7-12 16:55 back.gif

I just go into dev tools via the inspect element context menu item.

It will scroll into view the ...

sorted that bit - a great deal of trial and error but suddenly it made a little sense - like you i wish i knew more - 4 hours messing would have been done in seconds

but thats the fun of trying and learning

Tony     -  Vivaldi 4 on Windows 10 64Bit
Tip   Give
Link to comment
Share on other sites

tony. replied at 2014-7-13 07:18 back.gif

sorted that bit - a great deal of trial and error but suddenly it made a little sense - like you i ...

What did you have to do in the end?

And yeah, really annoying, especially when you finally figure it out and think "oh yeah, now it makes sense - why didn't I think of that earlier!!"

Figured it out, and as always it was staring me in the face. Was trying fancy rules with brackets and classes etc... and all that was required was adding "li".

Final rule which does most of the site, bar a few bits is:

##h3, h2, h1, li, div, {font-family: serif !important;}

Tip   Give
Link to comment
Share on other sites

thats what i got the - the li bit - its all there to be found but its like wandering round in the dark and bumping into things - i understand a bit more with your help - even managed to get rid or the radius corners on the boxes - was well pleased at that

Tony     -  Vivaldi 4 on Windows 10 64Bit
Tip   Give
Link to comment
Share on other sites

a different tack? - the problem is caused by the site using a custom font - one they have made themselves - is there a way of just blocking their font globally - if i did that it would solve all the problems in one go

Tony     -  Vivaldi 4 on Windows 10 64Bit
Tip   Give
Link to comment
Share on other sites

That was my initial thought, if it was called directly in the code then AdHunter could block it. But as I see it there is no direct link to the font in the HTML, only the supporting CSS files. Seeing as you can't really block the CSS files as the whole site would fall apart, the best thing you can do is override the settings it uses.

If the CSS for the font styles was directly in the HTML file, then you could probably block it, but again it isn't.

I wouldn't be surprised if there is a simpler way of accomplishing this on a global level, but when your knowledge is limited things are always a little harder.

My first guess would be something like: .body {font-family: serif !important;}, where all the subsequent classes will inherit the font type from. But it seems that their code isn't setup like that and that is probably because each section has it's own style (h1, h2). Even though I thought only any differences would be added for each style like: h2 {font-size:12px}, which should inherit the font family from .body.

Just thinking out loud here...definitely need to read up a little more on this.

Tip   Give
Link to comment
Share on other sites

thanks - i have learnt a lot over the weekend - not sure its knowledge based on anything but more try this and it works - but from your first fix i have managed to fix other things - a couple were easy and a result of a few hours of previous head scratching and messing

the last area that i managed did not follow what i had learnt for whatever reason but a bit of - i wonder - got me there

not unlike skins really - i cannot program but understand a few things and work with that and logic

Tony     -  Vivaldi 4 on Windows 10 64Bit
Tip   Give
Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.