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
Related
I've been trying to make myself a simple night mode for google docs using CSS (through a custom CSS chrome extension), but I'm having a lot of trouble. Mind you I only have basic Highschool CSS knowledge, and no more.
I am aware there are extensions for this sort of thing, but those extensions always make EVERYTHING dark, and I really don't want everything dark, just the sides/background (which I've already managed to find), the "explore" button on the bottom right (with visible text), and the outline button on the top left (With a visible icon)
This is what I've managed to find so far (Just for the sides / background):
.kix-appview-editor-container,.gb_Va {
background: #131719;
color: white;
}
.docs-gm-dialogs .docs-findinput-container, .docs-gm-dialogs .docs-gotoinput-container, .docs-copydocdialog-destination-button, .docs-material.docs-navigation-tab-button.goog-inline-block {
border: 0;
}
I can't for the life of me figure out how to darken the 2 buttons (bonus if someone can also darken the little bubble button that pops up to the right when you highlight text, but I'll take what I can get).
Any help (or improvements to what I already have) would be hugely appreciated, thanks.
I am trying to remove a blue outline from the option list of a select element.
As I only see this outline on Chrome on Windows 7, here is an image which points out the outline I’m talking about
Here is the code: https://jsfiddle.net/463pLc67/
I’ve tried using outline-color on the option:focus as well but it doesn’t seem to have any effect. Is there any way to get rid of this outline just using CSS?
Because browsers handle UI aethetics differently for elements like radio buttons, checkboxes and select drop downs it's hard to overcome without using JS or complex CSS/HTML. I think Select elements are even harder than radio buttons and checkboxes, I don't think there is a reliable HTML/CSS only for this.
Sorry, I know this isn;t the answer you're looking for. You could also try 'border: 1px solid #COLOR' as a last ditch attempt.
The appearance: none rule changes a bit the display (On Ubuntu/Chromium) but makes it more buggy: no right-border but still some left-borders (No effect on firefox).
Normal:
With appreance: none:
You can play with the background-color which works also on <option> to make it closer to your outline color so it would hide it a little.
select.lalala option {
background-color: #727272;
}
Nothing visually acceptable IMHO.
Btw this is browser specific as also probably OS specific so it seems to be a loss of time.
On this website, on Chrome, when hovering or clicking the "EXPLORE" button, I am getting a lot of weird shadowed boxes popping up in random places. What could this be from? I have inspected the elements but it doesn't seem that any of them could be causing these.
A screenshot below:
In your stylesheet, I'm seeing some box-shadows (and it looks like box-shadows, not text-shadows). And they only appear on hover so chances are, when you inspected your elements, you didn't inspect them on their hover states.
Regardless, go in to your stylesheets and search for box-shadow and set it to none.
Open your site in Firefox or Chrome
Reproduce the error
right click on the weird shadow box and select inspect this
look for a box-shadow in your inspector and disable by clicking off the checkbox
If it worked, give yourself a cookie! You're a master debugger
There's a .tooltip that's being loaded via js. There was 18 instances of it being called in the custom.js file. If you don't want it, you can just stop calling it from within this file.
Alternatively, there are 27 instances of .tooltip in your css file. You can go through an remove them or just add .tooltip {border-style: hidden;} in you html file and it should remove the border.
[EDIT]
I took a screenshot of the Chrome inspector:
You can see the element being added via js when you hover over the page down chevron. You can get rid of the tooltip altogether, or inspect the .tooltip, .fade, .top or .in css to see which one of these items is creating the offending box.
You should be able to make this stop just using css. My understanding is, if you put the css directly in the html it should trump whatever is in your css file if you don't want to change the file itself. HTH
It turns out the issue was with blur: the background was using a blur filter and this created weird shadows. I am not sure why and how this was happening, though. I removed the blur and just blurred the actual BG image in Photoshop.
It seems like I was encountering the same problem as in this question.
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.
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!