Im want to verify / store the background color from the app-1450173274570.css file and want to check selected theme color is set properly.
That locator id (ember610') will change on every refresh
<td>verifyAttribute</td>
<td>//div[#id='ember610']/div</td>
<td>*background-color= #ffffff*</td>
.netplus body {
background-color: #ffffff;
color: #333333;
}
Related
I am using ag-theme-material. I migrated to Angular 9, and I had to migrate ag-grid to v.23.0.0. However, some of the styles got changed and I am not able to change them back. The biggest issue I have is the grid's header row used to be transparent (I was on version 20.2.0 before the upgrade):
.ag-header {
background-color: transparent;
}
This doesn't work anymore. It sets my header row background to white, and I can't see the headers because the text is white. If I change it to a specific color, it works, but it doesn't accept transparent. I've tried setting opacity to 0, using an image, nothing works!
So I added a variable in my SCSS file to override this theme parameter, as specified in their migration guideline - https://www.ag-grid.com/documentation/javascript/themes-v23-migration/.
$ag-theme-override-params: (
header-background-color: transparent
);
#import "~ag-grid-community/src/styles/ag-grid.scss";
#import "~ag-grid-community/src/styles/ag-theme-material/sass/legacy/ag-theme-material-v22-compat.scss";
But that doesn't work either. Now, I know this variable is doing its job because I am able to override the checkbox-checked-color using it...
Am I naming it wrong? What am I missing???
FYI for anyone facing the same problem, I tracked it down. In version 23, ag-grid has specified a background color (in a variable) in .ag-theme-material .ag-root-wrapper (it's part of _ag-theme-base-mixin.scss), and it overrides the CSS for ag-header class. So you have to set the background-color CSS property to transparent both in .ag-header and in ag-grid-angular .ag-root-wrapper.ag-layout-normal.ag-ltr.
ag-grid-angular {
width: 100%;
height: 100%;
.ag-root-wrapper.ag-layout-normal.ag-ltr {
background-color: transparent;
}
}
.ag-theme-material .ag-header {
background-color: transparent;
}
We are doing custom components in ionic 4, we want it to have ionic attributes like the color attribute to affect its internal ionic components ... Any hint about how can this be done ? , without doing regular binding like `[color]=" 'blue-lagoon' "
To do this is easy...
In this tutorial are all the information.
But in summary you need to do this steps:
1.
Go to this page, here you find a color generator of ionic, you can use the primary color section, put your hexadecimal color and below is generated the code to that color:
For example ill use #5e3f53 so the code generate it will be:
--ion-color-primary: #5e3f53;
--ion-color-primary-rgb: 94,63,83;
--ion-color-primary-contrast: #ffffff;
--ion-color-primary-contrast-rgb: 255,255,255;
--ion-color-primary-shade: #533749;
--ion-color-primary-tint: #6e5264;
2.
Now on go to file src/theme/variables.scss and paste inside :root{}
--ion-color-myCustom: #5e3f53;
--ion-color-myCustom-rgb: 94,63,83;
--ion-color-myCustom-contrast: #ffffff;
--ion-color-myCustom-contrast-rgb: 255,255,255;
--ion-color-myCustom-shade: #533749;
--ion-color-myCustom-tint: #6e5264;
3.
and then go to the file src/global.scss and paste the following code:
.ion-color-myCustom {
--ion-color-base: var(--ion-color-myCustom) !important;
--ion-color-base-rgb: var(--ion-color-myCustom-rgb) !important;
--ion-color-contrast: var(--ion-color-myCustom-contrast) !important;
--ion-color-contrast-rgb: var(--ion-color-myCustom-contrast-rgb) !important;
--ion-color-shade: var(--ion-color-myCustom-shade) !important;
--ion-color-tint: var(--ion-color-myCustom-tint) !important;
}
4
Now you can use your custom color wherever you want, obviously with the name that you define it.
And that's it.
Or if the color property is not allowed that I guess is your case for your post, create a class, id or style.
and can use your color with this way:
I hope I've helped :)
I am aware that I can change the color of the clear-icon and the search-icon as follows:
$searchbar-md-input-clear-icon-color: white;
$searchbar-md-input-search-icon-color: white;
For the cancel-icon, however, this method does not seem to work.
$searchbar-md-input-cancel-icon-color: white;
The code above has no visible effect on the cancel-icon. Instead, the color of the cancel-icon always falls back to the defined primary color.
$colors: (
primary: blue
);
How can I change the color of the cancel-icon?
Yes searchbar-md-input-cancel-icon-color is not a property of SearchBar component.
You need to sets style by a specific css selector like this :
.searchbar-ios-danger .searchbar-ios-cancel {
color: white;
}
I am working on a project where I have to develop a theme in which I have to customize navigation and breadcrumb bar and many other things too.
Main part is how to change the color of navigation bar.
Liferay 6.2
tomcat 7
windows 7
To change the color of navigation bar I used a small image and repeat that image. In
custom .css
.navbar-inner {
background: url("../images/navigation/nav_bg.gif") repeat-x;
/*added by me for navigation bar*/
/*background: #404041;
/*added asif ##141415 and hence this will change the background of navigation bar color */
border-width: 0;
min-height: 36px;
li a {
color: #FFF;
}
}
either by using
background: url("../images/navigation/nav_bg.gif") repeat-x;
we can change the color. Here nav_bg.gif is a very small image and I am using that one as background color I just repeat that one.
background: #404041;
we can also change the color.
webdoctor is a .css file created by me and this is inside color_schemes folder.
in webdoctor.css
.webdoctor #navigation {
background: url("nav_bg.gif") repeat-x scroll 0 0 #404041; /* change the corner color of navigation bar */
clear: both;
margin: 0 auto 5px;
min-height: 2.2em;
padding: 0 5px;
position: relative;
z-index: 1;
}
Include the following in navigation.css or custom.css found in your theme folder -
Path : portal-liferay/tomcat/webapps/ROOT/html/themes/classic/css
#navigation {
background: #414445 url(portal-liferay/tomcat/webapps/ROOT/html/themes/classic/images/navigation/bg.png)repeat-x 0 0;
}
The png image 'bg.png' must be of the custom color you desire. Edit the image in paint and replace the one in the images folder.
Path : /portal-liferay/tomcat/webapps/ROOT/html/themes/classic/images/navigation
does anybody know, how I can show the fileicon in my Downloadlist created with content Type filelinks in Typo3 6.1.5?
In older Typo Versions, I used the extension css_filelinks, but it doesn't work anymore.
My current Typoscript Setup:
tt_content.uploads.20.renderObj = COA
tt_content.uploads.20.renderObj.20.data = file:current:title //file:current:description // file:current:name
First of all, to let TYPO3 display file icons from the filelinks content element, you need to choose any other CE layout (in the Appearance tab) than the default.
Now TYPO3 prepends the files with icons. You might not find them too beautiful. If so, you can configure the file path end type of the icons with TypoScript:
# path to the folder containing the icons
tt_content.uploads.20.renderObj.15.file.import = fileadmin/folder/to/my/icons/
# wrap to indicate the file type of the icons (defaults to |.gif)
tt_content.uploads.20.renderObj.15.file.wrap = |.png
If you want to display icons globally without setting the layout, get rid of the corresponding if statement:
tt_content.uploads.20.renderObj.15.stdWrap.if >
Of course you could also just use CSS selectors to display the right icon:
a[href $='.pdf'] { background: url('icons/pdf.png') no-repeat 1px 2px; padding-left: 20px; }
Is there no CSS-Class you can use?
Like this:
span.csc-uploads-fileName {
background: url("../img/icon.png") no-repeat scroll 0 0 transparent;
height: 40px;
width: 43px;
text-indent: -999em;
}