I am new to SAPUI5 and would like to change the text color of a label to red. How can I do this?
I tried:
sap.ui.getCore().byId("lableID").setStyleClass("red");
but the color does not change.
You need to add a style.css file under webapp > css to your project. The style.css file could look like this:
.red {
color: red;
}
Related
I know I can simply do this in my SCSS file. But I would like to know the correct way to do it via customizing the actual Bootstrap colors. I have already figured out how to change background colors on the buttons.
I created a custom-bootstrap.scss file in which I modified the $primary and $danger variables and then imported Bootstrap.
custom-bootstrap.scss:
// Override default variables before the import
$primary: #48BF91;
$danger: #CF6676;
// Import Bootstrap and its default variables
#import '~bootstrap/scss/bootstrap.scss';
This is my inspector showing where it sets the text color to black from the _buttons.scss file.
Edit: So right now, this is how I am currently changing the button text color. Just by adding this code into my own SCSS file. But it feels too hacky for me, I want to modify the Bootstrap variables.
.btn-primary {
color: $text;
&:hover {
color: $text;
}
}
use this type
:root {--button-color: black; --button-background-color: silver;}
How can i edit the original bootstrap angular date picker style sheet according to my desire
here is the link
https://ng-bootstrap.github.io/#/components/datepicker/examples#basic
i need to edit the color of this date picker in my file.
If you are using angular cli, There is a global style.css/style.scss in the root folder(src). Here you can add your custom styles for datepicker inspecting the element to find the classes to override the styles.
Add this to style.css/scss file
.ngb-dp-day .btn-light {
background: green !important;
}
.ngb-dp-day .bg-primary {
background: red !important;
}
Simply F12 (Inspect element) and see they styles:
Add to your css:(use !important to prevent ovvride)
ngb-datepicker{
background-color: red!important;
}
See result:
Using Polymer v1.0
I can't find the proper css to add to change the color of the selected value text.
When I inspect the element, I can change the color value for:
.paper-input-container-0 .input-content.paper-input-container label, .paper-input-container-0 .input-content.paper-input-container .paper-input-label
to white, and the text changes. But if I add that to my CSS, nothing changes.
Use custom styles like this:
<style is="custom-style">
:host{
--primary-text-color: blue;
--paper-input-container-label: {
color:orange;
}
}
</style>
default custom style is: --primary-text-color
Example:
http://jsbin.com/fuzuri/edit?html,output
I have an app using bootstrap.css for the design. I have a readonly input which looks like disabled because of bootstrap (cursor not allowed, background color grey etc...). I would like the input to look enabled with readonly activated.
How can I do that?
edit (adding more code):
Header:
doctype html
html(ng-app='myApp')
head
title=title
link(rel='stylesheet' href='stylesheets/bootstrap.min-3.1.1.css')
link(rel='stylesheet' href='stylesheets/style.css')
My input: input.form-control(readonly, placeholder='jj-mm-aaaa')
My stylus (style.css):
input[readonly]
background-color: #fff
Assuming your custom css is included after the boostrap.css, place the following code in your custom css file
input[readonly] {
background-color: #fff;
/* any other styles */
}
If you only want to apply this style to specific read only inputs, add a class "exampleclass" to those inputs, and then use:
input[readonly].exampleclass {
background-color: #fff;
}
I am trying to make a specific column to blue color.
For that I am using
clientsTable.addColumnStyleName(3,"nameColumn");
And the CSS is:
nameColumn {
color:blue;
}
but it's not doing anything whereas if I change my CSS to this
nameColumn {
background-color:blue;
}
it works, i.e make header color red , but why is not changing text color ?
thanks
addColumnStyleName adds the CSS class to a <col> element in the DOM, and only a handful CSS properties apply there (see also browser compatibility table)
You'd want to apply a CSS class to each cell in the column instead, using Column#setCellStyleNames()
Try
.nameColumn {
color: blue !important;
}