Joomlabamboo Support Forum :: Topic: Syntax for Page Class in Menu Item (1/1)

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

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

6 years 1 month ago

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
12 Month basic
331 posts
3 Thanks
Karma: 1

The administrator has disabled public write access.

6 years 1 month ago

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
Moderator
45 posts
4 Thanks
Karma: 2

The administrator has disabled public write access.

6 years 1 month ago

Brilliant, thank you.

NickMo
12 Month basic
331 posts
3 Thanks
Karma: 1

The administrator has disabled public write access.

6 years 1 month ago

Glad I could help.

Cheers
Piotr

Piotr Kunicki
Moderator
45 posts
4 Thanks
Karma: 2

The administrator has disabled public write access.

6 years 1 month ago

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

manh
Moderator
45248 posts
2106 Thanks
Karma: 603

The administrator has disabled public write access.

6 years 1 month ago

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
12 Month basic
331 posts
3 Thanks
Karma: 1

The administrator has disabled public write access.

6 years 1 month ago

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

manh
Moderator
45248 posts
2106 Thanks
Karma: 603

The administrator has disabled public write access.

6 years 1 month ago

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
12 Month basic
331 posts
3 Thanks
Karma: 1

The administrator has disabled public write access.

6 years 1 month ago

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

manh
Moderator
45248 posts
2106 Thanks
Karma: 603

The administrator has disabled public write access.

6 years 1 month ago

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
12 Month basic
331 posts
3 Thanks
Karma: 1

The administrator has disabled public write access.

6 years 1 month ago

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
12 Month basic
331 posts
3 Thanks
Karma: 1

The administrator has disabled public write access.

6 years 1 month ago

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

manh
Moderator
45248 posts
2106 Thanks
Karma: 603

Last Edit: 6 years 1 month ago by manh.

The administrator has disabled public write access.

6 years 1 month ago

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
12 Month basic
331 posts
3 Thanks
Karma: 1

The administrator has disabled public write access.

6 years 1 month ago

Yep that is correct concept wise

manh
Moderator
45248 posts
2106 Thanks
Karma: 603

The administrator has disabled public write access.

6 years 1 month ago

With buildr you can use the same principle with a little more flexibility

Cheers
Paul

manh
Moderator
45248 posts
2106 Thanks
Karma: 603

The administrator has disabled public write access.

6 years 1 month ago

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
12 Month basic
331 posts
3 Thanks
Karma: 1

The administrator has disabled public write access.

6 years 1 month ago

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

manh
Moderator
45248 posts
2106 Thanks
Karma: 603

The administrator has disabled public write access.

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

Syntax for Page Class in Menu Item

Happy Campers