I'm setting up an affiliate e-commerce website with WordPress and yesterday an unwanted white semi transparent overlay appeared on it and I have no idea how to remove it. I searched on Google but didn't find a proper answer. It appears on loading and basically disappears after 30 seconds or so.
Please note that I'm pretty new to all of this.
Website is www.mystupidgift.com
Usually when these issues come up, it's best to try and click the "X" to stop the page from loading while the "thing does the thing you want to fix". So while the page has the "overlay", stop the page loading, and then you can open up Dev Tools (F12 in Chrome) and proceed to scroll down through the elements.
For something like this, it's a bit more difficult, because you're generally looking for a full screen element, but not always. You can just hit "delete" on them one by one until the undesired thing goes away, (I find this easier to work from the bottom up, since those elements have a higher z-index by default and show up on top of earlier elements).
So I started to do that when I realized that it's not actually an overlay, but actually your content is being set to a lower transparency (which provides a similar effect, letting the white background of the body bleed through)
Your theme's page-in-out.min.css file sets your site's container (#st-container) to an opacity of .2. This is the effect you want to remedy. It goes away when your website is fully loaded and the .fade-in class is added to the #st-container which sets the opacity to 1. I'm not sure which JavaScript file does that, because I didn't look and don't think it's necessary to know.
I'm not familiar with the theme you've chosen, but there very well may be a setting in there like "fade website out until it's loaded", "page in/out", or something to that effect. If you don't want to mess with that, there is no setting, or you can't find it - you can just add some more specific CSS to that element to make it always fully opaque, regardless of the .fade-in class.
To do that, you can just go to Appearance > Customize and open up the Additional CSS tab. In there, you can just paste something like:
#st-container.st-container { opacity: 1; }
Here's a quick screengrab of the dev tools process that led me to that. While this isn't a specific answer in general, it's more of a process answer, and hopefully you can make use of that process (stop loading, open dev tools, manually dig through elements and look at the CSS and computed styles, delete elements if needed with the Delete key, etc.) next time something like this comes up!
Related
Have you seen the smiley jobs guy at the right of the LinkedIn website?
I want him go away!
(https://static-exp1.licdn.com/scds/common/u/images/promo/ads/li_evergreen_jobs_ad_300x250_v1.jpg)
so, I open inspect element on it, add display: none; to its CSS, and there, he's gone...
But when I change pages or refresh it, he comes back, he is very persistent in finding a job for me.
Now, how can I make my browser to remember my appearance preference??
The same goes for the advertisement banners as well,
How can you teach your browser to not show elements again when you made them disappear by inspect element?
Have you seen the smiley jobs guy at the right of the LinkedIn website?
I haven't.
How can you teach your browser to not show buggers again when you made them disappear by inspect element?
Use tampermonkey if you are using chrome or similar software to automate the process of setting display: none on a DOM element. Or more conveniently use some ad-blockers available online.
I am using Monaco Editor 0.22.3 in combination with StencilJS and TailwindCSS. Everything works great, except for an annoying visual glitch in the intellisense dropdown as depicted here:
As you can see, the last suggested item is partially obscured.
I suspect it might have something to do with some style coming from TailwindCSS, but I'm pretty much at my wits end here. I tried to use the F12 element inspector to see if I can find some hints, but that is proving to be close to impossible since the intellisense dropdown disappears as soon as it loses focus.
Any hints would be much appreciated!
UPDATE 1
Here's a screenshot with a bigger editor to demonstrate that the dropdown itself does not appear to be clipped:
UPDATE 2
Here's an animated gif showing the issue when trying to debug the HTML elements using the browser developer tools:
As you can see, the dropdown disappears as soon as I click anywhere else.
The issue comes from a fairly common css class being used: .tree. Libraries such as tailwindcss add padding-bottom to it for example. To undo some of its additions for the monaco editor we added the following to our css file:
.monaco-editor .suggest-widget div.tree {
white-space: unset;
padding-bottom: 0;
}
And to get get to that solution for other libraries and styling artefacts:
It should have been quite easy but the suggestion dialog has a tendency to hide when we try to observe it. so a UI guy and I spent a while going through the playbook to try to debug it. The only successful way to inspect it was to abuse the JS debugger by running (which was a hint from a stack overflow post that I'm struggling to find to give credit), and just cause the JS engine to pause:
Run:
setTimeout(5000);
This gives us 5 seconds to get the suggestion window to show (or set to a relative amount of time to the problem). After which, you could mostly inspect it as normal with a quick shortcut:
ctrl+shift+c that brings up the debuggers element selector.
Here we are, the suggestion was from the following post:
How can I inspect disappearing element in a browser?
break on subtree probably would have worked, but we became a bit impatient stepping through the changes. ctrl+ / didn't seem to help in this case, which left the odd setTimout to save the day.
The drop down is clipped at the editor's boundaries. I actually wonder how you can see the last empty part outside of the editor.
For inspection: use your browser's dev tools to see how the containers overlap. This will avoid that the editor hides the drop down.
Update
After your update I think now that somehow the styles are messed up. You will have to figure out a way to show the popup and still navigate the DOM tree in the developer tools. Try to locate the parent and see if that popup is only hidden (it still shows up then in the tree) or if it is dynamically created or is a portal, which lives in a completely different part of the tree.
If that cannot be done then try to disable all CSS you have and see if that solves the issue. If so enable the CSS piece by piece to find the culprit.
I am currently working on a online resume website, and I am experiencing an odd issue with meteor.
CSS styling for certain elements on the page will work, and not work at the same time. What I mean is say you load the site and land on skillset you will see a white background behind the text and grey words. Now if you navigate to another page and come back all you will see are the stars and H2 tags the background has become transparent. However if you open your Developer console the background will magically come back.
Now example 2, with the Developer console already open repeat the process above. Open Skillset, navigate away, and go back to skillset. Now you will see the CSS styling is there, mess with the background for the class '.skillset' and you will see that the background is back. Isnt this odd?
My site is http://patrickml.com/
For some reason I needed to add "position: relative" to my main container. I do not understand why, but it did fix my issue.
I have a responsive Drupal Zen subtheme that I hacked together about a year & a half ago from some CSS & HTML that a non-Drupal designer handed off to me for my website. I've known that in certain layouts, it is buggy, and needs to be fixed, but I just haven't gotten around to it. After repeatedly reaching out to a local Drupal developer (and offering to pay him), I've gotten tired of waiting, and just need to fix this thing.
My bounce rate for folks on mobile devices is awful.
The URL is http://developcents.com. The homepage looks decent on any device. Internal pages need a lot of help, though, when viewed in certain screen sizes (including mobile devices). Let's use http://developcents.com/blog as an example.
In the below scenario, my question is not how to find the CSS files themselves. Rather, my question is, how can I find the necessary CSS settings using Firebug Lite, so that I can debug the CSS through my browser, instead of having to manually update each CSS file every time I want to test a change?
I can't find the actual CSS-styled divs, blocks, etc... causing the layout to break under certain dimensions. I know how to find, and edit, the CSS within the CSS panel, but I can't track down the specific CSS in this instance.
Additionally, as a secondary question, if you want to provide pointers on what I actually need to change, then please be my guest! But if you point me in the right direction on how I can go figure it out myself, that's fine too. :)
Let's get on to the scenario (which you can easily see by testing it yourself):
When I resize my browser window down to a certain size, the links & tweets section in the left sidebar move over to the right, so that the left side of the navbar aligns with the right side of the header area, while the content spans the full width of the page, except for the left margin, which stays in place but gets wider. Basically everything below the header gets screwed up, and it's easier to see the problems than explain them (so go test it).
Using Firebug Lite in Chrome, I can't seem to find the left margin for the "main" content area (see this screenshot clearly indicating the yellow margin), nor can I find the CSS for the navbar / tweets block (which I presume is some sort of float).
To modify the CSS within Firebug or Firebug Lite just select an element inside the HTML panel or inspect it via its inspector. Inside the Style side panel you'll see all CSS rules applying to the element.
Clicking the name or the value of a CSS property opens an inline editor to allow editing it.
On the right side of each rule you'll see the name of the style sheet, which contains the rule. Hovering it displays you the full URL and clicking it allows you to inspect it within the CSS panel.
You can also edit the styles directly within the CSS panel, which lists all style sheets available on the page.
Note: The changes you do there are not permament, i.e. on the next page reload they are gone! To make permanent changes you need to edit the files on the server.
Also note that I'm referring to the panels within Firebug. The panels within Firebug Lite basically work the same, though may look and work a little bit different. Furthermore Firebug Lite is not maintained anymore, so there's no guarantee that everything is working as expected.
What CSS property should I change at this page to disable transparency of a share iframe which appears when Like button is clicked?
When you hover on that Facebook box after clicking Like button, it becomes partially transparent and if you move your cursor away from it, it becomes solid white. I want it to be completely opaque all the time.
Well, I see no transparency on that box, only for the fade-in effect when it opens, but once it's fully opened it's not transparent.
To answer your question, you can see for yourself using firebug (firefox) or the development tools (chrome/safari) which css rules apply to what element.
From what I've seen now, you can use the use these: fb_edge_comment_widget fb_iframe_widget which are the classes of the span containing the iframe, or you can use the iframe itself.
The thing is though, is that you should not hack that. Why? Since then you'll have to always check for updates facebook are making, changes that they do not update you about (API changes they update on the blog), if you fail to be aware of these changes it can "break" your code/style.
I was also having the exact same problem.
I am using an AddThis widget set, and I don't know if this was the case for you or not (it looks like you may have chosen a different solution as I can't see the Like button on your site).
I ended up using
.addthis_button_facebook_like {
opacity:1 !important;
}
but you would use whatever selector that wrapped your like button. if using the standard embed from Facebook, it would probably be
.fb-like {
opacity:1 !important;
}
Someone else was having a similar problem with a Send button, which got me on the right track.
See it working like it ought to here. I'm sure it had something to do with some conflict from other styles, or possibly AddThis, but it's working now!