OroCRM Forums

Covering OroCRM topics, including community updates and company announcements.

Forums Forums OroCRM OroCRM – HTML, JavaScript, CSS, Design Questions Issues using a custom theme inside a bundle – CSS not pulled in

This topic contains 10 replies, has 4 voices, and was last updated by  mmiasnikov 6 years, 8 months ago.

Starting from March 1, 2020 the forum has been switched to the read-only mode. Please head to StackOverflow for support.

  • Creator
    Topic
  • #25629

    mike.mckean
    Participant

    Alright, I’ve been following any custom theme bundle instructions I can find, including OroCRM docs, an Atwix article about the topic, and forum posts (as late as February). So far can not get CSS from my theme to load properly. My goal: create a theme bundle, that (like implied in Oro docs) should load CSS files via the settings.yml in the theme folder. I’ll have templates at some point too, plus will want to use LESS, but as a minimum I need CSS.

    Here are my main sources:

    Some notes:
    1. The theme shows as ‘active’ when I run: oro:theme:list, and shows the correct settings.yml content
    2. Symfony Profiler says my bundle is enabled
    3. oro_assetic.css_debug_all is set to true in config.yml (and config_dev.yml), but all CSS still compiles to a single file
    4. I am running these commands after each change:

     
    Here’s my settings.yml:

    Lastly, here’s my src/ file structure:

    Any thoughts would be very helpful. I’ve been on this for a few days and can’t understand what’s wrong.

    Thanks!


    UI Developer at E7 Solutions
    http://www.e7solutions.com

Viewing 10 replies - 1 through 10 (of 10 total)
  • Author
    Replies
  • #25630

    mike.mckean
    Participant

    Edit:

    Apologies, the file tree above didn’t match my actual tree; I had omitted and renamed based on what I thought was necessary. Below is the full tree, which includes files copy-pasted from the Atwix article referenced above. I don’t know if they are necessary for my current goal. To clarify: My CSS files do not load, meaning the CSS rules I’m creating in them are not present in the resulting styles.css file in the cached files.

    (I would have edited the first post but don’t see an edit button.)


    UI Developer at E7 Solutions
    http://www.e7solutions.com

    #25631

    mike.mckean
    Participant

    Edit 2:

    I’ve been told that all the docs/tutorials I have been following only affect the Admin side. The way I understand it, this method of theming (specifically placing my theme in Resources/public/themes) loads the theme’s files on the Admin side, not the front-end. This is not stated in the docs, but I can confirm it’s true: I am now seeing my attempts at fixing or breaking things take effect while in /admin.

    However, my problem with CSS persists. I even tried adding my own icon and updated the settings.yml:

    …which sets the site favicon just fine! By this logic, the path to my CSS files should work perfectly, yet the content of my CSS files doesn’t load.


    UI Developer at E7 Solutions
    http://www.e7solutions.com

    #25632

    msulima
    Moderator

    Hi, mike.mckean.

    Could you please clarify your question? What application and what in that application you are trying to change?

    Application options:
    – OroCRM admin panel
    – OroCommerce front store

    Changes options:
    – change logo
    – add some css styles
    – change template of some page or part of template

    Thank you.


    #25633

    mike.mckean
    Participant

    msulima –

    Hi! This particular issue is within the OroCRM admin. I haven’t attempted store theming yet; I wanted to solve this first.

    My issue is, at this point, all of the options for the settings.yml work properly except the CSS. When I inspect the admin page CSS, I see my rules aren’t applying. I’m trying to solve this issue before moving on to templates.

    Thanks!


    UI Developer at E7 Solutions
    http://www.e7solutions.com

    #25634

    msulima
    Moderator

    You should add ‘assets.yml’ in ‘Resources/config/oro/’ folder of your bundle. After that you should rebuild assets. All styles form that ‘assets.yml’ will be available on admin panel interface.
    Also you can use ‘*.less’ files.


    #25635

    mike.mckean
    Participant

    My understanding was that, if you create a theme properly, you don’t have to use assets.yml. You just declare all CSS/LESS in the settings.yml and they will append to the rest of the CSS assets. At least that’s what the docs here say:

    When application has active theme it’s styles append to the end of the list of all CSS assets of bundles.

    Each theme is appended to the list of OroAsseticBundle’s CSS assets in group “theme”.

    …and the docs here mention assets.yml, but again declare that if you have CSS files referenced properly in your settings.yml then you’re good.

    I will try using assets.yml tomorrow, but it seems redundant to reference the CSS files in both places.


    UI Developer at E7 Solutions
    http://www.e7solutions.com

    #25636

    mike.mckean
    Participant

    Sorry, I haven’t had time to work on this in a bit. I will try the assets.yml workaround later this week.


    UI Developer at E7 Solutions
    http://www.e7solutions.com

    #25637

    mike.mckean
    Participant

    Alright, I can confirm that using assets.yml works. Here is mine:

    After placing this file in my bundle’s ‘Resources/config/oro’ directory, then doing cache:clear, oro:assets:install, and assetic:dump, my CSS was loaded in the Admin side.

    I would suggest editing some of the documentation however, as it should be more clear that you have to use assets.yml when making a reusable theme.


    UI Developer at E7 Solutions
    http://www.e7solutions.com

    #25638

    berbass
    Participant

    Had the same issue, editing the assets array in configs solved it.
    I agree with @mike.mckean ; that should be mentionned in the docs.

    #25639

    mmiasnikov
    Participant

    Hi, @mike.mckean, @berbass.

    Thank you. Сhange, according to your requests, will be added in documentation in the near releases.

    Task key for internal tracking: DOC-301.

    Thank you again for your commitment!

    Best regards.

Viewing 10 replies - 1 through 10 (of 10 total)

The forum ‘OroCRM – HTML, JavaScript, CSS, Design Questions’ is closed to new topics and replies.

Back to top