I'm trying to change the background color of a dialog element's backdrop using a custom CSS property but it won't take. Is this a bug in Chrome or is there a reason for this?
document.querySelector('dialog').showModal();
:root {
--color-backdrop: red;
}
dialog::backdrop {
background: var(--color-backdrop);
}
<dialog>
<p>This is a dialog. My backdrop should be red.</p>
</dialog>
The spec states the following about ::backdrop pseudo-element:
It does not inherit from any element and is not inherited from. No restrictions are made on what properties apply to this pseudo-element either.
And to quote Xindorn Quan, a member of WHATWG, regarding CSS Custom Properties:
CSS variables are propagated via inheritance into descendants, so if a pseudo-element doesn't inherit from anything, CSS variables which are not defined for the pseudo-element directly would have no effect on the pseudo-element.
Finally, this is one solution for this kind of problem:
document.querySelector('dialog').showModal();
::backdrop {
--color-backdrop: red;
}
dialog::backdrop {
background: var(--color-backdrop);
}
<dialog><p>This is a dialog. My backdrop should be red.</p></dialog>
It seems to be useful for multiple modals with ::backdrop, as a way of organizing their "root", so to speak.
Related
Is it possible to apply framework styles to nested lit-element? An idea is to disable shadow dom. I tried this.
createRenderRoot() {
return this;
}
It does not do what I need. I see that I can recompile styles into components. But right now I am looking for an easier solution.
There is a solution - Specify the render root. This solution rid of shadowRoot. Styles were applied but , does not work.
If you want to use global styles you'll have to disable Shadow DOM in the whole app tree: if a single component has a shadow root its whole subtree won't be affected by external styles.
Anyway, as you noticed, slots only work with shadow DOM enabled. In this case using a common style library/framework is still possible, see for example Sharing Styles, Using Bootstrap in Web Components, Importing external stylesheets.
Yes, but disabling shadow DOM is the wrong way to do it it.
LitElement used adopted stylesheets, which let you load/create the CSS once, but apply it to the shadow DOM of the component. You can create this globally, apply it in each component, and effectivly have styles that are shared by all your components, but (critically) don't apply to any external component you load or any external app that loads your component.
You can do something like:
// common-styles.js
export const styles = css`...`;
// any-component.js
import { styles } from 'common-styles.js';
...
static get styles () { return [styles]; }
As the styles object is shared it doesn't download or parse again - all your components get a reference to the same styles, rather than global styles cascading down.
It works as designed. The version above does not use ShadowDom. So styles are applied. In my case, all components while style bubbling has to disable ShadowDom.
But another issue appears.
createRenderRoot() {
/**
* Render template without shadow DOM. Note that shadow DOM features like
* encapsulated CSS and slots are unavailable.
*/
return this;
}
But I need slots.
It depends on what properties you want to share.
You can share these properties from the parent element:
color
font-family and other font-* properties
All CSS custom properties (--*)
Just you need to define these properties in the parent element's :root selector.
For more information: https://lit.dev/docs/components/styles/#inheritance
Has anyone solved or knows how to solve the following situation given the implementation of the header in Spartacus?
I would like to show in the header, a layout on the right of two level blocks, and on the left of a single level block.
Objective Header Layout
I can't think of how to do it since I can't see how to wrap certain slots, given the Spartacus implementation for the header.
Given the implementation of the header in Spartacus, inside the StorefrontComponent I cannot replace it using the ConfigModule.withConfig ({...}, as CmsConfig)
I understand and already tried that I can replace the header, implementing an Outlet (cxOutletRef = "header"), but this makes it impossible to edit it through SmartEdit, which is not acceptable to me.
Any suggestion? Or possible solution?
As a last option it occurs to me that I can create a component type from the back, and map it from Angular using "ConfigModule.withConfig ({...}, as CmsConfig)" implementing the "conflicting two-level" block from scratch or even the entire header.
Thank you !
////// CORRECTION 09/23/20 //////
Outlets do not prevent editing via SmartEdit. It's necessary to indicate the Slot to which the component corresponds, this is easy to implement using the PageSlotComponent.
✔ Example:
<ng-template cxOutletRef="cx-header">
<header
cxSkipLink="cx-header"
[cxFocus]="{ disableMouseFocus: true }"
[class.is-expanded]="isExpanded$ | async"
(keydown.escape)="collapseMenu()"
(click)="collapseMenuIfClickOutside($event)"
>
<cx-page-slot position="MiniCart"></cx-page-slot>
</header>
<cx-page-slot position="BottomHeaderSlot"> </cx-page-slot>
<cx-global-message></cx-global-message>
</ng-template>
In this way, SmartEdit does allow you to edit the MiniCart component, within its corresponding slot.
🚫 Wrong way:
<ng-template cxOutletRef="cx-header">
<header
cxSkipLink="cx-header"
[cxFocus]="{ disableMouseFocus: true }"
[class.is-expanded]="isExpanded$ | async"
(keydown.escape)="collapseMenu()"
(click)="collapseMenuIfClickOutside($event)"
>
<cx-mini-cart></cx-mini-cart>
</header>
<cx-page-slot position="BottomHeaderSlot"> </cx-page-slot>
<cx-global-message></cx-global-message>
</ng-template>
you can indeed solve this with a custom layout configuration and additional CSS, but it's not necessary. I give you a few options to consider:
Option 1: Change the generated DOM
You can either provide a custom layout config as #pwavg suggests, or even introducing a custom storefront component.
If you introduce a custom layout config, you're limited by the sections we use in the storefront component. If you insist on custom sections (ie. an element that wraps the searchbox, login, mincart and nav), you need to introduce a custom storefront component. The disadvantage here is that you'll deviating away from standard Spartacus component, which might result in missing features in the future.
Option 2: Pure CSS
A pure CSS solution is the easiest. You do not need to change any actual DOM, but apply some custom CSS rules to the standard DOM. Grid system is indeed designed for this. It's a bit complex to start with, but would do the job.
You can actually achieve this with flexbox as well, but you'd need to move the logo slot out of the flexbox flow.
Here's an actual quick and dirty code snippet to demonstrate changing by a few CSS rules only. It comes with a few assumptions/limitations, but for most cases it might be fine.
header {
cx-page-slot.SiteLogo {
// we absolute position the logo, so it flows outside the flexbox system. this requires
// an hard-coded top position, that might be fine, but I don't know the details.
position: absolute;
top: 60px;
}
cx-page-slot.SearchBox {
// align searchbox to the left, not sure if that's required, but looks better
margin: 14px auto 14px 150px;
}
cx-page-slot.NavigationBar {
margin-left: 150px;
overflow: hidden;
}
// manipulate a very high logo to demonstrate this works
cx-page-slot.SiteLogo img {
height: 100px;
}
}
Result (sorry for the logo ;) )
Option 3: cx-header Outlet
I would say you should be able to use outlets as well, as this will get you closer to option 1 (changing the actual DOM). I can't think of a reason why it would not work in SmartEdit - but happy to learn if it is the case. I'd recommend in this case to use the cx-header outletRef, so you would replace the entire header.
I am not super experienced with Spartacus so this might not be the correct way. Just trying to think with you on this.
I think you can just extend you layoutconfig and style the slots with CSSGrid. So for example you layout could be something like this:
layoutSlots: {
header: {
lg: {
slots: [
'SiteLinks',
'SiteLogin',
'HeaderLinks',
'SiteLogo',
'NavigationBar',
'SearchBox',
'MiniCart',
'NavigationBar2',
],
},
slots: ... (for mobile view)
},
},
And create a custom css grid for the positions of the slot.
If you want to have more markup control you could use cxOutletRef to replace the header with something like:
<ng-template cxOutletRef="cx-header">
<header>
<div class="header-top">
<cx-page-layout section="headerTop"></cx-page-layout>
</div>
<div class="header-bottom">
<cx-page-layout section="headerBottom"></cx-page-layout>
</div>
</header>
</ng-template>
And then divide the slots between headerTop and headerBottom in you config.
I would like to put a custom icon in a p:menuButton, is this possible?
Yest it is possible. All you need to do is to override primefaces css classes generated for the p:menuButton.
Approach:
In the rendered web page you can right click on the generated p:menuButton and -> inspect element. There you can inspect all of the related css classes.
You can try to experiment with them (which I would advice, if you have time) for better understanding of css selectors and so on ...
The .ui-menubutton .ui-state-default .ui-icon are the classes that you need.
So now when you know which css classes are related to the icon you can override them :
Add .ui-menubutton .ui-state-default .ui-icon rule to your stylesheet (I assume you have one and it is sucesfully imported and working. If not check here.)
yourStyles.css :
.ui-menubutton .ui-state-default .ui-icon {
background: orange; /** insert your background image **/
}
This will override icons of all p:menuButtons used in your project. If you want to reduce it to some particular p:menuButton then add its ID to the style definition.
#menubID.ui-menubutton .ui-state-default .ui-icon {
background: orange; /** insert your background image **/
}
I'm trying to use macros in a CSS file (in site manager-> development).
This is my CSS code:
#import url('/CMSPages/GetResource.ashx?stylesheetname=sitecss{$=|en-US=eng$}');
a, a:visited, a:active {
color:#407a1f;
}
....
This doesn't seem to work dynamically on the site as I switch between default culture and English.
The only time that it works is if I SAVE the CSS file (in site manager) while the site itself is in a certain culture.
In short: the macro "takes" the culture when the CSS file is saved and is not dynamic upon page loading.
How can I solve this?
THANKS :)
As far as I know, you cannot make you CSS code dynamic. However, you can do this easily as explained below:
Kentico adds a special class to the body tag of the document. Check your source code and you will see that the body tag has a class ENUS if the current culture is en-US, ENGB if the current culture is en-GB and so on.
Then you can change your CSS code accordingly by defining rules like:
body.ENUS .container { float: left; }
body.ENGB .container { float: right; }
body.FRFR .container { float: none; }
Hope this helps.
In version 6 and later you can do it by
#import url('/CMSPages/GetResource.ashx?stylesheetname=sitecss{%CurrentCulture%}');
or you can directly resolve target CSS by
{% CSS["<stylesheet code name>"] %}
See more on http://devnet.kentico.com/docs/devguide/index.html?combining_stylesheets.htm
I have activated the extended menu via the Screen Options and in my menu item I have specified a class based on the css code added to the screeen.css file.
For example in the "Home" menu item I have specified a class of "red", and in the css I have added the following code.
.red { color: #FF0000}
Unfortunately this is not transposing to the template and I am not sure what I am doing wrong.
Checking this with firebug I notice the class is being added, however the color change is not appearing.
<li id="menu-item-154" class="red menu-item menu-item-type-post_type menu-item-
object-page current-menu-item page_item page-item-148 current_page_item menu-
item-154"> Home
Can anyone offer some suggestions to make this work?
The color might be specified in one of the other classes as well.
You can try to remove that or you can try to force the color via the CSS important attribute.
Try:
.red { color: #FF0000 !important;}