Using the stylesheet found in the theme directory, I am trying and failing to use images in the deployment directory

0
Hi, I'm trying to write some ::after elements in the stylesheet for an app, the reason for doing this is to assign some icons to a specific radio button list, as visual aide. The CSS I am using so far, in a sass partial .modal-dialog .modal-content {     input[value="Radio_value"] + span::after {         content: "";         display: inline-block;         background-image: url("../../../../../deployment/web/img/Module$Image.png");     } }   I'm using the Brackets editor and can see this path works, and captures the right image. When I run the app locally, the after element targets the right in page element, but the image fails to load, with a 404 not found error. This seems to be the case for all images stored in the app from the deployment folder. Why can't these be targeted by CSS, when they can still be embedded in a page using the modeler's image element, and how (if at all) can I use CSS to grab these? Ideally I would like to avoid just including these images in the theme folder, as we plan to run regular updates from a central stylesheet that could interfere with that   Cheers
asked
1 answers
4

Hi Luke,

Any images that are included in the theme folder get copied over into the deployment directory when you run the modeler.

 

You can add your images to your css folder in the theme folder like so:

\theme\styles\css\img

Then reference them in your sass like so:

.modal-dialog .modal-content {
    input[value="Radio_value"] + span::after {
        content: "";
        display: inline-block;
        background-image: url("../img/Image.png");
    }
}

By the looks of your question you are trying to use an image that is uploaded in the modeler. If you want to do that you can use the following css:

.modal-dialog .modal-content {
    input[value="Radio_value"] + span::after {
        content: "";
        display: inline-block;
        background-image: url("../../../img/Module$Image.png");
    }
}

 

The deployment directory is the root folder so therefore trying to access deployment/web/ will never work cause deployment doesn't exist.

answered