External css import, url replaced

Hi,

I imported an external css file with some urls for svg images. After importing the file to the project it seems that the url is replaced.

The original file:

The imported file:

Is there a workound? Currently I replace the css file back after exporting the project.

thanks and regards. It’s a great tool :slight_smile:

Hello and welcome to the forums @holzbein!

Have you tried replacing (copy/paste) the resulting code with the original code in the Styles window? Ducks Don’t shoot the messenger lol, it’s just hard to know what to tell you as I don’t know what you’ve tried or if you tried anything at all so if you can let us know that much I’m sure that will help the Dev team as well as anyone else that can help.

MIght be that there’s something wrong with the path of the image too? Not sure without having more information. I don’t work with SVG files as of yet, so I’m interested to know what does and doesn’t work too so hopefully this will get some attention.

Hi jo-r

I did not do pretty much;) I need an external libary (slim-cropper) for my project. So I imported the orignal css file from my local pc to the bss project: Styles -> Link external css …

the details for the svg images are all in the css file. There is no external image.

That’s my local project:

That’s the bss project:

Regards

I understand, here’s what I suggest, as mentioned above:

Copy the text that is not showing up correctly from the original CSS file
Paste it into the Styles window and replace what is wrong.

See if that works or not or if it is not going to allow you to do it let us know that too.

If that works, then you have a work around for now, if not let us know and hopefully someone will have more options for you to try since I don’t work with those image types as of yet.

Also I would suggest you post this in the Bugs forum as this post seems to be in no particular topic right now. Use a link to this thread in your post in Bugs forum so you don’t have to retype it all. The Devs will see it better there than in other areas and will usually tell us if something isn’t supported yet, or tell us that it will be fixed soon etc. They are pretty good about getting bugs fixed within a reasonable amount of time. Sorry you’re having these issues, but let them know, “If they don’t know it’s broke, they can’t fix it” is my motto for most things. :slight_smile:

I copied the code to the style.css with no success.

I’m going to put the topic to the bugs forum.

Thanks for your help. Best Regards

Sorry that was the wrong screenshot :slight_smile:

And now the correct image:
2020-12-26_19h31_02

You will have to paste the url into the style again. On import, the stylesheets are “sanitized” and urls that are encoded (data: whatever) are removed for security reasons.

What if … instead of importing you were to create a blank CSS file in the app, then copy and paste the entire CSS from the original to the new CSS file you created in the app. Can’t hurt to try it. That way you wouldn’t have to single out all the links that got broken. Not a fix of course, but if it works it would be a good work around for now.

Let us klnow if that works or not.

Hi,

So I created a new Stylesheet file and copied the code in this file:

As you can see on the screenshot. On the left side the file is open in the external editor (with the svg code) and on the right side the file is open in the bss editor (without svg code).

Best regards

Ok, sounds like a job for @martin and the devs to check out or chime in if this is how it is supposed to work. As I said, I don’t know if the SVG file type is supported or not, but I did think it was already. Let’s hope someone from the team will chime in with more info on it. Good try though, can’t say we didn’t try to work around it. :slight_smile:

Jo’s way will not work either as any code pasted into a open editor will be sanitized also.

You have to inside Bootstrap Studio paste the copied url back into the missing svg url - not paste the complete css block.

I would also suggest if edits are to be made to the file with any optional BS external editor that you pull the svg url styles out and keep them in a separate file.

I think you both misunderstood what I said/meant. Don’t paste it into an external editor, paste it directly into the newly created CSS file in BSS. You can paste any css directly in the Styles window, so open your blank CSS file and paste it in there and see what it does. :slight_smile:

Jo’s second suggestion of pasting right into a newly created css file in the Styles window will not work either as it is “sanitized” also and removes the url.

The only way possible is to paste the actual url back into the missing url([svg]).

Thanks for checking that @twinstream as now we know the rest of the story. Hopefully posting in the Bugs forum will get some love on this issue.

Its not a bug but a security issue.

Sanitizing SVG

Hi twinstream,

it works with copying the code direct in the bss editor. But that is very complicated.

What I not understand (and not like) is when an text-editor thinks he is smarter than me. If I create the project local just with an simple text editor I copy the same css file to the folder and to the server. On my on risk! If you think you have to protect me, the editor can show me a warning while importing and than I can decide if I take the risk or not. Another way is to set a security level.

Best Regards.

You lost me at

If it works to copy it into the BSS styles window directly, for you … What is complicating about it?

  1. Open css file in your editor and hit ctrl+a to select all content then hit ctrl+c to copy the selected content.
  2. Go to BSS and create a new CSS file, open that new CSS file in the Styles window and ctrl+v to paste it. Save the file.

What is hard about that? Not saying what you want is wrong, just stating this is an extremely easy and quick work around.

All of this is, of course, only if doing this actually works for you since it didn’t for twin stream.

Nothing is hard about that. It’s simply needless. It takes me and you hours to solve that problem. And what is the solution? Copy the code back which was removed for security reasons.

It doesn’t matter It’s a very handy tool. Thank you for support.

Still not sure if you are understanding what I’m saying. I’m talking about the entire code of the entire page, there should be no need to pick and choose unless doing the whole page doesn’t work. If it does work for you, that’s a just as quick to do as hiting the Import button in BSS, locating your file, clicking again to import the file, create a directory for it if needed, etc. Not a slow process, just not as convenient and it should be in the app as you are requesting. Make no mistake, I agree wholeheartedly that what you’re requesting should be there and work. Just saying that if the copy paste entire file works for you, that’s a quick fix.