What i'am trying to do is to remove, or at least hide the horizontal scrollbar in Firefox when i visit a specific website/url. I found code which hides the bottom scrollbar, but on all websites:
:-moz-any(#content,#appcontent) browser{
margin-bottom:-17px!important;
overflow-x:scroll;
}
All i did so far is to create the chrome folder, created the userChrome.css and pasted in the above code. So far so good. Since i have literally no idea how to bind this customisation to a specific website/url i just tried to replace the first line with the following code:
#document url("https://www.example.com/"){
or
:-moz-any(#content,#appcontent), domain("https://www.example.com/") browser{
or
#-moz-document url-prefix("https://www.example.com/"){
What iam searching for is more or less a "if-condition" when the url of the website contains "xyz.com/" (like the url-prefix(): "Matches if the document URL starts with the value provided") then remove/hide the bottom scrollbar. I know this is super rude to ask something like this, but i think i just need the correct syntax to add the website/url condition in the code. And to go though hours and hours of tutorial material to find the correct syntax i though i just ask here.
Related
Have found great help with R on SO--now for something completely different.
I am working in WordPress 5.8.3.
I am building a website using the Blank Canvas theme, a child-theme of Seedlet--Not sure whether that is all relevant. I am a novice with WP and all things web development. I have installed the Events Calendar plugin and have it all configured with some test events and dates so no issues there. I am customizing the theme colours using the Additional CSS prompt from the WordPress dashboard interface.
I haven't gotten permission to publish the site, so unfortunately I can't offer a live demo. I will try to be explicit.
I have found helpful resources with instructions on how to use this utility for menus, for general custom CSS, and some useful information for changing properties of footers with CSS. Now I am trying to modify hyperlink colours within the Events calendar widget. I have approached this problem the same way as all the others but this one has stumped me. I elaborate:
From this image, you can see the Events Calendar hyperlink text is yellow. I opened the inspector and determined that this object is called .tribe-events-widget .tribe-events-widget-events-list__view-more-link. I thought the following code should change the colour
.tribe-events-widget .tribe-events-widget-events-list__view-more-link {
color:#000;
}
It does not. This code makes no visible change. However, when I also change the background-color like this:
.tribe-events-widget .tribe-events-widget-events-list__view-more-link {
background-color:black;
color:#000;
}
The result is:
This led me to believe that there is no colour option for this element---HOWEVER, the inspector shows that this element has the 'color' property:
And I'm stumped. I'm not even sure when or how this color-link-accent got defined. This check-mark toggle is not a permanent solution and besides, I would very much like to understand what is going on here.
Any advice would be greatly appreciated.
It's a bit difficult to be certain of the problem as we don't have the context, however I was surprised that you saw just this:
.tribe-events-widget .tribe-events-widget-events-list__view-more-link
and didn't find an anchor (a) element within it.
I would have expected that you'd have to do:
.tribe-events-widget .tribe-events-widget-events-list__view-more-link a {
color:#000;
}
as it is quite likely the anchor element will have its own special styling which will override your setting because of the increase specificity.
If that doesn't work then use your browser dev tools inspect facility to find out more about the context of that a element - you may need to give even more hints to the browser on pinning it down.
Well, this would have helped me, so I will post the solution to my question for posterity. I learned from this question and thread about overriding cascading commands. I still don't understand where the command producing the yellow text in the first place was, but I managed to override it by appending !important in my CSS. The full CSS to turn the text from yellow to black is:
.tribe-events-widget .tribe-events-widget-events-list__view-more-link {
color:black !important;
}
Reading on, this does not necessarily mean that I was specific enough about the context although I find it hard to tell in this case. This reference has some other useful info as to when it is appropriate to use !important. It seems this is not the optimal solution.
Hope somebody else can benefit from my toiling...
I have a weird issue. I am using the Bones theme in Wordpress, and simply trying to put a style on my home page menu.
The site is h*Xp://www.advanceditsolutions.net/nearitest/
The CSS I’m trying to use is this:
.home ul#menu-pages {
display: -webkit-box;
}
I have it in both of the media query sections, min-width:481, and min-width:768. I’ve also tried it outside of the media query scope, no luck. I can’t figure out why it doesn’t get picked up though. I inspect it on the site, and nowhere do I see the display CSS.
What sucks is, the placement is fine is most browsers, but Chrome it's all jacked up.
:: scratches head ::
1) First of all, you're using vendor prefix -webkit- that will work just on specific browser(s).
2) Check if the value is correct. Here is the list of all possible values for display property. Are you sure that -webkit-box is a correct value that can be applied to display?
Maybe instead of telling that the CSS you want to apply, doesn't work, share the larger context, a screenshot and tell us exactly what you want to achieve.
3) Do you use some developer tools, like Chrome Dev Tools, Firebug or something similar to apply and test styles? It's handy and can save you bunch of time trying to figure out what's wrong...
I can see it is working within the min-width:768 media query. You only have it included once in the stylesheet though from what i can see.
Two critical issues here are:
1) This css will only target the home page because you've used '.home' as part of your selector.
2) You've used the '-webkit' vendor prefix so it'll only work in browsers that run on that engine and support that property. I would recommend against this. You are probably better off using a flex display type.
After spending a while creating an online portfolio, then uploading it, I noticed an issue with one of my sections. On the "Advertisement" section, I noticed it was not displaying the information, just the title. So, I kept on re-pushing the stylesheet.css, even editing it, and it would still look the same. The HTML, CSS, and JS is working how I wrote it. But it is just the section that is not showing. After browsing online and on stackoverflow for an answer, I believe it has to do with Firefox. When using Firebug, I noticed the section's background has been removed, causing the entire section to "disappear." It works just fine on Chrome. I'm not worried about IE, I know that browser has some issues in itself. Anyway, would anyone on here have an idea to resolve this issue, if I can? Or even, what could be causing this issue?
Here is my website to see for yourselves. www.voelkerdesigner.com
Cheers!
It is the opposite for me your entire site works in firefox for me but not in chrome, looking through your code, its being caused by your naming conventions. Namely #advertise
I use the adguard extension in chrome and below is the css it plugs into my html pages to hide ads, so im guessing your using an adblocker in firefox
#adsense_top, #adsensewide, #adspace, #adspace_top, #adspot-300x250-pos-1, #adspot-300x250-pos-2, #adswidget1-quick-adsense, #adswidget2-quick-adsense, #adtext, #adtop, #adv-masthead, #adv-top, #advert1, #advert2, #advertbox3, #advertise, #advertisement1, #advertisetop, #advertising-container, #advertising_wrapper {
display: none!important;
}
Might as well post a random answer on this... As i wont visit posted links by new users.. i'm just gonna guess that your background image might not be 100%...
In general i use background-image instead of background.. Short hand can be a little pain and breaks in some browsers if not perfect.
so i would compare against the following example
background-image:url('images/mybg.jpg');
background-image:url('http://somesite.com/images/mybg.jpg');
Basically alot of people do not use the url and just go straight for a file name or dont quote it.. And have seen that be the problem in the past, so do use the url('') method.
Otherwise if it still fails to work and you know the image is absolute, you would then have some other css that is either over riding your elements background or is preventing it from loading.
Another trick is using your console / inspect element to manually inject the background-image and see if that works... So once the page has loaded in chrome, inspect the element as normal.. And double click on your css property listing as you can add your own styles this way and if it fails, then its not the markup but something else.
Dots & Dashes currently has a rather unsightly nav-above box on its blog pages, as seen above the below post:
http://dotsanddashes.co.uk/blog/huge-moves-savage-sister/
Having inspected the element on Chrome, it seems easy enough to remove it via HTML, although I'm struggling to find all the applicable bits in the CSS stylesheet... I think/ hope this is a pretty rudimentary fix, for which I apologise in advance, but my grasp of CSS is slightly dodgy in truth..!
Thanks.
You can hide it with CSS using the rule:
#nav-above {
display: none;
}
This will remove it from the flow of the page so things should appear the same as deleting from the DOM tree in the Chrome inspector.
Note that the relevant source and images etc are still downloaded by users so ideally you should actually remove it from the source if you no longer want it.
We are trying to use an #media print.css style sheet to enable a web page to print a set of Avery labels (6 up on a sheet - 4" x 3"). Generally a print media style sheet seemed like a perfect solution to having a page that looks like a list on screen, but when you print the list you get imprinting for Avery badges!
The challenge is in the details though. In addition to the fact that each browser seems to have unique interpretations of print styling and some of the rules just don't work. I've seen and studied most of the basic info readily available on using the print.css. It's fairly easy to override font colors with black and set details to print or not but what this assignment needs is precise element placement and styling within the #page details.
The site already features Bootstrap and other linked .css pages though I've unlinked them to test the pages and am trying to isolate out anything that could also be interfering with print styling.
It appears that float isn't working in IE. Our list page content to print lays out in floated divs in Chrome but font styling and other divs aren't rendering as intended. Firefox isn't displaying any of the required print content but indicating page numbering appears to agree with Chrome that there are 56 pages of labels, (sorry if you can't see them?) My hope is that this document can serve as a repository for the tips tricks and limitations of media #print.
I'm experiencing the same problem. I need to print onto specific Avery labels at exact dimensions and although I can get it to work with Chrome (despite it ignoring some Print CSS styles) - it doesn't work in Firefox. Safari seems to be in it's own world also.
I think the only way I'm going to solve this is to generate PDF's that the user has to download and print (or print the PDF's from their browser).
Sucks, but haven't found any solutions for a "CSS Print Browser Reset".