Frontend UI Modifications

Hi,

We are looking to modify the frontend user interface and require advice on how to change the following (we have installed the CE edition with no sample data) –

a. Change the Logo
b. Modify the sliders
c. Modify the top menu.
d. Remove the Featured Products and Top Selling sections and add our own
e. Modify the footer.

Please advice. Further in the top menu where are the Contact Us and About links coming from? In the standard installation, they are not working. How can I resolve this?

Thanks

Anurag

Topic

[dandriesParticipant]

Hi,

For points a,b,d,e – with layout updates.
For point c – with customization of web catalog or master catalog.

There is also a documentation article explaining how you can customize application layout: Customizing Application Layout

About the Contact Us and About links, will check to see if it can be reproduced.

[avagarwalParticipant]

Hi,

I there any documentation on how to modify the layouts? I can see the catalog bundle and twig template for the sliders etc. How do I identify the controller and from where the data / images are being pulled from.

For point ‘c’ I can change the web catalog, but contact us and about seem be hard coded into the top menu. How do I remove them, given the fact that they are also not working?

Thanks

Anurag

[MichaelKeymaster]

Hi Anurag,

The best place to start would be the layout component developer documentation at https://github.com/orocrm/platform/tree/master/src/Oro/Bundle/LayoutBundle/Resources/doc

You can also check the code of the sample custom theme in https://github.com/orocommerce/orocommerce/tree/master/src/Oro/Bundle/FrontendBundle/Resources/views/layouts/custom

The menu items are introduced by the menu configuration files, see https://github.com/orocommerce/orocommerce/blob/master/src/Oro/Bundle/CommerceMenuBundle/Resources/config/oro/navigation.yml
You can override the default menu configuration from you customizations bundle, the documentation on menu configuration is available at https://github.com/orocrm/platform/blob/master/src/Oro/Bundle/NavigationBundle/README.md

Thank you,
Michael

[avagarwalParticipant]

Hi,

I am looking to modify the css files. As per the documentation – https://oroinc.com/b2b-ecommerce/documentation/current/dev-guide/theme/layout, I have added to / modified the config_prod.yml & confi_dev.yml files with the following lines

YAML

oro_assetic: css_debug: [frontend] css_debug_all: true

1 2 3

oro_assetic:     css_debug:      [frontend]     css_debug_all:  true

I have then cleared the cache. On viewing the site in the browser, I still a single css file being referenced. What am I missing?

Please advice.

Thanks

Anurag

[dandriesParticipant]

From the layouts documentation specified above by Micahel, you can look at:
https://github.com/orocrm/platform/blob/master/src/Oro/Bundle/LayoutBundle/Resources/doc/example.md#adding-css-and-js

[avagarwalParticipant]

Hi Dandries,

I am not looking to create a new page, but override styles of the existing oro theme e.g. make the buttons blue instead of orange. I notice the file – \web\bundles\oroui\themes\oro\settings.yml is referring to “bundles/oroui/themes/oro/css/style.css”. Can I add my own styles to this css and then to a cache clear to view the changes.

Thanks

Anurag

[Alex PuscasParticipant]

Hi Anurag,

In order to add a custom styles file on front-end application you can follow those steps:

1. Create a styles file. E.g.: AcmeBundle/Resources/public/css/custom_forum.css
2. Configure an output styles file that includes the styles you want to add on page. AcmeBundle/Resources/config/oro/assets.yml should contain:

YAML

custom_forum_styles: inputs: - 'bundles/acme/css/custom_forum.css' output: 'css/layout/default/custom_forum_styles.css'

1 2 3 4

custom_forum_styles:     inputs:         - 'bundles/acme/css/custom_forum.css'     output: 'css/layout/default/custom_forum_styles.css'

3. Add output styles file to your page using layout updates. E.g.: In order to add your output styles file to the landing-page, AcmeBundle/Resources/views/layouts/default/oro_frontend_root/layout.yml should contain:

YAML

layout: actions: - '@add': id: forum_css parentId: head blockType: style options: src: 'css/layout/default/custom_forum_styles.css'

1 2 3 4 5 6 7 8

layout:     actions:         - '@add':             id: forum_css             parentId: head             blockType: style             options:                 src: 'css/layout/default/custom_forum_styles.css'

If you would like to read more about layout updates, please check LayoutBundle documentation, or specific to adding styles files: https://github.com/orocrm/platform/blob/master/src/Oro/Bundle/LayoutBundle/Resources/doc/example.md#adding-css-and-js
If you would like to read more about Frontend Styles Architecture, or specific about theme extending, please check: https://github.com/laboro/dev/blob/master/package/customer-portal/src/Oro/Bundle/FrontendBundle/Resources/doc/frontendStylesArchitecture.md#theme-extending

Hoping this helps you out and solves your issue,
Alex

[Author]

Replies