Page 1 of 3

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

Posted: Tue Oct 04, 2005 11:12 am
by buddhaboa
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?

Re: CSS Text Sizing (A+ A-) and hard coding

Posted: Tue Oct 04, 2005 11:25 am
by eike
Styles applied with inline-styles or font-tags will stay, styles applied by classes in a style sheet will change.

-- eike

Re: CSS Text Sizing (A+ A-) and hard coding

Posted: Tue Oct 18, 2005 9:20 pm
by darkchild
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

Re: CSS Text Sizing (A+ A-) and hard coding

Posted: Tue Oct 18, 2005 11:12 pm
by eike
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: Select all

<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

Re: CSS Text Sizing (A+ A-) and hard coding

Posted: Wed Oct 19, 2005 12:39 am
by darkchild
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: Select all

<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

Re: CSS Text Sizing (A+ A-) and hard coding

Posted: Thu Nov 24, 2005 9:54 am
by buddhaboa
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: Select all

<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

Re: CSS Text Sizing (A+ A-) and hard coding

Posted: Thu Nov 24, 2005 10:33 am
by eike
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: Select all

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

...
-- eike

How to adjust Font size as this site?

Posted: Fri Dec 16, 2005 10:21 am
by venus
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

Re: How to adjust Font size as this site?

Posted: Fri Dec 16, 2005 10:23 am
by fierce12205

Re: How to adjust Font size as this site?

Posted: Fri Dec 16, 2005 3:01 pm
by venus
:'(

i'm try, Thk

Re: How to adjust Font size as this site?

Posted: Fri Dec 16, 2005 3:27 pm
by r0tt3n
Perhaps the title of this forum header should be changed to "solved" ?

Re: CSS Text Sizing (A+ A-) and hard coding

Posted: Fri Dec 16, 2005 5:27 pm
by guilliam
.



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



.

Re: How to adjust Font size as this site?

Posted: Sat Dec 17, 2005 1:31 am
by venus
not 100% how to do  :-*

Re: CSS Text Sizing (A+ A-) and hard coding

Posted: Mon Jan 02, 2006 2:29 am
by pattaya
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: Select all

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);
}

Re: CSS Text Sizing (A+ A-) and hard coding

Posted: Mon Jan 02, 2006 11:53 am
by translatum
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: Select all

/* 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 */

Re: CSS Text Sizing (A+ A-) and hard coding

Posted: Mon Jan 02, 2006 12:48 pm
by translatum
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: Select all

div, p, table, td, th {
	font-size: 1em;
	color: #333;
I could not make the heading style though increase:

Code: Select all

.contentheading {
	color: #666666;
	font-size: 15px;
	font-weight: bold;
When I tried this:

Code: Select all

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

Re: CSS Text Sizing (A+ A-) and hard coding

Posted: Fri Jan 06, 2006 10:39 am
by gravesend46
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.

Re: CSS Text Sizing (A+ A-) and hard coding

Posted: Mon Jan 16, 2006 12:26 pm
by guilliam
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

Re: CSS Text Sizing (A+ A-) and hard coding

Posted: Mon Jan 16, 2006 6:54 pm
by magsglass
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

Re: CSS Text Sizing (A+ A-) and hard coding

Posted: Sat Feb 04, 2006 6:04 am
by cvc505
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?

Re: CSS Text Sizing (A+ A-) and hard coding

Posted: Sun Feb 05, 2006 1:29 pm
by guilliam
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

Re: CSS Text Sizing (A+ A-) and hard coding

Posted: Sun Feb 05, 2006 7:35 pm
by GraeSmith
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.

Re: CSS Text Sizing (A+ A-) and hard coding

Posted: Sun Feb 05, 2006 9:05 pm
by guilliam
try this instead:

1.

Code: Select all

<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

Re: CSS Text Sizing (A+ A-) and hard coding

Posted: Sun Feb 05, 2006 9:52 pm
by GraeSmith
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.

Re: CSS Text Sizing (A+ A-) and hard coding

Posted: Mon Feb 06, 2006 2:04 pm
by Joomlawebber
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:
/templates/yourtemplatename/js/textstyleswitcher.js">
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

Re: CSS Text Sizing (A+ A-) and hard coding

Posted: Wed Feb 08, 2006 4:38 am
by guilliam
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: Select all

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

Re: How to adjust Font size as this site?

Posted: Wed Feb 08, 2006 5:19 am
by guilliam
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

Re: CSS Text Sizing (A+ A-) and hard coding

Posted: Sun Feb 26, 2006 11:33 am
by shaikat
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: Select all

<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>

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

Posted: Sun Feb 26, 2006 2:19 pm
by guilliam
1. try making a call to a separate .js file and dont place it on the head. as per the instruction given :)

- g

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

Posted: Sun Feb 26, 2006 7:26 pm
by shaikat
thanks for the reply g

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

Code: Select all

<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  :-[