I am making a theme based on bootstrap, but I am stuck at the very beginning. I am not sure what is the right way to include bootstrap. Below is my code in start.php:
elgg_register_event_handler('init', 'system', 'core_theme_init');
function core_theme_init() {
// don't need it twice
elgg_unregister_menu_item('footer', 'powered');
//include twitter bootstrap css
elgg_extend_view('css/elgg', 'core_theme/css');
//register bootstrap css and js
$bootstrap_css = 'vendor/twbs/bootstrap/dist/css/bootstrap.min.css';
elgg_register_css('bootstrap_css', $bootstrap_css);
$bootstrap_js = 'vendor/twbs/bootstrap/dist/js/bootstrap.min.js';
elgg_register_js('bootstrap', $bootstrap_js, 'footer');
$get_context = elgg_get_context();
//we don't want bootstrap loading when in the admin area.
if($get_context != 'admin'){
elgg_load_css('bootstrap_css');
elgg_load_js('bootstrap');
}
}
I can see bootstrap is loaded now, but it breaks some functionalities, like the comment form will not pop up and some of the styles break. When I commented elgg_load_css('bootstrap_css');
, everything is back to normal. Could anyone give me some hint? Thanks.
info@elgg.org
Security issues should be reported to security@elgg.org!
©2014 the Elgg Foundation
Elgg is a registered trademark of Thematic Networks.
Cover image by RaĆ¼l Utrera is used under Creative Commons license.
Icons by Flaticon and FontAwesome.
Assuming you're using Elgg 2.x
I have a views.php file that brings the vendor files into the elgg view system:
Then in my plugin init function I extend the default Elgg css/js with bootstraps. This is simple, it takes care of the caching, loads on every page as I need it to, and only makes one request for the combined css and one request for the combined js.
After that you're on your own :)
You can't just add in major global css/js changes and expect there to be no interference whatsoever, there are some class conflicts with different rules, it's not going to be a straight drop-in replacement. The reason I *extend* the css instead of overwriting it is because there are so many core views and core-flavored markup provided by plugins that still benefit from the core css. There's often not enough time/budget to really dig in and rewrite everything with twbs classes, though it can certainly be done.
Thank you for your reply, Matt, but I am still a little bit confused. I am using Elgg 2.2. Below is my folder structure:
Below is the change I made in my start.php file:
is this correct? Sorry about my naive question, but I don't quite understand yet.
Bootstrap loads correctly as Matt says, but it seems Bootstrap has some compatibility issue with Elgg. Even by extending it, some of functionalities also don't work properly. I pulled in Foundation instead and it works all right so far.
There are some clashing styles for sure. .hidden in Bootstrap is incompatible with Elgg's uses for example.
I have started my SCSS experience with Foundation, but have concluded that it's too much overhead. I am now writing my own mixins. Foundation comes with too much stuff that's useless in Elgg.
What Matt is trying to say is that you can not just add some stylesheet to a webpage and expect the webpage to work the way it worked with a different stylesheet.
Example:
if you have a website with a html div referring to .my-awesome-class and that class is in your stylesheet.
And then you replace that stylesheet with a stylesheet where .my-awesome-class doesn't exists and instead the new stylesheet uses .my-different-class for the same type of div, it's just not working.
you should then either replace <div class='my-awesome-class'> with <div class='my-different-class'> in your html or you should change .my-different-class with .my-awesome-class in your .css file.
Bootstrap and Elgg were made by different people, so good chance they called things differently.
It's like calling John when you need Peter.
It makes great sense. What would you guys suggest to do when developing a theme? Using a third party framework and fix some of the compatibility issue or just writing my own css? Which is the better way to go? Thanks.
Elgg's CSS is minimal, so I would suggest writing your own CSS from scratch or as an extension for aalborg theme. Integrating any framework would require either modifying way too many views to add vendor selectors/prefixes or writing way too much CSS to target deeply nested elements.
Awesome. It is really helpful. Thank you, everyone.
I tend to use bootstrap for all my theming, I really like their grid system and form controls. The beauty of elgg is that you have the option to go either route, whatever works best for you.
@Matt How did you solve the clashing problems? For example, in Bootstrap the .hidden class is:
some of the ajax like comment and edit don't work well until I deleted the !important, but it is not a good practice to change the source code of the framework, right?
- Previous
- 1
- 2
- Next
You must log in to post replies.