So I've been playing with Joomla 3 with Bootstrap. At first I didn't fully understand what they meant by Bootstrap being baked into the CMS - seems like you could call it but would have to either use Javascript or template overrides to match the expected output. Not much more convenient than calling the Bootstrap framework manually.
Then I found a few links about libraries/cms/html/bootstrap.php - and there was much rejoicing:
http://doc.joomladev.eu/api3/Joomla-Libraries/HTML/JHtmlBootstrap.html;
https://groups.google.com/group/joomla-dev-cms/browse_thread/thread/59ede023a635cc78/18f67450a08e66ff?lnk=raot;
http://itprism.com/blog/106-bootstrap-tabs-accordion-slides.
This seems to be a work in progress, and the limited links I found indicate that there are some kinks to be worked out. But useful for going forward...especially if I can create or edit my own as needed.
Is there a way of using this file in a template override, like modules.php?
Is there any better documentation than what I listed above?
Thanks!
As a JHtml helper, you would use it like any other JHtml call you see in the CMS. As you probably know, JHtml::_('behavior.framework'); enables MooTools in the CMS. Well, there's a similar function JHtml::_('bootstrap.framework'); that will load the Bootstrap JavaScript as well as its jQuery dependency. So, if you want to enable Bootstrap's alert plugin, just call JHtml::_('bootstrap.alert', 'optionalClassNameForAlertElements'); and you're all set.
Bootstrap has less than a year in the CMS while MooTools has been around for a while, so obviously the support can still be improved upon. But, we've tried to make it easy to quickly enable the various Bootstrap JavaScript plugins so you can focus on front-end work.
Related
So we got a great project and we absolutely have to learn Typo3 or Drupal for it quickly. I already know some basic things.
I did the installation correctly for both, I know how to set up a basic Site using Fluid Template in Typo3 and I know how to set up a basic template in drupal without any styles.
My Problem now is how do I style a website since typo3 or drupal doesn't have a field for classes (The fields just get some random ids) and also how can I build a website with multiple sections where I have to style each section individually.
If you have any links to good tutorials or anything else that explains what I need to know I would appreciate it.
First of all, i think you understand HTML/CSS and know that TYPO3,... are content management systems. They're wrapping your content (saved to the database) with a template like HTML Files to send the result to the browser as a full rendered website.
ThomasLöffler already gave you the hint to read the documentation on both websites to make your choice which one you want to use. I prefer TYPO3, but the start many years ago wasn't easy. So i could you explain a little bit, and on a very short way what you need to do... After all please read the docs on typo3.org (Gettin started guide or something)
In TYPO3 you need to include and build your HTML Template. Prefered with the FLUID Template Engine / Framework. After that you need to set it with the TYPO3 TypoScript as your main template.
The content templates like will be rendered by the TYPO3 Extension "fluid_styled_content". This extension has also fluid templates to render the content object into a html output. Before you have enough knowledge about typo3 it's not recomended to change them.
The main thing is, that you need to include a stylesheet (css) file in your site. In TYPO3's TypoScript it's for example like this:
page.includeCSS.file100 = path/to/your/css/mystyle.css
Thats the very short overview and very little explanation what to do. But as Thomas said, you need to understand both and decide for one of them. And of course you need to read the docs first a little bit, before you ask. That would help you and each of us, to give you better answers. Good luck!
TYPO3 Gett started:
https://docs.typo3.org/typo3cms/GettingStartedTutorial/Introduction/Index.html
You can learn a lot of things if you take a look into the code of the official introduction package (https://extensions.typo3.org/extension/introduction/) The package can simply installed over the extension manager -> get preconfigured distributions
Or you just use it as a basis to build your own layout. You do not have to reinvent the wheel ;)
I am using the php form builder class (http://www.imavex.com/pfbc3.x-php5/examples/html5.php)
and jqbootstrapvalidation (http://reactiveraven.github.io/jqBootstrapValidation/)
So far I can succesfully combine these (even using some of the patterns php form builder class already built in) and I edited some of the element php files to change a pattern here and there, and to add some \n's to make a readable source code. (I still don't like my entire form on a single line in the source..)
But I would like to use different colours for the bootstrap. I've tried downloading several themed bootstrap.min.css files using paintstrapand twitter bootstrap themeroller
However, as soon as I include these instead of the standard netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css file, all my styling is lost and it looks the same as if there was no stylesheet included.
Since the php form builder class is relatively old, do I need to change all it's code to become compatible with the newer bootstrap, or is there a faster way to do this (perhaps a different form builder?)? Or am I messing up something else that is causing this change style options?
Appearantly there are a few changes need to make to fix this:
https://code.google.com/p/php-form-builder-class/issues/detail?id=205
allthough it is not "full-on" bootstrap 3.0. Also, the jqueryvalidator needs some adaptation to work with bootstrap 3.0. I'm currently busy making everything work the way I like it, adding glyphicons for the forms (optionally) etcetera. I'll get back to you as soon as I am finished and drop the code of somewhere for all the lovely people to enjoy or shout at.
I did'nt want to use imavex class for several reasons :
wanted a class witch could be easily updated if Bootstrap's version changed
wanted to have more control on generated code (add or remove wrappers, class, attributes, ...)
wanted to generate separate code for css/js includes/js code
wanted to be able to configure any jquery plugin with it
So I made my own (not free but only 5$), you can see the demo and complete doc here : http://codecanyon.net/item/php-form-class-for-bootstrap/8790160?WT.ac=category_thumb&WT.z_author=migli
Hope it helps and hope you'll like it
I'm quite new to joomla programming. I'm supposed to make a form together with coninciding database table. As of the moment, I'm quite confused on the things that I should take a look at.
What should be the first thing that I look at? Should I look at the components concept? I come from a Java background so this is still quite confusing for me. I've already seen several forms extensions for joomla, however, i'd like to be able to create my own form from scratch.
What are the first things I should look at? Would appreciate it if you can give me pointers.
Thanks
Depending on the size of the form I would use a module rather than a component if it's going to be fairly simple. To get you started off with a module, you can use the Module Generator. Make sure you set "Helper File" to "Yes".
Ok basically, lets say your module is called "Test Form".
You are going to have 3 main files:
helper.php - This file will include all your functions
mod_testform.php - This will contain things such as calling some functions if need be, defining parameters, adding in custom CSS and
JS etc. Bascially a controller.
default.php - This is for the html of the form. It can also be used to import css and javascript files. Obviously PHP is allowed but I would refrain from adding functions in here.
Also have a look at the following page:
http://www.techguywebsolutions.com/create-a-custom-joomla-2.5-module.html
Hope this helps.
I am making a site with Joomla mainly because of the user levels. Now hands on into development enough that I cannot back out, I've realized that Joomla's theming is not as awesome as WordPress'.
When I started making the Joomla theme I realized there is no single.php like separate template for displaying article pages. But I want that when I click on an article link the page layout is wider so that the full article is more readable, basically I wanna hide the sidebar and make the article column wider when viewing a single article.
The biggest problem is that I have finished the HTML & CSS pre Joomla or any CMS jump with all the HTML5 tags and what not. I figured there would be template tags like WordPress or something similar that would give me complete control of my HTML but with Joomla everything just gets rendered as complete components with HTML and CSS all set in. It was such a pain when the pagination just rendered as a list when all I wanted was 2 links of previous page and next page. Am I doing something wrong or is Joomla just built this way.
If I start changing the components and modules the way I want, will they be changed back to defaults when I update the core. I read somewhere from 1.7 Joomla has integrated 1 click upgrades.
I sincerely hope I'm just wrong.
Sorry for jamming three questions in one but I think my title is quite explanatory so anyone looking for similar things would understand.
Thanks! I appreciate all the help.
and welcome to Joomla. Because your question(s) are long so will your answer so hold still...
First of all just to clear it up, the Joomla templating is a proper templating engine where as Wordpress is not (it's not even a CMS - check their website), this is often construed as poor coding rather than best practice as it's more of a steep learning curve.
1) I wanna hide the sidebar and make the article column wider when viewing a single article.
This can be done through conditional assignment within your template, if around your RH column in your template you can place this if statement:
if (JRequest::getString('option') != 'com_content' && JRequest::getString('view') != 'article') { echo '<div id="myRightHandColumn"><jdoc:include type="modules" name="right" style="xhtml" /></div>'; }
You will also need to apply this code to add a class to your wrapper around your main content to tell your CSS to make it wide.
2) give me complete control of my HTML but with Joomla everything just gets rendered as complete components with HTML and CSS all set in
That's not entirely true, all WELL made extensions have a views folder containing overridable html output. For example if you wished different HTML to be outputted for the article view from com_content you would copy this file:
/components/com_content/views/article/tmpl/default.php
and place it in your template like so:
/templates/your_template_name/html/com_content/article/default.php
3) If I start changing the components and modules the way I want, will they be changed back to defaults when I update the core.
Assuming you follow my instructions and use overrides rather than core-hacks then you will not lose changes when upgrading the core. Naturally you should never upgrade in a production environment.
If any parts are unclear just drop a comment and I will help as best I can.
You are definitely doing it wrong, Joomla's templating system is far more advanced and flexible than WP. You need to read up on the template override system and how to use collapsible module positions. The official documentation is still 1.5 focused, but it's pretty much the same thing as far as overrides and modules are concerned.
Overrides - http://docs.joomla.org/Understanding_Output_Overrides
Collapsing columns - http://docs.joomla.org/Collapsing_columns
All template docs - http://docs.joomla.org/Template_Development
You should also look in to the new template style options.
I'm new to Drupal, and frankly after reading through the Drupal documentation, their guide to themeing isn't all that helpful. Maybe I'm just misunderstanding, but it seems like there are certain variables you always have access to and different functions you can define to override or implement behavior.
Long story short, I'd like to be able to trace through the Drual themeing code to understand hwo it works. Doesn't seem like it should be all that difficult, but I'm having a hard time finding a good reference. Anyone know of one?
http://www.nerdliness.com/article/2007/09/10/drupal-theming
There are a few different resources you can use that might help out:
You can use the irc channel on freenode: #drupal-themes
A module that I hear a lot of themers like is the Devel module - http://drupal.org/project/devel. This is what will allow you to trace through the code and see what variables, function calls, etc. are being used.
You might also want to check out the Druapl 6 Themes book
I'd recommend Front End Drupal: Designing, Theming, Scripting over the Drupal 6 Themes book. I put together a Drupal 6 Theming Cheat Sheet that includes links to the resources I've found most helpful.
Honestly, though there are good links and books to learn from, the way I've learned quickest was to start creating a theme. Create your theme.info file, then begin converting an index.html to page.tpl.php or page-front.tpl.php using the snippets in the cheat sheet or the nerliness.com link mentioned in Robert Harvey's answer. Those two files constitute a bare-bones theme.
From there, you can override additional template files as needed. You can use the Theme developer to find just what templates to override, to customize a particular part of the site. Remember to clear the theme cache, as you add new template files.
Also, make sure your theme has the base template of any file you want to override. See the "Note: There is a bug which prevents derivative template files from being detected..." section of the Core templates and suggestions page, for more details.