Issue #811💬 AnsweredOpened January 27, 2018by RiyaThete0 reactions

CSS Gets deleted

快速解答by JulyanoF

@RiyaThete to load css into editor, you need to insert it on grapesjs init, something like that: Or if you want to include css inline:

Read full answer below ↓

Question

I have a website with multiple web pages (results-page, category page, home page) and a common css file for all pages (all.css).Within this css file : webpage (classes used) Home page ( class A, class B , class C) Results Page ( class B, class X, class Y ) Category page ( class R, class S , class X)

When I load results-page in grape.js' editor using import plugin, I copy the entire all.css file and place it at the top of results Page in <style> tag. Without making any changes I exported the zip using export plugin and I noticed that the css file within zip has only following classes : A,B,X,Y Which means it has classes combined from all 3 pages but it deleted few classes[ unable to understand why so ] . My expected result was : it will have all the classes of all the webpages (A,B,C,R,S,X,Y).

I want to upload the css of entire website, make few changes in the css of a particular webpage and then replace the original css with downloaded css.

Please help me solve it.

Answers (3)

JulyanoF• January 29, 2018

@RiyaThete to load css into editor, you need to insert it on grapesjs init, something like that:

var editor = grapesjs.init({
   [...]
    container : '#gjs',
    canvas: {
        styles: [
            'http://url.to/file.css'
        ]
    }
});

Or if you want to include css inline:

<div id="gjs" class="overflow-y max-height-60vh">
    <style>
    my-class{
        color: red;
    }
    </style>
</div>

RiyaThete• January 30, 2018

@JulyanoF I tried this solution but this does not load all the classes of all my web pages.. it just loads all of the results page and few classes from other pages

artf• January 30, 2018

deleted few classes[ unable to understand why so ]

Not used classes are not rendered

The suggestion proposed by @JulyanoF is the valid one

it just loads all of the results page and few classes from other pages

You can use as many styles you need

styles: [ '..file1.css', '..file2.css', ...]

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins →

Premium option

Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.

Browse premium plugins →

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.

预设插件组成部分方块资产指挥 I18n 层次风格存储 RTE 通讯网页场地建设者

CSS Gets deleted

Question

Answers (3)

Related Questions and Answers

Question: How to use same CSS for Multiple pages

[QUESTION] Removing certain css

[BUG|/QUESTION] Strange characters (Â) within CSS/HTML preview; Elements are not deleted completely

Question on css classnames used in demo

Paid Plugins That Match This Issue

Related tutorials

🚀 Introducing GrapesJS Email Blocky: The Ultimate Email Block Library for GrapesJS

Browse Plugin Categories