cms loads just the html content

ahmed31916 · Post by **ahmed31916** » 16 Jul 2022, 16:10

Hello Aimeos,

When I make a new csm content page in the admin panel, and the cms page loaded. It loads just the html content.
Why It doesn't load the css too?

This is an example of the cms content stored in the database:

Code: Select all

{"css":".container-xl{min-height:2.5rem !important;}.gjs-dashed .container-xl{padding-top:10px;padding-right:0px;padding-bottom:10px;padding-left:0px;}span{min-height:1.5rem;}p{min-height:1.5rem;}#it4h{-webkit-tap-highlight-color:transparent;font-family:Roboto, arial, sans-serif;color:rgb(60, 64, 67);display:inline-block;font-size:12px;letter-spacing:0.8px;line-height:20px;margin-top:1.236em;margin-right:0px;margin-bottom:0.618em;margin-left:0px;}#if37{-webkit-tap-highlight-color:transparent;line-height:32px;padding-top:24px;margin-right:0px;margin-bottom:10px;margin-left:0px;color:rgb(60, 64, 67);font-family:\"Google Sans\", sans-serif;font-size:24px;}#iwne{-webkit-tap-highlight-color:transparent;line-height:24px;padding-top:20px;margin-top:10px;margin-right:0px;margin-bottom:10px;margin-left:0px;color:rgba(0, 0, 0, 0.87);font-family:Roboto, arial, sans-serif;font-size:14px;}#iaw82{-webkit-tap-highlight-color:transparent;display:flex;align-items:center;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgb(221, 221, 221);margin-top:20px;padding-bottom:14px;color:rgba(0, 0, 0, 0.87);font-family:Roboto, arial, sans-serif;font-size:14px;}#ie2s3{-webkit-tap-highlight-color:transparent;border-top-width:initial;border-right-width:initial;border-bottom-width:initial;border-left-width:initial;border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:none;border-top-color:initial;border-right-color:initial;border-bottom-color:initial;border-left-color:initial;border-image-source:initial;border-image-slice:initial;border-image-width:initial;border-image-outset:initial;border-image-repeat:initial;width:141px;height:96.562px;}#ibqrs{-webkit-tap-highlight-color:transparent;margin-left:21px;}#igqy8{-webkit-tap-highlight-color:transparent;line-height:24px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;margin-top:20px;margin-right:0px;margin-bottom:8px;margin-left:0px;color:rgb(60, 64, 67);font-family:\"Google Sans\", sans-serif;}#is1rj{-webkit-tap-highlight-color:transparent;line-height:24px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;margin-top:8px;margin-right:0px;margin-bottom:10px;margin-left:0px;}#idc3n{-webkit-tap-highlight-color:transparent;line-height:24px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;margin-top:10px;margin-right:0px;margin-bottom:10px;margin-left:0px;}#iokbz{-webkit-tap-highlight-color:transparent;color:rgb(51, 103, 214);background-image:url(\"data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='rgb(51, 103, 214)'%3E%3Cpath d='M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z'/%3E%3C/svg%3E\");background-position-x:100%;background-position-y:50%;background-size:12px;background-repeat-x:no-repeat;background-repeat-y:no-repeat;background-attachment:initial;background-origin:initial;background-clip:initial;background-color:initial;padding-right:14px;}","html":"<div class=\"container-xl\" data-gjs-name=\"Container\"><span id=\"i2bz\"><h1 id=\"it4h\" class=\"Yolzzd\">GOOGLE PRIVACY POLICY</h1><p id=\"if37\" class=\"q0cs9b\">When you use our services, you’re trusting us with your information. We understand this is a big responsibility and work hard to protect your information and put you in control.</p><p id=\"iwne\">This Privacy Policy is meant to help you understand what information we collect, why we collect it, and how you can update, manage, export, and delete your information.</p><div id=\"iaw82\" class=\"T6GQ8\"><img src=\"https://www.gstatic.com/identity/boq/policies/privacy/privacy_checkup_icon.svg\" alt=\"\" data-atf=\"false\" data-iml=\"5621.800000190735\" id=\"ie2s3\" srcset=\"http://cars.mynet.net/aimeos/1.d/preview/6/f/6f6126b5_143-100855-toyota-tundra-debut-2.webp 1920w\"/><div id=\"ibqrs\" class=\"KMSzQd\"><p id=\"igqy8\" class=\"uVL6rc lxrZg\">Privacy Checkup</p><p id=\"is1rj\" class=\"lxrZg y8e7bd\">Looking to change your privacy settings?</p><p id=\"idc3n\" class=\"lxrZg\"><a href=\"https://myaccount.google.com/privacycheckup?utm_source=pp&utm_medium=Promo-in-product&utm_campaign=pp_intro&hl=en_US\" target=\"_blank\" id=\"iokbz\" class=\"N6CPUe\">Take the Privacy Checkup</a></p></div></div></span></div>"}

As shown, it have two objects ["css", "html"]. My problem is: I got the html content object without it's css object.

Another question, how to get the title of the cms page?

Post by **aimeos** » 18 Jul 2022, 05:39

The inline CSS is only for the content pane in the CMS panel. You should add the CSS for the elements to your application CSS file.

peter69 · Post by **peter69** » 06 Feb 2023, 16:20

I have added and enabled the style manager in GrapesJs, but the css is not rendering. Could we create a decorator to render the css that is generated with GrapesJs?

peter69 · Post by **peter69** » 06 Feb 2023, 19:42

I have created a custom class name of the cms page client implementation used and made a change to be able to display the css generated by GrapesJs

peter69 · Post by **peter69** » 06 Feb 2023, 20:34

Another (and simpler) way to display the css generated by GrapesJs is to add the header.php in the theme at the following address: your-theme/templates/html/cms/page/ This way the default header.php will be overwritten. Then you can add the code shown in the screenshot below

Help for Aimeos