I have a new template LandingPage3Template.
layoutSlots: {
LandingPage3Template: {
pageFold: 'Section2B',
slots: [
'Section2A',
'Section2B',
'Section2C',
'Section1',
'Section3',
'Section4',
'Section5'
],
}
}
I just wanted to give styles for the slots. Can someone help me to write a custom CSS style to align it properly?
I am using the below-mentioned code but it is not working.
%cx-page-layout {
// my code here
width: 10%;
}
thanks for asking at our SO channel.
The CMS page template name (i.e. "LandingPage3Template") and slots positions (i.e. "Section2A") are mapped to CSS classes in the Spartacus DOM. This means, that you can use pure CSS rules to create the layout.
Page slot position names are not necessarily unique cross all pages (i.e. "Section2A" might also be used in other page templates). But since page slots are nested inside the page template, you can create css rules for page slots that are used inside a given page template.
The following CSS rule shows how you can create a rule for "Section2A" inside "LandingPage3Template".
.LandingPage3Template .Section2A {
width: 10%;
}
While this is valid css and scss syntax, in scss it would look like:
.LandingPage3Template {
.Section2A {
width: 10%;
}
}
Please note that the percentage before a selector (i.e. %cx-page-layout) refers to a so-called placeholder selector. This is used in Spartacus for optional CSS, so that only when the placeholder selectors are used, the CSS ends up in the final CSS. You can read more about the CSS setup in Spartacus at https://sap.github.io/spartacus-docs/css-architecture/.
Related
I want to disable text input in the "basic-select" component, from the "vue-search-select" package
because there are already ready-made styles for it, and I would not want to create a separate customized select
is it possible? Tell me please
I guess there is no explicit API to disable text input because this package is going to make a "searchable" select component. The text input can be hidden using CSS, however.
.search {
display: none;
}
/* or even better */
.ui.search.dropdown > input.search {
display: none;
}
However, you should be careful about the selector you choose. Depending on your project, it might have some side effects. It might be better to add a custom class to the component and use it as follows:
.my-custom-class .ui.search.dropdown > input.search {
display: none;
}
I have an Ionic Vue3 app. I'd like to change the background color of the whole page. I'm new to Ionic but I believe the way this has to be done (due to the use of Web Components/Shadow DOM) is to modify the --ion-background-color CSS custom property rather than trying to set the value of the normal CSS property, so this works:
.ion-page {
--ion-background-color: red;
}
...but this doesn't:
.ion-page {
background-color: red;
}
Fine, so I do the former, but the problem now is that all elements within the page (everything inside the <ion-page></ion-page> element which use that same custom property value now inherit the same background color.
Does anyone know how to scope the change of background colour of the ion-page element such that it doesn't cascade through descendent elements? Thanks :)
The solution here was to use local CSS custom property --background rather than the global property --ion-background-color. So the following works:
.ion-page {
--background: red;
}
I didn't previously realise there were different sets of CSS variables for different scopes.
Some Ext JS container exposes CSS variables without any mixin. For example, fieldcontainer. In my custom theme I want to style two fieldcontainers differently using the available CSS variables for fieldcontainer.
I know it can be done by applying CSS. Is there a way to achieve it by setting the CSS variables?
For example,
.my-class-one {
$form-label-font-color: #FFFFFF
}
.my-class-two {
$form-label-font-color: #000000
}
Is it possible? If possible, where do I put this code?
You could do something like that:
Define a style in the sass/src/ folder:
.my-class-one .x-form-item-label{
color: $my-class-one-label-color;
}
.my-class-two .x-form-item-label{
color: $my-class-two-label-color;
}
...and initialize the variables in the sass/var/ like this:
$my-class-one-label-color: #FFFFFF;
$my-class-two-label-color: #000000;
You should put your scss variables in the sass/var/ folder and your styles in the sass/src/ folder.. And in these two folders keep the same structure as in your app folder. so if you write a style for your view in app/view/Home.js so place your style in the sass/src/view/Home.scss file.
Useful link: http://docs.sencha.com/extjs/4.2.1/#!/guide/theming
Above approach should work though i personally avoid adding style to internal class names.
Another approach could be defining a new UI for your container.
Have a look at:
Creating Custom Component UIs section in theming guide.
I tried to modify Controls.Input size in Websharper, by using Enhance.WithCssClass unsuccessfully. The max-length in the css was applied to the whole control, and not to the Input markup.
How can I apply different lengths to different Controls.Input controls?
The CSS class indeed applies to the container. To style the actual input using Enhance.WithCssClass "myClass", you need to apply the style to the input inside myClass:
.myClass input {
width: 300px;
}
hope you are in a great health .
I have A SharePoint portal , the master page for this portal contains a lot of side navigation , I faced the below Case :
I have a page called service.aspx, And I want to hide the navigation for this page only, this page is based on page layout .
I tried to create A copy of the master page with no navigation and to assign this master page for the page layout but I couldn't because the site master page overrides the page one
Question related to this one , is there any way to hide master page elements using Script having this script in a page layout ???
or ,do you have a solution for such problem ?
You should be able to add a placeholder to your master page so you can disable some styles for the side navigation. This article has some really good information about what you will need to do to accomplish this.
In the master page, add a content placeholder inside the body tag’s class attribute and remove any runat=”server” attributes that the tag might have, as they are usually unnecessary with SharePoint and will cause an error.
<body scroll="yes" class="<asp:ContentPlaceHolder ID='PlaceHolderAdditionalBodyClass' runat='server' />">
Now in your page layout apply content to the placeholder, say in your frontpage.aspx you would write
<asp:Content ContentPlaceholderID="PlaceHolderAdditionalBodyClass" runat="server">frontpage</asp:Content>
Your page that uses frontpage.aspx as it’s page layout now has the class frontpage on it’s body and you can reference that on your default stylesheet to make any exceptions for the default style declarations.
Assume you have a frontpage sans quick launch and a default layout which has a quick launch, you would do something like this to stretch the frontpage:
#leftNavigationContainer {
float: left;
width: 200px;
}
#pageLayoutContainer {
float: left;
margin-left: 200px;
}
.frontpage #leftNavigationContainer { display: none; }
.frontpage #pageLayoutContainer { margin-left: 0; }