I created a custom theme so I want to change change entire background color of website, please help me to resolve it, thanks in advance
There are two ways to change the css properties in magento custom theme .
1.Magento2 uses less files so there are already defined variable for primary and secondary color from there you can change the variables for different colors.
2.For custom theme css create a directory
app/design/frontend/{{Vendor_Namespace}}/{{Theme_Name}}/web/css/source/_extends.less
here you can write the properties you want for any css classes.
small example:
.panel.header {
background-color: white !important;
}
rendering the changes use grunt or setup:static-content:deploy -f
Related
Using the SASS build for Kendo Angular Material I wish to simply change the primary, secondary and accent colors for the entire theme and then download.
There is only a drop down to select a color palette, but no way to choose specific colors.
When I download the variables.scss, there aren't entries for these three colors.
Question: How do I edit the variables.scss to change these three colors?
If you click the "<" on top of your screenshot, you can hide this panel and edit the colors.
If you're using npm, you can install the theme you want:
npm install #progress/kendo-theme-material
Then import the theme in your own scss file, where you can override some of the values:
$primary-palette-name: blue;
$secondary-palette-name: pink;
#import "~#progress/kendo-theme-material/dist/all.scss";
The documentation is here: https://docs.telerik.com/kendo-ui/styles-and-layout/sass-themes
The variables are here: https://github.com/telerik/kendo-themes/blob/develop/packages/material/scss/_variables.scss
I'm running into a problem where I can't style the default footer in v-data-table. For some reason, the pagination buttons are appearing white when enabled, and light gray when they are disabled (pagination is disabled). I've already double checked to make sure its not a theme issue.
My question is: how can I change the color of the default pagination icons in v-data-table? And more broadly, what is a way to find the class names of the vuetify elements so that I can avoid asking these types of questions in the future.
Thanks.
Here's a couple screen shots in case my description was clear enough.
Per Varun's request, here is one of my declarations for a v-data-table.
<v-data-table
:headers="headers"
:items="tickets"
item-key="ticketId"
class="red--text"
></v-data-table>
Result:
The recommendation of using the text-coloring class didn't work as it just turn all of the text in the table to red, but didn't change the icons. Is there any way to edit the CSS of the icons directly?
can you share the code please ?
Usually the color of the default pagination icons in v-data-table are black when enabled and grey while disabled.
you can use class="<color>--text" to change the text and enabled icon color to your preference
After digging through the CSS file in Vuetify and finding the class name of several of the v-data-table components, I found this solution to work.
Inside the style tag in my component:
#table > .v-data-footer .v-icon {
color: black;
}
Small note: without the !important keyword, this styles only the enabled icons in the footer (i.e. if you can go to the next page or not). If you want to style both, just add the keyword and your good to go.
I have use the following code to set default font and font size in CKEditor 4:
config.font_defaultLabel = 'Tahoma';
config.fontSize_defaultLabel = '24px';
But above code is not working on Mozilla Firefox.
I changed the font-size and font-family using below,
CKEDITOR.addCss(".cke_editable{cursor:text; font-size: 14px; font-family: Arial, sans-serif;}");
This is a complicated issue. Those settings only set the label in dropdown meaning if there will be a font which doesn't match any defined in font dropdown or there will be no font defined then Tahoma will be shown in the dropdown (there doesn't have to be a match). Labels don't force particular font in the editor.
If you want to have Tahoma as default font, you need to set it in CSS. For classic editor you need to set it in ckeditor/contents.css for body element. For inline editor, you need to set it in main page CSS file.
NOTE: There are ways to force particular fixed set of fonts inside the editor (even when pasting different fonts from external resources) but they require usage of Advanced Content Filter (ACF) and transformations. If you wish to learn more about ACF please see below links:
https://docs.ckeditor.com/ckeditor4/latest/guide/dev_acf.html
https://docs.ckeditor.com/ckeditor4/latest/guide/dev_advanced_content_filter.html
https://ckeditor.com/docs/ckeditor4/latest/guide/dev_disallowed_content.html
https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-allowedContent
https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-extraAllowedContent
https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-disallowedContent
https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_filter.html#method-addTransformations
Basically, with addTransformations method, you can check all the spans and see if the font used for it is on the list of defined fonts or not. If it is not, you can either delete it or apply default Tahoma font. Please also note that ACF can't be disabled if you want to use transforrmations.
I am trying to move over from Bootstrap to Zurb Foundation.
Bootstrap uses *-color for text colour and *-bg for background colours.
I'm a little confused with Foundation's naming scheme:
What is the difference between $topbar-link-bg-hoverand $topbar-link-bg-color-hover?
Both their names suggest that they change the background colour of a link in the top bar, both are given a colour.
Foundation structure has lots of details, if you search these variables in Foundation you can find them in _top-bar.scss file. Look at it, how used these variables:
// Apply the hover link color when it has that class
&:hover:not(.has-form) > a {
background-color: $topbar-link-bg-color-hover;
#if ($topbar-link-bg-hover) {
background: $topbar-link-bg-hover;
}
}
$topbar-link-bg-color-hover value can equal with color because use for background-color and $topbar-link-bg-hover value can equal with image or anything else(background css values).
I am working in Oracle's ADF Mobile framework (specifically, Campus Mobile). There is a standard background image that is displayed when loading data or as a background image, as seen below (the dark, circle pattern - not the loading spinner):
Is it possible to change this image? I cannot locate it anywhere in the deployed application files or as a file that was bundled with JDeveloper.
There is a file named amx.css. Check there to see what classes you want/need to override the modify default css.
Check this blog for more info about your particular 'problem':
http://oracleadfmobile.wordpress.com/2013/11/14/amx-activity-indicator/
you need to override the css style of this page which is "#bodyPage"
so put the below code in a CSS file and attach it to your Feature:
#bodyPage{
background-image: url('<PATH_TO_UR_IMG>>') !important;
}
Note: you won't find the images as it's just a black background with an encoded base64 grey dotted image.
or just click on the "Panel Page" from page structure then go to property inspector in inline style write
background:#ffffff;
#bodyPage {
background:#eceded!important;
}
.amx-panelPage {
background:#eceded url("../images/normal_background_i5#2x.png") repeat;
}
just using 2 css selector to overriding background for AMX Page