<name>frontend. If you want to change your template name into something else, you should do that before (!) you install the template. The steps are the same, only that you unzip BL4NK Bootstrap Edition, change the name frontend in templateDetails.xml, rename the folder, zip the template (the renamed folder) and install it in the backend. If you want to do it right now, you should deinstall the current template. Keep shure you take another template as default before.
<creationDate>should be set to the current date. Just take a format you want. Your name is in
<authorUrl>are self explanatory. In
<version>you can specify which version of the template this is. A description of the templates can be stored under
<description>. You can use HTML here. The rest can remain as it is for the moment. Later on, when you set the module positions, you will need this file again. Save the file and you'll see that your changes in the backend (Extensions > Templates > Templates. Yes, you read it right: Double 'Templates'. Do you work as a freelancer? It is awesome to explain this path to your client on the phone).
servefunction. Change the line
<?php defined( '_JEXEC' ) or die;. With
<?phpyou open the PHP area (which should be closed with
?>again) and with
defined( '_JEXEC' ) or dieyou forbid direct access to this file. This is done via the Joomla!™ API with the _JEXEC command. This statement checks to see if the file is being called from within Joomla!™ and it protects your site by making it more difficult for a cracker/hacker to damage your site.
$this->templatewe get the current template.
langwith the site specific language shortcut (e.g.
en). This will be done with php
echo $this->language;. The head area follows and contains a Joomla!™ specific code to include all the head stuff. With this line the CMS is able to load scripts, links, metas, title and all the invisible but necessary things of your website. If the template is already installed, take a look at the source code of the frontend and you will see all the stuff.
$pageclass. Maybe you still have recognized it, that every time you create a new menu item in the backend, Joomla!™ creates an alias of this item automatically. It will be created throught the item title in lowercase and empty spaces will be replaced with separators. This alias is predestined to be a class name. So we take it and give it to the body. And yes, at the menu item you are able to leave an extra page class. This page class is also taken for the body class.
SHOW ME YOUR AWESOME CODEare example code in the bootstrap way. Three divs contains one jdoc. You can read it in the official Bootstrap documentation, that containers are required when using the grid system. It uses a series of containers, rows and columns to layout and align content. 'It’s built with flexbox and is fully responsive.' The above example creates one column in full width (the basic grid system has 12 columns) to display the content of each component of Joomla!™, e.g. articles. This will be done with
<jdoc:include type="component" />and can only be once in every template. The following three i tags are for preview some icons of Font Awesome (a solid icon, a regular icon and a brand icon).
<jdoc:include type="modules" name="debug" />. If you turn on the debug mode in your configuration of your awesome CMS, the output will shown in the frontend in exactly this place. You need to do the same with all your module positions; later more.
<script src="templates/frontend/build/app.js"></script>. This file will be created with Gulp. But before going into gulpfile.js, we just take a look at the logic.php. It takes only five minutes.
<meta name="generator" content="Drupal" />in the outputted source code of your website.
s. Keep in mind that some scripts belong in the head, e.g. modernizr. If this is the case you shouldn't unset them. Now the head is cleaned from any script.
gulpinto your command line interface (cli). As default it should run all tasks in a specific order.
navbar navbar-expand-lg navbar-light bg-light. Bootstrap creates a (responsive) navigation menu. Its horizontal padding is removed at breakpoints lower than the specified
navbar-expand-lgclass. This ensures your are not doubling up on padding unnecessarily on lower viewports when your navbar is collapsed. Theming the navbar will be done by
navbar-light bg-light. You can try
navbar-dark bg-primaryas well (take a look at Color shemes). Although it’s not required, you can wrap a navbar in div with the class
containerto center it on a page.
navbar-brandformats the presentation of the site name. The Joomla!™ API gives you a target (href) to the base URL. Important here is the slash (/) at the end. If you open a tag you have to close it, too. Normally you do it separat (e.g.
<div></div>) but you can do it the short way (e.g.
<div />), when no value between the opening and closing tag is needed. About the predefined variable $app you have to get the site name from the configuration and display it.
buttonwith the class
data-toggleattribute has the value
collapse, so the navigation can toggle in and out. The target (attribute
data-target) is the ID
#nav-modules. Below you write in a div with the same ID (
#navbar-modules) a module position called
<positions>. There you'll find one predefined position called "debug". Add the following code:
<h3>we place a "Read more" link. Well, make it a featured article (Featured > Yes) and Save & Close it. Now under Options > Articles hide the following entries near the bottom:
navbar. When you create a drop-down menu, 'Show Sub-menu Items' should be set to "Yes". In 'Menu Class Suffix' (Advanced) you set the class
navbar-nav mr-auto(preceded by a space!). Save & Close. Refresh your browser page (frontend).
ulwith the class
dropdown-menu, take the value of the attribute
aria-labelledbyand give it to the sibling before
aas an id.
navbar, but the corresponding module in the backend won't work yet. Do that in Extensions > Modules. Click on "New" and select "Search". The 'title' should perhaps be named "Search" and the position
navbar. Save & Close.
form-inlinefrom the form element. There is only one class, so you can delete the whole attribute. By deleting the class you keep shure, that the search input field takes the full width even in mobile view.
.before the equal sign on line above and give the input element the additional classes
breadcrumbs. Getting hungry from all those breadcrumbs? Take a short break. After refreshing yourself go to options in the breadcrumbs module and set 'Show "You are here"' to "No". Save & Close.
$separatorand write your own, maybe
row. In it you place two columns: One for the money, two for the show. ... Uh! ... I mean: One for the content, two for the sidebar. Both columns get the full width on mobile with
col-12. The content should be bigger on tabletts and desktops, so it get
col-md-8for eight columns for medium devices and above. The sidebar should have half width of the content. Therefore it gets
<jdoc:include type="message" />you spit the news of the Joomla!™ system and
<jdoc:include type="component" />the content (via component). In the sidebar comes the same module position with
style="card". This module chrome named "card" does not yet exist. We'll do that in the next step.
btn-primary. This thing need this class to look good. And it would like to look good (like you and me). Create Overrides > Layouts > joomla > content. Go to the folder html/layouts/joomla/content and open the file readmore.php. All other files could be deleted. You don't need them. Now catch all anchor elements with the class
form-inlinefrom form element. You can remove the whole attribute.
form-control(search and replace is your friend). Continue to replace all classes named
control-groupwith the class
<label>get the class
sr-only. Looking for the
ulwith the class
unstyledand rewrite it like the following.#