Public Forums 71,145 posts

[remaxutila Friend remaxutilaJoin date: May 2014Posts: 15Downloads:3Uploads:1 Thanks: 2 Thanked: 2 times in 2 posts]

#198775

I saw this post Breadcrumbs in the Purity iii forum. I had a similar problem – I wanted to display the standard Joomla! Breadcrumbs Module in a Purity iii Template layout but in a position named ‘breadcrumbs’ not ‘navhelper’.

I noticed the Purity iii v1.1.0 22-May-2014 Template contains styling for a ‘class=breadcrumb’ (NOT class=’breadcrumbs‘) in various files including;
…/templates/purity_iii/less/variables.less
…/templates/purity_iii/less/navigation.less
…/templates/purity_iii/less/bootstrap.less
and hence
…/templates/purity_iii/css/themes/THEMENAME/templates.css
etc, etc

But the Purity iii v1.1.0 Template does not have a functioning module position named ‘breadcrumb’.

To solve this problem:
(1) Edit
…/templates/purity_iii/templateDetails.xml
to include <position>breadcrumb</position>

Note: The Purity iii v1.1.0 Template includes
<position>breadcrumbs</position>
so edit this to from ‘breadcrumbs’ to ‘breadcrumb’
<position>breadcrumb</position> to avoid confusion.

(2) Then create a file containing

?php
/**
* @package T3 Blank
* @copyright Copyright (C) 2005 - 2012 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/

defined('_JEXEC') or die;
?>

<!-- BREADCRUMB -->
<nav class="wrap t3-breadcrumb <?php $this->_c('breadcrumb') ?>">
<div class="container">
<jdoc:include type="modules" name="<?php $this->_p('breadcrumb') ?>" />
</div>
</nav>
<!-- //BREADCRUMB -->

(See attached file)

and save file as
…/templates/purity_iii/tpls/blocks/breadcrumb.php

(3) Now a breadcrumb module position is possible, but you need to include it in your layout(s)

SO,
(4) edit the layout(s) where you want the module position to be available
…/templates/purity_iii/tpls/LAYOUTNAME.php

and add <?php $this->loadBlock(‘breadcrumb’) ?>
wherever you want the module position to be located.

---

Attachments:

1. breadcrumb.php_.zip

1 user says Thank You to remaxutila for this useful post

1. Ch1vpH

[corecidex Friend corecidexJoin date: November 2014Posts: 11Downloads:0Uploads:4 Thanks: 3]

#557573

how do I customize these breadcrumbs?

[remaxutila Friend remaxutilaJoin date: May 2014Posts: 15Downloads:3Uploads:1 Thanks: 2 Thanked: 2 times in 2 posts]

#557671

I’m not sure what you mean by customize.

The only thing my post above changes is creating a module position named ‘breadcrumb’ and then in step (4) above defining where that module position is output in the layout.

I do not know what the HTML output resulting from <?php $this->_c(‘breadcrumb’) ?> is.
In my template it is null
i.e. <nav class=”wrap t3-breadcrumb “> is output.

The HTML output resulting from <jdoc:include type=”modules” name=”<?php $this->_p(‘breadcrumb’) ?>” />
is the ‘standard’ module output for modules with position = breadcrumb.

If by ‘customize’ you mean style with CSS,
Then it is the same as you would do for any module output styling.
The ‘default’ styling would be achieved via modifying the CSS classes t3-breadcrumb & breadcrumb
The class=”t3-breadcrumb” does not seem to be defined in the Purity iii LESS & CSS files.
The class=”breadcrumb’ is defined in various Purity iii LESS & CSS files.

If you wish to customize the ‘default’ styling for class=”breadcrumb”, I would suggest;
(1) creating your own custom theme.
(2) then for the variables.less file in your custom theme, copy the breadcrumb class definitions from MySite/templates/purity_iii/less/variables.less into your custom theme variables.less file.

The breadcrumb class definitions from MySite/templates/purity_iii/less/variables.less start at around line 599 and begin with
// Breadcrumbs
// ————————-

Additional/override styling can be achieved via use of the Module Class Suffix
Refer https://docs.joomla.org/Module_Class_Suffix

[corecidex Friend corecidexJoin date: November 2014Posts: 11Downloads:0Uploads:4 Thanks: 3]

#557699

If you wish to customize the ‘default’ styling for class=”breadcrumb”, I would suggest;
(1) creating your own custom theme.
(2) then for the variables.less file in your custom theme, copy the breadcrumb class definitions from MySite/templates/purity_iii/less/variables.less into your custom theme variables.less file.

The breadcrumb class definitions from MySite/templates/purity_iii/less/variables.less start at around line 599 and begin with
// Breadcrumbs
// ————————-

Thank you very much for you quick reply.
I tried to change the values in the variables.less without success

I want to get rid of the grey background
please see on the link: http://www.cirquedesprit.de/joomla33/

I also tried to create a custom.css

.t3-breadcrumb {
background:#FFF
}
without success.

Maybe you have another idea??

[remaxutila Friend remaxutilaJoin date: May 2014Posts: 15Downloads:3Uploads:1 Thanks: 2 Thanked: 2 times in 2 posts]

#557711

If LESS is not working,
I would first check Joomla! -> Extensions -> Template Manager
and check the Template Manager Edit Style ‘General’ settings are configured with Development Mode = ON

If Development Mode = OFF
every time you make a change to a LESS file you need to manually compile LESS to CSS using the ‘</> LESS to CSS’ button to the right of the ‘Save’ button in Template Manager Edit Style for that change to be included in the CSS files.

I would also suggest you consider using Firebug to discover what is happening.
Firebug is a powerful web development tool, but it does take some time to learn how to use it.
In my opinion, time that is worth the investment if you are going to be doing a lot of Joomla! customization.

When I use Firebug to look at the Page Source for http://www.cirquedesprit.de/joomla33/,
(a) I suspect you do not have Purity iii Development Mode = ON

(b) /joomla33/templates/purity_iii/css/custom.css is being loaded, but its content is

@charset "utf-8";
/* CSS Document */

.module_login {
background-color: #fafafa;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
border: 1px solid #ff8800;
}

module_t3_breadcrumb {
background-color: #ffffff;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
border: 1px solid #ff8800;
}

I do not see any other ‘custom.css’ file being loaded in the <head></head> section.

(c) the Template HTML output for the breadcrumb is

!-- BREADCRUMB -->
<nav class="wrap t3-breadcrumb ">
<div class="container">
<ol class="breadcrumb _t3_breadcrumb">
<li class="active">Aktuelle Seite:  </li>
<li>
<span>Startseite</span>
</li>
</ol>
</div>
</nav>
<!-- //BREADCRUMB -->

and I can’t see any CSS being applied to the CSS Selectors t3-breadcrumb & _t3_breadcrumb
Only the ‘standard’ ‘breadcrumb’ selector

When modifying things in the Purity iii Template, you might also check the Page Source to see what order the CSS files are being loaded, since CSS first loaded in the <head></head> section may be overwritten by any later CSS files loaded in the <head></head> section.

I hope this helps.

P.S. I am not a Joomla! or Purity iii expert.
I do have basic PHP, HTML, & CSS skills (and minimal JavaScript skills).
I rely heavily on Adobe Dreamweaver CS5.5 and Firebug to help me discover what is happening.
It took me a lot of ‘messing about’ to discover how to customize Dreamweaver so that it recognizes LESS files.

1 user says Thank You to remaxutila for this useful post

1. corecidex

[davidlezette Friend davidlezetteJoin date: August 2015Posts: 7Downloads:0Uploads:0 Thanks: 2]

#705147

I followed your instructions at the top and when I view the layout in the template manager it tells me “Block [breadcrumb] not found!” and the module “breadcrumb” does not appear on the assigned page.

Any thoughts?

[davidlezette Friend davidlezetteJoin date: August 2015Posts: 7Downloads:0Uploads:0 Thanks: 2]

#751698

I followed your instructions at the top and when I view the layout in the template manager it tells me “Block [breadcrumb] not found!” and the module “breadcrumb” does not appear on the assigned page.

Any thoughts?

[remaxutila Friend remaxutilaJoin date: May 2014Posts: 15Downloads:3Uploads:1 Thanks: 2 Thanked: 2 times in 2 posts]

#705169

<em>@davidlezette 497418 wrote:</em><blockquote>I followed your instructions at the top and when I view the layout in the template manager it tells me “Block [breadcrumb] not found!” and the module “breadcrumb” does not appear on the assigned page.
Any thoughts?</blockquote>
davidlezette,
I have not done any work on Purity III for over a year now and I have forgotten many, many, things about Purity III.
I note my original instructions were for Purity III v1.1.0 and Purity III is now at v1.1.5, but I doubt that is the cause of your problem.
If I had to guess, I suspect you have not configured the layout you modified in Step 4 of Post #1 above, as the assigned layout for the current style.

The About T3 Framework Layout documentation may offer you some clues.

[remaxutila Friend remaxutilaJoin date: May 2014Posts: 15Downloads:3Uploads:1 Thanks: 2 Thanked: 2 times in 2 posts]

#751720

<em>@davidlezette 497418 wrote:</em><blockquote>I followed your instructions at the top and when I view the layout in the template manager it tells me “Block [breadcrumb] not found!” and the module “breadcrumb” does not appear on the assigned page.
Any thoughts?</blockquote>
davidlezette,
I have not done any work on Purity III for over a year now and I have forgotten many, many, things about Purity III.
I note my original instructions were for Purity III v1.1.0 and Purity III is now at v1.1.5, but I doubt that is the cause of your problem.
If I had to guess, I suspect you have not configured the layout you modified in Step 4 of Post #1 above, as the assigned layout for the current style.

The About T3 Framework Layout documentation may offer you some clues.

[Author]

Posts