4

I'm creating my 1st new template - very beginner.

I've a static HTML5 and CSS3 website that I created myself from scratch and converting this to a Joomla 3.3 template.

I've read some tutorials about how to make a basic template and so on but I really don't have time to put my hand on everything, so I need a fast solution that I can just use all my CSS styling and ignore anything comes from Joomla.

I've tried to put some styled <div> tags into my index or as a module under (custom html) but there are some css styles that overriding my css rules so i just want to get rid of everything from joomla and keep my new template clean.

I've this inside my index.php

$doc = JFactory::getDocument();
$doc->addStyleSheet($this->baseurl . '/media/jui/css/bootstrap.min.css');
$doc->addStyleSheet($this->baseurl . '/media/jui/css/bootstrap-responsive.css');
$doc->addStyleSheet('templates/' . $this->template . '/css/style.css');
$doc->addScript('/templates/' . $this->template . '/js/main.js', 'text/javascript');

but I think the main style that overrides mine come from this line

<jdoc:include type="head" />

which I dunno what it brings.

Improve this question
1

4 Answers 4

Reset to default
6

The general rule when doing a template is to load your own CSS files after the <jdoc:include type="head" />. That's important because this way you have the final say over CSS rules. However that also means that you don't use $doc->addStyleSheet() in your template. Instead you just write it as plain HTML into your head after the jdoc statement.

There is one reason to still use the API to add JavaScript or CSS files within your template. That is if you load assets which may also be loaded by extensions. Then Joomla will take care that it's only loaded once, while otherwise you may have loaded it twice.

So it would maybe make sense to load the bootstrap file using the API, but your own template style (style.css) and JavaScript (main.js) should be loaded hardcoded after the jdoc tag.

On a sidenote: You can load the Bootstrap CSS by using JHtmlBootstrap::loadCSS() (http://api.joomla.org/cms-3/classes/JHtmlBootstrap.html#method_loadCss). This is perfectly fine when done within a template. But never use this call within an extension.

However it may make more sense to work from the Bootstrap LESS files and compile your own CSS file from it. Then you can even mix and match the things you need and leverage the mixins and variables already provided by Bootstrap.

Improve this answer
2
  • It will not be a nice move to handle the project like this I know that. however, I really don't understand how really Joomla works, I don't have any experience I only design using HTML5 and CSS3. so if there is any tutorials, any documents, anything that can explain from the VERY VERY beginning, I will be glad to read and understand them, thanks =)
    – Allam
    Jun 11, 2014 at 21:42
  • 1
    There is a doc page which I think is quite good: docs.joomla.org/Creating_a_basic_Joomla!_template
    – Bakual
    Jun 12, 2014 at 8:33
4

Unfortunately Joomla doesn't work like this. To make a Joomla template, you have to have some dynamic elements such as the jdoc tag that imports the component and so forth.

<jdoc:include type="head" /> is also a requirement and a very handy one at that. Basically, it gets all the script, link and anything else that is supposed to be injected into the <head> from an extension, and injects it in there for you. For example, lets say you has a module that required graph.js. To import this, you would use something like this:

JHtml::_('script', JUri::root() . 'modules/my_module/js/graph.js');

Now <jdoc:include type="head" /> gets the code above and injects it into the <head> for you so that you don't have to manually do it. Therefore, keep it there ad do not remove it. I will also be required for some core scripts that get shipped with Joomla.

If you wish to use modules in your site, you can't simply add the HTML code to your index.php and expect it to work properly and be dynamic. This is why we use:

<jdoc:include type="modules" name="position-7" />

which imports the module and the HTML structure that coded with is. You can however add custom HTML to wrap around the module like so:

<div class="sidebar">
    <div class="sidebar-inner">
        <jdoc:include type="modules" name="position-7" />
    </div>
    <div class="sidebar-inner">
        <jdoc:include type="modules" name="position-8" />
    </div>
</div>

It's not very complex and it also makes life so much simpler. Joomla is not based on a static approach therefore you should stick to the way it works.

Improve this answer
5
  • It will not be a nice move to handle the project like this I know that. however, I really don't understand how really Joomla works, I don't have any experience I only design using HTML5 and CSS3. so if there is any tutorials, any documents, anything that can explain from the VERY VERY beginning, I will be glad to read and understand them, thanks =)
    – Allam
    Jun 11, 2014 at 21:45
  • There is a lot of documentation for Joomla, not to mention 3rd party tutorials. Bets thing to do would be to read over parts of the documentation and look at the structure for other templates that come shipped with Joomla
    – Lodder
    Jun 11, 2014 at 21:53
  • 1
    Not strictly true. There's nothing to stop you omitting <jdoc:include type="head" /> and writing your own <head> direct in index.php if you need full control over the output. Not every Joomla site uses extensions.
    – Seth Warburton
    Jun 13, 2014 at 8:22
  • 1
    @SethWarburton - You're right, however if you were to remove the line, then the core scripts that get imported will not get imported. Even if a site was to use only core extensions that get shipped with Joomla, removing this line will remove some of the features that are associated with them. Even things like the page title will not work. You can manually add your own but using this line imports the titles associated with each page. If stripping all these sorts of features is something that someone want to do, then Joomla is probably not the best choice in CMS for that site
    – Lodder
    Jun 13, 2014 at 8:41
  • Yes I figured out I should have used wordpress afterall, but It's not up to me. Simply I've a client, I've a static website, and I've a task to accomplish =\
    – Allam
    Jun 14, 2014 at 1:09
1

When I first started out, the out-of-the box Joomla templates weren't as clean, and that was good for a beginner.

I've got a head section that looks like this...

<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/layout.css?v=20140508" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/menus.css?v=20140508" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/modules.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/styles.css?v=20140508" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/print.css" type="text/css" media="print" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/peter.css?v=20140508-6" type="text/css" />

In particular, the stylesheets are not included in the "nice" way with the the addStyleSheet, and as a result, they stay where they are put, last! Any dynamically added stylesheets are inserted at the <jdoc:include type="head" /> point.

What may be happening in your template is that your stylesheets are being loaded first, then any dynamically added Joomla ones are added last. It all depends on where the addStyleSheet functions are called.

If you're confident that you have all you need in the template, and don't need additional dynamic bits added (e.g. for the frontend editor), or for any extensions you add, then you might get away with removing the <jdoc:include type="head" />, at least for a beginner template.

Or... just add your stylesheets at a fixed point, outside the included head.

Once you step beyond a beginner, you'll probably want to include the head section. There are ways to manipulate the dynamic content, though not necessarily for a beginner. For example, for debugging, I have a stylesheet that I dynamically add using a custom extension, if I'm the logged in user.

Improve this answer
4
  • your reply explained a lot to me, since I've never known what does <jdoc:include type="head" /> brings, but in your case i see that the url of the stylesheets locates under the /css folder of the same template you're using. In my case it's not because my css folder only contains the style.css which I've created when I was installing the template, so do you have any idea about the path of the css files that Jdoc brings to me ?
    – Allam
    Jun 11, 2014 at 21:39
  • Thanks Maillo, you are welcome, it's quite a learning curve. Jdoc doesn't provide you a path, you provide that in the addStyleSheet call. The /media/jui/css path contains compiled bootstrap stylesheets. They are compiled from the .less files in /media/jui/less (look at bootstrap.less) and are quite appropriate to use like you are using them.
    – Peter Wiseman
    Jun 11, 2014 at 23:02
  • An alternative, as Bakual suggested was to compile your own "single" stylesheet using a less compiler. You'll see an example of that in the default protostar template. Start at templates/protostar/less/template.less and you'll see it contains the bootstrap stuff from bootstrap.less, plus template specific styles at the end.
    – Peter Wiseman
    Jun 11, 2014 at 23:03
  • If you decide not to include the jdoc head, you'll be missing the dynamic insertion of the title tag and the meta tags. For a beginner, they're not a big loss. I'd probably go with Bakaul's suggestion an include the head, and then include your stylesheet after the head.
    – Peter Wiseman
    Jun 11, 2014 at 23:06
1

If you're styles are being overridden it is undoubtedly because of Bootstrap's css, as it uses some high-specificity selectors.

Does your static site use Bootstrap? If not, then you're almost certainly better of without it in your Joomla template. You'll only end up fighting with it. I think this is what you've seen already.

If you're static site didn't use Bootstrap also then you can better forget all the talk here of LESS and simply include your own CSS and JS, as you have done. You don't have to use Bootstrap in your Joomla template.

Improve this answer
4
  • You're absolutely right... You've just solved the puzzle and ended my struggling. But I've a question. since I will remove Bootstrap's CSS files. should I keep my eyes on the responsive classes I've made for my other stuff ? or what's better ? should i use the Bootstrap's responsive CSS and just delete my responsive sheet ?
    – Allam
    Jun 12, 2014 at 22:49
  • It depends entirely on your situation. If you have a simple grid it's almost certainly easier to use your own as Bootstraps responsive classes bring a lot of CSS to the party (just view the output). 12x .col- x 4breakpoints + push + pull = HEAVY.
    – Seth Warburton
    Jun 13, 2014 at 8:13
  • 1
    Personally, I'd rather write a few @media-queries that target the design elements I need, as that gives me responsive in just a couple lines of css instead of hundreds. In my own template I included pre-defined grid classes for convenience, but I don't do that anymore, I define only the grid I need for the project at hand. You might still find some useful template bits that can guide you in my template, Oneweb: joomlafuture.com
    – Seth Warburton
    Jun 13, 2014 at 8:20
  • I ended up in disabling bootstrap as you've recommended, and I felt much better. I checked out the template, and I've found "template framework" which I didn't understand what do they mean by "framwork" and when I googled I found more framworks, free and commercials. how excatly they can help me ? what is framework in Joomla? do you have any decent source i can read ?
    – Allam
    Jun 14, 2014 at 1:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.