It may be silly question but I am not much familiar with ionic and css, so Can any one tell me how to change text color of the ionic button?
<div class="bottom-button" margin text-center>
<button ion-button color="energized">
Register
</button>
</div>
Here, Button color is yellow and text color is black. I want to change text color to white.
fix your code with style
<div class="bottom-button" margin text-center>
<button ion-button style="color:red">
Register
</button>
</div>
OR use css:
button{
color:red
}
<div class="bottom-button" margin text-center>
<button ion-button>
Register
</button>
</div>
In ionic-4 button text color will be color-contrast which in defined variables.scss file.
you can simple change your button color as well as button text color by creating your own color.
in your .html file
<ion-button class="loginButton" color="bgColor" shape="round" id="loginButton (click)="loginAction()">
and in your src -> theme -> variables.scss
--ion-color-bgColor: #1c1c1c;
--ion-color-bgColor-rgb: 28, 28, 28;
--ion-color-bgColor-contrast: #ffffff;
--ion-color-bgColor-contrast-rgb: 255, 255, 255;
--ion-color-bgColor-shade: #414040;
--ion-color-bgColor-tint: #050404;
.ion-color-bgColor {
--ion-color-base: var(--ion-color-bgColor) !important;
--ion-color-base-rgb: var(--ion-color-bgColor-rgb) !important;
--ion-color-contrast: var(--ion-color-bgColor-contrast) !important;
--ion-color-contrast-rgb: var(--ion-color-bgColor-contrast-rgb) !important;
--ion-color-shade: var(--ion-color-bgColor-shade) !important;
--ion-color-tint: var(--ion-color-bgColor-tint) !important;
}
Using ion-button with color set as primary :
<ion-button color="primary">Save</ion-button>
change the following in theme/variables.scss :
--ion-color-primary-contrast: #edce12;
--ion-color-primary-contrast-rgb: 237 ,206 ,18;
You can also set as secondary, tertiary...
If you want to change color through whole application, then I would suggest you to override text-color variable to your src/theme/variables.scss
$button-md-text-color: #ColorCode
$button-ios-text-color: #ColorCode
Related
I'm trying to change the ion-icon title that appears on mouse-hover. Example:
I've tried for at least a couple of hours to find a solution for this. I just don't know how i can access the title element of ion-icon via css to be able to change the content of it to 'Edit' instead of 'Create'. Any help would be appreciated.
You may try disabling ion-icon popup using CSS event blocking and set "title" property on to a parent element.
CSS
ion-icon {
pointer-events: none;
}
Or you can create Icon element using the below code as a workaround and set it on a button.
const icon = <Icon icon='arrow-right' title={false} />;
return <Button minimal icon={icon} title='Next' />;
Details here - https://github.com/palantir/blueprint/issues/2321
disable events:
ion-icon {
pointer-events: none;
}
and wrap icon with span tag using title attribute:
<span title="Edit" style="font-size: x-large;">
<ion-icon name="create"></ion-icon>
</span>
Ionic 5 - Just wrap it in a div like below:
<div (click)="presentActionsPopover($event, obj)" slot="end" title="Actions" size="small">
<ion-icon name="ellipsis-vertical-outline" slot="icon-only"></ion-icon>
</div>
Try the below:
<ion-button title="Create Project">
<ion-icon name="create"></ion-icon>
</ion-button>
I'm trying to stop bootstrap 3 default button to be underline when mouseover, but no success at all. Here is my CSS and HTML code:
.btn-default:hover {
font-style: normal;
background-color: white;
}
<button type="button" class="btn btn-default btn-lg">Tech Skills
</button>
Notice that I could change the :hover background-color, but looks like the propertie font-style is not referred to what I'm trying to change.
Here is how the button looks like:
Button Sample
Underlines are controlled by the text-decoration CSS attribute, not the font-style attribute. Also, the underline is not being applied to the button tag itself, but the anchor tag within the button.
See this demo:
a {
text-decoration: none;
}
<button type="button" class="btn btn-default btn-lg">Tech Skills
</button>
I'm having problems in order to change the colour of this button. This is the code:
<div class = "Petrol">
<a href="PayMethod.php"><button class="btn btn-default btn-lg" type="button"><span class="Text">Petrol<br><small>(Hi-Grade)</small></span></button>
</a>
</div>
Can you please help me?
if you need to change the color of the button do this:
.btn {
background-color:blue;
}
if you need to change the text inside the color of the button
.btn {
color:red;
}
Assuming by the classes you used, I think you are using Bootstrap. Bootstrap provide pre-defined classes to change bg color of buttons. Replace btn-default by any of the following to get a different color. btn-primary, btn-success, btn-info, btn-warning, btn-danger, and btn-link.
Take a look at the docs.
You could also apply a custom class btn-custom and style it.
.btn-custom {
background: #ff0; /* use your color here */
}
Straightfoward way works fine
.btn {
color:blue;
}
Example
I have added the following code style="background-color: #C2A5A5 !important. But that has not worked for me. how can I add background color to ion-item?Thanks in advance.
<ion-item class="item-remove-animate item-avatar item-icon-right" style="background-color: #C2A5A5 !important" ng-repeat="detail in details" type="item-text-wrap" ng-controller="ChatsCtrl" ng-click="openShareModel(detail)">
<img ng-src="{{profilepic.profileimageurl}}">
<h2>{{detail.date | date :'fullDate'}}</h2>
<h2>{{detail.title}}</h2>
<p>{{detail.description}}</p>
<i class="icon ion-chevron-right icon-accessory"></i>
<ion-option-button class="button-assertive" ng-controller="ChatsCtrl" ng-click="remove(detail.id)">
Delete
</ion-option-button>
</ion-item>
I want to share my solution:
I use the custom CSS properties of ionic 4, so if I want to change the background color I can create a new class called ".item-background-color" and change the color of the CSS property that I want to modify. For example:
my-page.page.scss
.item-background-color{
--ion-item-background:#015f01d5;
}
then, I only add my new class to the ionic item:
my-page.page.html
<ion-item class="item-background-color">
My item with new background color
</ion-item>
What is done is to change the variable that affects the color of the ionic item, so you can add all the classes you want, dynamically or not, and change the values of their respective variables. You can find information about the variables at CSS Custom Properties
I hope my answer is helpful to people who need to modify the CSS properties of ionic 4 components, sorry for my bad english and good luck!
Ionic is injecting an element inside the <ion-item> giving the element a structure of:
<ion-item>
<div class="item-content">
</div>
</ion-item>
The Ionic CSS contains a CSS property:
.item-content {
background-color:#ffffff;
}
The inline CSS you added is being applied to the element behind the element with the #ffffff background, so you can't see your background color.
Apply the background color to the .item-content element, as #ariestiyansyah recommended by adding the following CSS to the Ionic CSS file, or create a custom CSS file and include a <link> to it in the header, with the following:
.item .item-content {
background-color: transparent !important;
}
Here's the working demo.
Simply, use colors in variables.scss file (you can also define new colors) like that
$colors: (
primary: #f9961e,
secondary: #882e2e,
danger: #f84e4e,
light: #f4f4f4,
dark: #222,
newColor: #000000,
);
and in your html file:
<ion-item color='newColor'>
Test
</ion-item>
Here's the latest solution:
ion-item {
--ion-item-background: #ddd;
}
Ionic4 provides color property to give background-color
e.g.
<ion-item color="light">
</ion-item>
More theming property available here https://ionicframework.com/docs/theming/basics
Reference doc : https://ionicframework.com/docs/api/item
Actually got it working in a different way:
.item-complex .item-content { background-color: #262B32 !important; }
as suggested by #gylippus here in post #5
I created a color scheme in variable.scss
.ion-color-newcolor {
--ion-color-base: #224068;
--ion-color-contrast: #56b4d3;
}
Using:
<ion-item color="newcolor">
<ion-label position="stacked">Name: </ion-label>
<ion-input required type="text"></ion-input>
</ion-item>
A workaround is using <a> tag instead of <ion-item> tag, for example: change <ion-item> to <a class="item"> and then style it with whatever you want.
Source: http://ionicframework.com/docs/components/#item-icons
There is a newer solution.
<ion-item
[style.--background]="yourColor"
>
//dummy
</ion-item>
In Ionic3, below css will do the trick.
.item-ios {
background-color: transparent !important;
}
<ion-item>
<div class="item-content">
</div>
</ion-item>
The Ionic CSS contains a CSS property:
.item .item-content {
background-color: transparent !important;
}
its apply on child dom of <ion-item>. We can use can use div class='item-content', but if we won't all the css(.item-content) property would apply to the <ion-item> child elements like if we use
<ion-item>
Something //all css will apply into it
</ion-item>
.item .item-content {
background-color: transparent !important;
}
I'm not able to comment that's why I am writing over here.
Now you can use the appStyleProperty property of ion-item this way:
<ion-item
[appStyleProperty]="{ background: someColor }"
>
</ion-item>
You shall use this method. It worked for me.(ion-item needs a inner element to hold the value)
<ion-item class="inv_adj_menu"><div>View Details</div></ion-item>
<ion-item class="inv_adj_menu"><div>View Lines</div></ion-item>
<ion-item class="inv_adj_menu"><div>Validate Inventory</div></ion-item>
I am trying to make a button for a message system to show an orange dot if there's a new message. However, i can't quite get it working. Is it possible?
Here's the button
<input type="button" value="Messages •" />
And the button on jsFiddle if anyone feels like trying out :-)
http://jsfiddle.net/ePA47/1/
Use a button element instead.
<button type="button">
Messages <span style="color: orange;">•</span>
</button>
Of course, don't add your stylings inline. I just did for this example's sake.
You could also add a class to the button such as new-messages and then do...
button.new-messages:after {
content: "•";
color: orange;
}
Just keep in mind the latter won't work in older IEs.
Use <button> instead of <input> since it has child elements which you can style.
To add an orange dot to your button, I would recommend using a background-image. This will give you the ability to design the dot however you wish, and not be constrained by font types.
It's also better for accessibility if the orange dot is added as a background image, as this is not content.
<input type="button" value="Messages" class="newmessage" />
.newmessage
{
background-image:url('http://img859.imageshack.us/img859/9611/orangedot.jpg');
background-repeat:no-repeat;
background-position:right center;
padding:5px;
padding-right:25px;
}
See Demo: http://jsfiddle.net/ePA47/3/
As per the question heading, the following will help to add multiple styles in a single style tag
<button type="button" style= "margin-top : 20px; border-radius: 15px"
class="btn btn-primary">View Full Profile
</button>