Changing Andreas04 text area default font ONLY

  • Author
    Posts
  • #248140

    padronel
    Member

    I know that by posting this I’m risking to receive a non nice answer like some I’ve read here in this forum. However, I’ll take that risk.

    Andreas04 is the only WP theme sober enough for my taste, and with the number of columns I need. However, its default post text area font is so small that myself and several readers of my age (69) or older have difficulties to read. So, I need to use a bigger font.

    What I’ve being doing (because it’s what I did for years, when my blog was under b2evolution) is editing post text in Outlook 2003 text area, where I use Word as editor and ‘Cambria 12 black’ font, and copy&paste that text directly into WP text area under Visual mode (the only I like and the only I can read). However, sometimes the resulting text in WP is ‘Cambria 12 black’, which is what I want, but sometimes, and for reasons I ignore, is the almost invisible Andreas04 default.

    I’ve spent several hours surfing inside this forum looking for a solution to change that Andreas04 post text font area ONLY. I’m happy with the rest (title, columns, etc.).

    From this forum I’ve learned that in order to achieve my goal I need CSS, a resource you recommend for people with CSS programming knowledge only. I” gladly will buy CSS, but since I have no the slightest idea about any programming language, and I don’t know either anyone who has it, CSS is clearly not for me, and my only hope is that someone in this forum can provide me with the piece of CSS code for me to use to get the Andreas04 default font changed in the way I want.

    The ideal solution for me would be to set ‘Cambria 12 black’ as default font for post text area only, but being able to only increase the size of the actual Andreas04 default font size for that area would be a solution too.

    I’ll appreciate any help.

    #248334

    boblets
    Member

    sweet. Don’t worry – we’re not always nasty here in the forum. Usually there is a story behind it.
    If changing the font in the post is all you want, I am sure we’ll sort it out.

    One things first:
    Never ever paste from word. It will mess up your blog sooner or later. Here is why:
    http://faq.wordpress.com/2006/11/09/why-not-to-use-word/

    You don’t have to, and shouldn’t, buy the upgrade before you have tested your CSSchanges. You do that going to dashboard -> design – > edit CSS.

    You can make changes to the css here before paying, and preview it (but it will not publish to the web) and it’s a good idea to make sure the result is what you want before paying.

    Now, for the CSS, I’ll give you a hand, but be prepared that it may take a couple of tries. It is not all that difficult, really. Its not rocketscience.

    If you give us a link to your blog, it’ll be easier to help.

    #248336

    boblets
    Member

    sweet. Don’t worry – we’re not always nasty here in the forum. Usually there is a story behind it.
    If changing the font in the post is all you want, I am sure we’ll sort it out.

    One things first:
    Never ever paste from word. It will mess up your blog sooner or later. Here is why:
    http://faq.wordpress.com/2006/11/09/why-not-to-use-word/

    You don’t have to, and shouldn’t, buy the upgrade before you have tested your CSSchanges. You do that going to dashboard -> design – > edit CSS.

    You can make changes to the css here before paying, and preview it (but it will not publish to the web) and it’s a good idea to make sure the result is what you want before paying.

    Now, for the CSS, I’ll give you a hand, but be prepared that it may take a couple of tries. It is not all that difficult, really. Its not rocketscience.

    If you give us a link to your blog, it’ll be easier to help.

    #248341

    vivianpaige
    Member

    I think this is the blog in question http://padronel.wordpress.com/

    I have to reiterate what boblets said – we can help and do not use Word. I see all kinds of stuff in your blog that are extraneous HTML codes added by it.

    Using the CSS preview, I’d suggest you start with this bit of code from to your CSS:

    #content{
    margin-top:30px;
    width:100%;
    clear:both;
    background:url(images/xglobebottom.gif) bottom left no-repeat;
    }

    To it, I would add this line:

    font:100% tahoma,verdana,sans-serif;

    The reason I used that particular font group is that it is the default body font for your theme (I just increased the size from 76% to 100%). The other reason is that fonts are funny – if they are not installed on a given computer, they will not display.

    Hope that helps.

    #248355

    boblets
    Member

    Shheesh – Sorry – I have no idea why my post turned up twice. I’m with Vivian. Test it out and let us know how it goes.

    #248468

    padronel
    Member

    Thanks to you all. My blog address is padronel.wordpress.com

    #248470

    padronel
    Member

    Well, I went to Dashboard –> Design –> Edit CSS. Added (I didn’t delete anything) there that:
    #content{
    margin-top:30px;
    width:100%;
    clear:both;
    background:url(images/xglobebottom.gif) bottom left no-repeat;
    }
    font:100% tahoma,verdana,sans-serif;

    and when I press Preview I was taken to my blog Main Page, and I see no change at all there.

    Am I missing something?

    #248474

    boblets
    Member

    What vivian means, it that you need to take the sentence
    font:100% tahoma,verdana,sans-serif;

    and insert into the content {} like so.

    #content{
    margin-top:30px;
    font:100% tahoma,verdana,sans-serif;
    width:100%;
    clear:both;
    background:url(images/xglobebottom.gif) bottom left no-repeat;
    }

    Do not add a whole new part called #content – this will only create problems.

    #248476

    boblets
    Member

    And, because you have a lot of odd formatting in your blog at the moment, you may have to scroll down a bit to see changes.

    If you try this, and still see no changes, try replace “100%” with “1.3em”.

    #248493

    padronel
    Member

    I’m now more confused tha before. Please, don’t angry with me but I need step by step explanations.

    I understand that in order to preview ig changes are producing what I want I have to go to Dashboard > Design > Edit CSS and put something there. Well, what I found there is that:

    /* Welcome to Custom CSS!

    If you are familiar with CSS or you have a stylesheet ready to paste, you may delete these comments and get started.

    CSS (Cascading Style Sheets) is a kind of code that tells the browser how to render a web page. Here’s an example:

    img { border: 1px solid red; }

    That line basically means “give images a red border one pixel thick.”

    CSS is not very hard to learn. If you already know a little HTML it will be fun to move things around on the web page by changing your stylesheet. There are many free references to help you get started. You can find helpful links, starter stylesheets and knowledgable people in the forum:
    http://wordpress.com/forums/forum.php?id=3

    We hope you enjoy developing your custom CSS. Here are a few things to keep in mind:

    You can not edit the stylesheets of your theme. Your stylesheet will be loaded after the theme stylesheets, which means that your rules can take precedence and override the theme CSS rules. The Sandbox theme is recommended for those who would prefer to start from scratch.

    CSS comments will be stripped from your stylesheet. */

    /* This is a comment. Comments begin with /* and end with */

    /*
    Things we strip out include:
    * HTML code
    * @import rules
    * expressions
    * invalid and unsafe code
    * URLs not using the http: protocol

    Things we encourage include:
    * @media blocks!
    * sharing your CSS!
    * testing in several browsers!
    * helping others in the forum!

    Please use the contact form if you believe there is something wrong with the way the CSS Editor filters your code.
    */

    What am I supposed to do from that point on?

    #248498

    vivianpaige
    Member

    Copy the code that boblets gave you into that window. And then hit preview

    #248505

    padronel
    Member

    Thanks. I did it and see no change. Then went back and put ‘font:120%’ instead of 100 and then I saw the changes, but it affected, as far as I realized, e areas: post text, post title and About column.

    I only want to change the post text; as said before, I’m happy with the rest. This can maybe be achieved by eliminating Tahoma, Verdana and/or Sans-Serif, but if this the case I don’t know which one.

    #248509

    vivianpaige
    Member

    As I mentioned above, fonts are funny. You have to have alternative fonts in your stylesheet in case the reader doesn’t have your main font installed on their computer.

    I’m not trying to be mean but you have to trust that we know a little bit more about this stuff than you do. Don’t go eliminating the fonts that your stylesheet uses until you KNOW what the effect of the change will be.

    And because your post has a lot of garbage HTML in it from Word, you couldn’t see the effect on the text when you changed it to 100%.

    Try this: write a test post in the editor and publish it. Then try this:

    #content p{
     font:100% tahoma,verdana,sans-serif;
    }

    See if that affects only the text.

    #248510

    vivianpaige
    Member

    Of course, I meant that you needed to paste that code into your stylesheet.

    #248512

    boblets
    Member

    No, the font name list does not have anything to do with that. Here is why: A font will only show if the reader has that font on his computer, so the list basically states: use Tahoma. If there is no Tahoma on a spesific computer, it will try for the next one, Verdana and so on. Even though the fonts have diffrent body-heights, this is not part of the problem.

    You have a lot of formatting in separate posts, as you said, because sometimes the formatting you wanted worked, and sometimes it didn’t. This you will have to clean up manually, if you want your blog to be consistent. We’ll get back to that when we’ve got the css happening, but keep that in mind.

    Here is another one for you to try. Remove the one you did first. As I said above, this might require a couple of tries, as I don’t use that theme.

    Try only one at a time, and check result.

    body{
    margin:0;
    padding:0;
    font:130% tahoma,verdana,sans-serif;
    background:#e6e6e6 url(images/bodybg.png) repeat-x;
    color:#333;
    text-align:center;
    }

    if that one is no good, remove, and try this

    entry{
    position:relative;
    margin:0 0 20px 0;
    border:2px solid #fff;
    font:130% tahoma,verdana,sans-serif;
    background:#eee url(images/entrybg.png) repeat-x;
    color:#333;
    padding:10px 10px 0 10px;
    }
    #248514

    nellalou
    Member

    There is a fairly simple if inelegant solution.

    Paste your text into the visual editor as plain text without all the Word formatting.

    Open the second line of the toolbar by pressing the kitchen sink icon (the last one on the right of the first line).

    Select all of the text in the post(by clicking in the post box anywhere and holding down control+A at the same time).

    The first dropdown box on the second row of the editor will probably have the word paragraph in it.

    You can choose from there to make all the text a Heading 3 or even Heading 2 depending on the needs of your readers.

    This will enlarge the text but not change the font.

    #248517

    padronel
    Member

    I know I don’t know anything about that, so I’ll trust you for sure.

    Well, we got some progress. I put

    #content p{
    font:100% tahoma,verdana,sans-serif;
    }

    and I couldn’t notice any change at all. Then (remember that Cambria is the font I like) I put that,

    #content p{
    font:130% cambria,tahoma,verdana,sans-serif;
    }

    and got the text font size I like with no effects in the title or in the About columns, but with effect in what is below the text (date, category name, etc.) but this is no big deal.

    However, what I wrote in the post editor under Visual appears with double interline.

    You can see that if you visit my blog.

    #248522

    padronel
    Member

    This one:
    body{
    margin:0;
    padding:0;
    font:130% tahoma,verdana,sans-serif;
    background:#e6e6e6 url(images/bodybg.png) repeat-x;
    color:#333;
    text-align:center;
    }

    produced a huge characters everywhere. But this one,
    entry{
    position:relative;
    margin:0 0 20px 0;
    border:2px solid #fff;
    font:130% tahoma,verdana,sans-serif;
    background:#eee url(images/entrybg.png) repeat-x;
    color:#333;
    padding:10px 10px 0 10px;
    }

    produces not visible changes at all.

    #248523

    padronel
    Member

    Bazaarofdreams. what you suggest is something I have already tried. Heading 3 is suitable in size, but problem is that if my text had italics, highlighted, etc, all is lost. I got a plain text in Heading 3 size.

    #248531

    padronel
    Member

    Vivian. I have tried with that,

    #content p{
    font:125% cambria,tahoma,verdana,sans-serif;
    }

    and the result was good. Then I deleted ‘cambria’ and good too. Then deleted ‘tahoma’ and good too. Only when I deleted verdana I got a low profile font but still readable.

    The first post in my main page was posted that way:

    1.- Writing text in my Outlook under Word.
    2.- Opening the ‘Paste from Word’ option under Visual mode and pasting the text using Ctrl-v
    3.- Correcting there the double interline space
    4.- Clicking on Paste and publishing.

The topic ‘Changing Andreas04 text area default font ONLY’ is closed to new replies.