DISCUSSION: CSS Text/Font Resizing (A+ A-) on Joomla Template

buddhaboa · **Joined:** Mon Sep 05, 2005 11:27 am **Posts:** 54

On the Joomla template they have this nice ability to resize text by clicking
A+ A- Reset function in the upper right hand side of the header.

How does this work is a text editor like MosCE is used and the text is hardcoded in the editor to be Veranda 9pt? Does the CSS text sizing function override it or will the text remain forever 9pt?

eike · **Posted:** Tue Oct 04, 2005 11:25 am

Styles applied with inline-styles or font-tags will stay, styles applied by classes in a style sheet will change.

-- eike

darkchild · **Joined:** Wed Aug 24, 2005 4:23 am **Posts:** 22

Does anyone have the addon to actually implement text resizing as seen on the joomla.org. I have searched these forums and whilst people have discussed this, I haven't found the addon anywhere.

p.s thanx in advance

eike · **Posted:** Tue Oct 18, 2005 11:12 pm

Easiest way is to steal the Javascript-File with the Styleswitcher:

http://forum.joomla.org/Themes/joomla/m ... changer.js

and include it in your template.

This implementation is extremly generic, so copyright shouldn't be an issue.

Then include some links in your template with the necessary Javascript event handlers:

Code:

<a href="index.php" title="Increase size" onclick="changeFontSize(1);return false;">
larger
</a>

<a href="index.php" title="Decrease size" onclick="changeFontSize(-1);return false;">
smaller
</a>

<a href="index.php" title="Revert styles to default" onclick="revertStyles(); return false;">
set default
</a>

Or you may use alternate style sheets as described here:

http://www.alistapart.com/articles/alternate/

A Google search for "Javascript Style Switcher" should bring up some more ways to do this.

-- eike

darkchild · **Joined:** Wed Aug 24, 2005 4:23 am **Posts:** 22

Thanks a mil, buddy. Implemented it and its working fine.

eike wrote:

Easiest way is to steal the Javascript-File with the Styleswitcher:

http://forum.joomla.org/Themes/joomla/m ... changer.js

and include it in your template.

This implementation is extremly generic, so copyright shouldn't be an issue.

Then include some links in your template with the necessary Javascript event handlers:

Code:

<a href="index.php" title="Increase size" onclick="changeFontSize(1);return false;">
larger
</a>

<a href="index.php" title="Decrease size" onclick="changeFontSize(-1);return false;">
smaller
</a>

<a href="index.php" title="Revert styles to default" onclick="revertStyles(); return false;">
set default
</a>

Or you may use alternate style sheets as described here:

http://www.alistapart.com/articles/alternate/

A Google search for "Javascript Style Switcher" should bring up some more ways to do this.

-- eike

buddhaboa · **Joined:** Mon Sep 05, 2005 11:27 am **Posts:** 54

Hi Eike,

does the md_stylechanger automatically add the nice Text A+ and A- buttons as found on joomla.com?

eike wrote:

Easiest way is to steal the Javascript-File with the Styleswitcher:

http://forum.joomla.org/Themes/joomla/m ... changer.js

and include it in your template.

This implementation is extremly generic, so copyright shouldn't be an issue.

Then include some links in your template with the necessary Javascript event handlers:

Code:

<a href="index.php" title="Increase size" onclick="changeFontSize(1);return false;">
larger
</a>

<a href="index.php" title="Decrease size" onclick="changeFontSize(-1);return false;">
smaller
</a>

<a href="index.php" title="Revert styles to default" onclick="revertStyles(); return false;">
set default
</a>

Or you may use alternate style sheets as described here:

http://www.alistapart.com/articles/alternate/

A Google search for "Javascript Style Switcher" should bring up some more ways to do this.

-- eike

eike · **Posted:** Thu Nov 24, 2005 10:33 am

buddhaboa wrote:

Hi Eike,

does the md_stylechanger automatically add the nice Text A+ and A- buttons as found on joomla.com?

No, these are small images. Create some small images with ++ and -- signs and put them between the anchor tags:

Code:

<a href="index.php" title="Increase size" onclick="changeFontSize(1);return false;">
<img src="imagewithplussign.png" alt="">
</a>

...

-- eike

venus · **Joined:** Fri Dec 16, 2005 10:05 am **Posts:** 7

my problem is size too small for someone as 45 years old up. I need some one help me to have site font A+ A- Reset, Please Recommend.

Rgd.
venus

fierce12205 · **Joined:** Sun Dec 04, 2005 7:49 pm **Posts:** 78

http://forum.joomla.org/index.php/topic ... 85252.html

venus · **Joined:** Fri Dec 16, 2005 10:05 am **Posts:** 7

i'm try, Thk

r0tt3n · **Posted:** Fri Dec 16, 2005 3:27 pm

Perhaps the title of this forum header should be changed to "solved" ?

guilliam · **Posted:** Fri Dec 16, 2005 5:27 pm

.

[ MODERATOR NOTE: thread to be moved to the FAQ's ]

.

venus · **Joined:** Fri Dec 16, 2005 10:05 am **Posts:** 7

not 100% how to do :-*

pattaya · **Posted:** Mon Jan 02, 2006 2:29 am

Hi there,

This is content of the .js file I'm not sure I understand what you mean by the following instruction...what file and in what location is it reffering to?

p 5: Do all of the following:

Replace ____1____ with the location in your template folder where you saved the .js file
Replace ____2____ with the name of your A+ image
Replace ____3____ with the name of your A- image
Replace ____4____ with the name of your Reset image

Code:

var prefsLoaded = false;
var defaultFontSize = 76;
var currentFontSize = defaultFontSize;

function revertStyles(){

   currentFontSize = defaultFontSize;
   changeFontSize(0);

}

function toggleColors(){
   if(currentStyle == "White"){
      setColor("Black");
   }else{
      setColor("White");
   }
}

function changeFontSize(sizeDifference){
   currentFontSize = parseInt(currentFontSize) + parseInt(sizeDifference * 5);

   if(currentFontSize > 100){
      currentFontSize = 100;
   }else if(currentFontSize < 60){
      currentFontSize = 60;
   }

   setFontSize(currentFontSize);
};

function setFontSize(fontSize){
   var stObj = (document.getElementById) ? document.getElementById('content_area') : document.all('content_area');
   document.body.style.fontSize = fontSize + '%';
   
   //alert (document.body.style.fontSize);
};


function createCookie(name,value,days) {
  if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
  }
  else expires = "";
  document.cookie = name+"="+value+expires+"; path=/";
};

function readCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
};

window.onload = setUserOptions;

function setUserOptions(){
   if(!prefsLoaded){

      cookie = readCookie("fontSize");
      currentFontSize = cookie ? cookie : defaultFontSize;
      setFontSize(currentFontSize);
      
      prefsLoaded = true;
   }

}

window.onunload = saveSettings;

function saveSettings()
{
  createCookie("fontSize", currentFontSize, 365);
}

translatum · **Joined:** Sat Dec 31, 2005 12:54 am **Posts:** 96

I have tried to implement this, and when I have no images only the text "larger/smaller" changes. Is there something I need to do in my stylesheet so that it applies to body text size for example?

http://www.nonsmokersclub.com/

Here is the style sheet

Code:

/* SITE LAYOUT */
body {
   margin: 0;
   padding: 0;
   color: #353535;
   background: #FFFFFF;
   font: 11px Arial, Helvetica, sans-serif;
}

body#bd {
   margin: 10px 0;
   background: #585C68;
   text-align: center;
}

#container {
   width: 740px!important;
   width: 760px;
   margin: 0 auto;
   padding: 0 10px;
   background: url(../images/container-bg.gif) #FFFFFF;
   text-align: left;
}

#topnav {
   width: 740px!important;
   width: 760px;
   margin-left: auto;
   margin-right: auto;
   position: relative;
   padding: 0 10px 10px;
   background: url(../images/topnav-bg.gif) repeat-x bottom left #585C68;
   font-size: 12px;
   text-align: left;
}

#header {
   width: 100%;
   position: relative;
}

h1.header-logo {
   font-size: 20px;
   margin: 0;
   padding: 4px 10px;
   background: url(../images/logo.gif) no-repeat 10px 4px;
   height: 40px!important;
   height: 48px;
   z-index: 1;
}

h1.header-logo img {
   visibility: hidden;
}

#main {
   width: 100%;
   position: relative;
}

#leftcol {
   width: 20%;
   float: left;
   margin: 12px 26px 12px 12px;
   display: inline;
   position: relative;
}

#content {
   float: left;
   width: 73%;
   margin: 12px 0 0;
   position: relative;
   clear: right;
}

#footer {
   padding: 12px 6px 6px 0;
   color: #ABABAB;
   background: #353535;
   clear: both;
   text-align: left;
   margin-top: 12px;
}

#copyright {
   padding: 6px 12px 0;
}

#botshad {
   width: 740px!important;
   width: 760px;
   padding: 0 10px;
   margin: 0 auto;
   background: url(../images/bot-shadow.gif) repeat-x bottom left #585C68;
   height: 16px;
}

/* NAVIGATION */
#topnav ul, #footer ul {
   margin: 0;
   padding: 0;
}

#topnav li {
   display: inline;
   background: none;
   padding: 0;
}

#footer li {
   display: inline;
   line-height: normal;
   background: none;
   padding: 0;
}

ul#mainlevel li, ul#mainlevel-nav li {
   padding: 0;
   margin: 0;
   background: none;
}

#topnav a {
   border-right: 1px solid #585C68;
   padding: 0 20px 11px 1px;
   color: #E6E6E6;
   font-weight: bold;
}

#topnav a:hover, #topnav a:active {
   color: #FFFFFF;
   background: url(../images/topnav-bg-2.gif) repeat-x bottom left;
   text-decoration: none;
}

#topnav a#active_menu-top {
   color: #FFFFFF;
   background: url(../images/topnav-bg-2.gif) repeat-x bottom left;
   text-decoration: none;
}

#footer a {
   padding: 0 12px;
   border-right: 1px solid #585C68;
   color: #CCCCCC;
}

#footer a:hover, #footer a:active {
   color: #FFFFFF;
}

#leftcol a.mainlevel {
   padding-left: 12px;
   background: url(../images/arrow.png) no-repeat 0 5px;
}

a.sublevel {
   padding-left: 3px;
}

a.sublevel#active_menu {
   color: #FF6633;
   text-decoration: none;
}

/* LINKS */
a {
   color: #255EA8;
   text-decoration: none;
}

a:hover, a:active {
   color: #B91919;
   text-decoration: underline;
}

a.pagenav {
   font-weight: normal;
}

a.readon {
   padding-right: 6px;
   display: block;
   color: #B91919;
   text-decoration: none;
   text-align: right;
}

a.readon:hover, a.readon:active {
   padding-right: 0;
   color: #B91919;
   text-decoration: none;
}

#user-bar a {
   padding: 0 0 0 4px;
   background: none!important;
}

#spotlight a, #spotlight-1 a, #spotlight-2 a {
   color: #FFFFFF;
   text-decoration: underline;
}

#copyright a {
   padding: 0;
   border: none;
}

/* GENERAL */
textarea {
   padding-left: 2px;
   font: 11px/1.3em Arial, sans-serif;
}

th {
   font-weight: bold;
   font-size: 11px;
   text-align: right;
}

td {
   font-size: 12px;
}

fieldset {
   width: 538px;
   border: 0;
   margin: 0;
   padding: 6px 0 0 0;
   background: url(../images/seperator.gif) repeat-x top left;
}

fieldset a {
   font-weight: bold;
}

form {
   margin: 0;
   padding: 0;
}

h1 {
   margin: 12px 0;
   font-size: 16px;
   color: #666666;
}

h2 {
   margin: 12px 0;
   font-size: 14px;
   color: #666666;
}

h4 {
   margin: 12px 0;
   font-size: 12px;
   font-weight: bold;
   color: #666666;
}

hr {
   border-top: 1px solid #D3CCC2;
   border-right: 0;
   border-left: 0;
   border-bottom: 0;
   height: 1px;
}

input {
   margin-bottom: -1px;
   font: 11px Arial, sans-serif;
}

p {
   margin: 12px 0;
}

select {
   font: 11px Arial, sans-serif;
}

ul {
   margin: 12px;
   padding: 0;
   list-style: none;
}

ul li {
   padding-left: 12px;
   background: url(../images/arrow.png) no-repeat 0 6px;
   line-height: 140%;
}

ol {
   margin: 12px auto;
}

/* JOOMLA STYLE */
div.moduletable {
   width: auto!important;
   width: 100%;
   margin-bottom: 18px;
}

div.moduletable h3 {
   margin: 0 0 6px;
   border-top: 1px solid #F2F2F2;
   border-bottom: 1px solid #F2F2F2;
   color: #666666;
   background: url(../images/h3-bg.gif) #F2F2F2;
   font-size: 16px;
   font-weight: bold;
}

div.moduletable td {
   padding: 3px 0!important;
}

table.contentpaneopen td, table.contentpane td {
   padding: 0 2px 0 0;
   line-height: 140%;
}

table.contentpaneopen, table.contentpane, table.blog {
   width: auto!important;
   border-collapse: collapse;
   border-spacing: 0px;
}

table.moduletable {
   width: 100%;
   background: #FFFFFF;
}

table.moduletable th {
   color: #DC9B44;
   background: none;
   font-weight: bold;
   font-size: 18px;
}

.adminform textarea {
   width: 540px!important; /*Control the Frontend Editor area width*/
}

.adminform textarea.inputbox {
   width: 440px!important; /*Control the Frontend Editor area width*/
}

table.polls {
   padding: 0;
   width: 100%;
   text-align: left;
}

table.pollstableborder {
   padding: 0;
   width: 100%;
   text-align: left;
}

#content table.pollstableborder {
   width: 540px!important;
   text-align: left;
   border: none;
}

table.pollstableborder td {
   padding: 2px 4px!important;
}

table.pollstableborder img {
   vertical-align: middle;
   margin: 4px 4px 4px 0;
}

table.searchintro {
   margin: 10px 0;
   width: 100%;
   background: #F2F2F2;
}

table.searchintro td {
   padding: 0 2px!important;
}

td.buttonheading {
   padding-left: 5px!important;
}

table.contenttoc {
   border: 1px solid #666666;
   margin: 0 0 10px 10px;
   width: 150px;
   background: #F2F2F2;
}

table.contenttoc th {
   padding: 4px 6px;
   background: #666666;
   color: #FFFFFF;
}

table.contenttoc td {
   padding: 1px 6px 1px 16px;
   background: url(../images/arrow.png) no-repeat 5px 7px;
}

.blog_more {
   margin: 10px 0;
   padding: 3px;
}

.button {
   padding: 1px 4px 1px 4px;
   border: 1px solid #CCCCCC;
   margin-bottom: 2px;
   background: #585C68;
   color: #FFFFFF;
   font: 11px Arial, sans-serif;
}

.back_button {
   margin-top: 12px;
   text-align: right;
   display: block;
   width: 100%;
}

.category {
   font-weight: bold;
   font-size: 12px;
}

.code, pre {
   border: 1px solid #F0EEDE;
   width: auto;
   padding: 6px;
   background: #F7F6EE;
   font: 11px Arial, sans-serif;
}

.componentheading {
   padding-bottom: 2px;
   margin-bottom: 12px;
   color: #255EA8;
   background: url(../images/seperator.gif) repeat-x bottom left;
   font-size: 20px;
   font-weight: bold;
}

.contentdescription {
   padding: 0 0 12px!important;
   height: auto;
}

.contentheading {
   color: #666666;
   font-size: 16px;
   font-weight: bold;
}

.createdate {
   color: #666666;
   font-weight: bold;
   padding-bottom: 12px!important;
}

.error {
   color: #B91919;
}

.highlight {
   font-weight: bold;
}

.inputbox {
   padding-left: 2px;
   margin-bottom: 1px;
   font: 11px Arial, sans-serif;
}

.message {
   color: #DE9C31;
   font-weight: bold;
   font-size: 12px;
}

.modifydate {
   color: #666666;
   height: 20px;
}

.moduletable {
   padding: 0;
}

.mosimage {
   padding: 0;
   margin-right: 5px;
}

.mosimage img {
   margin: 0 6px 0 0!important;
   margin: 0 0 0 -6px;
   border: 2px solid #EFEFEF;
}

.mosimage_caption {
   margin-top: 2px;
   color: #999999;
}

.pagenav {
   padding: 2px;
}

.pagenav_prev a, .pagenav_next a {
   color: #666666;
}

.pagenav_prev a:hover, .pagenav_prev a:active, .pagenav_next a:hover, .pagenav_next a:active {
   color: #B91919;
   text-decoration: none;
}

.pagenavbar {
   padding-left: 16px;
   background: url(../images/pages.gif) no-repeat center left;
   font-weight: bold;
}

.pagenavcounter {
   padding: 0 16px 10px 16px;
   color: #666666;
   background: url(../images/pages.gif) no-repeat 0 3px;
   font-weight: bold;
}

tr.sectiontableentry1 td {
   padding: 3px 4px;
}

tr.sectiontableentry2 td {
   padding: 3px 4px;
   background: #F2F2F2;
}

.sectiontableheader {
   padding: 3px 4px!important;
   border-top: 4px solid #FFFFFF;
   background: #666666;
   color: #FFFFFF;
   font-weight: bold;
}

.sectiontableheader a, .sectiontableheader a:hover {
   color: #FFFFFF;
}

.sectiontablefooter {
   padding-bottom: 3px!important;
   background: url(../images/seperator.gif) repeat-x 0 90%;
   height: 20px;
}

.small {
   color: #666666;
}

/* PATHWAY HACKED */
#pathway {
   color: #FFFFFF;
   font-size: 0%;
   line-height: normal!important;
   line-height: 0%;
}

#pathway img {
   visibility: hidden;/* DO NOT SHOW PATHWAY DEFAULT ARROW */
}

#pathway a {
   padding-right: 10px;
   background: url(../images/arrow-off.gif) no-repeat 100% 50%;
   font-size: 11px!important;
}

#pathway a:hover, #pathway a:active {
   background: url(../images/arrow-on.gif) no-repeat 100% 50%;
   text-decoration: none;
}

#search {
   float: right;
   padding: 6px 16px 6px;
   background: url(../images/h3-bg.gif) repeat-y center right;
   position: absolute;
   top: 8px;
   right: 0;
}

.search {
   padding-left: 16px;
   background: url(../images/search-icon.gif) no-repeat center left;
}

/* MIS. */
#user-bar {
   position: absolute;
   right: 12px;
   top: 0;
   height: 10px;
}

#user-bar li, #user-bar ul {
   padding: 0;
   margin: 0;
}

#spotlight {
   background: #76B428;
   color: #FFFFFF;
   text-align: right;
   border-bottom: 1px solid #999999;
   padding: 12px 0; 
}

#spotlight div {
   padding: 0;
   margin: 0;
}

#spotlight h3 {
   margin: 0 100px 6px 0;
   border: none;
   color: #FFFFFF;
   background: none;
   font-size: 16px;
}

#spotlight table {
   background: url(../images/spotlight-bg.gif) repeat-y top left #83BD3B;
   color: #FFFFFF;
   text-align: right;
}

#spotlight td {
   padding: 8px 100px 8px 60px!important;
}

#spotlight-1 {
   width: 262px!important;
   width: 264px;
   background: #B91919;
   color: #FFFFFF;
   float: left;
   border: 1px solid #C6C6C6;
}

#spotlight-1 div {
   padding: 6px 12px;
   margin: 0;
   background: url(../images/spotlight-bg-red.gif) repeat-y top left #C12E2E;
}

#spotlight-1 h3 {
   background: #B91919;
   color: #FFFFFF;
   border: none;
   margin: -6px -12px 6px -6px;
   padding: 6px;
}

#spotlight-2 {
   width: 262px!important;
   width: 264px;
   background: #255EA8;
   color: #FFFFFF;
   float: right;
   border: 1px solid #C6C6C6;
}

#spotlight-2 div {
   padding: 6px 12px;
   margin: 0;
   background: url(../images/spotlight-bg-blue.gif) repeat-y top left #386DB2;
}

#spotlight-2 h3 {
   background: #255EA8;
   color: #FFFFFF;
   border: none;
   margin: -6px -12px 6px -6px;
   padding: 6px;
}

#leftcol ul {
   padding: 0;
   margin: 0;
}

body.contentpane {
   margin: 12px;
}

#spotlight .article_seperator {
   display: none;
}

.article_seperator {
   display: block;
   background: url(../images/seperator.gif) repeat-x top left;
}

.clearfix:after {
   clear: both;
   display: block;
   content: ".";
   height: 0;
   visibility: hidden;
}

.clearfix {display: inline-table;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

translatum · **Joined:** Sat Dec 31, 2005 12:54 am **Posts:** 96

I did find a way by adding the following, the only problem is that the change of size is not remembered when changing page...

Code:

div, p, table, td, th {
   font-size: 1em;
   color: #333;

I could not make the heading style though increase:

Code:

.contentheading {
   color: #666666;
   font-size: 15px;
   font-weight: bold;

When I tried this:

Code:

div, p, table, td, th, .contentheading {
   font-size: 1em;
   color: #333;

gravesend46 · **Joined:** Thu Sep 29, 2005 4:20 pm **Posts:** 54

Is there a way to get this working on an SMF forum only - without Joomla installed (bit of a cheeky request on a Joomla forum, I know!). I tried to install as per the instructions but it didn't work.

guilliam · **Posted:** Mon Jan 16, 2006 12:26 pm

gravesend46 wrote:

Is there a way to get this working on an SMF forum only - without Joomla installed (bit of a cheeky request on a Joomla forum, I know!). I tried to install as per the instructions but it didn't work.

im figuring out how to make this work with SMF also which is wrapped via joomla-smf.

on your second concern, it works for me.. check the site show case here: http://forum.joomla.org/index.php/topic,30461.0.html

check back on this thread on how or where you went wrong.

- g

magsglass · **Joined:** Fri Sep 30, 2005 10:19 pm **Posts:** 11

r0tt3n wrote:

I recognize that there are some of you who are sort of scratching your heads wondering how to get from where your site is now to where joomla.org's is. So for those of you wanting it layed out all the way, here's a more detailed instruction set that summarizes and extends what has already been said through the course of this thread: ~snip~

This was awesome! Thank you, r0tt3n!

~Mag

cvc505 · **Joined:** Wed Dec 07, 2005 9:01 pm **Posts:** 7

I am trying to implement this in the solarflareII template, I can get the A+, A- and reset button to appear, and when they are clicked on they seem to do something but I am not able to get the text to resize. even though the JS script is in the root of the template/solarflare folder. Any suggestions?

guilliam · **Posted:** Sun Feb 05, 2006 1:29 pm

try yo check solarflares css if it has fixed fonts sizes like 12px etc.. there should be no fixed font sizes in the css.

- g

GraeSmith · **Joined:** Mon Nov 14, 2005 9:31 pm **Posts:** 10

cvc505 wrote:

I am trying to implement this in the solarflareII template, I can get the A+, A- and reset button to appear, and when they are clicked on they seem to do something but I am not able to get the text to resize. even though the JS script is in the root of the template/solarflare folder. Any suggestions?

I seem to be having exactly the same problem. However, I've removed all the absolute foxt-sizes, but it still doesn't work. Is there an example of the css we can use? Its got to be something really simple that I'm doing wrong as everything else looks to be in place and ready to work!

Thanks.

guilliam · **Posted:** Sun Feb 05, 2006 9:05 pm

try this instead:

1.

Code:

<script type="text/javascript" language="javascript" src="<?php echo $mosConfig_live_site;?>/templates/TEMPLATE_NAME_HERE/stylechanger.js"></script>

place the stylechanger.js in the top of the template folder where the index.php and templateDetails.xml is located.

2. try making the "div, p, table, td, th" on the same class.

- g

GraeSmith · **Joined:** Mon Nov 14, 2005 9:31 pm **Posts:** 10

guilliam wrote:

try this instead:.....

......2. try making the "div, p, table, td, th" on the same class.

- g

So I have to create a new class defining all these? Sorry and thanks for trying, but its a steep learning curve and probably too steep for this sort of forum.

Joomlawebber · **Posted:** Mon Feb 06, 2006 2:04 pm

First step to do is have the right path to the .js file in your templates index.php file.

I have created a folder called js, where i put in all my javascripts.
That way it easier to manage (for me)

Calling the javascript i do like this:

Quote:

Besides that i have in my css document stated that default font size is to be 80%, and in the rest of the css i use ems, and that is working for me.

If you need any heklp, i woud gladly help yo set it up

/K

guilliam · **Posted:** Wed Feb 08, 2006 4:38 am

GraeSmith wrote:

guilliam wrote:

try this instead:.....

......2. try making the "div, p, table, td, th" on the same class.

- g

So I have to create a new class defining all these? Sorry and thanks for trying, but its a steep learning curve and probably too steep for this sort of forum.

basically, YES. should look like this:

Code:

td, tr, p, div {
  font-family       : Arial, Helvetica, sans-serif;
  color             : #666666;
}

- g

guilliam · **Posted:** Wed Feb 08, 2006 5:19 am

venus wrote:

not 100% how to do :-*

its right in here sir/mam: http://forum.joomla.org/index.php/topic,36474.0.html

further question can be done here: http://forum.joomla.org/index.php/topic,10264.0.html

- g

shaikat · **Joined:** Sat Feb 18, 2006 6:02 pm **Posts:** 3

Hi, i tried making this work, i have included the javascript link (the .js file link) in between the HEAD tags, and applied the following code (did nt use images)
but when i click the larger or smaller link, only the font size of these 3 links (bigger, smaller and set default) gets changed, not the whole page.

im not sure what to do, can anyone help me on this please.
thanks in advance.

eike wrote:

Code:

<a href="index.php" title="Increase size" onclick="changeFontSize(1);return false;">
larger
</a>

<a href="index.php" title="Decrease size" onclick="changeFontSize(-1);return false;">
smaller
</a>

<a href="index.php" title="Revert styles to default" onclick="revertStyles(); return false;">
set default
</a>

guilliam · **Posted:** Sun Feb 26, 2006 2:19 pm

1. try making a call to a separate .js file and dont place it on the head. as per the instruction given

- g

shaikat · **Joined:** Sat Feb 18, 2006 6:02 pm **Posts:** 3

thanks for the reply g

just to let you know, i put the following code -

Code:

<script type="text/javascript" language="javascript" src="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/[b]md_stylechanger.js[/b]"></script>
<a href="index.php" title="Increase size" onclick="changeFontSize(1);return false;">larger</a>

and so on ..
i put the .js file in the same directory where the index.php file is, in the template folder (the template that is set to default)
and the code is placed in the index.php file of that template (do i need to place in some specific place ?)

the thing is, the font size of the links are changing, but the page remains the same

im not an expert in these stuffs, so please dont mind my ignorance :-[

Joomla! Discussion Forums

DISCUSSION: CSS Text/Font Resizing (A+ A-) on Joomla Template

Quick reply

Who is online