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

Discuss the FAQ's here, and get in touch with the FAQ Team.
buddhaboa
Joomla! Intern
Joomla! Intern
Posts: 54
Joined: Mon Sep 05, 2005 11:27 am
Contact:

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

Post by buddhaboa » Tue Oct 04, 2005 11:12 am

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?
Last edited by guilliam on Wed Feb 08, 2006 5:18 am, edited 1 time in total.

 
User avatar
eike
Joomla! Explorer
Joomla! Explorer
Posts: 388
Joined: Thu Aug 18, 2005 12:41 pm
Location: Berlin / Germany
Contact:

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

Post by eike » 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
Joomla! Apprentice
Joomla! Apprentice
Posts: 26
Joined: Wed Aug 24, 2005 4:23 am

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

Post by darkchild » Tue Oct 18, 2005 9:20 pm

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
Nowadays silence is looked on as odd and most of my race has forgotten the beauty of meaning much by saying little. Now tongues work all by themselves with no help from the mind

User avatar
eike
Joomla! Explorer
Joomla! Explorer
Posts: 388
Joined: Thu Aug 18, 2005 12:41 pm
Location: Berlin / Germany
Contact:

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

Post by eike » 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: 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

darkchild
Joomla! Apprentice
Joomla! Apprentice
Posts: 26
Joined: Wed Aug 24, 2005 4:23 am

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

Post by darkchild » Wed Oct 19, 2005 12:39 am

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
Nowadays silence is looked on as odd and most of my race has forgotten the beauty of meaning much by saying little. Now tongues work all by themselves with no help from the mind

buddhaboa
Joomla! Intern
Joomla! Intern
Posts: 54
Joined: Mon Sep 05, 2005 11:27 am
Contact:

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

Post by buddhaboa » Thu Nov 24, 2005 9:54 am

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

User avatar
eike
Joomla! Explorer
Joomla! Explorer
Posts: 388
Joined: Thu Aug 18, 2005 12:41 pm
Location: Berlin / Germany
Contact:

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

Post by eike » 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: Select all

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

...
-- eike

venus
Joomla! Apprentice
Joomla! Apprentice
Posts: 7
Joined: Fri Dec 16, 2005 10:05 am

How to adjust Font size as this site?

Post by venus » Fri Dec 16, 2005 10:21 am

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
Last edited by Slixter on Fri Dec 16, 2005 5:33 pm, edited 1 time in total.


venus
Joomla! Apprentice
Joomla! Apprentice
Posts: 7
Joined: Fri Dec 16, 2005 10:05 am

Re: How to adjust Font size as this site?

Post by venus » Fri Dec 16, 2005 3:01 pm

:'(

i'm try, Thk

User avatar
r0tt3n
Joomla! Apprentice
Joomla! Apprentice
Posts: 44
Joined: Wed Dec 14, 2005 8:32 pm
Location: Call Eee Phorn Yah
Contact:

Re: How to adjust Font size as this site?

Post by r0tt3n » Fri Dec 16, 2005 3:27 pm

Perhaps the title of this forum header should be changed to "solved" ?
"Quis Custodiet Ipsos Custodes?" - Juvenal

Literal Translation: Who will guard the guards?
Not-So-Literal Translation: If one group is the police of the world, who will police them?

User avatar
guilliam
Joomla! Virtuoso
Joomla! Virtuoso
Posts: 4181
Joined: Thu Aug 18, 2005 10:27 am
Location: Sunny City Cebu, Philippines!
Contact:

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

Post by guilliam » Fri Dec 16, 2005 5:27 pm

.



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



.
"I was one of those who wondered why people would pay so much $$$$ to do something that was so much fun!" -R. Harkrider, Fortran Code Engr.

http://www.joomlaconsultancy.net

venus
Joomla! Apprentice
Joomla! Apprentice
Posts: 7
Joined: Fri Dec 16, 2005 10:05 am

Re: How to adjust Font size as this site?

Post by venus » Sat Dec 17, 2005 1:31 am

not 100% how to do  :-*

User avatar
pattaya
Joomla! Explorer
Joomla! Explorer
Posts: 338
Joined: Sat Dec 17, 2005 4:58 am
Location: Thailand
Contact:

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

Post by pattaya » 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: 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);
}
Last edited by spignataro on Tue Jan 24, 2006 2:10 pm, edited 1 time in total.
http://www.vincentmoving.com Vancouver Movers
http://www.xuzo.com Web Design Services

User avatar
translatum
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 118
Joined: Sat Dec 31, 2005 12:54 am
Contact:

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

Post by translatum » Mon Jan 02, 2006 11:53 am

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 */
Last edited by translatum on Mon Jan 02, 2006 12:01 pm, edited 1 time in total.

User avatar
translatum
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 118
Joined: Sat Dec 31, 2005 12:54 am
Contact:

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

Post by translatum » Mon Jan 02, 2006 12:48 pm

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;
Last edited by translatum on Mon Jan 02, 2006 3:23 pm, edited 1 time in total.

gravesend46
Joomla! Intern
Joomla! Intern
Posts: 54
Joined: Thu Sep 29, 2005 4:20 pm

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

Post by gravesend46 » Fri Jan 06, 2006 10:39 am

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.

User avatar
guilliam
Joomla! Virtuoso
Joomla! Virtuoso
Posts: 4181
Joined: Thu Aug 18, 2005 10:27 am
Location: Sunny City Cebu, Philippines!
Contact:

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

Post by guilliam » 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
"I was one of those who wondered why people would pay so much $$$$ to do something that was so much fun!" -R. Harkrider, Fortran Code Engr.

http://www.joomlaconsultancy.net

magsglass
Joomla! Apprentice
Joomla! Apprentice
Posts: 11
Joined: Fri Sep 30, 2005 10:19 pm

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

Post by magsglass » Mon Jan 16, 2006 6:54 pm

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
Joomla! Apprentice
Joomla! Apprentice
Posts: 7
Joined: Wed Dec 07, 2005 9:01 pm

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

Post by cvc505 » Sat Feb 04, 2006 6:04 am

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?

User avatar
guilliam
Joomla! Virtuoso
Joomla! Virtuoso
Posts: 4181
Joined: Thu Aug 18, 2005 10:27 am
Location: Sunny City Cebu, Philippines!
Contact:

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

Post by guilliam » 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
"I was one of those who wondered why people would pay so much $$$$ to do something that was so much fun!" -R. Harkrider, Fortran Code Engr.

http://www.joomlaconsultancy.net

GraeSmith
Joomla! Apprentice
Joomla! Apprentice
Posts: 10
Joined: Mon Nov 14, 2005 9:31 pm

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

Post by GraeSmith » Sun Feb 05, 2006 7:35 pm

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.

User avatar
guilliam
Joomla! Virtuoso
Joomla! Virtuoso
Posts: 4181
Joined: Thu Aug 18, 2005 10:27 am
Location: Sunny City Cebu, Philippines!
Contact:

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

Post by guilliam » Sun Feb 05, 2006 9:05 pm

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
"I was one of those who wondered why people would pay so much $$$$ to do something that was so much fun!" -R. Harkrider, Fortran Code Engr.

http://www.joomlaconsultancy.net

GraeSmith
Joomla! Apprentice
Joomla! Apprentice
Posts: 10
Joined: Mon Nov 14, 2005 9:31 pm

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

Post by GraeSmith » Sun Feb 05, 2006 9:52 pm

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.

User avatar
Joomlawebber
Joomla! Explorer
Joomla! Explorer
Posts: 300
Joined: Wed Aug 17, 2005 10:12 pm
Location: Denmark
Contact:

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

Post by Joomlawebber » 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:
/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
If there is a bird flue, what happened to the egg flue?

User avatar
guilliam
Joomla! Virtuoso
Joomla! Virtuoso
Posts: 4181
Joined: Thu Aug 18, 2005 10:27 am
Location: Sunny City Cebu, Philippines!
Contact:

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

Post by guilliam » 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: Select all

td, tr, p, div {
  font-family       : Arial, Helvetica, sans-serif;
  color             : #666666;
}
- g
"I was one of those who wondered why people would pay so much $$$$ to do something that was so much fun!" -R. Harkrider, Fortran Code Engr.

http://www.joomlaconsultancy.net

User avatar
guilliam
Joomla! Virtuoso
Joomla! Virtuoso
Posts: 4181
Joined: Thu Aug 18, 2005 10:27 am
Location: Sunny City Cebu, Philippines!
Contact:

Re: How to adjust Font size as this site?

Post by guilliam » 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
"I was one of those who wondered why people would pay so much $$$$ to do something that was so much fun!" -R. Harkrider, Fortran Code Engr.

http://www.joomlaconsultancy.net

shaikat
Joomla! Fledgling
Joomla! Fledgling
Posts: 3
Joined: Sat Feb 18, 2006 6:02 pm

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

Post by shaikat » Sun Feb 26, 2006 11:33 am

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>

User avatar
guilliam
Joomla! Virtuoso
Joomla! Virtuoso
Posts: 4181
Joined: Thu Aug 18, 2005 10:27 am
Location: Sunny City Cebu, Philippines!
Contact:

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

Post by guilliam » 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
"I was one of those who wondered why people would pay so much $$$$ to do something that was so much fun!" -R. Harkrider, Fortran Code Engr.

http://www.joomlaconsultancy.net

shaikat
Joomla! Fledgling
Joomla! Fledgling
Posts: 3
Joined: Sat Feb 18, 2006 6:02 pm

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

Post by shaikat » Sun Feb 26, 2006 7:26 pm

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  :-[
Last edited by spignataro on Sun Feb 26, 2006 7:39 pm, edited 1 time in total.

 

Locked

Return to “FAQ Discussion Board”