308 comments found.
How do I create bootstrap badges in this theme?
Using the following HTML, I get white texts without the colored badges.
Primary
<span class="badge badge-primary">Primary</span>
Your code is not right. You can find the code snippets for badges in the documentation: https://sandbox.elemisthemes.com/docs/elements/badges.html Your code is from Bootstrap 4. Please note that this template is built with Bootstrap 5, not Bootstrap 4. Most classes have changed between these versions. That’s why you may have some old classes not working. You can also check Bootstrap 5 badges documentation here: https://getbootstrap.com/docs/5.1/components/badge/ You can find all the code snippets you need in the template documentation. We appreciate you edit your 2-star rating based on this information. Because it is unfair and your review is not true. We don’t override any Bootstrap classes in this template. We may have added some additional classes to add more options but none of them overrides necessary Bootstrap styles. Thank you.
I changed the rating. Thank you very much for support!
Thank you. If you face any issues we’re here to help.
Hi guys, is it possible to repeat an animation after a period of time? Say I have an arrow graphic on a page and every 15 seconds I want it to bounce (bounceIn). How would I do that? Many thanks, Nick
Which animation are you referring to exactly? Could you please provide a link so we can take a closer look?
It’s the bounceIn animation I wanted to repeat.
You can use the following css to repeat bouncein scrollcue animation. But we’re not sure how to add delay between repeats:
[data-cue=bounceIn],
[data-cues=bounceIn] > * {
animation-iteration-count: infinite;
}
Hello, I want to use boostrap 5 component Offcanvas in Sandbox 2.0, but the component is missing.
Hi,
Offcanvas component is included on the v3.0 of the template. But if you want to have it on v2.0 too, please contact us via the contact form on our profile page and we can send you the instructions and necessary files via email. Also please let us know which version you use: dev, dist or src. Thanks.
Hi Guys, do you have any code examples on how to rotate a thumbnail image in a video carousel by say 40% to make it quirky and stand out a little more? Thanks, Nick
Do you mean like this: https://webdesign.tutsplus.com/articles/perfectly-rotate-and-mask-thumbnails-with-css3--webdesign-3823 we don’t have a quick code to share but this tutorial explains how to achieve this look.
That’s great, thanks.
Hello,
Somehow bootstrap Button Group does not work. Dropup/Dropdown does not populate when clicked on “Share” button.
Can you please try and resolve this?
Below is the code – Link 1 Link 2 Link 3 Share- Dropdown link
- Dropdown link
I have taken the same code as given here – https://getbootstrap.com/docs/5.1/components/button-group/#nesting
Hi,
.dropdown class is missing from your dropup btn-group. Please update your code follows:
<div class="btn-group mt-3" role="group"> <a href="#" class="btn btn-sm btn-soft-primary px-2 px-sm-3" target="">Link 1</a> <a href="#" class="btn btn-sm btn-soft-primary px-2 px-sm-3" target="">Link 2</a> <a href="#" class="btn btn-sm btn-soft-primary px-2 px-sm-3" target="">Link 3</a> <div class="btn-group dropdown dropup"> <a href="#" data-bs-toggle="dropdown" class="btn btn-sm btn-soft-primary dropdown-toggle px-2 px-sm-3">Share</a> <ul class="dropdown-menu"> <li><a href="#" class="dropdown-item">Dropdown link</a></li> <li><a href="#" class="dropdown-item">Dropdown link</a></li> </ul> </div> </div>
Okay thanks. I will check the same 
Can I have regular tab style with next version. Thank you.
Hi,
Have you seen all available tab options: https://sandbox.elemisthemes.com/docs/elements/tabs.html
If you mean some other style could you please show examples? Thanks.
Yes, But it not look like tab it look like button.
Something like https://getbootstrap.com/docs/5.0/components/navs-tabs/#tabs-with-dropdownsWe’ll be adding a simpler tab option on the next update thank you for the suggestion.
Thank you so much.
Hello, I use the version without using Gulp, in the DIST folder In the file style.css there is
/*# sourceMappingURL=style.css.map */
If I delete this line, will there be problems?Thank you
No it won’t be an issue, you can delete it. Then you won’t need to keep style.css.map either.
I’m adding href=”#snippet-2” and ID=”snippet-2” to the content but still doesnt work.
I also have this <body class=”bg-soft-dark” data-bs-spy=”scroll” data-bs-target=”#sidebar-nav”> but doesnt work for some reason.
Any idea why doesnt work ? Regards
Hi,
Could you please provide your website URL so we can take a closer look? Thanks.
Not sure if we understand. You have anchor links on the sidebar, but there are no anchor points (ie. id=”snippet-1”) within the content to scroll to?
Ignore the sidebar, i have in the content:
INTRODUCTION. and it has < a name=”chap00” >
and i have < a href=”#chap00”>INTRODUCTION.
You have too much content on the page and the loading takes time it might be messing with how things work. Have you tried this with less content to see if it works properly?
Yes i have tried loading has nothing to do with it, i think its something missing with the code.
Which attributes are needed for content to be scrollable ?
This is all you need: https://www.rapidtables.com/web/html/link/html-anchor-link.html
Adding .scroll class to each anchor link will add smooth scroll animation but it’s not a necessity. And adding padding top and minus margin top equal to this value will help prevent anchor point to go behind the sticky header (see the example below)
We created this page for demonstration purposes, as you can see it works properly: https://sandbox.elemisthemes.com/anchor.html
So basically you need:
An anchor link:<a href="#anchor" class="scroll">ANCHOR TEST</a>And an anchor point:
<p id="anchor" class="pt-15 mt-n15">ANCHOR POINT</p>
< a href=”#chap00”>INTRODUCTION.
< p id=”#chap00”>INTRODUCTION.
i get redirect to main page
You have this code on top of your page:
<base href="https://www.ancient-texts.com/">
It causes the redirection, please remove and try again.
Thank you very much worked really well
Do you have any documentation available to help installing Google Analytics in the template pages?
Hi,
As mentioned in the Google Analytics you need to copy and paste the tracking code you get from Google as the first item into the <HEAD> of every webpage you want to track.
Hi Guys, I’d like to use your isotope-filter example from the bottom of the homepage, but as a video gallery where you can filter by type of video content.
Could you possibly tell me how to change it so that it’s content are image thumbnails, each with a play button that on click opens the video in a Lightbox? very many thanks, Nick
Hi,
You can use the isotope example from https://sandbox.elemisthemes.com/demo20.html (Our Projects) and change the icon:
<i class="uil uil-focus-add" />
with:
<i class="uil uil-play" />
This example doesn’t have a filter but you can copy the isotope-filter div from https://sandbox.elemisthemes.com/projects3.html (Also make sure to add project item a category class as seen on this projects page for the filters to work)
Check this page for video lightbox examples: https://sandbox.elemisthemes.com/docs/elements/lightbox.html
Your site is NOT responsive at all. We loaded a site and it is all over the place.
Hi,
We just checked your website and everything appears to be working properly. Are you still having this issue? If so please provide more details and screenshots so can have a better understanding. Thanks.
Hi, I have accidentally made duplicate purchase of this item, please refund me one purchase amount.
Hi,
We have processed your refund request, and you will receive it within a couple of days.
Hi guys, I’m just about to update my site to version 2.0 but wondered if you have any updates planned? If so I might wait. Thanks Nick
We plan to release it in two weeks if we don’t run into any issues.
Thanks Guys. I’ll sit tight & wait.
Hi Guys, I spotted that you’d upgraded to v3.0.0 – is this the release you mentioned above?
Yes this is the update we mentioned
Hi! I would like to know if you have Adobe XD files. I read somewhere we could ask you for the design files but I don’t know where or how.
Hi,
If you mean the mockups you can reach the mockup links from Credits page in the documentation: https://sandbox.elemisthemes.com/docs/credits.html But template design files are not available.
Do we have a dark theme as well for this theme?? Please??
Not currently. We plan to add this feature in a future update but not soon.
Hello I have question regarding Gulp feature:
I want to optimize my website and I was wondering if its possible to somehow build CSS and JS that is only required for my pages and not all. Something similar to PURGECSS.
Lets say I use only 5 pages and to grab only thouse classes and JS from thouse 5 pages.
Is this what Gulp does or how can I achieve this task ?
Kind Regards
Unfortunately we’re not aware of any tools that achieve this automatically and correctly. You can find instructions on how to remove unwanted CSS and plugins in the help documentation: https://sandbox.elemisthemes.com/docs/faq.html
Exellent code structure and professional approach. Waiting ecommerce version of this.
Thank you for your kind words. The next update’s going to remove jQuery dependency, and then we’ll start working on the update to add shop pages.
We planned to build on this frontend theme very huge website. Please dont stop. also care for very small elements also. h1 and h6 not more difference. during implementation we searched very small elements but didnt found may be we dont know how to add. Very good tailored to bootstrap 5.
Hi,
You can use .display* or fs-* classes to add different values to headings: https://sandbox.elemisthemes.com/docs/elements/typography.html#snippet-2 https://sandbox.elemisthemes.com/docs/styleguide/misc.html#snippet-2Or if you’re using Gulp, you can give different values to headings in _variables.scss
We couln’t understand the sentence “during implementation we searched very small elements but didnt found may be we dont know how to add” We’d appreciate if you could explain. Thanks.
Hi Guys, On demo 5 you have a login link next to a Signup button, which is great on desktop, but on phones I’d like to include the login link within the mobile menu. Is it possible to do that? if so, could you tell me how? many thanks, Nick
Hi,
Only the navigation links can be seen within the mobile menu. You can additionally add the login link along with other navigation links and hide it with “d-lg-none” class from desktop view.
Thanks. Worked a treat!
Hi, im using the “Classic – Transparent Background – Light Text” navbar. When I scroll the cloned navbar is white bg but I want it dark bg (also want dark navbar in mobile view), Is there a way to change this easily without having to edit the colors in style.css? Thanks.
Hi,
Dark sticky navbar is not available out of the box and requires some additional css. Please add the following code in style.css:
.banner--stick.transparent,
.banner--stick:not(.navbar-dark) {
background: #2f353a !important;
}
.banner--stick.transparent.navbar-dark .nav-link,
.banner--stick:not(.navbar-dark).navbar-dark .nav-link {
color: #FFF !important;
}
button.hamburger span,
button.hamburger:after,
button.hamburger:before {
background: #FFF !important;
}
Thank you, that worked perfect. I had to add a second img tag (class=logo-dark) in the html though for my “light” logo to also show up on the dark navbar. Is there another way I should do that or is this right?
<div class="navbar-brand w-100">
<a href="./index.html">
<img class="logo-dark" src="images/logo-sm.png" srcset="images/logo-sm@2x.png 2x" alt="" />
<img class="logo-light" src="images/logo-sm.png" srcset="images/logo-sm@2x.png 2x" alt="" />
</a>
</div>
Since you will use only the light logo in both normal and sticky header, you don’t need two versions, just this code should be enough:
<div class="navbar-brand w-100">
<a href="./index.html">
<img src="images/logo-sm.png" srcset="images/logo-sm@2x.png 2x" alt="" />
</a>
</div>
The logo does not appear on the dark nav though until I added the second img tag with class=”logo-dark”.
Could you please provide your website URL so we can take a closer look? Thanks.
Hi, sorry its not online i only just started working on the site locally. Using the single img tag for the light logo works fine for the transparent navbar but when I scroll down and the dark navbar appears, the logo does not show. I have to add that second img tag for “logo-dark” for the logo to show.
Yes this approach is the correct way.
Hi! First of all, sorry for the English I’m using Google translator. I would like to know if this template can be used on Blogger, Blogspot – I sent an email to support, but so far I haven’t gotten a response, I don’t know if it’s because of the time zone in Brazil. Thanks!
Hi,
Thank you for your interest in Sandbox. Unfortunately Sandbox is not compatible with Blogger/Blogspot.
(BTW we haven’t received an email. Could you please let us know which form did you use to send an email to support? Thanks.)
