[QUESTION] CSS Gets deleted

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, 20180 reactions

@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, 20180 reactions

@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, 20180 reactions

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...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.

Presets Plugins Components Blocks Assets Commands I18n Layers Styles Storages RTE Newsletters Web pages Site builders

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

Browse Plugin Categories