Attributes needed on SCRIPT and LINK tags

Ideas
1

Hi
Please allow custom attributes on files included or linked, this is limiting the work with many jquery libraries.

Examples

  1. <link href="print.css" rel="stylesheet" media="print" />
  2. <script type="importmap">{"imports": {"three": "./assets/js/three.module.mjs"}}</script>
1 Like
2

Can you be more specific? How does a CSS file have “custom attributes?” I’ve never heard of this.

1 Like
3

Hello @printninja
sorry I meant link and script element not CSS
Certain libraries from https://www.jqueryscript.net/, when downloaded, uses attributes in the examples, in many cases required, I cannot remember which but please refer to <link>: The External Resource Link element - HTML: HyperText Markup Language | MDN

Thanks for correction, I should have paid attention, this will create commotion

1 Like
4

hi @printninja I have updated the title.

1 Like
5

Have you read the program’s documentation yet? HTML attributes can be added easily through the Attributes panel…

image
image739Ă—165 1.89 KB

Read about this here…

There is a list of predefined link relationships available via the Options > Link Options panel…

image

1 Like
6

hi @printninja
We’re talking about different things :smiley:, I meant link element as in <link href="print.css" rel="stylesheet" media="print" /> not hyperlink, and a script tag as in <script type="importmap">{"imports": {"three": "./assets/js/three.module.mjs"}}</script>, so in my examples here there are certain attributes that need to be set. right now there are work arounds such as using custom component or the head content. but I do see this as a feature that needs to be added.

1 Like
7

Okay, I see what you’re saying now. I don’t know if this warrants an actual feature addition to the program, but I guess see what the devs think.

1 Like
8

I need this option too, as I require a id on the link in the head of a color-switcher dark/light theme I imported. We are not currently allowed to put attributes in the head. I use javascript to target the stylesheet id in the head for switching and I have to use a id because it could be in one or the other state. (unless someone knows a trick to target the last stylesheet in the head)

This is what I need: (set on a stylesheet in the css folder)

<link id="style-switch" rel="stylesheet" type="text/css" href="/style.css">

and this is what I have to use to design with because pasting in the settings Head Content does not add the style until its exported or published. So I have to do this

    <link rel="stylesheet" href="/style.css">
<link id="style-switch" rel="stylesheet" type="text/css" href="/style.css">

Now everytime I have to export or publish I have to disable the first stylesheet active in Bootstrap Studio. (for all pages) :upside_down_face:

Also as a side note is there anyway to automagically indent links added in settings (head before and after) so they dont look so terrible (out of place) in the head ?

My solution was to use this instead of a id and change my all the color related option stylesheets to start with /style

var style = document.querySelector("link[href^='/style']");

not ideal though…and doesnt work with Publish because everything is minified in the head styles and combined.

1 Like
9

@twinstream

I’ve been doing light/dark mode since Bootstrap 4 like this.
It works in BSS, and when previewing, exporting or publishing the design
Have a look here

also scroll animation without aos

1 Like
10

Thank-you ! Looking at your example helped understand.

1 Like
11

Hey! Would you be able to send me the BSDesign File for this?
I’ve been looking everywhere on Google for tutorials on how to get Dark / Light mode working on Bootstrap and haven’t been able to find a reliable source. I understand Bootstrap 5.3 is adding Color Modes, which I’m exited to see BSS implement it, but for now seeing your example is exactly what I’m after.

1 Like
12

Despite the workaround this feature is still a must have…

13

Yes this is still a requested feature for me too. I did finally realize if one is going to use Bootstrap Studio Publish option where every css file gets minified and bundled at the root level is to simply create a css sub folder and put my excluded css stylesheet in it. The bundler cannot add that file because of the path difference now. Then I updated my javasrcipt to find the stylesheet by matching part of the name in order to do the switching. I also had to make sure to target the sheetname.min.css version as it is also minified in the sub folder using Publish.

1 Like