thomaspark / bootswatch Goto Github PK

It would be great to style the background of, e.g. form fields, too. The default white is too bright, especially on dark schemes like cyborg.

After that change this would be a great starting point for people who want to create dark or more fancy color schemes with bootstrap, especially until upstream starts to fix those hardcoded values.

Mark has decided to do away with everything .subnav in the official Bootstrap [1], but I'm hoping Bootswatch will continue to support it. Please say it'll be so?

[1] twbs/bootstrap#6391

The swatch pull down download links seem to always download the minified version only, no matter what you select.

Mac on Chrome.

Cheers, Mirko

On slate theme, the uneditable inputs are unreadable.
Possible fix:

.uneditable-input, input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly] {
color: #fff
}

I get the feeling this might be a stupid question, but how much padding-top on the body element are the bootswatches designed for when using a fixed navbar?

The internet in general seems to suggest 60px is the standard amount, often citing Bootstrap's examples as a source, but the current Bootstrap docs have the slightly vaguer advice of "remember to account for the hidden area underneath it by adding at least 40px padding to the body."

On IE8, Cerulean and United display a 'white block' when the mouse is hovering over a navbar item. This does not happen with some other themes I looked at, those work as expected.

See http://imgur.com/xCCJr for a screenhost where my mouse is hovering over the News item on the http://bootswatch.com/cerulean/ page.

Additionally I noticed there's no special coloring of active navbar items for Cerulean and United, again unlike the other themes I looked at. But this is less of an issue. Note: the exception for this is the inverted United navbar, that one does display a special active coloring (but does have the hover issue).

PS: thanks for Bootswatch, it's great :)

Can you please fix this asap.

http://jsfiddle.net/DHZNv/126/

Thanks.

The bootswatch themes from the download are missing the new media object

I'm using https://github.com/seyhunak/twitter-bootstrap-rails
and would like to use less so I can use the variables etc.

I've tried importing variables.less and bootswatch.less sort of like this

# bootstrap_and_overrides.css.less
@import "twitter/bootstrap/bootstrap";
@import "twitter/bootstrap/responsive";

@import "bootswatch/variables";
@import "bootswatch/bootswatch";

But I get variable @textColor is undefined when running rake assets:precompile. Any ideas? Thanks!

I'm seeing:

lessc ./swatchmaker.less > swatch/bootstrap.css
TypeError: Cannot call method 'charAt' of undefined
    at getLocation (/usr/local/lib/node_modules/less/lib/less/parser.js:212:34)
    at new LessError (/usr/local/lib/node_modules/less/lib/less/parser.js:221:19)
    at Object.toCSS (/usr/local/lib/node_modules/less/lib/less/parser.js:385:31)
    at /usr/local/lib/node_modules/less/bin/lessc:107:28
    at /usr/local/lib/node_modules/less/lib/less/parser.js:434:40
    at /usr/local/lib/node_modules/less/lib/less/parser.js:94:48
    at /usr/local/lib/node_modules/less/lib/less/index.js:116:17
    at Object.parse (/usr/local/lib/node_modules/less/lib/less/parser.js:436:17)
    at /usr/local/lib/node_modules/less/lib/less/index.js:115:16
    at [object Object].<anonymous> (fs.js:115:5)

When trying to build with LESS version: lessc 1.3.0 (LESS Compiler) [JavaScript]

This seems related but no resolution yet: less/less.js#592

Any suggestions appreciated!

The box representing the buttons is the same size, only the interior text changes.

This only happens in amelia; spacelab, spruce, journal, etc. all work as expected.

Also recommend adding btn-small etc. to the preview so problems like this are obvious in the future.

On Cerulean, <tr class="info"> and <tr class="warning"> both give a blue color. I expected the warning one to be orangeish instead. The Cerulean previews on http://bootswatch.com/cerulean/ doesnt show this because no colored trs are used but it does show all other 'warning' classes to be orange :)

I am facing this issue since today morning. When I hit Bootswatch API link http://simplejsonp.nodester.com/bootswatch/ I am not getting any response.

Can anyone please help me on this?

Hi - bootswatch is very cool.

Poking around a bit with different themes, I notice that modal headers don't show up, because both the text and the modal bg will be white.

Repro:

1. Bootstrap site
2. Install the modal component
3. Declare a modal as defined in the docs:

http://twitter.github.com/bootstrap/javascript.html#modals

4. Pop the modal.

You won't see the content in the h3 unless you select it due to:

h3 {
color: #ffffff;
}

and

.modal {
background-color: #ffffff
}

5. I hacked a workaround, not sure what the right LESS-based fix is.

.modal-header h3 {
color: #000000;
}

See http://twitter.github.com/bower/

With Bower, someone could install the Bootswatch package and then include components/bootswatch/THEME_NAME.min.css in their HTML files.

.btn-mini is on line 424 and .btn is overriding it on line 740. Those seem to be out of order?

I'm running rails 3.2 with the twitter-bootstrap-rails gem and I get lots of undefined variables when I try to add a bootswatch. Like this:

https://skitch.com/leemcalilly/8shdw/work-senior-living-jsr-associates

Bootstrap itself is working fine.

Requesting stuff from https://fonts.googleapis.com/ is very slow, especially with SSL enabled - perhaps we should consider adding the fonts into the Git repo so that they can be served from the local server?

I've been stumbling around Stack Overflow and Google for a bit but it seems like the creators of Bootstrap don't really want to add any social buttons. Is there a work around? Should a plugin be created?

Reason I ask...

I was working with the journal theme before the redo of that theme when it was using opensans font from google etc.

Anyway I can get the last commit of the variables.less and bootswatch.less files for that version of the journal theme?

Thanks,

Scott

For the combination Ceruleum theme & IE 8, Navbar collapse does not work (it works fine with Chrome...).

The fix is set overflow property:

.nav-collapse.collapse {
height: auto;
overflow: visible;
}

This was originally a specific bug, but it seems it applies to many of the themes.

Bootstrap docs suggest that you can use either 'a' tags (possibly with javascript to deactivate clicks) or 'span' tags for pagination links that are currently active or disabled. But several of the Bootswatch themes behave oddly when you do that.

Specific cases I've noticed:

active link in simplex
active and disabled links in slate
active and disabled links in spruce
active and disabled links in spacelab
active and disabled links in cyborg

but there may be more,

so in the css file the icon path are something like below:

.icon-white {
background-image: url("../img/glyphicons-halflings-white.png");
}

where can I get this images?

Hi,

using Safari 5.1.3 on OSX 10.7.3, whenever I use any Chinese input method to input text into a text field or text area, the browser freezes for about 1 second and automatically refreshes. This problem doesn't occur with any other browser and neither does it affect bootstrap.

You can reproduce this bug by going to System Preferences->Language & Text->Input Sources, checking "Chinese - Traditional", selecting the "Pinyin - Traditional" input method and trying to enter any text on any bootswatch site.

The select's readable theme aren't right. Why are their text so "down"?

.subnav-fixed is not defined in bootswatch.less, but it's in bootswatch.css. Same for a bunch of different styles.

Can we please get all styles included inside the .less files?

In the model Ameila, the texts are and background is white

Hi,

I've tried to build bootstrap.css with Spacelab theme and Font Awesome using less files and I had issue since variables.less from Spacelab theme was missing required variable @horizontalComponentOffset.
After copying it from original bootstrap variables.less it lessc compiled it, missing line:

// Horizontal forms & lists
// -------------------------
@horizontalComponentOffset:       180px;

Hello,

I was looking at the theme Cerulean - The bootstrap.CSS related to that specific theme:

How different is it from the default bootstrap.css ?

I'm trying to understand what will be actually different from default bootstrap.css

Just the colors and typography ?

or

The actual layout and structure will be modified as well ?

And lastly:

Is the theme supported in IE 7 + ?

Thanks!

I presume this support is in the works - but I know how fun ticking off an issue on the list is :)

Please define .nav > li.active > a to enable subnav scrollspy/magellan on Amelia and Cosmo themes?

For amelia/bootswatch.less, all that's needed is to change this:

.nav > .active > a:hover,
.nav > li > a:hover,
.nav > li.active > a:hover, {
    border-right-color: transparent;
    background-color: rgba(255, 255, 255, 0.4);
    color: @textColor;
}

to this:

.nav > .active > a:hover,
.nav > li > a:hover,
.nav > li.active > a,
.nav > li.active > a:hover, {
    border-right-color: transparent;
    background-color: rgba(255, 255, 255, 0.4);
    color: @textColor;
}

It's already defined in the rest of them, except Journal, which I believe is purposeful, since it doesn't have any :hover effects on its subnav at all.

Thanks a lot !

Any plans for migrating to Bootstrap 2.1.0 in the near future?

Why are there rgba calls with a color value of 256 in the various bootswatch.less files ? Something in the Rails asset pipeline thinks this is wrong and stop the asset precompilation with the following message :

Color value 256 must be between 0 and 255 inclusive for `rgba'

By the way, thanks a lot for this project, this is an awesome resource.

The background gradient does not continue, it only covers the body region in latest Google Chrome or Firefox. A sample screenshot is: http://img585.imageshack.us/img585/751/screenshotfrom201204300.png

I think the drop-shadow on the broadcrumb li is intended for dark on light themes so looks odd on the darker background of cyborg. I checked a couple of the other dark backgrounds (slate and superhero) and they both override it.

When I decrease the width of the window and view the menus, there appears to be an extra arrow image, which is confusing. This happens on many of the themes, including Cerulean and Spacelab.

I have uploaded a screenshot with the relevant section circled here: http://i.imgur.com/9xbzJ.png

I am using Google Chrome 21.0.1180.89 on Windows 7 x64.

This also appears to happen on the http://www.bootswatch.com/ site.

Please update the @import'ed google fonts in Bootswatch themes to use https instead of http to avoid unsecure content warnings on ssl sites. Thanks!

In the large commit updating to 2.0.2, Slate seems to have lost its body background. Noticed while converting it for bootswatch-rails. :) Tried it, background is white.

The landing page for Bootswatch says you only support 2.0.3. I'd love to see support for 2.0.4. I doubt much (if anything) would need to change. Probably just recompile your full bootstrap files so they are based on 2.0.4.

Seems like the fix for this bootstrap issue hasn't been applied to (at least) Cerulean. Instead an active dropdown nav item is highlighted as active only when the mouse hovers over it.

http://fortawesome.github.com/Font-Awesome/

is a great set of icons compatible with Twitter Bootstrap. Could you please embed the icon set as default one ?

I saw this issue closed, and wanted to bring your attention to it once agian:

Requesting stuff from https://fonts.googleapis.com/ is very slow, especially with SSL enabled - perhaps we should consider adding the fonts into the Git repo so that they can be served from the local server?

Its not just that, its also a security hazard, as far as I understand.

Can you perhaps post a howto for newbies on how to get rid of google's fonts and serve them locally?

Thanks.

If you use the United theme on this example: http://twitter.github.com/bootstrap/examples/fluid.html, the link with the username is the same color as the background so you can't see it.
The link is inside the navbar:

Logged in as username

Compiling Slate from less with the PHP less compiler throws an error on the following:

.box-shadow(inset 1px 1px 1px rgba(0, 0, 0, 0.5);

Adding a second closing bracket seems to fix it. It happens on both line 498 and 509 of bootswatch.less.

I downloaded the simplex.less theme and associated variables.less.

I imported the variables using @import "variables.less"; on the first line inside simplex.less.

Then I ran lessc on the file (I made no modifications whatsoever):

C:\work\tests\>lessc simplex.less > simplex.css
NameError: .box-shadow is undefined in C:\work\tests\simplex.less:21:1
20 .navbar .navbar-inner {
21      .box-shadow(inset 0 -1px #CFCACA);
22      border-bottom: 1px solid #FFF;

// Bootswatch.less
// Swatch: Simplex
// Version: 2.0.3
lessc 1.3.0 (LESS Compiler) [JavaScript]

Any ideas?

Sometimes when I click on one of the subnav items in the previews, the highlighted subnav item is the one prior to the one I click on.

For example, if I go to http://bootswatch.com/spacelab/ and click "Forms", sometimes "Buttons" will be highlighted instead. If I scroll down, "Forms" then becomes highlighted.

Here's a screenshot showing this bug after clicking "Forms":

(http://i.imgur.com/zJ9de.png)

I am using Google Chrome 21.0.1180.89 on Windows 7 x64.

The pagination in Readable is squashed vertically.

If you take away the rule setting the top and bottom padding to 0px and the line-height of .8em then it looks like all the rest. If you just add back the padding rule, but leave out the line-height of .8em then it looks different (shorter vertically) but more visually pleasing (to me) than the current look.

Slate have some issues with pagination. Border probably should not be white and there is some strange rollover effect ('a' element is getting border-left-width: 1px; when :hover)