Joomla Templates Club 406,261 posts

[darengr Friend darengrJoin date: January 2012Posts: 108Downloads:112Uploads:30 Thanks: 4 Thanked: 1 times in 1 posts]

#845887

Hi, I need to have smaller article titles in blog layout, so I thought of just styling them with h3, and not h2 which is the default.
in the attached image, I changed the code within my browser (selected gray line), and it looks as I want it, with h3 style applied, in the left square shown.

Where should I put this change to make it permanent?

regards

---

Attachments:

1. 

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#845903

Hi
Could u provide the site url and let me know on which part of template you want to change the heading tag .
All the heading are defined in the /html/com_content / php files . You can provide me some more requested details so i can give u exact path .

[darengr Friend darengrJoin date: January 2012Posts: 108Downloads:112Uploads:30 Thanks: 4 Thanked: 1 times in 1 posts]

#845921

This reply has been marked as private.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#845949

Hi
via custom.css file you change the font size but to change heading tag also you need to modify it from php file .
The link u shared seems to be blog layout for this
Go to /templates/ja_mono/html/com_content/category/blog_item.php
Find

 <?php echo JLayoutHelper::render('joomla.content.item_title', array('item' => $this->item, 'params' => $params, 'title-tag'=>'h2')); ?>

change H2 to h3 from above code .
Hope it helps.

[darengr Friend darengrJoin date: January 2012Posts: 108Downloads:112Uploads:30 Thanks: 4 Thanked: 1 times in 1 posts]

#845983

thank you very much,
can I change the font size in custom.css only for the article title within the blog layout, without modifying other parts of the site?

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#846066

Yes use this code in custom.css
for the shared page menu `

.itemid-143 h2{font-size:30px!important;}

replace it with h3 if u changed it from php file .

[darengr Friend darengrJoin date: January 2012Posts: 108Downloads:112Uploads:30 Thanks: 4 Thanked: 1 times in 1 posts]

#846083

I will try tomorrow,
time to go to bed now, on my side of the world 😉
regards and many thanks!
darengr

[darengr Friend darengrJoin date: January 2012Posts: 108Downloads:112Uploads:30 Thanks: 4 Thanked: 1 times in 1 posts]

#846842

thanks Pankaj,

this worked fine within custom.css,

I noticed that within the menu item, there is a field called Page Class.
Do you think I can use this to specify the h2 font size for this page?

I tried it, but I am not sure of the syntax of ".itemid-143 h2{font-size:30px!important;}",
I mean with period at the front or not,
with an extra space or not,
with .itemid-143 or not?

Do you know if this will work, so it easier to manage within the page from joomla directly?

---

Attachments:

1. 

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#846873

Hi
the code is for the custom.css
Add code in custom.css or use page class and then define the style code in custom.css .
https://docs.joomla.org/Page_Class_Suffix

[darengr Friend darengrJoin date: January 2012Posts: 108Downloads:112Uploads:30 Thanks: 4 Thanked: 1 times in 1 posts]

#846889

so I can learn how to use the page class together with style code in custom.css, I put

.h2with18px.h2{font-size:18px!important;}

and

h2with18px

with a space in front in page class field, but I do not know the exact syntax, can you please correct me?

within custom.css, do I specify .h2with18px.h2{font-size:18px!important;} or .h2with18px {font-size:18px!important;} or something else?

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#846898

Hi
Page class work like this
add this > custom_heading
in page class
now define this rule in custom.css

.custom_heading h2 {font-size:10px!important;}

It will change the font size of h2 as the class applied .
Read this doc for more info : https://docs.joomla.org/Page_Class_Suffix

[darengr Friend darengrJoin date: January 2012Posts: 108Downloads:112Uploads:30 Thanks: 4 Thanked: 1 times in 1 posts]

#846906

thank you very much for the help, I have had one . wrong in my first attempt!
I read the page you suggested, but it has no syntax examples… just the theory behind.

best regards!

[Author]

Posts