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!
Related
I am playing with CSS and found one bug which appears in Chrome(Version 104.0.5112.81). In Firefox(103.0) code works well. I have prepared test application https://codesandbox.io/s/card-click-ru5gbu. In the test app you may see, that "FRONT btn" does not react on user actions. The card behaves like there is no a button. I am interesting, is there possible solution for such bug?
Disclaimer, I am not entirely sure why they behave differently in different browser, but I did get down to what I think is the problem, and here are my findings.
The issue is the way you position your doms, I can see you are using position absolute, although you are transforming the position, and hiding the backface (I am guessing different browsers deal with this property in a different ways, which is why the behavior is different), but that doesn't mean the dom doesn't exist, basically every click you think you are clicking on the front button is actually a click on face back div, hence the flip. If I was to fix this, I would add pointer-events none to the back div when it is flipped, just to ensure that events are behaving as you would expect.
so here
the html
<div class="face back" [class.flipped]="flippedState === 'flipped'"(click)="cardClicked(); $event.stopPropagation();">
the css
.flipped{
pointer-events: none;
}
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!
I'm implementing a Kendo PanelBar on my webpage. I'm pretty new to CSS/HTML, so I'm lost on how to remove a default style on the PanelBar. When I select a panel, it opens properly and looks fine. When I move the mouse away from the open panel, there is an orange border that appears on the open panel. I have attached two images showing the issue.
Everything looks fine when I hover on the open panel:
When I move the mouse away, there is an orange border:
Can anyone tell me how to remove this border?
I was challenged with the same issue and submitted a ticket to kendo support. Iliana Nikolova supplied the following:
.k-panelbar .k-state-focused.k-state-selected {
box-shadow: none;
}
In my solution, the panelBar box shadow was still showing, I then used page inspector (F12) and tested following rule using the box-shadow:none; property and that did the trick for me.
.k-state-selected > .k-link, .k-panelbar > li > .k-state-selected, .k-panelbar > li.k-state-default > .k-state-selected.k-link {
background-color: #C7D3A9;
color:black;
box-shadow: none;
}
Before your post I was searching the a boat ton of code and getting no place. I used the recommendation of using theme builder and took a video (using windows media encoder 9), I feel by illustrating the problem it helped generate a better kendo response. Iliana didn't return my code with the fix so this left me hanging but he did supply the key element.
If you find this solves the issue please vote answered. Others who also find this helpful please also provide positive feedback.
I am not sure what element it is, because you did not give the exact code.
But you can use a simple css, find the element and apply the css to remove the orange border.
I had the same issue. Use the Kendo Theme Builder here at http://demos.telerik.com/kendo-ui/themebuilder/ and then load the default theme. You should see the themebuilder panel appear in the bottom right corner of your screen. Look for "Widget States" drop down. You will see the options there and you can change the orange border color.
Now if you want to completely remove the orange border and active state, you will need to open up the kendo.default.min.css file and do a CNTRL+F (Find) for the hex color code #f35800. Look at the selectors carefully to make sure you are modifying the correct style (i.e. .k-state-selected)
Then when you are sure you've got the right selector(s), change the color to "transparent" (i.e. border-color:transparent)
This worked for me
How can I edit the styling of these part of google +1 button? kinda hard for me to explain the detail in english. so I make this picture
I know it's located inside an iframe, some says that we couldn't edit the styles inside an iframe which sourced from other domain. but apparently, I have successfully styled my facebook like button to be looking good (transparent on the border). And also, I saw some other sites which have a nice looking google +1 button (without those blocking solid white background)
Edit: possible solution:
Looking at the markup and css on the page below it looks like somewhere in your css you must be setting the background-color of the div that the bubble is contained in to white or #fff. Try something like:-
.pls-container {background-color:transparent}
Do you have a link to this page, or a site that has a +1 button which has the same rollover so people can experiment? It would be easier to give a definite solution then...
Edit: just had a look here at the +1 buttons (at the top of the post and in the sidebar at the right) these both appear to be transparent borders - so there must be something different about your page. You could try looking at that page as an example and see where you've gone wrong, but without the code to your page it will be very difficult to give a solution to your problem directly.
Stack is warning me this is a subjective question, and will likely be close, but I'm going to try this anyway.
I have a set of control buttons attached to pictures in a gallery. These are to be initially hidden, and toggle visible when the mouse hovers over the image. The question I have is this:
Should these buttons be set to hidden in the stylesheet or stay visible and be hidden by jQuery when they load? I want graceful degradation, so it seems like initializing this in the CSS is a bad idea if I want these to be visible if javascript isn't enabled.
On top of this, I'm using Ajax to load pages of these images. If I do this using the jQuery hide, it doesn't affect those that load from an ajax request, since it only triggers on $(document).ready(). I've tried using live('ready'), but learned that that event isn't supported in live().
So what is the best practice for something like this? It seems like there's a lot of pros and cons for doing this either way (css vs. document.ready), and if they're hidden by the default CSS, the buttons will toggle fine with ajax pagination. But if javascript isn't enabled, the functionality of the buttons will be lost. Does anyone have advice for this?
Note: I didn't mention it originally, but it is significant. I'm currently using fadeToggle() to accomplish my transition, which may be what's complicating this whole issue. The solutions so far all appear to work, but not so much when fading is introduced.
If you're trying to change the style of elements loaded via Ajax, it's almost like you're trying to hit a moving target. I would create two declarations in my stylesheet - one for hidden, one for visible - and then toggle them based on a class attached to the body tag (or any other containing tag).
Like so:
body .mybutton {
display:block;
}
body.loaded .mybutton {
display:none;
}
Then in your JS file:
$(document).ready(function() {
$('body').addClass('loaded');
});
This way, any elements that have the class name mybutton - current and future - will have the appropriate style applied.
You hide with CSS initially using display:none; then use jQuery's toggle() to show and hide again. This is the best way to do it. As for people that do not have JavaScript enabled, i wouldn't worry about that. They make 1% of users. Everyone have JavaScript enabled.
Check working example http://jsfiddle.net/znJxh/