Theme styling and bootstrap

Product Support
1

I’m testing Mautic for a client who asked me to create landing pages. I did - in bootstrap as originally requested, then they said ‘Mautic’. So I’ve been using Mautic for a couple of hours trying to recreate them. I couldn’t. Couldn’t even get a full-size hero image. I’ve managed to create a custom theme (All I did was drop the bootstrap HTML into the page.twig and bootstrap.css into the theme css). Now I get a full size background - but random things don’t work.


  1. I have 3 full size Divs, but only two show up.
  2. I use flex to vertical centre on the screen, but it doesn’t work. Nor does using display:table with display:table-cell and vertical-align:middle.
  3. I can’t seem to get images to pick-up from the themes img directory, even with {{ getAssetUrl(‘themes/’~template~’/img/logo.gif’, null, null, true) }}

    I stole the getAsset code but it doesn’t work and i’m literally using it blind.



    Anyone understand how Mautic renders a page? Is bootstrap already loaded as part of the lander? Any JS? Or do I have to add the css as I have done? Why doesn’t FLEX work? Why does half the page disappear? Can I use custom JS? All this and much less I understand!



    I have checked the tutorials but they don’t seem to go into any depth - is there a good resource to research this stuff.

    Thanks to any replies in advance.
2

I’m testing Mautic for a client who asked me to create landing pages. I did - in bootstrap as originally requested, then they said ‘Mautic’. So I’ve been using Mautic for a couple of hours trying to recreate them. I couldn’t. Couldn’t even get a full-size hero image. I’ve managed to create a custom theme (All I did was drop the bootstrap HTML into the page.twig and bootstrap.css into the theme css). Now I get a full size background - but random things don’t work.

  1. I have 3 full size Divs, but only two show up.
  2. I use flex to vertical centre on the screen, but it doesn’t work. Nor does using display:table with display:table-cell and vertical-align:middle.
  3. I can’t seem to get images to pick-up from the themes img directory, even with {{ getAssetUrl(‘themes/’~template~’/img/logo.gif’, null, null, true) }}
    I stole the getAsset code but it doesn’t work and i’m literally using it blind.

Anyone understand how Mautic renders a page? Is bootstrap already loaded as part of the lander? Any JS? Or do I have to add the css as I have done? Why doesn’t FLEX work? Why does half the page disappear? Can I use custom JS? All this and much less I understand!

I have checked the tutorials but they don’t seem to go into any depth - is there a good resource to research this stuff.
Thanks to any replies in advance.