I am trying to create a new custom component which can be added/patched with the Sitecore SXA compoenents and should be able to gel-up with the existing themes of Sitecroe sxa majorly with Wireframe theme. I have created the component as per our custom requirements but I am unable to find the way that how my custom CSS and js files will be integrated with the Sitecore SXA wireframe theme.
I have tried using it by putting the CSS in my view with style tags but it is not working.
I should be able to integrate my custom css and js files with the sxa existing themes so that my component can be used as a subpart of SXA component.
You have two options to extend the existing Wireframe theme - neither of which should modify the existing theme. A good general rule of thumb is to not modify the files/items that the platform ships with. These options are:
Create a new custom theme based on the Wireframe theme.
You can create a new theme by using the context menu of your site and going to Scripts > New Site Theme. This will give you a wizard to create a new theme for your site. You can then copy the children of the Wireframe theme into your new custom theme and update CSS/JS as you wish by uploading the appropriate files into the theme's folder in the media library. Select your new theme as the theme for your site.
Sitecore documentation reference: https://doc.sitecore.com/developers/sxa/17/sitecore-experience-accelerator/en/create-a-custom-theme.html
Extend the existing Wireframe theme.
SXA allows you to create a theme extension to upload your own styles and scripts. To create a theme extension, go to the Extension Themes section in the Media Library and use the context menu to insert a new Extension Theme. You can then add your custom CSS and JS files to the theme extension in the folder structure it provides for you. You then need to attach the theme extension to the Wireframe theme by going to /sitecore/System/Settings/Feature/Experience Accelerator/Page Content/Page Content Site Setup and going to Insert > Attach Theme Extension. This will give you an item for you to map the Wireframe theme (select it as Theme that is extended) and your theme extension (select it under Extension Themes). This will now add your theme extension files to the Wireframe theme and your theme extension files will be considered part of the theme.
Sitecore documentation reference: https://doc.sitecore.com/developers/sxa/17/sitecore-experience-accelerator/en/extend-a-theme.html
Related
I created a simple Sitecore JSS Application and imported the same.
In connected mode, I want to add a few new fields. I added them to the template (Image 1) and they show up in the item (Image 2). When I query the item, I get the new fields in the json object as well (Image 4).
However, I cannot see the new fields in the experience editor (Image 3) and I am assuming I need to add those in the View. I am unable to locate where I need to add these fields or what I need to do, to have these show up.
Image 1: The modified template
Image 2: Both description and photo show up in the item
Image 3: Description and photo do not show up in the experience editor
Image 4: Json however returns these 2 properties
The Experience Editor use the Node.js app inside the /dist folder of your Sitecore webroot. (See also the config, you can have multiple apps)
Change your frontend, I Guess you use React, Vue, or Angular and upload/deploy to the dist folder.
You need to choose your dev workflow see:
https://doc.sitecore.com/xp/en/developers/hd/190/sitecore-headless-development/development-workflows.html
When you add your fields in Sitecore, you are using the Sitecore-First Workflow.
Hidden gem:
JSS add a extra Field "Always Display Field Editor Button in Experience Editor" to Renderings. In the Experience editor the Chrome Toolbar from a rendering has as first icon a Pencil, That opens a Field editor for all custom fields.
I have just started to develop a plugin for redmine 3.
And, I'd like to hide some menu items from the top_menu or the project menu.
I know I can use the delete_menu_item helper.
But I don't know the names of the menu items.
Is there a way to get the names of the menu items,
maybe through "rails console" or something?
Thanks.
Well you can use the Redmine Custom CSS plugin. It allows you to use custom CSS styles for your redmine. You can add a CSS style that hides the menu items. You can get the ids of the menu items using the browser developer tools. For example Chrome Developers toolbox.
I want to show Languages dropdown in header using opencart sellya theme. on below link you will see languages dropdown in header. http://serwer1382018.home.pl/sellyakids/
But on locally its not showing me on frontend. see below code:
<div id="lc_dropdown"><?php echo $language; ?><?php echo $currency; ?></div>
Add the new language in admin side: System > Localisation > Language page.
Now the language switch menu will be available in frontend as buttons/dropdown depending on the theme(the options will be wrapped in a form tag.).
Using css and javascript make it a dropdown selector.
Once the above steps are done, add files to the folder mentioned in the System > Localisation > Language page to fetch the new language translation data.
To Add Language Dropdown on Opencart Website follow below steps,
Download the language pack you need. You can search the OpenCart marketplace
Unzip it and upload the files to your main shop directory. Note: If there is an upload folder inside the archive, upload the contents of that folder, not the folder itself.
Go to OpenCart admin panel System > Localisation > Languages
Click "Add New". The details that you have to fill in the form are usually supplied in the "Documentation" tab on the OpenCart extension page of the language pack. You might also find them in a text file inside the installation archive.
Click on save button.
At front end you will see the new language is added in language drop down.
I need to use Zurb Foundation front-end framework and Kentico CMS v7's portal engine development model. When I import the framework CSS into the CMS and apply the Foundation style sheet to a Page Template, the CMS styles and Foundation styles step on each other making the Design tab pretty much useless for the user:
No style applied:
Style applied:
I am wondering if I need to prefix styles in the Foundation CSS classes to try to prevent conflict, however my initial quick attempts didn't seem to have much affect.
Is there a way to include the Foundation CSS in a way that doesn't prevent portal engine development?
Only thing i can think of now is to add the CSS conditionally.
Put
<%= CMS.CMSHelper.CMSContext.ViewMode != CMS.PortalEngine.ViewModeEnum.Design ? #"<link rel=""stylesheet"" href=""http://www.zurb.com/assets/foundation.top-bar.css"">" : "" %>
into a page layout. I tried to add this to layout of master page (Root document -> Master page -> Edit template properties -> Layout) and it works fine. But it will add the CSS to the . Unfortunately this code does not get resolved in head section of master page.
how to load css classes from my own project specfic css in Sitecore's RAD editor? I want to give option to client to add predefined css class to any needed element.
Put the css in default.css in your websites' root folder and restart IIS. Sitecore RAD editor should pick up the classes, although we found it could take a couple of restarts.
Depending on the version of Sitecore you're using there's different ways since in 6.4 there is a new wysiwyg from Telerik's updated library.
pre 6.4 Multisite Rich Text Editor Custom CSS
6.4+ Multisite Rich Text Editor Custom Css
As stated by Adam you can add this to the default.css file. However if you want to move the CSS file else where then you need to updated the following setting in the web.config (this is the Sitecore 6 setting name, it maybe different in early versions):
<setting name="WebStylesheet" value="default.css" />