[resolved] How to increase letter spacing in WordPress twentyeleven on global scale or by p (7 posts)

  1. ibmacn
    Posted 3 years ago #

    I've been tinkering with theme twentyeleven and as a first time user of WordPress I am impressed with what's possible. I know a little CSS but am having an issue with trying to increase the letter spacing in the text and headers. I want to use the default Helvetica Neue but it's hard to read. I'm using a child theme so can go back to the original css if needed.

    I've run multiple searches and found a lot about padding and font size options but little about letter spacing. I found a few places in the style.css where letter spacing is indicated like here:

    blockquote cite {
    	color: #666;
    	font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
    	font-weight: 300;
    	letter-spacing: 0.05em;
    	text-transform: uppercase;

    and here:

    `.page-title {
    color: #666;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 2.6em;
    margin: 0 0 2.6em;
    text-transform: uppercase;`

    Please let me know if I need to add new code and where I need to add in the CSS. I want to improve the readability of the font text fields by increasing the letter spacing.

    My site http://www.worksofbart.com/blogtest246/

    Thanks in advance for your help.

  2. esmi
    Forum Moderator
    Posted 3 years ago #

    Do not edit the Twenty Eleven theme. First create a child theme for your changes or use a custom CSS plugin.

  3. ibmacn
    Posted 3 years ago #

    I have created a child theme as noted in my post:
    "I'm using a child theme so can go back to the original css if needed. "

  4. Andrew Nevins
    Forum moderator
    Posted 3 years ago #

    Esmi may have gotten confused as your Child Theme stylesheet is wrong. It does not inherit the parent theme's styles. It's like you copied the Twenty Eleven theme and renamed it.

    Use Codex's guidelines to walk you through

  5. ibmacn
    Posted 3 years ago #

    Sorry for any confusion I may have caused. The code I posted are samples from the twenty eleven theme just copied over to indicate where I have found the listing for "letter-spacing". These are not codes I am using in the style.css child theme I have built. I have tried effecting these codes by increasing the letter spacing but nothing changes so I assume they are being over written by another code. Is that correct?

    So I still need help on finding the proper place to edit the code for letter spacing as explained in my first post. I want to "to increase the letter spacing in the text and headers" as noted.

    Thanks for any help anyone can offer. BP

  6. esmi
    Forum Moderator
    Posted 3 years ago #

    I'm sorry but it is beyond the scope of these forums to deal with general CSS issues. Try a dedicated CSS resource such as http://www.css-discuss.org/ instead. In the meantime, using Firefox with the Firebug add-on for this kind of CSS work. Or use whatever developer tool is available in your web browser.

  7. ibmacn
    Posted 3 years ago #

    I have been using Firebug and it doesn't find the css for letter spacing. I will try the css link above, thanks.

Topic Closed

This topic has been closed to new replies.

About this Topic