Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

General Questions /

General questions about getting started with SilverStripe that don't fit in any of the categories above.

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

ability for user to set font size


Reply


4 Posts   1671 Views

Avatar
dreamstudio

Community Member, 48 Posts

14 April 2009 at 7:29pm

We need to add a function on the site where the user can click on a button to change the size of the font, from small to large. We know that on the browsers you can set this but the users in question wont be very knowledgable and we require the facility on the page so they can easily and quickly change the font sizes

We have seen it on many sites and have seen some code to do it, however does anyone have any idea on the best way of doing it via SS....based on the font size in the css and changing it? is there almost a way to change template files or reload a css file? or simply change the font size in question to different size

Avatar
Howard

Community Member, 215 Posts

14 April 2009 at 8:34pm

This is really easy - I just used this exact method [url]http://labnol.blogspot.com/2006/12/allow-site-visitors-to-change-font.html[/url] on a ss site and it worked right out of the box.

The JS adds inline font-size styles to any p element and the links activate the change in the inline styles. You would want to set the initial value in the JS to your default font-size, it is currently set to 12 by default.

Avatar
dreamstudio

Community Member, 48 Posts

14 April 2009 at 9:50pm

That was easier than I thought it would be, the only question is, if I wanted every page to then keep the same font size, how do i do that as it reloads and the font returns to normal size so they would need to resize it again on each page

Avatar
Howard

Community Member, 215 Posts

14 April 2009 at 11:00pm

Yea not to hard to do but you will have to get into a little bit of code - use javascript to store a cookie containing the set variable then access that cookie on each page load. I normally use jQuery for most of my javascript stuff cause it is cooler - there is quite a good walkthrough on using cookies with jquery here [url]http://www.shopdev.co.uk/blog/cookies-with-jquery-designing-collapsible-layouts/[/url] You will need to adapt it to apply the inline styles on pageload as well. Hope this is a point in the right direction :)