SitePoint Sponsor

User Tag List

Page 1 of 3 123 LastLast
Results 1 to 25 of 55
  1. #1
    SitePoint Addict
    Join Date
    Feb 2012
    Location
    Kiwi in Bangkok
    Posts
    373
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to increase text/font size on my web pages?

    Hello,

    I would like to increase the text size on my site pages, so they load with a slightly larger size font,

    I know it is done in the CSS file, yet what am I looking for?


  2. #2
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    There are several ways to do it, so your question depends on what you have in your stylesheet. You could go as basic as

    Code "CSS:
    body {
      font-size: 1.5em;
    }

    or something far more nuanced and targeted. Maybe you should post the relevant snippets from your stylesheet, or a link to your site.

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,820
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Before I answer you question I should say that you should NOT attempt to impose fixed font sizes ( as in pixels) and that you must understand that font sizes on web pages are ultimately set by the viewers themselves.

    Ok, That public service announcement out of the way.

    Code:
    body {
      font-size: 1.5em;
    }
    
    or
    
    body {
      font-size: 150%;
    }
    In this case em and % do exactly the same thing. font-size: sets the size of the font based on the parent element, so you don't HAVE to start with the body tag, just from the element where you want the font size to be bigger. This attribute cascades so all descendant tags will BASE size font them selves on that size font.

    Hope that helped and wasn't too overwhelming

  4. #4
    SitePoint Addict
    Join Date
    Feb 2012
    Location
    Kiwi in Bangkok
    Posts
    373
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello,

    thank you for your quick informative answers

    maybe best to look at my site, then tell me if it is possible,

    http://trade.comeze.com/index.php

    I am wanting to slightly increase word text/font size, and maybe line spacing, in the Left hand side panels,

    Categories seems more spaced and easier to read,

    is it possible ? is it easy to do ? or leave it alone!


  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by RayWilk View Post
    is it possible ? is it easy to do ? or leave it alone!
    You can either change the font size and line height for the whole site in one hit (by applying it to the body element) or individually, element by element. Perhaps just make it clear exactly which elements you want to change and we'll show you how.

  6. #6
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,820
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Try this:
    td.categories{ padding-bottom:.5em;}/*do this to increase spacing between items*/
    td.categories a{ font-size:150%;}/*do this to increase font-size*/

  7. #7
    SitePoint Addict
    Join Date
    Feb 2012
    Location
    Kiwi in Bangkok
    Posts
    373
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello all

    wow you are all great! fast informative helpful replies, many thank yous,

    ok dresden_phoenix I will look at those setting in the CSS file,

    yet at the moment I am focusing on a page problem, explained here:

    http://www.sitepoint.com/forums/show...problem-please

    I have solved half of it....lol

    I will be back to font sizes once this is fixed,


  8. #8
    SitePoint Addict
    Join Date
    Feb 2012
    Location
    Kiwi in Bangkok
    Posts
    373
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok all is well, back to font size adjustments

    I will try, and see how it looks/fits

    td.categories{ padding-bottom:.5em;}/*do this to increase spacing between items*/
    td.categories a{ font-size:150%;}/*do this to increase font-size*/

    I posted this in another forum area, yet no joy with an answer, does any one here know?

    if I have the line: <?=GMSG_SELECT;?></a>]</td> then only the word "Select" is displayed on the web page.

    but if I have the line: <?=GMSG_SELECT_MAIN_CATEGORY;?></a>]</td> then all the words "GMSG_SELECT_MAIN_CATEGORY" are displayed on the web
    page.

    how to stop the GMSG from displaying?


  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by RayWilk View Post
    if I have the line: <?=GMSG_SELECT;?></a>]</td> ...
    That's not actually HTML. What code do you see if you view the source code in your browser?

  10. #10
    SitePoint Enthusiast Belsnickle's Avatar
    Join Date
    Feb 2012
    Location
    Chico, CA
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There you go. Answered in the php forum since I know you were sent there for that answer earlier.

  11. #11
    SitePoint Addict
    Join Date
    Feb 2012
    Location
    Kiwi in Bangkok
    Posts
    373
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi ralph.m & Belsnickle, appreciate your help, to post here or there? lol

    browser source code:

    [
    <a onclick="openPopup('http://trade.comeze.com/category_selector.php?cat=category_id&category_id=&auction_id=100047&form_name=ad_create_form')" href="javascript:;"> GMSG_SELECT_MAIN_CATEGORY</a>
    ]

    more details:

    ok here is more script, the original has SELECT, and this word shows on the web page, triggering a pop up window,

    but I added the MAIN_CATEGORY to make it SELECT_MAIN_CATEGORY to give the webpage viewer more details.

    now with just one word SELECT only one word shows on the page, GMSG is not visible, yet when I make it 3 words long SELECT_MAIN_CATEGORY the GMSG decides to join in and become visible.

    how to exclude GMSG ?

    <tr class="c1">
    <td width="150" align="right"></td>
    <td class="contentfont" colspan="2"><span id="main_category_display"><?=$main_category_display;?></span>
    [<a href="javascript:;" onClick="openPopup('<?=SITE_PATH;?>category_selector.php?cat=category_id&category_id=<?=$item_details['category_id'];?>&auction_id=<?=$item_details['auction_id'];?>&form_name=ad_create_form')">
    <?=GMSG_SELECT_MAIN_CATEGORY;?></a>]</td>
    </tr>

  12. #12
    SitePoint Member emoviefreak's Avatar
    Join Date
    Feb 2012
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    use <body style="font-size:10pt">

  13. #13
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by emoviefreak View Post
    use <body style="font-size:10pt">
    Bad idea to use inline styles like that. You'd have to do it separately on every page of the site, which defeats the purpose of CSS.

  14. #14
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,750
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    ALso it's just a maintenance nightmare...I used to do it when I first started it out .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  15. #15
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by emoviefreak View Post
    use <body style="font-size:10pt">
    Really, really bad advice.

    1. You should not be defining styles inline like that, it creates a whole load of extra work.

    2. You should not be setting absolute font sizes, because this prevents IE users from changing the size of the text.

    3. How do you know that 10pt will be an increase?

    4. NEVER use pt for on-screen measurements. Points have a physically defined dimension (1/72 of an inch), and so while they make perfect sense for print, they make absolutely no sense whatsoever for on-screen measurements.

  16. #16
    SitePoint Addict
    Join Date
    Feb 2012
    Location
    Kiwi in Bangkok
    Posts
    373
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello ralph.m

    yes I would like to change the font size for the whole site, by 10% larger, line height not sure yet,

    what do I do? and where do I do it? in the CSS ? or ?

    your help appreciated



    Quote Originally Posted by ralph.m View Post
    You can either change the font size and line height for the whole site in one hit (by applying it to the body element) or individually, element by element. Perhaps just make it clear exactly which elements you want to change and we'll show you how.

  17. #17
    SitePoint Addict
    Join Date
    Feb 2012
    Location
    Kiwi in Bangkok
    Posts
    373
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello dresden_phoenix,

    your reply/help is appreciated,

    do I just adjust an already existing line of code?

    or do i need to add a line to? to where?



    Quote Originally Posted by dresden_phoenix View Post
    Try this:
    td.categories{ padding-bottom:.5em;}/*do this to increase spacing between items*/
    td.categories a{ font-size:150%;}/*do this to increase font-size*/

  18. #18
    SitePoint Member
    Join Date
    Feb 2012
    Location
    NY, USA
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You need to check your css file find out the proper class which then make changes.

  19. #19
    SitePoint Addict
    Join Date
    Feb 2012
    Location
    Kiwi in Bangkok
    Posts
    373
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello keithirvine, appreciated your reply,

    do I make the changes to /themes/style.css ?

    an example of the css is:

    /* v6.02 CSS */

    /* GLOBAL classes - skin & pages */
    body {font-family: Arial, Helvetica, sans-serif; }
    p {font-family: Arial, Helvetica, sans-serif; }
    td { font-family: Arial, Helvetica, sans-serif; font-size: 11px;}
    input { font-family: Arial, Helvetica, sans-serif; font-size: 11px;}
    textarea { font-family: Arial, Helvetica, sans-serif; font-size: 11px;}
    select { font-family: Arial, Helvetica, sans-serif; font-size: 11px;}
    hr {border: 1px solid #c3c3c3;}

    .toplink { font-size: 11px; color: #124490; text-decoration: none; }
    .toplink a { font-size: 11px; color: #124490; text-decoration: underline; }
    .toplink a:hover { font-size: 11px; color: #124490; text-decoration: none; }


    Quote Originally Posted by keithirvine View Post
    You need to check your css file find out the proper class which then make changes.

  20. #20
    SitePoint Member
    Join Date
    Feb 2012
    Location
    NY, USA
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    css class p is for paragraph

    p {font-family: Arial, Helvetica, sans-serif; }

  21. #21
    SitePoint Member
    Join Date
    Feb 2012
    Location
    NY, USA
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    p {font-family: Arial, Helvetica, sans-serif; }
    td { font-family: Arial, Helvetica, sans-serif; font-size: 11px;}
    input { font-family: Arial, Helvetica, sans-serif; font-size: 11px;}
    textarea { font-family: Arial, Helvetica, sans-serif; font-size: 11px;}
    select { font-family: Arial, Helvetica, sans-serif; font-size: 11px;} make changes one at time and see the result

  22. #22
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,750
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Does td.categories exist already? If so, you can just modify that selector that already exists.

    If you don't have any CSS applied to that already, you can throw that ssnippet in ANY css file you want .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  23. #23
    SitePoint Addict
    Join Date
    Feb 2012
    Location
    Kiwi in Bangkok
    Posts
    373
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello RyanReese,

    I can not find any td.categories with a search,

    so I can paste into the style.css file ?

    td.categories{ padding-bottom:.5em;}/*do this to increase spacing between items*/
    td.categories a{ font-size:150%;}/*do this to increase font-size*/

    for example:

    /* v6.02 CSS */

    /* GLOBAL classes - skin & pages */

    td.categories{ padding-bottom:.5em;}/*do this to increase spacing between items*/
    td.categories a{ font-size:150%;}/*do this to increase font-size*/

    body {font-family: Arial, Helvetica, sans-serif; }
    p {font-family: Arial, Helvetica, sans-serif; }
    td { font-family: Arial, Helvetica, sans-serif; font-size: 11px;}
    input { font-family: Arial, Helvetica, sans-serif; font-size: 11px;}
    textarea { font-family: Arial, Helvetica, sans-serif; font-size: 11px;}
    select { font-family: Arial, Helvetica, sans-serif; font-size: 11px;}
    hr {border: 1px solid #c3c3c3;}

    .toplink { font-size: 11px; color: #124490; text-decoration: none; }
    .toplink a { font-size: 11px; color: #124490; text-decoration: underline; }
    .toplink a:hover { font-size: 11px; color: #124490; text-decoration: none; }





    Quote Originally Posted by RyanReese View Post
    Does td.categories exist already? If so, you can just modify that selector that already exists.

    If you don't have any CSS applied to that already, you can throw that ssnippet in ANY css file you want .

  24. #24
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,750
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Yes, you should be able to just do taht .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  25. #25
    SitePoint Addict
    Join Date
    Feb 2012
    Location
    Kiwi in Bangkok
    Posts
    373
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi RyanReese,

    code added

    td.categories{ padding-bottom:.5em;}/*do this to increase spacing between items*/
    td.categories a{ font-size:120%;}/*do this to increase font-size*/

    into the Themes / styles.css (as in above post)

    yet no change to font size, home page loads with exactly the same size fonts

    ideas please?

    Quote Originally Posted by RyanReese View Post
    Yes, you should be able to just do taht .


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •