Hi, im kinda new here, (bad english) Im trying to duplicate a entire portfólio section from a premium template, to a new site im making to myself, however the css or the JS scrip are not being copied (?) is that a problem or is that normal?
is it possible to copy from a premium template? if not, thank you anyways
Thanks
Try saving the portfolio section from the premium template into your library as a custom component. This will include any associated CSS and JS. Then, in your new design, you can just drag it from your library into your new design.
I try that, and didnt work. its kinda copy everything like images and text, maybe the CSS and JS, but it dont work on my site, when I drag the custon code to my design, it looks like missing a link to CSS or something...
From which template are you trying to duplicate the portfolio?
Actually, since the last update, if you want to include the CSS and JS etc. you need to check the boxes for them as they default to not included now (thankfully lol). So, it could be you didn't tell the Library component to include them.
Printninja, im trying to duplicate the "section" from the material portfólio style, the one page titled: project with grid...
and
Jo, im actually doing this, i check all the boxes, before add to my library... like i said: when i drag the style from my library to my design, it looks like missing some link to the css... idk
is that a way to upload the prints here?
thaks alot guys.
Okay, the problem here is that the Material Portfolio template uses a customized version of the Bootstrap CSS, which is locked by default. So it's impossible from within Bootstrap Studio to save all the CSS classes that give this portfolio grid its look and functionality. Basically, you'll need to copy all the classes that are specific to this portfolio grid component to a new CSS file, and then you'll be able to save it as a library component that can be used in other websites, with its associated CSS.
Tedious, but not difficult.
You can also export the template, then open the bootstrap.css file, and copy the template project css thats been added to it as another css file. Then open a blank project, import the new css file, and copy the html element (section) from the template into the blank project. You now have the html, project css, and a clean bootstrap.css file. You can then create a component.
@Twinstream
That was my first idea as well. Unfortunately, the Bootstrap CSS is exported minified. There are sites online that will un-minify it, but then you've got to go through a pretty long stylesheet and hunt down all the classes that have been added for this particular template (because the CSS is not commented.) Most of them seem to start with .portfolio-block -something. Still a real PITA. I think it's easier to just highlight the components in question, see what classes are attached to them, and then copy those classes to a custom stylesheet.
Of course, if all this person wants is the portfolio, I'd just recreate the thing from scratch. It's just a gutterless row & columns without padding that contain an image in a link that scales up on hover, and some text that fades in and out on hover.
Has anyone thought about that this might actually be a bug in the components library? I would think that no matter where the classes or supporting files files come from, they should be included in the library item. Just a thought.
@ Printninja
I used this method to create a completely unlocked Clean Sky Template. You are right that one does need to unminify the bootstrap.min.css file. I have a registered version of Sublime 3 Editor that has both Minify and Prettify packages installed so that step happens quickly. Its usually not to hard to find where the bootstrap css ends and the custom theme css starts but one may want to open a regular bootstrap.css that is the same version to find out. Everything from that point down will be the custom css for the theme. Copy and save it all.
If you create all the pages the same as the Clean Sky Template and copy each section you will have all the html except for the classes on the body which will have to be manually transferred. Import any additional things like custom style sheets, js, images, etc and you will have a unlocked version.
What is nice about this is you can edit the theme css directly without having to copy and overide the css.
For some people who want more flexibility when editing templates this may be useful. The devs have reasons to keep these locked though and I totally understand those reasons.
@ Jo
The bootstrap.css file was compiled with the custom.css for the theme included. The bootstrap.css file is not included when creating components. You can do the same thing if you export your project, add the custom.css to the bootstrap sass files and compile everything together. You would then import this as a theme and choose it and it will show all the custom.css locked inside the bootstrap.css file when showing in the styles tab.
Or maybe download the Bootstrap files from the bootstrap website which does include a non compressed css file you can use? I dunno, seems like there still should be a simpler was to do this.
@otto182
If you can wait a day or two, I'll re-create this portfolio component and upload it to the user library.
thank you guys for the feedback ...
you know, im a graphic designer, who have a short course (?) about web design, i do my work (websites) only for small clients, one who never thought to be in "internet" like they say ... my poor skills are just fine for then, i mean, i kinda understand CSS and JS a bit, enough to work with BS and actually create something ... but i cant see this: * '' Of course, if all this person wants is the portfolio, I'd just recreate the thing from scratch. It's just a gutterless row & columns without padding that contain an image in a link that scales up on hover, and some text that fades in and out on hover. '' * now, that @Printninja have said that, i can see (more or less) what is going on, i mean, i cant do this, to be really professional, but, now i can realize that is (maybe) simpler than i think ...
and of course @Printninja if you can do it I'll wait, to compare, mine with yours ... btw. have u ever think about make a yt video? i mean, its your job, your codes, i dont want to copy your design, but i think theres alot of people, (included me) that are limited to of components on BS ... and with a simple "* It's just a gutterless row & columns without padding that contain an image in a link that scales up on hover, and some text that fades in and out on hover. * "simpler way to do and i don't realize until now.
Thank you guys alot, and sorry for my TERRIBLE english.
well @Printninja, i tried it with the BS resourses and got nothing... :/
@otto182
Search for "Compact Grid" in the online components.
you are awesome!