This maybe a naive question - but I am stuck.
I have created a simple (my first) bootply project.
One can access it here: http://www.bootply.com/sRefcMualY
I wish to "style" this bootstrap project using the free theme "Slate", available here:
http://bootswatch.com/slate/
I have had no success in "applying" the theme to my project! Copying the css into the css window works in design mode, but is rejected if I try and save it.
It must be something silly and easy - but I am stumped!
Thanks in advance.
You would download the Slate bootstrap.min.css, and use it replace the bootstrap.min.css in your project. For Bootply, it would be a matter of pointing to the Slate CSS. One way is to use CSS import:
http://www.bootply.com/nGTdpeesE2
Related
I'm trying to figure out whether it would pay off to use Bootstrap on my existing Wordpress site and while researching it, I came up with the idea that the template I'm using might actually already be using Bootstrap.
I can't see any signs of Bootstrap in my functions.php file or through the FTP, but the template is using classes like these: ".col-md-4", ".col-sm-4". Is that because it was created with Bootstrap or is it just a convention?
Sorry if this is complete nonsense.
That's a classic bootstrap class.
You shouldn't check the PHP files but the css ones or javascript.
It may be a sign.
You can check more bootstrap classes Like container, row, and ...
And for being sure you can check asset files like CSS and JS files, if you found bootstrap css and js files you may be sure of using bootstrap in your template.
You can open asset files it may wrote the bootstrap version in it even.
I'm trying to make a theme for Liferay 6.2 and I have some misunderstandings.
I create new project, choose theme, then click next and choose velocity and _styled responsively. But I want to get a standart theme which I can deploy and nothing change in comparison with default theme. I thought I got the point and after that I should copy overriden .css files in _diffs folder. But I don't achieve that. I attached screenshot with my result and I can't understand why I don't have default theme instead. Also I understand that it may be very dumb question but I hope someone would explain it briefly to me. Thanks in advance.
You should use the classic theme as base.
Something like:
property name="theme.parent" value="classic"
in your build.xml will build your project with the theme that comes with LR by default (the classic one).
Victor already gave the correct answer. If you're interested in the background: _styled is a theme that basically provides the basics for your own theme but doesn't make any assumption on its appearance. If you really want to build your own theme, this is the preferred one to start from. If you only want to tweak a few things from the classic theme, start with classic (as Victor says).
Note that classic is not meant to be extended (though it works) - contrary to the documentation, the css/custom.css file in classic theme is not empty for this reason. This means that you'll need to adopt the instructions for creating a theme and start with classic's own custom.css file.
Does anyone know what to do next after you compile and get config.json in Bootstrap?
Any idea how to use it to update my current bootstrap.css?? or how to generate a css from it?? This is making me crazy, no enough documentation in Bootstrap about this..
I found this link: Twitter Bootstraps config.json - what does it do?
But the answer in there doesn't answer my questions. I'd really prefer more detailed answer. Thanks..^^
config.json stores the Customizer settings you used for your custom Bootstrap build.
You can reload those settings into the Customizer using the file upload at the top of the page.
You can also alternatively extract the LESS variable values from the JSON and compile Bootstrap manually using those values, if you have a LESS compiler installed locally.
How can I add further col-* classes.
I want to add col-xl-* but it's very time consuming adding every class manually.
If i use http://getbootstrap.com/customize/ I just can edit the lg but i will loose a screen width so I want to add another one. Is there a easy way to do that?
Regards
The "easiest" way to do it is use the .LESS source files. Besides that no.
The files you should look at are: grid.less, variables.less and mixins.less. I wouldn't edit those actual files though, because of updates to Bootstrap. I would start your own custom.less file and then #import that into the bootstrap.less file. That way it will generate your CSS with the rest of the bootstrap CSS.
This article on SmashingMagazine is an excellent example and where I got the idea from: Customizing Bootstrap
For some reason though, the article is currently not there or broken. I reported this to them, so hopefully it comes back soon.
In my Play 2.0 project I already have Bootstrap integrated (as the less files, Play can compile them in the fly) but now I found Boilerplate and I think it would be a nice idea to make use of it also.
After a bit of googling I found this:
http://www.quora.com/Is-Bootstrap-a-complement-OR-an-alternative-to-HTML5-Boilerplate-or-viceversa
So, looks like integration should be possible, and there are even 2 projects which try to do that. The only problem is that they do completely different things and I'm not sure which one is correct.
https://gist.github.com/1422879 in its current state seems to just ignore styles.css file coming from Boilerplate. It's renamed to h5bp.css, but I don't see h5bp.css included anywhere.
https://github.com/elgreg/html5-boilerstrap on the other hand uses both of them, just splitting styles.css file into two parts (h5bp_normalize.css and styles.css, bootstrap.css is included between them). But aren't there any conflicts between Boilerplate and Bootstrap this way?
So I'm a bit lost. What is the proper way of doing things in this case?
Just use Initializr, it's the semi-official solution and it has a huge set of options too. Bootstrap + H5BP is supported out of box!
http://www.initializr.com/
I've removed reset styles from twitter bootstrap(by removing less #import statement) and pasted it into html5-boilerplate(in user styles section). Worked fine.
Workless http://workless.ikreativ.com is another Bootstrap/H5BP combo.
the Gist https://gist.github.com/1422879 is H5BP + twitter bootstrap integration