I'm using gem 'twitter-bootstrap-rails, '2.1.4' for a project. Rails 3.2.6
I first noticed a problem when deploying to heroku, but I also have the problem on my local machine. It seems some of the twitter defaults are not being loaded. For example, the navbar is white instead of the default dark gray/black. The fonts are bigger than bootstrap's defaults.
Here's what the navbar looks like, even though I never changed bootstrap's default navbar colors.
I have my assets set up this way:
An application controller method determines which layout to use which then loads either application.css or blog_admin.css because the admin layout is different from the regular site layout.
application.css
/*
*= require_self
*= require_tree ./application
*/
blog_admin.css
/*
*= require_self
*= require_tree ./blog_admin
*/
Each directory, application and blog_admin have a bootstrap_and_overrides.css.less.
What's even stranger is on my laptop, the styling is correct in the dev environment. On my iMac, it's not and has missing styling. When deployed to Heroku, it always has missing styling, even if deployed from my laptop which has the correct styling in the dev environment.
Any idea what could be going wrong? If it's just not finding bootstrap's default variables, how can I ensure that they're loading?
This is also a tough one to debug, so any advice there would also be appreciated.
Both of those default styles were changed in Bootstrap 2.1.0.
The navbar component is now white by default, with an optional class to darken it.
The new class for a dark navbar is navbar-inverse.
New base font-size and line-height. 13px/18px is out, 14px/20px is in.
You can easily change these back by modifying the LESS variables or using the customizer.
I'm guessing you're just linking to an older or modified version of Bootstrap on your laptop.
Related
I'm new to PrimeVue and I'm trying to customize/modify the Bootstrap theme. I have a separate project where I completely modified the variables of Bootstrap (v4) and I want to use it in PrimeVue. I want to use SCSS so I can manage the styles well (just import the SCSS file needed in the component). How do I do that? Upon looking at the PrimeVue resources directory, it looks like it doesnt have the scss folder of Bootstrap, and it only shows the css file (generated). Any help is greatly appreciated. Thanks!
Edit: I want to completely modify the variables instead of overriding the PrimeVue Bootstrap classes.
I don't know if it's still relevant, but you can only make changes in SASS variables if you buy the designer license from Primefaces - otherwise you'll get access only to prebuilt files.
See the designer documentation here.
I am using worklight 6.1 version and building iPhone, android , windows phone environment.
Whenever I am deploying the environment it is adding worklight.css file with the environment in index.html file and adding some extra css in main.css file.
Issue is , these css is conflicting with my css files so just let me know how to avoid this or if can remove worklight.css file from index page.
Is there any solution for this.
You cannot not-load worklight.css, as it is inject to the app during build time.
What you can do instead is override any CSS rules using !important.
For example:
body {
background-color: red !important
}
What CSS does worklight.css contain that overrides your app's?
I know of only background-color: white being injected to the Android environment - you can override it with the above, and this is already fixed for a future release.
I'm using tinymce-rails gem (version 3.5.9) and wish to add a custom skin thebigreason
My question is two pronged I suppose:
The tinymce-rails wiki says to add the skin to:
tinymce/themes/advanced/skins/
So I dropped the 'bigreason' folder into the following directory:
app/assets/tinymce/themes/advanced/skins/
In tinymce.yml config file I did as instructed and loaded my skin:
theme : "advanced"
skin : "thebigreason"
But the original theme still exists. I've restarted the server
Where does this gem keep all the files! I had to create the tinymce folder mentioned above. A bit of a generic question but I will want to adjust the contents css etc later
EDIT:
Forgot to mention, application.css contains the following:
*= require /tinymce/themes/advanced/skins/thebigreason/content.css
*= require /tinymce/themes/advanced/skins/thebigreason/ui.css
*= require /tinymce/themes/advanced/skins/thebigreason/dialog.css
Thanks
I did figure it out now: I had the default skin defined below.
To (slightly) redeem myself this is how it's done:
Place skin here:
app/assets/stylesheets/tinymce/themes/advanced/skins/{skin_folder_with_css_files}
and the config will do everything else. Include a path to this skin in applications.css for asset compilation later:
*= require /stylesheets/tinymce/themes/advanced/skins/{skin_folder}/{css_file.css}
One issue that I see is that some skins have body tags with margins, header definitions and so on which is bound to wreak havoc with the Rails asset pipeline .
I am using Twitter Bootstrap Installed Using Buget to an ASP.NET MVC Application. I am however surprised to find that all my bootstrap JavaScript which used to work on localhost and in fact still do have all stopped working when uploaded to my web hosting provider.
I am completely bumped on this and I cant seem to figure out what is wrong.
Some of your scripts, which depend on jQuery, are being included before jQuery had been loaded.
bootstrap-dropdown.js is included before jQuery
your custom javascript on line 75 is included before jQuery
I'd suggest moving
<script src="/Scripts/bootstrap.js" type="text/javascript"></script>
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"></script>
and your custom javascript from line 75, to the bottom of your page, after the jQuery bundle is included. Or alternatively move your jQuery bundle into your <head>. It's your preference as to which - see this question: Should Jquery code go in header or footer? regarding that particular issue...
You say it's working on your local box and not on the remote server - if that's really the case then my best guess is that this is to do with the fact that bundling/minification works differently depending on whether you are in debug or release mode.
UPDATE
Basically, in a debug build, no bundling/minification is performed on your scripts and css. Each <link> and <script> that you reference in your bundles will be included as a separate file, with no transformations applied to them. In release builds, files in a bundle are concatenated together into one file, and transformations such as minification are applied to them. As per your comment, in order to get the debug behaviour in both your local and published sites, I see 3 options:
1. In your release build, set the compilation debug flag to true in your web.config.
i.e.
<system.web>
<compilation debug="true" />
<!-- Lines removed for clarity. -->
</system.web>
I wouldn't particularly recommend this, as your release build shouldn't generally be flagged as being debug. But this is a useful setting to quickly toggle on your release build to check if your javascript/css works correctly when it is off.
2. In code, turn off bundling optimizations in your bundle table.
public static void RegisterBundles(BundleCollection bundles)
{
// other code...
BundleTable.EnableOptimizations = false;
}
3. Don't do it.
The difference in behaviour is by design, and makes sense - on your local box doing development, you can see all the individual script/css files and in unminified form, which makes debugging far easier. When published, the files are squashed down into one single, compressed file, which will reduce load time for your site.
I'd personally recommend option 3, and just make sure your styles/scripts are being included in the correct order.
In your page you have
<link href="/Content/bootstrapcss" rel="stylesheet"/>
... there's a blip with the file type, maybe this should be
<link href="/Content/bootstrap.css" rel="stylesheet"/> ?
And there's a path problem with your Modernizr file, check that the path is correct and the file exists:
http://bipscore.com/Scripts/modernizr-1.7.min.js
There may be other issues, but wouldn't hurt to get these two corrected first.
Good luck!
I've noticed that when working on a meteor application it will auto refresh the entire page when any stylesheets have changed. Is there a way to make it only refresh the stylesheet assets similar to how LiveReload works?
Also note that I'm using stylus for my stylesheets. Is that what's causing the full reload?
No, out-of-the-box Meteor will reload the entire app when it detects a file change of any type (whether html, css, or js). It doesn't matter if you're using stylus or not.
I imagine future iterations may take a page of out LiveReload for images and css files (so changing them does not cause a refresh), but for the time being the whole site will reload. In fact, this would probably be a fantastic pull request.
The current workaround I found is to use the "regular way" of adding css files:
Put your file myCss.css into the public folder "/public/myCss.css" so that it is not compiled by meteor
Add the following line to your html file:
<link rel="stylesheet" type="text/css" href="/myCss.css" />
Use a live editor such as Espresso or CSSEdit to change the myCss.css file.
Note that once you save the file, meteor will reload anyway. But in the following case:
- You are running meteor in production mode
- Your .css file is not in any folder contained into the meteor project (like you serve the .css file from somewhere else my yourself)
- Your file or folder is starting with a dot "." or ending with tilde "~", in this case, meteor will not reload those files if they did changed. Note that I never have been able to make this work with the ending tilde, moreover working with invisible files (starting with ".") is not very convenient. See here for ref.