[MOD] Change Your Article Title Font Size from Template Settings

Joomla Version : 1.7
Template Version: 2.3
What this does: Adds text size options under template features font category which you can change your Menu Text Size, Joomla Article Titles, K2 Article Titles.
Who is this for: Users asking how to change article titles in forums.
Should it be added to feature templates: Yes i think so considering amount of users are asking in forums.
How this looks:

How mod works: Once enabled adds required css into the template.
Does it work on other templates: Technique is same and will work but might need to be adjusted in few templates.

Mod Starts here:
Find File: "joomla rootlanguageen-GBen-GB.tpl_gk_twn2.ini"
Add at the end following strings:

Code: Select all

TPL_GK_LANG_TEXT_SIZE_TEXT="Text Size Options"
TPL_GK_LANG_TEXT_SIZE_SWITCH="Enable / Disable Title Text Size"
TPL_GK_LANG_TEXT_SIZE_SWITCH_DESC="You can enable or disable text size overrides option by turning switch to on"
TPL_GK_LANG_MAIN_MENU_TEXT_SIZE="Main Menu:"
TPL_GK_LANG_MAIN_MENU_TEXT_SIZE_DESC="You can specify main menu title font size in here by using example 20px or 100%"
TPL_GK_LANG_K2_ARTICLE_TITLE_SIZE="K2 Article Title:"
TPL_GK_LANG_K2_ARTICLE_TITLE_SIZE_DESC="You can specify K2 article title font size in here by using example 20px or 100%"
TPL_GK_LANG_K2_CATEGORY_ARTICLE_TITLE_SIZE="K2 Category Layout Article Title:"
TPL_GK_LANG_K2_CATEGORY_ARTICLE_TITLE_SIZE_DESC="You can specify K2 category layout article title font size in here by using example 20px or 100%"
TPL_GK_LANG_JOOMLA_ARTICLE_TITLE_SIZE="Joomla Article Title:"
TPL_GK_LANG_JOOMLA_ARTICLE_TITLE_SIZE_DESC="You can specify Joomla article title font size in here by using example 20px or 100%"
TPL_GK_LANG_JOOMLA_ARTICLE_BLOG_TITLE_SIZE="Joomla Blog Layout Article Title:"
TPL_GK_LANG_JOOMLA_ARTICLE_BLOG_TITLE_SIZE_DESC="You can specify Joomla blog layout article titles font size in here by using example 20px or 100%"


Find File: "Joomla Roottemplatesgk_twn2templateDetails.xml"
Find Line: 326
Which is :

Code: Select all

            <field name="font_rules_group3" type="textarea" rows="6" cols="40" label="TPL_GK_LANG_FONT_RULES_G3" description="TPL_GK_LANG_FONT_RULES_G3_DESC" />


Add after Following:

Code: Select all

            <field name="gk_line_17" type="line" text="TPL_GK_LANG_TEXT_SIZE_TEXT" />
            
            <field name="text_size_switch" type="list" class="gk_switch" default="0" label="TPL_GK_LANG_TEXT_SIZE_SWITCH" description="TPL_GK_LANG_TEXT_SIZE_SWITCH_DESC">
               <option value="1">TPL_GK_LANG_ENABLED</option>
               <option value="0">TPL_GK_LANG_DISABLED</option>
            </field>
            
            <field name="main_menu_title" type="text" class="small tright suffix-pxorpercents" default="18px" label="TPL_GK_LANG_MAIN_MENU_TEXT_SIZE" description="TPL_GK_LANG_MAIN_MENU_TEXT_SIZE_DESC" />
            
            <field name="k2_article_title" type="text" class="small tright suffix-pxorpercents" default="35px" label="TPL_GK_LANG_K2_ARTICLE_TITLE_SIZE" description="TPL_GK_LANG_K2_ARTICLE_TITLE_SIZE_DESC" />
            
            <field name="k2_article_category_title" type="text" class="small tright suffix-pxorpercents" default="28px" label="TPL_GK_LANG_K2_CATEGORY_ARTICLE_TITLE_SIZE" description="TPL_GK_LANG_K2_CATEGORY_ARTICLE_TITLE_SIZE_DESC" />
            
            <field name="joomla_article_title" type="text" class="small tright suffix-pxorpercents" default="35px" label="TPL_GK_LANG_JOOMLA_ARTICLE_TITLE_SIZE" description="TPL_GK_LANG_JOOMLA_ARTICLE_TITLE_SIZE_DESC" />

            <field name="joomla_article_blog_title" type="text" class="small tright suffix-pxorpercents" default="35px" label="TPL_GK_LANG_JOOMLA_ARTICLE_BLOG_TITLE_SIZE" description="TPL_GK_LANG_JOOMLA_ARTICLE_BLOG_TITLE_SIZE_DESC" />


Find File: "joomla Roottemplatesgk_twn2layoutsblockshead.php"
Find Line: 48 to 51 which is below

Code: Select all

   // include CSS Override
   if($this->getParam("css_override", '0')) {
      $this->addCSS($this->URLtemplate() . '/css/override.css');
   }


Add after below code:

Code: Select all

   // include Text Size Override
   if($this->getParam("text_size_switch", '0')) {
      $this->addCSSRule('#gkMainMenu > div > ul > li > a { font-size: ' . $this->getParam('main_menu_title','18px') . '; }');
      $this->addCSSRule('.itemHeader .itemTitle { font-size: ' . $this->getParam('k2_article_title','35px') . '; }');
      $this->addCSSRule('.catItemHeader .catItemTitle a { font-size: ' . $this->getParam('k2_article_category_title','28px') . '; }');
      $this->addCSSRule('#gkComponent > div > h1, #gkComponent > div > h2, #gkComponent > div > h1 a, #gkComponent > div > h2 a { font-size: ' . $this->getParam('joomla_article_title','35px') . '; }');
      $this->addCSSRule('.article-meta.blog > h2 { font-size: ' . $this->getParam('joomla_article_blog_title','35px') . '; }');
   }


Thats it...
Now you can enable and change font size from template settings...

This worked great!!! Thank you!!!

No problem at all...

THANK YOU +++++

Now this is a hot mod! How about adding a into text box to NSP for H2 tags?

I have just looked but couldn't find any h2 tags in homepage source, any demo link for those H2 tags?

gavick templates don't have H2 tags, none that I've ever seen. H1,H3,H4 but never H2, Google uses then to describe the parts and modules of your site. but NSP doesn't have that capability. So my SEO score is always down because of no H2 tags, The text could be wrapped in a H2 tag or the field could be used for a description of the content. JA has a module where you can put a bit of text under the module header and then the body of the module started.

The only other solution is to put NSP in a tab to get the same result, but GK tabs has a static height so that's not always a viable solution.

Well it is easy converting module h4 to h2 tag , let me know which version you are using and i ll convert them for you.

H2 is useless without a H1 right before it as far as Google is concerned, thats why I was looking for a text box in NSP where we could put anything we want:

me personally I would put a H1 Tage with a title and then follow that with a description in a H2. Turn the text white with a line-height of 1px; font-size: 1px; . So I could get every important module the ability to be seen and index by google. But a text box that displays text or a image above the NSP content would be really nice.

Well same thing , convert h4 header titles to h1 titles and convert content to h2 titles. Is that what you meant?

No I want a text box in NSP that displays whatever I want lol. But the H1/H2 usage was just one of the ways I was going to use it. but if I can't get that then the conversion would atleast take care of one of the issues with the templates.

PS my version of NSP is Version: 2.7




From Google

The H1, H2, H3... tags are used to mark up headings on the page, with H1 being the most important, then H2, then H3 etc. In most cases, you'd only expect to see one H1 per page - holding the main page title. You might have dozens of H2's and below.

Now my thinking is the titles for the modules should be H2's Google doesn't like mutiple H1's as they reserve H1 for the title page, Gavick templates are oblivious to the second most important and most flexible tag there is.. the H2.

Here is Converted mod_news_pro_gk4_J17! v2.7 with H2 tags in title.
Extract the contents and upload to your site.

Following files gets overwritten so you should backup.

Code: Select all

modulesmod_news_pro_gk4tmpllayout.parts.php
modulesmod_news_pro_gk4interfacecssstyle.css
modulesmod_news_pro_gk4interfacecssstyle.portal.mode.1.css
modulesmod_news_pro_gk4interfacecssstyle.portal.mode.2.css
templatesgk_twn2cssgk.stuff.css
templatesgk_twn2cssstyle1.css
templatesgk_twn2cssstyle2.css
templatesgk_twn2cssstyle3.css
templatesgk_twn2cssstyle4.css
templatesgk_twn2cssstyle5.css
templatesgk_twn2cssstyle6.css


Also in template settings > Fonts > Headers - selectors >
Change

Code: Select all

div.header .nspLinks ul li h4,


into

Code: Select all

div.header .nspLinks ul li h2,


lol your like me, you think too fast lol, 1. no file to download, 2. we never discussed a template, but no worries i can scan for changes to see what you did and convert it. I thank you for even taking the time to do this.

lol there it is

Change all h4 to h2

templatesgk_twn2cssgk.stuff.css

Code: Select all

   Line 136: .nspArt h4.nspHeader,
   Line 137: .nspArt h4.nspHeader a { font-size:18px; }
   Line 138: .nspArt h4.nspHeader { line-height:16px; margin-bottom: 6px; margin-top: 5px }
   Line 140: .nspLinks h4 a { }
   Line 141: .nspLinks h4 a:hover,
   Line 142: .nspArt h4.nspHeader a:hover { }
   Line 161: .nspLinks ul li h4 { font-size:12px; line-height:1.2!important; font-weight: bold; font-family: Arial, Verdana, sans-serif; margin-bottom: 4px; }
   Line 176: .big_title .nspArt h4.nspHeader,
   Line 177: .big_title .nspArt h4.nspHeader a { font-size:28px; line-height: 32px; }
   Line 180: .big_title .nspLinks ul li h4 { font-size:10px; line-height:160%; font-weight: bold; font-family: Arial, Verdana, sans-serif; margin-bottom: 4px; text-transform: uppercase; }
   Line 186: .color_title .nspArt h4.nspHeader { margin-bottom: 18px!important; margin-top: 0!important; padding-top: 18px!important; }
   Line 187: .color_title .nspArt h4.nspHeader,
   Line 188: .color_title .nspArt h4.nspHeader a { color: #a5240e; }
   Line 189: .color_title .nspArt h4.nspHeader:hover,
   Line 190: .color_title .nspArt h4.nspHeader a:hover { color: #333; }
   Line 193: .color_title .nspLinks ul li h4 { font-size:10px; line-height:160%; font-weight: bold; font-family: Arial, Verdana, sans-serif; margin-bottom: 4px; text-transform: uppercase; }
   Line 217: div.header .nspLinks ul li h4 { line-height: 1.2!important; font-weight:normal; font-size: 16px; }
   Line 242: .gkmenu .module .nspArt h4.nspHeader,
   Line 243: .gkmenu .module .nspArt h4.nspHeader a,
   Line 244: .gkmenu .group-content .nspArt h4.nspHeader,
   Line 245: .gkmenu .group-content .nspArt h4.nspHeader a { font-size: 14px!important; }


templatesgk_twn2cssstyle1.css

Code: Select all

   Line 95: .color_title .nspArt h4.nspHeader,
   Line 96: .color_title .nspArt h4.nspHeader a { color: #a5240e; }
   Line 134: #cProfileWrapper .cModule.gk-grey h4,


templatesgk_twn2cssstyle2.css

Code: Select all

   Line 99: .color_title .nspArt h4.nspHeader,
   Line 100: .color_title .nspArt h4.nspHeader a { color: #3d77b1; }
   Line 141: #cProfileWrapper .cModule.gk-grey h4,


templatesgk_twn2cssstyle3.css

Code: Select all

   Line 99: .color_title .nspArt h4.nspHeader,
   Line 100: .color_title .nspArt h4.nspHeader a { color: #c8270c; }
   Line 141: #cProfileWrapper .cModule.gk-grey h4,


templatesgk_twn2cssstyle4.css

Code: Select all

   Line 99: .color_title .nspArt h4.nspHeader,
   Line 100: .color_title .nspArt h4.nspHeader a { color: #64882c; }
   Line 142: #cProfileWrapper .cModule.gk-grey h4,


templatesgk_twn2cssstyle5.css

Code: Select all

   Line 99: .color_title .nspArt h4.nspHeader,
   Line 100: .color_title .nspArt h4.nspHeader a { color: #7e5c5b; }
   Line 142: #cProfileWrapper .cModule.gk-grey h4,


templatesgk_twn2cssstyle6.css

Code: Select all

   Line 99: .color_title .nspArt h4.nspHeader,
   Line 100: .color_title .nspArt h4.nspHeader a { color: #d63057; }
   Line 142: #cProfileWrapper .cModule.gk-grey h4,


NormanUK where the hell did you come from? You really don't work for Gavick do you? we don't get this type of treatment around here man.. Look dude, you just guaranteed Gavick another year of subscription from me.. If you ever leave Gavick so will I. You can have my sister... want her number?

No problem at all, hope it works the way you wanted.

See you around...

I have downloaded World News II for Joomla 2.5, but this feature which allows you to change font size in the template settings is not available - is that correct?

Joomla Version : 1.7
Template Version: 2.3
What this does: Adds text size options under template features font category which you can change your Menu Text Size, Joomla Article Titles, K2 Article Titles.
Who is this for: Users asking how to change article titles in forums.
Should it be added to feature templates: Yes i think so considering amount of users are asking in forums.
How this looks:

How mod works: Once enabled adds required css into the template.
Does it work on other templates: Technique is same and will work but might need to be adjusted in few templates.

Mod Starts here:
Find File: "joomla rootlanguageen-GBen-GB.tpl_gk_twn2.ini"
Add at the end following strings:

Code: Select all

TPL_GK_LANG_TEXT_SIZE_TEXT="Text Size Options"
TPL_GK_LANG_TEXT_SIZE_SWITCH="Enable / Disable Title Text Size"
TPL_GK_LANG_TEXT_SIZE_SWITCH_DESC="You can enable or disable text size overrides option by turning switch to on"
TPL_GK_LANG_MAIN_MENU_TEXT_SIZE="Main Menu:"
TPL_GK_LANG_MAIN_MENU_TEXT_SIZE_DESC="You can specify main menu title font size in here by using example 20px or 100%"
TPL_GK_LANG_K2_ARTICLE_TITLE_SIZE="K2 Article Title:"
TPL_GK_LANG_K2_ARTICLE_TITLE_SIZE_DESC="You can specify K2 article title font size in here by using example 20px or 100%"
TPL_GK_LANG_K2_CATEGORY_ARTICLE_TITLE_SIZE="K2 Category Layout Article Title:"
TPL_GK_LANG_K2_CATEGORY_ARTICLE_TITLE_SIZE_DESC="You can specify K2 category layout article title font size in here by using example 20px or 100%"
TPL_GK_LANG_JOOMLA_ARTICLE_TITLE_SIZE="Joomla Article Title:"
TPL_GK_LANG_JOOMLA_ARTICLE_TITLE_SIZE_DESC="You can specify Joomla article title font size in here by using example 20px or 100%"
TPL_GK_LANG_JOOMLA_ARTICLE_BLOG_TITLE_SIZE="Joomla Blog Layout Article Title:"
TPL_GK_LANG_JOOMLA_ARTICLE_BLOG_TITLE_SIZE_DESC="You can specify Joomla blog layout article titles font size in here by using example 20px or 100%"


Find File: "Joomla Roottemplatesgk_twn2templateDetails.xml"
Find Line: 326
Which is :

Code: Select all

            <field name="font_rules_group3" type="textarea" rows="6" cols="40" label="TPL_GK_LANG_FONT_RULES_G3" description="TPL_GK_LANG_FONT_RULES_G3_DESC" />


Add after Following:

Code: Select all

            <field name="gk_line_17" type="line" text="TPL_GK_LANG_TEXT_SIZE_TEXT" />
            
            <field name="text_size_switch" type="list" class="gk_switch" default="0" label="TPL_GK_LANG_TEXT_SIZE_SWITCH" description="TPL_GK_LANG_TEXT_SIZE_SWITCH_DESC">
               <option value="1">TPL_GK_LANG_ENABLED</option>
               <option value="0">TPL_GK_LANG_DISABLED</option>
            </field>
            
            <field name="main_menu_title" type="text" class="small tright suffix-pxorpercents" default="18px" label="TPL_GK_LANG_MAIN_MENU_TEXT_SIZE" description="TPL_GK_LANG_MAIN_MENU_TEXT_SIZE_DESC" />
            
            <field name="k2_article_title" type="text" class="small tright suffix-pxorpercents" default="35px" label="TPL_GK_LANG_K2_ARTICLE_TITLE_SIZE" description="TPL_GK_LANG_K2_ARTICLE_TITLE_SIZE_DESC" />
            
            <field name="k2_article_category_title" type="text" class="small tright suffix-pxorpercents" default="28px" label="TPL_GK_LANG_K2_CATEGORY_ARTICLE_TITLE_SIZE" description="TPL_GK_LANG_K2_CATEGORY_ARTICLE_TITLE_SIZE_DESC" />
            
            <field name="joomla_article_title" type="text" class="small tright suffix-pxorpercents" default="35px" label="TPL_GK_LANG_JOOMLA_ARTICLE_TITLE_SIZE" description="TPL_GK_LANG_JOOMLA_ARTICLE_TITLE_SIZE_DESC" />

            <field name="joomla_article_blog_title" type="text" class="small tright suffix-pxorpercents" default="35px" label="TPL_GK_LANG_JOOMLA_ARTICLE_BLOG_TITLE_SIZE" description="TPL_GK_LANG_JOOMLA_ARTICLE_BLOG_TITLE_SIZE_DESC" />


Find File: "joomla Roottemplatesgk_twn2layoutsblockshead.php"
Find Line: 48 to 51 which is below

Code: Select all

   // include CSS Override
   if($this->getParam("css_override", '0')) {
      $this->addCSS($this->URLtemplate() . '/css/override.css');
   }


Add after below code:

Code: Select all

   // include Text Size Override
   if($this->getParam("text_size_switch", '0')) {
      $this->addCSSRule('#gkMainMenu > div > ul > li > a { font-size: ' . $this->getParam('main_menu_title','18px') . '; }');
      $this->addCSSRule('.itemHeader .itemTitle { font-size: ' . $this->getParam('k2_article_title','35px') . '; }');
      $this->addCSSRule('.catItemHeader .catItemTitle a { font-size: ' . $this->getParam('k2_article_category_title','28px') . '; }');
      $this->addCSSRule('#gkComponent > div > h1, #gkComponent > div > h2, #gkComponent > div > h1 a, #gkComponent > div > h2 a { font-size: ' . $this->getParam('joomla_article_title','35px') . '; }');
      $this->addCSSRule('.article-meta.blog > h2 { font-size: ' . $this->getParam('joomla_article_blog_title','35px') . '; }');
   }


Thats it...
Now you can enable and change font size from template settings...

This was a mod and it is not part of the template. See you around...

Hi NormanUK,

Is it possible to create something like this and put it into the template for World News II Joomla 2.5?

That would make a lot of things easier I think.

Best

Louis

Great!

Thanks a lot!

Possible plugin to change font sizes. See below image, no eta at the moment.
http://i44.tinypic.com/a2us6a.jpg

See you around...

Please, Norman: DO IT!

Please, Norman: DO IT!

Yes! Norman please do it

It would really help a lot of us.

Work in progress, will update this topic when possible. See you around...

Work in progress, will update this topic when possible. See you around...

What a wonderful world - and now even the sun i shining!
Thank you so much.

Louis

Hi,
I hope your'e doing fine. Have a nice weekend.

We all really appreciate your efforts.

Best

Louis

Just to update you guys I was away for a few weeks so I am back to working on this plugin and currently just adding more classes and testing with different templates as I go along.

See you around...

Hi Norman UK!

Thanks a lot. This is great news!

Best

Louis

Hi Louis,

You asked me to help with this one but I have to say sorry because it's a customization from Norman so I can't support. Hopefully he will have some update for you soon.

Cheers,

Yes I am still working on this, adding too many css classes for fonts obviously slows down site performance. So I am adding file mode in settings which will create a secondary css file on the fly which will contain required font size css codes for those who enables a lot of font size changes. Those few fonts changes will change on the fly without creating css file.

Also testing font color options but I guess that will not go well considering different colors in different templates.

I ll keep you guys updated.

See you guys around...

I tried to do that on Game News Template, but it didn't work. How can I solve that?

I just tried everything I found on the posts but not worked.

Thank you

I gave up on this idea for the time being due to constant changes in css selectors. So in this case probably css has changed which if you follow the mod which has old css then it will not take effect.

If you tell me which font sizes you want to change I can correct the required css for your template.

See you around...