Need help? Check out our Support site, then


Custom CSS some questions

  1. I am a newbie at CSS and have been using Google to search for the code to make the changes I want though I'm having some troubles.

    My goal is to make my blog accessible to my audience - which is my tutor and assessors - to help present my work the best I can.

    1. I expanded the column width because all my posts/pages are going to be walls of texts. This has had the knock on effect of making my header huge - you have to scroll down a lot just to get to the content. How can I resolve this without changing the image?

    2. How can I remove/limited white space between the menu and the post/page title?

    2. I have found two fonts on Google which I would like to use. One would for post and page titles (i.e. the Student Profile on my main page), the other is for the body of texts. I've tried code I've found using Google search but I've not had any success. Am I able to use Google fonts?

    3. On a similar line, the menu font size is too small and I'd like to change the font. How can I do this?

    I'd also be interested in any feedback on what I could do to make my blog seem more accessible. I am not exaggerating when I say there will be a large amount of text per post along with occasional music score example. It is vital that when my tutor/assessors visit the site they are capable of navigating and accessing the material they want.

    Thank you in advance

    The blog I need help with is charlotteoca.wordpress.com.

  2. Hi there. That is a lot of questions, and we are, for the most part, volunteers. May I suggest you take a look at the resources in the following post:

    http://en.forums.wordpress.com/topic/learning-about-css-1?replies=1

    Please spend some time learning about how CSS works, and let us know where specifically you run into problems. I (at least) do not have the resources to teach you CSS. That being said, I'll try to answer your questions the best I can:

    1. I expanded the column width because all my posts/pages are going to be walls of texts. This has had the knock on effect of making my header huge - you have to scroll down a lot just to get to the content. How can I resolve this without changing the image?

    There is no way to do this without affecting the image. You can crop or resize the image in image editing software, then re-upload it to the header.

    2. How can I remove/limited white space between the menu and the post/page title?

    There doesn't seem to be an excess amount of white space there to me.

    2. I have found two fonts on Google which I would like to use. One would for post and page titles (i.e. the Student Profile on my main page), the other is for the body of texts. I've tried code I've found using Google search but I've not had any success. Am I able to use Google fonts?

    You must first add the CSS code that google gives you to load the fonts on your page. Then, you must find the HTML element that you wish to apply the font to, and add something like this to your Custom CSS:

    h1 {
    font-family: 'Abel';
    }

    You would put the HTML element you wish to affect where I put h1, and the font name where I put Abel.

    3. On a similar line, the menu font size is too small and I'd like to change the font. How can I do this?

    Similarly, you must add CSS that selects the HTML element, and increase the font-size:

    #access li {
    font-size: 24px;
    {

    The #access, is the CSS ID of the menu area, and the li is because each menu item is actually a List-item in HTML. Change the 24px to a value that matches the font size you are looking for.

    I'd also be interested in any feedback on what I could do to make my blog seem more accessible. I am not exaggerating when I say there will be a large amount of text per post along with occasional music score example. It is vital that when my tutor/assessors visit the site they are capable of navigating and accessing the material they want.

    The theme you are using is fairly accessible to my point of view. If you have specific questions on how to do something, we can help you out. However, I do not have any advice on making changes at this time.

  3. Sorry if I was overkill with the questions. I am quite stressed out because the log I'm working on is worth 20% of my overall grade so its vitally important to get it right.

    Thank you for your help. I'll try out your suggestions and see if I get anywhere.

  4. Heh, no worries. Generally, though, you should keep each thread to one or two (related) questions, just to make it not as daunting to answer.

    Out of curiosity, what class is this a project for? You may be able to ask classmates for help, as well.

  5. It's a distance learning course for students of artistic disciplines.

    I've yet to find another student that has gone to as much trouble as I have with my blog because how you approach your "learning log" is up to you. Some do blogs, others keep scrap books.

    For me it was all about creating something that feels 100% me and I think I am getting there.

  6. Well, keep up the good work. We're here to help if you have further questions.

  7. One suggestion I can make for the image: maybe make it "double-wide," so it's two instances of the image side-by-side. That should decrease height by half.

    It's bad form to crop or stretch/squash images that were created by others. The CSS default is to match image width to the width of the space, but you can use CSS to set a maximum width too.

    Also, don't stress out too much about the header height! We're learning that the idea of content "under the fold" not being read is a complete myth, and the new devices and screens we view the web on are changing that even more.

  8. On another note, wider columns actually make it more difficult to scan large blocks of text--the human eye has a hard time tracking from the beginning of one line to the start of the next. It think 90 characters wide is the preferred maximum width. If you are focused on making it easy to read, don't worry about taking up too much vertical real estate on screen.

  9. Regarding google fonts, yes you can.

    There are two elements to the css you'll be using.

    1. pretty close to the top of your CSS file, you need to tell the browser WHERE the font file is.

    That's the bit of code that looks like this:

    <br /> <link href='http://fonts.googleapis.com/css?family=NAMEofFONT' rel='stylesheet' type='text/css'><br />

    You can use as many google fonts as you want; just stack the link refs together at the top of your css file.

    2. Then you need to tell your content what font goes where. There are TWO ways to do this, but if you're a CSS newbie, I'd recommend inline styling. FIRST, go to the plaintext tab of your post editing page. The code you will want looks like this, with the name of the google font you chose:

    <br /> <p style="font-family: 'NAMEofFONT', sans-serif;">This is your paragraph</p><br />

    (If your font looks like Ariel or Helvetica with no nubs at the ends of lines, it will be san-serif. BUT if your font looks like Times New Roman or Georgia, change it to serif. That is the font stack: it tells computers that can't find the font you want what default to substitute.)

    Styling your font inline like that mens that you'll be more easily able to use multiple fonts in your blog.

    If you only want one--if you want EVERY SINGLE PARAGRAPH to be the SAME EXACT font, you can just add the font-family code to the paragraph

    <br /> p: {<br /> ...<br /> }<br />

    in the master CSS file!

  10. ^
    |

    IGNORE all the
    bits in there. Those don't belong!

    everything else is ok.

  11. I'm actually thinking about moving my blog to self-hosting now and maybe I can use a slightly different theme then which feature as less of a header. Probably will need a new image but I can deal with that.

    Reason is that I paid for the Custom CSS but its still so limited here in terms of the things I'll be wanting to be able to do on my blog to make to the most of it. I have a couple of days left to get a refund so that's not a factor.

    Last night, I downloaded the Twenty Eleven theme and opened up the code. From there I was able to make some more changes to my own code here without needing to search Google. Its given me the confidence to consider the option and there are plenty of online step by step guides for using wordpress.org.

    Thanks for your comments about making it reader friendly. I'll have a rethink about my approach.

  12. I think you can actually do quite a bit with the Custom CSS option at WordPress.com, and you might run into some of the same issues but if you have full control of the code (which a WordPress.org setup would give you), then you could make underlying structural changes. I would consider both routes advanced. If you'd like to get some help from a designer, consider hiring someone for all (or small parts) of the job. See http://en.support.wordpress.com/customize-my-site/request-theme-customization/ if you're interested in finding out more.

Topic Closed

This topic has been closed to new replies.

About this Topic