Front-end customization of custom template

Hi, I am new to OroCommerce. Where can find a descriptive guide to add/remove styles to Custom template. I have gone through the below guide.
https://oroinc.com/b2b-ecommerce/doc/current/dev-guide/theme/layout
The document mentioned about a main template file. It explains:

Then, embed your styles in the main layout template using the oro_css Twig tag:

Can you please give the location in which i can find the main layout file.

Topic

[vivek.vijayakumarParticipant]

Hi, I wanted to add few more things. In most of the documentation there is a reference to ‘\Resources\‘ folder. Is this folder located in app folder. If not it would be great if someone can point me in the right direction.

[Viacheslav BemzaParticipant]

Hello, vivek.vijayakumar!

If you want to customize a front store, you need to read documentation from LayoutBundle which contains many useful examples.
Here you can read about working with assets.

In most of the documentation there is a reference to ‘\Resources\‘ folder. Is this folder located in app folder.

It located in your bundle folder. You can see it in any Oro bundle.

[hprasetyouParticipant]

Hi vivek, you should create new bundle to make some customization, and place you custom css and layout to your bundle

[vivek.vijayakumarParticipant]

Hi Guys, Thank you for the info. Let me check and see if i could override the css.

[vivek.vijayakumarParticipant]

Hi guys,
I have tried to create a bundle as per the quick start guide below. https://github.com/oroinc/platform/blob/master/src/Oro/Bundle/LayoutBundle/Resources/doc/quick_start.md
While trying to access the page i get an error:

Variable “block” does not exist.
500 Internal Server Error – Twig_Error_Runtime

This happens when code execute “block_widget(block)” function in xxx.index.twig file.

in src\Acme\Bundle\BlogBundle\Resources\views\Default\news.html.twig at line 7 –
<meta http-equiv=”cache-control” content=”no-cache” />
<meta http-equiv=”expires” content=”0″ />
<meta http-equiv=”pragma” content=”no-cache” />
{{ block_widget(block) }}
</head>
{% endblock %}

I created a bundle called BlogBundle and placed it inside bundle folder. So folder structure is like:

src\Acme\Bundle\BlogBundle

Everything else i followed quick start guide. I am struggling to figure out whats wrong. Any suggestions from anybody on how to resolve this. Thanks in advance

[vivek.vijayakumarParticipant]

Hi Guys,

See i have no luck so far. I have tried top override oro theme. I created a bundle in Src folder and followed the documentation below.

Creating and Embedding Custom Stylesheets in

https://oroinc.com/b2b-ecommerce/doc/current/dev-guide/theme/layout#book-layout-css-files

Can somebody explain where i should place the css mentioned in below section of code.

assets:
css:
frontend:
– ‘bundles/acmedemo/css/frontend/first.css’
– ‘bundles/acmedemo/css/frontend/second.css’
backend:
– ‘bundles/acmedemo/css/backend/first.css’
– ‘bundles/acmedemo/css/backend/second.css’

Is it on bundle folder in app/web. I did that but no success. My files in bundles folder get cleared (bundles/acmedemo) folder. What am i doing wrong ? The documentation looks simple but i am not getting any result. Thanks in advance

[vitaliyberdyloParticipant]

Hello, vivek.vijayakumar.
Sorry for the late reply.

If you should change styles on OroCommerce front store.
You should investigate another documentation.

Please read ORO Frontend Styles Architecture:
https://github.com/oroinc/customer-portal/blob/master/src/Oro/Bundle/FrontendBundle/Resources/doc/frontendStylesArchitecture.md

You should create your own theme:
https://github.com/oroinc/platform/blob/master/src/Oro/Bundle/LayoutBundle/Resources/doc/theme_definition.md
https://github.com/oroinc/platform/blob/master/src/Oro/Bundle/LayoutBundle/Resources/doc/config_definition.md

read about ORO frontend styles Customization:
https://github.com/oroinc/customer-portal/blob/master/src/Oro/Bundle/FrontendBundle/Resources/doc/frontendStylesCustomization.md

As example you can see CustomThemeBundle in Commerce packege
https://github.com/oroinc/orocommerce/blob/master/src/Oro/Bundle/CustomThemeBundle/README.md
Also in this bundle README.md you can find a lot of useful information

[Author]

Replies