Now I have a search bar, but I want its border to be round, what should I do?
I have tried border : round,border-radius:10px... and it did'nt work.
I even want to change my search icon color and cancel icon color?
Any ideas on how to achieve these things
for Ionic 4 for changing the icon color this works for me just fine
ion-searchbar {
--icon-color: var(--ion-color-primary);
}
for futur references you can check out the official docs
https://ionicframework.com/docs/api/searchbar
I tried all of the above answers and none worked for me.
After some digging, I found something that might be useful to someone else looking to tweak the default styles of ion-searchbar (or any other ion element in general)
Below is the component.scss code for the ion-searchbar wthat I wished to change the styles for:
ion-searchbar{
--icon-color: var (--ion-color-primary);
--box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
::ng-deep{
.searchbar-input-container{
.searchbar-input{
border-radius: 20px;
//any style that you want to implement on your searchbar
}
}
}
}
Here, ::ng-deep disables view encapsulation for specific CSS rules, in other words, it gives you access to DOM elements, which are not in your component's HTML.
To change the icon color. In your "variables.scss" file in the "theme" folder add this line ;
$searchbar-md-input-search-icon-color:#yourColor;
To change the border-radius of the search bar, go to the SCSS file associate to your page containing your SEARCH BAR and put this
ion-searchbar{
.searchbar-input-container{
.searchbar-input{
border-radius: 20px;
}
}
}
The following code changes the colour to white replacing the original greyish colour.
.searchbar .searchbar-search-icon {
background-image: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'><path%20fill='%23ffffff'%20d='M337.509,305.372h-17.501l-6.571-5.486c20.791-25.232,33.922-57.054,33.922-93.257C347.358,127.632,283.896,64,205.135,64C127.452,64,64,127.632,64,206.629s63.452,142.628,142.225,142.628c35.011,0,67.831-13.167,92.991-34.008l6.561,5.487v17.551L415.18,448L448,415.086L337.509,305.372z%20M206.225,305.372c-54.702,0-98.463-43.887-98.463-98.743c0-54.858,43.761-98.742,98.463-98.742c54.7,0,98.462,43.884,98.462,98.742C304.687,261.485,260.925,305.372,206.225,305.372z'/></svg>");
}
Try this to change the color of searchbar icon. Works for me.
If you try to inspect the search bar icon it has a background image property which looks something like this
background-image: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'><path%20fill='%235b5b5b'%20d='M337.509,305.372h-17.501l-6.571-5.486c20.791-25.232,33.922-57.054,33.922-93.257C347.358,127.632,283.896,64,205.135,64C127.452,64,64,127.632,64,206.629s63.452,142.628,142.225,142.628c35.011,0,67.831-13.167,92.991-34.008l6.561,5.487v17.551L415.18,448L448,415.086L337.509,305.372z%20M206.225,305.372c-54.702,0-98.463-43.887-98.463-98.743c0-54.858,43.761-98.742,98.463-98.742c54.7,0,98.462,43.884,98.462,98.742C304.687,261.485,260.925,305.372,206.225,305.372z'/></svg>");
Just Change the last 6 hex-digits in the fill='%235b5b5b' according to your color. Hope this helps.
Related
Background:
- I have a custom SharePoint masterpage with custom CSS.
- I also placed a custom div into the masterpage.html
Problem:
When I use the color picker to change some font color and select "more colors…", the modal dialogue box that comes up is too small and has scroll bars.
I would like for it to auto adjust.
How do I fix this?
I tried using F12 to figure out what CSS element may be affecting it, but I am unable to figure it out.
Note: I tried removing the custom div but the problem persists.
If I get two more reputation points I can upload a picture so you can visually see what I am talking about. A picture is worth a thousand words:/
Or you can go here to see the pic.
UPDATE:
I was able to figure it out:
I update the following custom css with 300px !Important:
#contentBox
{
margin-right:20px;
margin-left:20px;
min-width:300px !Important;
}
And I added the below custom css:
.more-colors-picker
{
margin: 0px;
}
For a complete history and explanation with pictures go here
I want to have text that has a shadow/glow, but the problem is that the text itself is slightly transparent and the shadow shows through behind it, colouring the text.
color: rgba(226,229,226,0.88);
-webkit-text-stroke-width: .5px;
-webkit-text-stroke-color: #9c9c9c;
text-shadow: 0px 1px 29px #333;
Is there any CSS method that acheive this? box-shadow doesn't seem to affect the colouration of a slightly transparent item casting a shadow, so this behaviour is inconsistent (especially when you want text to have the same appearance as a box).
Here is a jsfiddle to explain what I'm talking about: http://jsfiddle.net/cutcopypaste/KzxrK/
You can add the exact same text, in your background color and same size and shape, behind your text.
Using something like this and respective CSS:
<h1>█</h1><h1 class="c1">█</h1>
EDIT: As shown here with your edited jsfiddle http://jsfiddle.net/KzxrK/2/
In the Google Web Toolkit Showcase, the Menu Bar example (http://gwt.googleusercontent.com/samples/Showcase/Showcase.html#!CwMenuBar) displays the menu bar's background as a gradient. However, when I use their css (clean.css from the gwt package), I get a solid background.
Does anyone know how to get the gradient? There are no explicit references to 'gradient' in their css file. FYI I'm testing this with iceweasel 3.5.15 (which is a essentially firefox 3.5.16).
thanks
It is not a gradient css style. Instead a background image is set hborder.png . You can see the style/background image as shown using Chrome Dev Tools or Firefox/Firebug
(The above comment is a bit illegible and I can't edit it).
hborder.png is specified in the css file, e.g.
.gwt-MenuBar-horizontal {
background: #e3e8f3 url(images/hborder.png) repeat-x 0px -2003px;
border: 1px solid #e0e0e0;
}
I would expect this to create the gradient, but it doesn't seem to be having any effect.
I have a requirement to always show the menu icon in a a GridPanel's column header. See attached image. I've tracked down the css class and see the <td /> tag is assigned the x-grid3-hd-btn on hover. The x-grid3-hd-btn class uses a background image, grid3-hd-btn.gif to display the drop-down arrow I want, but I'm not css savvy enough to figure out how to always show it.
There doesn't seem to be a hook in the GridPanel class api's to always display this, wish there was. Also, note that I only want the arrow icon to show, I don't want the column header to change color, etc.
Does anyone have any guidance on this?
Thanks!
John
Add this to your stylesheet, this overwrites default extjs theme styles
/**
* EXTJS Grid-3 Always visible header buttons
*/
.x-grid3-hd-btn {
display: block !important;
height: 22px !important;
}
.x-grid3-hd {
cursor: pointer;
}
have you tried replacing the css class background image in your ext-all.css file?
original:
.x-grid3-header{
background-color:#f9f9f9;
background-image:url(../images/default/grid/grid3-hrow.gif);
}
replace to :
.x-grid3-header{
background-color:#f9f9f9;
background-image:url(../images/default/grid/grid3-hrow-over.gif);
}
tell me if that did it...
Does anybody can tell me where that blue border that appears after you push a PushButton comes from?
I really want to override that behaviour, don't know where or how though
UPDATE:
the effect I'm talking about turns out to be blue on Safari, it goes orange on Chrome and no effect on Mozilla
it occurs when the button has been pressed once, best way to explain it is the http://gwt.google.com/samples/Showcase/Showcase.html#!CwCustomButton
Are you talking about the "focus ring" that appear around any element when it's focused?
You can tweak it using the outline set of CSS properties: http://www.w3.org/TR/CSS21/ui.html#dynamic-outlines
But please note that it's bad practice (re. accessibility) to completely remove it, as you'd remove any indication of whether the button is focused or not, and incidentally, which element is focused, if any.
This behavior should be defined in the appropriate stylesheet. If you check GWT sources that would be in /trunk/user/src/com/google/gwt/user/theme/standard/public/gwt/standard/standard.css. It's also defined in other themes.
What you should do is define your own styles
.my-PushButton
{
border : 1px solid #666;
padding : 0 10px;
}
.my-PushButton-down-hovering
{
background-color : #aaf;
}
.my-PushButton-up-hovering
{
background-color : #afa;
}
And then
PushButton btn = new PushButton(...);
widget.setStylePrimaryName("my-PushButton");
Hope this helps.