Discussion on Sesamo - Bootstrap Skin

Discussion on Sesamo - Bootstrap Skin

Cart 409 sales

geedmo does not currently provide support for this item.

26 comments found.

Awesome work! But… where are the HTML files: bootstrap.html and template.html. I bought the skin but these two files are not in the download! Thks for your attention.

Please make a compatible with Odoo CMS thanks

if I want to generate a code for any element ?

Just encountered a weird problem on Firefox.

on the input field with attached button, the button is sometimes 1px too high. But that seem to be happening only sometimes. When reloading the page i sometimes have it on the one where the button is attached left and sometimes right. In mobile width all seems to be fine. Very weird. And only in Firefox (latest version).

This is the code for the input/button I am talking about

<div class="input-group"> <input type="text" class="form-control"> <span class="input-group-btn"> <button class="btn btn-default" type="button">Go!</button> </span> </div>

Hi, thanks for report this.

Seems to be a round problem with the line-height. A fix for FF breaks on chrome so as a quick solution you can do the following

Using LESS, edit file input-group.less, scroll to line 137 and append height: @input-height-base; to > .btn {

Using CSS (in case you are using only the compiled version) use the following rule

.input-group-btn > .btn {
  height: 41px;

As you can see, both solution forces the height of the button when used in a markup for input-group

Hope this helps,

There is no index.html on the demo 9 (as u say in the documentation) .. just a heads up =)

Hi, the color customizer doesn’t work under IE. when you click on get css it prompts the modal but it’s empty.

Hi Geedmo,

regarding this:

That should be simple, add an input and in the script call the function setColor using the keyup event. Like this

$(‘input’).on(‘keyup’, function() { var color = this.value; setColor(color); })

You can also find a snippet to validate the hex format before calling setColor.

I placed that script after this:

$('input.input-switcher').on('keyup', function() {
                var color = this.value;

                defaultValue: '#50a846',
                position: 'bottom right',
                change: function(color) {

And this is my input box:

var themeswitcher = $('<div />').attr('id', 'themeswitcher').html('<p><strong>{L_SELECT_COLOR}</strong></p><div class="input-group"><span class="input-group-addon">#</span><input type="text" class="form-control input-switcher" placeholder="Hex color code"></div><div class="space10" />')

But nothing happens.. Any help on how to get this to work would be really appreciated (i’m not scripting savy :-/ )

The first thing that come to mind is that the element doesn’t exist when you attach the keyup event.
Try with a live attaching
$(document).on('keyup', 'input.input-switcher', function() {
                var color = this.value;

Never mind. It did work with your first code. I forgot to enter the sign ”#” before the value. I guess I’ll use the placeholder as example so the ”#” is not missed. Thanks again for your time.

Hi geedmo,

Can you update Sesamo to bootstrap 3.1.0?

Hi, yes, I’m currently working on this skin. I have planned to finish it this weekend.

Thanks for ask,

Hi geedmo,

Any progress on updating the skin?

Hi, yes, it’s been updated to 3.1.0 last week

Any chance that you’ll be adding Gravity Form Less/CSS to this?

Hello, its no possible because gravity form is explicitly for wp and has custom styles that don’t match with the bootstrap css. I mean, their custom styles go beyond a bootstrap skin.

Hi there,

I liked this bootstrap template of yours. Is shopping cart widget added in this template ?


Hi, no, there’s no shopping cart widget. This item is only the css/js to change the look&feel of any bootstrap based website. A shopping cart widget will require a backend to handle item in the cart.


Absolutely one of the best BS 3 skins I’ve purchased. Consistent theme in every component.

Thanks so much Ronald6x!

Great skin but I have some questions:

1. Is it possible to have large photo as background on demo home page? I’m not sure how to have one image for top and other for bottom part as they use same css?

2. Did you found alternative for iframes? It doesn’t scroll on iPad so just top part is visible and there is no back button.

I’m trying to implement “login with Instagram” option but it doesn’t work in iframe :(

Please help

Thanks Sonya

Hi, thanks!

1. I think is possible but you will need two images (the original divided in two) and set one part as top and the other half as bottom. I guess the problem will be synchronize every part of the image when the page is resized.

2. No, unfortunately I couldn’t find a fix for the iframe bug. So actually on safari mobile browsers the homepage links directly to the demo page instead of showing the iframe and that’s why there’s no back button. The back button only shows when the homepage script handles the iframe load, with a direct link is just a new page load.

The iframe solution is simple just to show the product demo, but the same behavior could be achieved requesting the new content via ajax, a bit more complicated (not too much) but surely it should work and you avoid iframe issues.

Hope this helps,

Hello Geedmo,

Do you have samples for UI Kit in this skin? Will the classes in Dropper UI Kit also work for sesamo?


And by the way, this is a really good skin… great job on this one..

Hi, the UI kit used for Doppler is based on BS components but they have some extras classes (e.g vertical alignment, etc) that is needed and it’s included with Dropper. Because of that, the sample page will not work automatically if you put it in Sesamo.

Let me know if you have any question

Hey geedmo,

Sesamo really is a beautifully crafted skin for BS3 which I’m considering to buy. However, having recently bought your other skin, Dropper, I’m missing some of its elements (in particular those showcased under “Extras”) in Sesamo. What are your plans on implementing/styling the elements of dropper in Sesamo? (That’s probably as a follow up to @ringmastr’s question).


Thanks philtem.
Currently I don’t have in plans to add the extras to Sesamo because both skins was built with different approaches. Anyway, if want to implement some components from Droppler in Sesamo, you need only to add the necessary less files to the bootstrap.less and compile it, depending on the component and due to the styles differences you may need to add/remove some rules but since both structure are similar, they should require a few minor changes.
As I said before at ringmastr’s question, if you find any difficult, please feel free to ask.


Bought it! Gonna try my best at adding some Dropper extras to Sesamo yet I’m glad to hear that you will help in case I can’t make it work :)

Thank you.

Hello Geedmo, beautiful skin, Bought it :-) I have a question which I hope you can help shed some light on:

I’m using CodeIgniter MVC framework. That means I have to split up the view and controller.

I’m trying to replicate your demo on CodeIgniter (the one using the iframe), but when I go to, only the top portion of the iframe is shown.

But when I go to, the entire page shows correctly.

So it seems that the iframe is has failed to load the entire page. Any tips what could be the problem? I’ve been struggling with it for a day now, and could not figure out why.

Thanks a lot!

Hi, thanks for let me know you’ve solved it.
To change the font path you edit the bootstrap.css file looking for the @font-face directive or by editing the FA LESS files and then compile it.


Hey geedmo, thanks for the reply. Another thing: I realised that when I view your demo on my iPhone 4 (vertical orientation), the green icons on the upper left did not appear when I tap on either Bootstrap 2 or Bootstrap 3.

The URL I was viewing:

Is this intended?


That’s right honeybadger.
The demo works using iframes but due to an iframe scroll bug on safari when you click con bs2/3 button, instead of load the framework preview on an iframe the script will redirect you to the demo page instead. You can take a look at the demo.js file if you want to see it works


My website was made with bootstrap 2.3 ( How would I take advantage of this skin and how to install it, in order to customize my website? Sorry, newbie typing. Thanks

To install this skin you just need to replace your bootstrap files (css and js). For the extra features like elements animation you have the documentation.
Bootstrap standard component will work automatically, other extra components may need some customization.


@geedmo I also purchased PLAN. I haven’t checked but would the UI Elements in PLAN work within Sesamo? In other words are they using the same naming conventions?

Love your work, man.


both skin extends the bootstrap features. You can mix them but you need to dig into the less files in order to include from one skin into another. Both file structure are similar, if you find any difficult, please feel free to ask.
These days I’m a bit delayed with support, but I’ll do my best to assist you.

Your rock @geedmo. You’re gifted.

Awesome work!!!! Bought it!!!


Definitely the cleanest looking skin I’ve ever seen. Had to buy it.

I love the fact that it is pure CSS and LESS.

I was hoping it would drop right into my Ruby on Rails application but after replacing the bootstrap.css and bootstrap.js files I don’t get any changes.

Is anyone familiar with this process?

Which files should I be including into the Rails app? Should I drop the whole LESS folder or is that only included to make custom changes?


I don’t have enough experience with RoR, but I can suggest you some basic ideas
1- Replace and make sure your css files are the skin version
2- Find in your app bootstrap.less file, if found, may your app compiles everything on the fly, so try replacing all less files with the skin version (backup first)
3- Refresh all your caches, browser and app. Perhaps your app have some cache folder, if so, simply delete it. Also if is possible, a restart could help.



Your included bootstrap 3 version appears to be using the RC2 code and not the Bootstrap 3.0.0 final version. You can see this on the code for the accordion as it no longer works with the CDN final Bootstrap 3.0.0.

In Bootstrap 3 RC2 they dropped accordion for the updated panel. You can see details at:

Can you update your bootstrap to the latest version and look at the code for the accordion class to migrate it to use panel.

You can also see in the final release of Bootstrap 3.0.0 if you do a search for the word “accordion” it will not appear. In your included Bootstrap.css file it appears on line 6623

The boostrap 3 version I’ve used is the final release.
You’re right, BS3 dropped the classic accordion css in favor of panel style. But, I’ve included the accordion because from the first release, I designed it with a different style from the panel accordion. You can see in demo that both (accordion and panel) works with the collapse plugin. So you can use any of them.
Even, I’ve edited the collapse plugin in this skin in order to support both components as accordion. There’s no two plugin, just the same as in final release, with 25 extra characters.
If you don’t need the accordion code and want to remove it, I can send you a custom build without the accordion. But, if you work with LESS you can simply remove the accordion.less from bootstrap.less and compile it again.

I give you full warranty that the code is based on BS 3 Final release, anyway feel free to ask whatever you need.

Thanks for the quick reply. I was using the CDN version of Bootstrap and I noticed the accordion did not work. Thank you for the clarification. I understand what you did now.

Because I want to use the hosted CDN version of Bootstrap, for speed purposes, I’ll go ahead and find the changes you made and just create a separate CSS file – that should solve my issue.

Again thank you for the clarification and I’ll work on customizing my setup.

To anyone thinking of purchasing this skin, don’t think twice just go for it. The code is solid and as you can see the included support is top notch!

In your case, if you want to improve load time, I suggest you to use a subdomain as a CDN for your project, instead of find the changes in the skin files. I mean, you can but will be more easy for your case.
Also, if you create an extra stylesheet with just the skin styles, you will be adding many extra rules to override defaults in Bootstrap, and so, you decrease your load time with a cdn but you increase it adding more resources to download. Just an idea.


Excellent work. Very nice!



Tell us what you think!

We'd like to ask you a few questions to help improve CodeCanyon.

Sure, take me to the survey