I'd like to use paper-item element within a lit-element based app.
Within the app, I'm using --paper-item CSS custom property which can be applied to the paper-item using #apply but since the feature is removed from browsers, it doesn't work now.
Looks like ShadyCSS can make it work, but don't know how to activate it. Can someone help me?
html {
--paper-tabs: {
font-size: 1.0em;
height: 24px;
color: var(--text-primary-color);
background-color: var(--default-primary-color);
};
}
The #apply shim is only applied to styles in the elements template. It was a bit too difficult to apply it to styles added via constructible stylesheets. So if you want to use it, move the styles to a <style> tag in the render() method.
Related
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'm writing wordpress theme using Tiber and have really interesting case regarding different images on mobile and desktop.
Case:
I would like to upload 2 images (mobile and desktop version) using Advanced Custom Field PRO in Wordpress and use them in custom Timber template engine theme.
Code:
.twig
<div class="application--main-image"></div>
.scss
.application-main-image {
background-position: center bottom;
background-repeat: no-repeat;
background-image: url('../img/mobile.png');
#media (min-width: 600px) {
background-image: url('../img/desktop.png');
}
}
I found that I should use inline-style to put {{ post.image }} inside background-image but what about media queries?
Should I make some custom attributes or style inside .twig file with <style></style> but I want to use scss so it's not the case.
How would you solve that problem?
This is certainly a unique use case, here are my thoughts on how I would approach this:
<style>
.application--main-image {
background: url('https://source.unsplash.com/500x500/?ocean');
/* The actual URL would be replaced by your ACF Filed {{ post.mobile_image }} */
}
#media (min-width: 600px) {
.application--main-image {
background: url('https://source.unsplash.com/500x500/?mountain');
/* The actual URL would be replaced by your ACF Filed {{ post.desktop_image }} */
}
}
</style>
<div class="application--main-image"></div>
I think you are correct in that you will need to add the tags and the css necessary to your .twig template. I know you want to use .scss, however you only really need to change the background image property. I have create a JS fiddle to show you what I mean.
https://jsfiddle.net/robertguss/2kacx91k/7/
I hope that helps. If you have already come up with a solution that is different than mine, please share it here so not only I can learn but others in the future as well.
Cheers.
I am trying to put two Nivo sliders on one page. Some of the attributes are different. So I have simply created two scripts for these attributes, "slider" and "slider2". That's no problem.
However, I want to make the title style a little different for the second slider. I noticed that the text style of the slide title is controlled by this style:
.nivo-caption p {
padding:8px;
margin:0;
color: #000;
font-size: 16px;
}
However, I don't see that css style called within my html. (When I look at the web page source code I see it but not when I'm actually looking at the code file itself.)
I'd love to simply create a new style for my second slider, something like:
.nivo-caption2 p {
margin:0;
color: #000;
font-size: 12px;
}
But I need to know how to actually call that within my html. Can anyone help? Thanks.
Actually, I figured it out. Since I have ids of "slide" and "slide2" for each slide show, I simply appended that to my new style and that worked.
I am just starting with AngularJS, which I know is meant to be an SPA. For the app we are building, all of the pages--except the index page--will have a two-column layout. We'd like the index page, however, to be a one-column, fullwidth page. Is this functionality possible with AngularJS?
I'd suggest posting a plunkr or jsfiddle, since I'm not sure I'm actually answering your question, or if there's more to your question I'm missing.
If you're doing all the pages via routing (ng-view), then just apply classes to differentiate the style for that one-column version. Something like:
.column_1, .column_2 { margin: 0; width: 50%; float: left; }
#firstpage .column_1, #firstpage .column_2 { margin: 0; width: 100%; float: none; }
and then in the html (on that firstpage only), wrap everything in div id="firstpage". Don't include that div in the routed pages, and the style will only apply for the first page. Or if you have some other set up, you can always use styles around the ng-view, too:
<div class="classname">
<div ng-view></div>
</div>
If you've got a side-column that's sitting outside your ng-view and that's what you want to turn off/on, then I'd suggest including the class on the first page (to make it go full-width), and at the same time use some kind of logic with ng-hide/ng-show on that first column.
I've been searching and searching for an answer to this problem and cannot found a solution.
I have added some custom styles to the CKEditor that add a margin-left to the selected text. The problem is that this causes the style previews to move to the right in the styles list. So much so, that they go off the right side of the dropdown. I don't quite have enough rep to post a screenshot unfortunately.
I would just like the styles in the list to have no preview at all if possible.
I have tried to add .cke_panel_listItem p {margin-left: 0px !important;} to my global.css and to the editor.css. I cannot override the inline style no matter what I do.
Any suggestions? Thanks in advance!
I was able to do this using the contentsCss config property. So:
CKEDITOR.editorConfig = function( config ) {
config.contentsCss = 'wysiwyg.css';
}
then in wysiwyg.css put your CSS code:
.cke_panel_listItem p {
margin-left: 0px !important;
}