Must Read: New Unified System is officially live Must Read     |   6 Templates Updated (27 April 2018) Read more

Support Forum

Please note that this forum is only available to you in read only mode. In order to contribute to this conversation you will need to renew your subscription.

Syntax for Page Class in Menu Item

zentoolsIf you use Zentools please post a review at the Joomla! Extensions Directory.

Hi Paul,
When I create a category list, the heading for the page is a normal H1.
I would like that heading to be: h1 class="article-title"
That way it can be consistent along the site.
I've tried adding <h1 class="article-title"> to the 'Page class' under 'Page Display' but it is not changing the H1 tag.
What is the correct syntax to change the H1 tag for this (and all other category list) page headings?
Perhaps I'm in the wrong place in the template to make this change?

Thanks, Nick
  • NickMo's Avatar
  • NickMo
  • 12 Month basic
  • 331 posts
  • 3 Thanks
  • Karma: 1
The administrator has disabled public write access.
Hi Nick,

Try to add the following custom css code to make this header like others with "article-title" class:
.category-list .content-category > h1 {
    margin-top: 0;
    line-height: 2em;
    padding-left: 30px;
    margin-bottom: 0px;
    position: relative;
    z-index: 1;
    background: #2185c5;
    color: #fff;
}

Cheers
Piotr
  • Piotr Kunicki's Avatar
  • Piotr Kunicki
  • Moderator
  • 45 posts
  • 4 Thanks
  • Karma: 2
The administrator has disabled public write access.
Brilliant, thank you.
  • NickMo's Avatar
  • NickMo
  • 12 Month basic
  • 331 posts
  • 3 Thanks
  • Karma: 1
The administrator has disabled public write access.
Glad I could help.

Cheers
Piotr
  • Piotr Kunicki's Avatar
  • Piotr Kunicki
  • Moderator
  • 45 posts
  • 4 Thanks
  • Karma: 2
The administrator has disabled public write access.
With page classes for anybody else reading - if you want to target a specific page you can use the html classes

,itemid-101 for example would be a unique page class for the demo home page at bambootheme.com/showcase/dec15/

With buildr you have more options and can target the specific template id as well

Cheers
Paul
  • paulus103's Avatar
  • paulus103
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Paul, I'n not quite sure what you mean. There is always a few little tricks with JB templates that make them unique and eve more powerful (but may be hidden or difficult to find in the docs).
How would I go about changing the H1 tag (see above) using the unique page class that you suggest?
  • NickMo's Avatar
  • NickMo
  • 12 Month basic
  • 331 posts
  • 3 Thanks
  • Karma: 1
The administrator has disabled public write access.
Hi Nick,

If you view the sourcecode and check the html class you will see a couple of classes you can use with zgfv5 with zgfv4 slightly less

I didn't want to confuse the thread as Piotr suggested a great solution but just wanted to mention there are some interesting options available especially for buildr

Using these classes means individual pages can be targetted or with zgvf5 even a specific template set to display on selected pages

Cheers
Paul
  • paulus103's Avatar
  • paulus103
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Thanks Paul,
I'd like to pursue this further - where can I find out how to implement these classes?
Also, are you referring to adding classes to custom.css, or is there some other way?
  • NickMo's Avatar
  • NickMo
  • 12 Month basic
  • 331 posts
  • 3 Thanks
  • Karma: 1
The administrator has disabled public write access.
Hi Nick,

It is a case of viewing the source to see the classes listed each item class is different to each page

then styles can use the item class to tie styles to individual pages or with buildr using the template class tie styles to specific template id

The template id numbers are listed on the template styles page

So it would all be custom css/less styling you would create
  • paulus103's Avatar
  • paulus103
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
OK, here goes:
I can understand what Piotr suggested because we targeted the two classes in the source code and made changes in custom css:
<div class="category-list">

	<div class="content-category">
					<h1>
				Grower News			</h1>


Now, if I want to change the colour of the striped table that on this same page, what are you suggesting that I do?

Here is the code for two rows in the table:
<table class="category table table-striped table-bordered table-hover">
				<tbody>
											<tr class="cat-list-row0" >
									<td headers="categorylist_header_title" class="list-title">
													<a href="xxxx">
								xxxx							</a>
																													</td>
											<td headers="categorylist_header_date" class="list-date small">
							06 March 2018						</td>
																					<td headers="categorylist_header_hits" class="list-hits">
							<span class="badge badge-info">
								Hits: 13							</span>
						</td>
														</tr>
											<tr class="cat-list-row1" >
									<td headers="categorylist_header_title" class="list-title">
													<a href="aaaaa">
								bbbbb							</a>
																													</td>
											<td headers="categorylist_header_date" class="list-date small">
							05 March 2018						</td>
																					<td headers="categorylist_header_hits" class="list-hits">
							<span class="badge badge-info">
								Hits: 59							</span>
						</td>
														</tr>

Here is the page: fgv.com.au/grower-services/latest-updates/grower-news

Once I understand this, I'll finally be able to control everything on a page.
  • NickMo's Avatar
  • NickMo
  • 12 Month basic
  • 331 posts
  • 3 Thanks
  • Karma: 1
The administrator has disabled public write access.
Here is the css for the table, do I simply cut and paste into custom css and change the background colour from 0,0,0 to something else? If yes, how is that page-specific (and not alter the table colour for all pages), and how is that different to what Piotr suggested?

Or am I missing something with your option?
.list-striped li:nth-child(2n + 1), .table-striped li:nth-child(2n + 1), .list-striped tr:nth-child(2n + 1), .table-striped tr:nth-child(2n + 1) {
    background: rgba(0,0,0,0.05);
}
  • NickMo's Avatar
  • NickMo
  • 12 Month basic
  • 331 posts
  • 3 Thanks
  • Karma: 1
The administrator has disabled public write access.
So for example

.itemid-351 .list-striped li:nth-child(2n + 1), .itemid-351 .table-striped li:nth-child(2n + 1), .itemid-351 .list-striped tr:nth-child(2n + 1), .itemid-351 .table-striped tr:nth-child(2n + 1) {
background: rgba(0,0,0,0.2);
}

this uses the unique page itemid class

and changes the alpha value to alter the colour

Cheers
Paul
  • paulus103's Avatar
  • paulus103
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
Last Edit: 3 months 2 weeks ago by paulus103.
The administrator has disabled public write access.
Ahhhhh! Got it.
So for the H1 tag, if I wanted something only for that page, the custom css entry would be:
.itemid-351 .category-list .itemid-351 .content-category > h1 {
    margin-top: 0;
    line-height: 2em;
    padding-left: 30px;
    margin-bottom: 0px;
    position: relative;
    z-index: 1;
    background: #2185c5;
    color: #fff;
}

Not sure about the correct syntax, but have I grabbed the concept?
And then for a different page, I would simply replace the itemid-XXX for that page.
  • NickMo's Avatar
  • NickMo
  • 12 Month basic
  • 331 posts
  • 3 Thanks
  • Karma: 1
The administrator has disabled public write access.
Yep that is correct concept wise
  • paulus103's Avatar
  • paulus103
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
With buildr you can use the same principle with a little more flexibility

Cheers
Paul
  • paulus103's Avatar
  • paulus103
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
I have a couple of Build.r sites - what is the difference with what we are doing here, and how are they more flexible?

Sorry to pester you about this, but there does not seem to be any documentation about this feature (at least none that I can find).
  • NickMo's Avatar
  • NickMo
  • 12 Month basic
  • 331 posts
  • 3 Thanks
  • Karma: 1
The administrator has disabled public write access.
Hi Nick,

Well the most useful difference would be to target the template id

If you look in the template manager and the list of template styles it has an id

If you view the source code of the same template the id is listed as an html class

You're right I don't think it is documented properly - it is one of the things I need to work on this week - although bit ill as I type

Cheers
Paul
  • paulus103's Avatar
  • paulus103
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.

zentoolsIf you use Zentools please post a review at the Joomla! Extensions Directory.

Happy Campers