Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

12

Changing Andreas04 text area default font ONLY

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

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

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

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

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

  6. padronel
    Member

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

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

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

  9. 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".

  10. 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?

  11. vivianpaige
    Member

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

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

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

  14. vivianpaige
    Member

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

  15. 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;
}

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

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

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

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

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

  21. vivianpaige
    Member

    we can't see any changes to your blog because you can't save them until after you purchase the CSS upgrade.

    As for H3 - you should be able to make the text italic. You type in the text and then highlight it and click on the I icon (2nd one from the left on the top row).

  22. vivianpaige
    Member

    Remember what boblets and I have both said about fonts. The reason you list more than one is because each person's computer that reads your site may not have the specific font installed. That individual's computer goes thru the list until they reach the font installed on their computer. In your case, first it looked to cambria. When you removed that, it looked to tahoma. And so on.

    Again, those are the series of fonts used throughout your blog so if you want to be consistent with the rest of the blog, you want to keep those fonts.

  23. padronel
    Member

    You are right on both, Vivian. You cannot see the results I mentioned but what I wanted you to know is that this piece of code

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

    seems to work acceptably.

    Regarding H3 it's true I can make italic and even underline any word; what I cannot do is highlighting because H3 text is already highlighted. I still prefer to use the 'Paste from Word' procedure even though I'll have to correct the double interline space manually.

    Is there anything else you consider I should try before buying CSS?

  24. vivianpaige
    Member

    When you say "highlighting" you must mean bold. And yes, that text is already bold.

    As for that bit of code - if I understand CSS, the "p" after the #content (which I believe is the element) is for paragraph, which is what the post entry content is. That's why I thought it should work.

    I think boblet's example should have worked, too. And I think I know why it didn't - the code left off the period before the word entry. It should have been
    .entry
    You may want to give that another shot, with that modification.

    As long as you use the paste from Word icon, and don't paste directly from Word, you should be ok. That double space between paragraphs that you mentioned is typical of extraneous HTML coding from Word. The other thing (and I see an awful lot of this on your blog) is the MsoNormal code. (I see it 10 times in your About section between your photo and your name.)

  25. vivianpaige
    Member

    Let me retype that first line, since I left off the open bracket
    .entry{

  26. padronel
    Member

    Sorry, It's bold what I meant.

    The second Boblets example starts with the same code line you propose now, that is,

    .entry{

    I tried it once and it's no good: it alters the title area with huge letters and no color at all.

    How can you see that code in my about column between my photo and my name? I see nothing extrange there and hope my visitors neither.

  27. vivianpaige
    Member

    No, it's not the same. boblets entry left off the period before the word entry. And that omission is critical. Did you try it with the period in there?

    I can see the code because I have the developers toolbar installed in Firefox. I can see it in nearly every post on your front page, with the exception of the first two that you used the "Paste From Word" icon. If you edit your 3rd post - [*HG}-- Gazapo del día: “...su hijo en Tortosa” - and look at it in the HTML editor, you should see MsoNormal listed twice between the lines "Titular en La Vanguardia (España) del 19/06/08:" and "Dos hombres matan a una mujer y a su hijo en Tortosa por una disputa en una compraventa de drogas." (And twice again after that line.)

  28. padronel
    Member

    Sorry, I meant I tried once MORE with that code:

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

    Without a period before Entry, there's no noticeable change. With a period there text letters are all like bold, and title letter are huge and the color there is lost.

  29. vivianpaige
    Member

    OK. FYI - without the period, it wouldn't affect anything because there is no element for it to effect. And it makes sense that the entry title would be affected, since that is part of the entry.

    Changing the paragraph as I gave you earlier makes the most sense.

  30. vivianpaige
    Member

    (And the background would change, too, because relative urls don't work with custom CSS. You would need the absolute address of the background image (the 6th line above)

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags