I am new to SAP Commerce and Spartacus. I have created a new Page Template, Content Page and defined some slots in that.
I have used the existing component(s) in the content slot(s).
Now, How and where can I add the custom styles for the new Page Template?
Would you please refer to the documentation regarding Component Styles?
https://sap.github.io/spartacus-docs/css-architecture/#style-library
Since Spartacus components are built and distributed in libraries, component styles cannot be used. These styles would be pre-processed and baked into the component library. This means that the CSS rules would not be optional, nor would they be easily customizable.
Instead, component styles are delivered optionally in the styles library. You can use those styles, extend them, or completely skip them and build your CSS rules from scratch. The contract between the style library and the component library is done through the (unique) component selector.
Best regards,
Jerry
Currently I found only one solution is to add global styles and use grids to make proper layout.
Related
I am new to Liferay, and I still don't know the difference between the various 'kind' of Liferays.
This Liferay is what I am talking about.
I understand that you have to create a page first, and then add components (fragments) in it.
I also understand that you can go to fragments, and create a custom fragment with a custom CSS, and then import it into your page.
However, what I want to do is have a global CSS that I can use for all fragments inside a page, rather than having to add CSS for each fragment.
Is that possible, and if so, how?
I know I can use the 'style-books' which apply to an entire page, however, I don't know how to customize them, and it doesn't seem that that's even possible.
To avoid coding, you can use the css additional textbox provide by theme settings.
It's a whole page css addon for every pages in the site
I am new to Orchard and question myself how to mix up widgets and content. As of my understanding, the page content type has one layout where you put all your content in: HTML, images, et cetera. Where it will get displayed is defined by the theme. By placing widgets into the zones of the theme I can display custom modules in addition.
But, what if I want (for one specific page, from top to bottom)
Content/HTML -> Widget -> More Content/HTML -> Another Widget -> Even more Content/HTML?
I know it is possible to achieve that by placing the second and third content block into a widget and configure the layer to match the url of my page, but this seems to me like a hack.
In DNN you can place everything, HTML as well as modules, into the exact container/zone you want. In nasty Joomla! you can "import" modules (widgets) as part of the HTML of an article.
What is the way to achieve that mix up in Orchard?
You have tagged the question as orchardcms-1.10 so you should be able to do it.
Orchard has a module called Orchard.Layouts which provides the functionality that you are describing.
Are you using an upgrade old version?
If you have upgraded your site from an older version of Orchard then it will still just have the old style BodyPart as its main content editor. Fresh installs will have LayoutPart which can provide these kinds of complex layouts.
For an introduction on this subject look at IDeliverable's Orchard Layouts intro article.
If you are working with an old upgraded version please add a comment and I will explain the upgrade process.
Have you enabled the Layout Widgets module / feature?
If you already see this but can't add the widgets then make sure you enable the Widget Elements feature:
Go to:
Admin panel
Modules
Type widget into the filter at the top
Click Enable on the Widget Elements feature
Now when you go back to the layout editor you will see a new category with all the widgets placeable as elements.
I am trying to create a different layout for a sub-section of my website using Orchard.
Let's say I wanted to give www.site.com/Shop a different layout from the rest of the website; how would I go about doing this?
I have tried looking for a way to do this using layers but have got stuck.
There are several ways to achieve different layout, since I don't know your specific needs I'll throw in some extra possible routes
Use url shape alternate (I guess you need this one)
You have to enable Url Alternates module and it lets you create shape alternates based on url. For example if your page is www.site.com/shop you can then create view under your theme Layout-url-Shop.cshtml and it will be used instead of default Layout.cshtml on your shop.
Orchard documentantion: URL and Widget Alternates
Use 1.x or wait for 1.9
There you can define dynamically different layout per content item aka page. But I find it good only for content not the base layout which is present in layout.cshtml
Create minisite
How to create a minisite inside your Orchard website
I am trying to customize the Liferay UI by using custom theme using base as as "_Styled" theme.
I have my own css files which I coped to _diff/css folder of theme and imported them "custom.css" file .However its breaking the presentation of liferay.In my custom CSS I have styles defined for all the standard tags like body,div etc which is impacting the liferay UI too.
How can I resolve this conflict? Thanks in advance!
Quick (and not the best) solution is to remove contents of liferays css file (for example "base.css") and save this empty file in /diff/css/ folder of your theme. This way the base.css will get overriden with your new empty file and thus no styles will get loaded. And your custom.css will be the only stylesheet that is taken into account.
Well, of course it all has an effect on the rest of Liferay as well. Liferay provides quite a bit of the HTML DOM of your page, and if you change the presentation of all of those elements, you'll have to take care to style Liferay's elements too.
Is this a conflict? No. Let's go for the simplest case: You declare div {color:green;}. Of course, now everything, your components as well as Liferay's components, use green text. If you only want to style your own portlets, you might want to specify some portlets: div.portlet-my-own-application {color:green;}
I know that color is a too simple usecase, but I hope it illustrates the solution strategy.
Rather than following Artem Khojoyan's suggestion to override Liferay's base.css, I'd recommend to take a look at the resulting css, what's effective etc., and simplify your own css - adapt it to be used within Liferay - by inspecting the effective CSS for every elements that looks off. Firebug or any of it's relatives are your friend.
I'm afraid, with the details "I'm doing something which has an effect on Liferay UI" there's nothing much more to help you. In fact, I'd hope that what you do has an effect on Liferay's UI... You'll just need to find the proper CSS code
Ideally if your styles are loaded from custom.css, then will overwrite liferay default styles.
In some cases, to overwrite a style in css, you can use !important
for example, liferay default style
body {
background-color: #fff
}
You can specify your style to consider irrespective of order of loading
body {
background-color: red !important;
}
I have a site laid out in HTML/CSS - based on Twitter Bootstrap.
I have created a new template in a new orchard instance.
I have a navigation that requires some classes from bootstrap applied to the .
The Orchard Layout uses this for navigation:
#Display(Model.Navigation)
How can I edit the HTML it outputs - and / or add some classes to the ul that's rendered in the navigation by Orchard?
Thanks.
That line in Layout.cshtml is showing the navigation zone, which is one of the widget zones.
In a standard Orchard setup a Menu Widget gets placed in that zone. You can check on the Widgets page in the admin. This doesn't directly show the menu widget though. This is done by another template.
In most cases the easiest way to find out which templates are being used is to use the Shape Tracing tool, which is part of the Orchard Designer Tools. There's an intro to Shape Tracing in the Orchard Documentation.
There are several layers of menu templates and it is a bit tricky to find these in the shape tracing tool.
The templates relevant to menus that you may need to include in your theme are:
MenuItemLink.cshtml
MenuItemLink-ContentMenuItem.cshtml
MenuItem.cshtml
If you can't find them in the shape tracing tool, then do a file search in your solution and copy these files to your theme.
One option could be to use Vandelay.Classy module and add classes to your content item http://orchardproject.net/gallery/List/Modules/Orchard.Module.Vandelay.Industries
Other could be to create a alternate template for Navigation Shape. you can designer tools to create alternate.
http://orchardproject.net/gallery/List/Modules/Orchard.Module.Vandelay.Industries