WordPress Tricks

Twenty Ten Theme Documentation : Modification , Customization and Review using CSS

allaboutbasic

Theme Twenty Ten css style modifications

The 2010 theme for WordPress is stylish, customizable, simple, and readable — make it yours with a custom menu, header image, and background. Twenty Ten supports six widgetized areas (two in the sidebar, four in the footer) and featured images (thumbnails for gallery posts and custom header images for posts and pages). It includes stylesheets for print and the admin Visual Editor, special styles for posts in the “Asides” and “Gallery” categories, and has an optional one-column page template that removes the sidebar. You can check Twenty Ten Theme Demo.


You may also like to check

1. WordPress.com Visitor Tracking :Know who is visiting your site
2. WordPress.com Flickr Flash Gallery: Show your flickr photos to your readers
3. WordPress.com animated Photo gallery : Show your images stored in WordPress with WordPress animated photo gallery
4.WordPress.com Visitors Flag : Where from your users visiting you.

twenty ten theme site title description modification
1.If you want to Remove or Hide Site Title or Blog Name in Twenty Ten

#site-title {
display: none;
float: left;
font-size: 30px;
line-height: 36px;
margin-bottom: 18px;
margin-left: 0;
margin-right: 0;
margin-top: 0;
width: 700px;
}

2. If you want to change Site title’s Font, font color and Font size
 

#site-title a {
color: #000000;
font-size: 1.2em;
font-weight: bold;
text-decoration: none;
font-family: times New Roman;// (To change the font type of the Site Title)
}

3. If you want to change Site description or tagline font color, font style, Site Description’s Width and more

#site-description {
clear: right;
color: #000000;
float: right;
font-style: bold;
margin: 15px 0 18px;
width: 220px;
}

4. If you want to remove the space just above the Site Title in Twenty Ten Theme

#header {
padding: 2px 0 0;
}

 
twenty ten theme Menu modification and customization
 

5. If you want to change the Color of Menu Item in Twenty Ten Theme do the following changes

#access .menu ul li a {
color: white !important;
}

#access .menu ul li.current_page_item > a {
color: white !important;
}

6. If you want to change the Menu black background to another new color
#access a {
background: darkred !important;
}
#access {
background: darkred !important;

}

7. If you want to remove the Navigation Menu (Home,About Me) from your Blog

#access {
background: none repeat scroll 0 0 #000000;
display: none;
float: left;
margin: 0 auto;
width: 940px;
}

twenty ten theme Post title meta contents modification and customization

8.If you want to change Blog Post Font family, font color, size and text alignment of Theme Twenty Ten

#content, #content input, #content textarea ,.entry-content, .entry-summary{
color: #333333;
font-family: times New Roman; //Just change the font name Here
font-size: 16px;
line-height: 24px;
text-align: justify;
}

9.If you want to change Blog Post Title’s BackGround Color
#content .entry-title {
background-color: red;
color: #000000;
font-size: 21px;
font-weight: bold;
line-height: 1.3em;
margin-bottom: 0;
}

10. If you want to change Home Page or Single blog post site title’s in twenty ten theme
.entry-title a:link, .entry-title a:visited {
color: #000000;
font-size: 21px;
font-weight: bold;
line-height: 1.3em;
}

11.If you dont want to show Entry meta (“Post Date” and “Post By”)

.entry-meta {
display: none;
font-size: 12px;
}

twenty ten theme footer modification

12. If you want to change footer background color of Theme: Twenty Ten

#footer {
background-color: gold;
margin-bottom: 20px;
}

13. If you want to change the color of Footer Blak Border in twenty ten theme
#colophon {
border-top: 4px solid darkred !important;
}

*** if you want to remove the footer black border use this code
#colophon {
border-top: 0px solid darkred !important;
}

14. If you want to change footer text color,font family and font size in twenty ten theme
#footer * {
color: darkred !important;
font-family: times New Roman; //Just change the font name Here
font-size: 16px;
line-height: 24px;
}

twenty ten theme header image modification

15. If you want to change Header Image Width and Height in twenty ten theme

#branding img {
border-bottom: 1px solid #000000;
border-top: 4px solid #000000;
display: block;
float: left;
height: 150px;
width: 940px;
}

16. If you don’t want to show Header Image in twnty ten theme

#branding img {
border-bottom: 1px solid #000000;
border-top: 4px solid #000000;
display: none;
float: left;
height: 150px;
width: 940px;
}

twenty ten theme header menu full width modification
17. To make the Header and Menu Full width in twenty ten theme

#branding {
background: darkred !important;
overflow: hidden;
padding: 12px;
padding-left: 0px;
padding-right: 0px !important;
}
#wrapper {
background: #fff;
margin-top: 20px;
padding: 0 20px;
padding-left: 0px;
padding-right: 0px;
}

18. Full Width Header and Menu with different header style in twenty ten theme
#site-title {
float: left;
font-size: 30px;
line-height: 36px;
margin: 0 0 18px 0;
width: 700px;
padding-left: 12px;
}
#branding * {
color: white !important;
opacity: 1;
}
#header {
padding: 30px 0 0 0;
padding-top: 0px !important;
}
#branding {
padding-bottom: 0px;
}

If you want to change the background of your blog (twenty ten theme’s background) by using CSS color code

#wrapper {
background: none repeat scroll 0 0 #000000; // just change the hex code
margin-top: 20px;
padding: 0 20px;
}

If you want to change your twenty ten blog post content width

.entry-content {
width: 600px;
}

If you want to change Blog Post Content Background Color in Twenty Ten Theme

.entry-content, .entry-summary {
background-color: green;
clear: both;
padding: 12px 0 0;
}

If you want to show image instead of Site Title or Blog Name in Twenty Ten Theme

#site-title {
background-image: url(“http://s1.wp.com/wp-content/themes/pub/twentyten/images/headers/fern.jpg?m=1300134058g”);
float: left;
font-size: 30px;
line-height: 36px;
margin-bottom: 18px;
margin-left: 0;
margin-right: 0;
margin-top: 0;
width: 700px;
}

#site-title a {
color: transparent;
font-weight: bold;
text-decoration: none;
}

If you want to change Blog Post Content’s Width in Twenty Ten, Try to modify the following portion according to your need

#content {
font-family: times New Roman;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
margin-top: 0;
text-align: justify;
width: 691px;
}

If you don’t want to show or Hide Comments and Leave a reply in Twenty Ten Theme

#comments {
clear: both;
display: none;
}

If you want to change the Comments Font color, font type and font size of Twenty Ten Theme

.commentlist {
color: black;
font-family: times New Roman;
font-size: 17px;
margin-left: 0;
margin-right: 0;
margin-top: 0;
}

If you want to modify the comment title’s font size and font type of Theme: Twenty Ten

h3#comments-title {
font-family: times New Roman;
font-size: 21px;
padding: 24px 0;
}

If you want to change or modify comment author’s font type and font size

.comment-author {
font-family: times New Roman;
font-size: 21px;
}

If you want to change Site / Blog Title’s Background Color of Twenty Ten Theme

#site-title {
background-color: red;
float: left;
font-size: 30px;
line-height: 36px;
margin: 0 0 18px;
width: 700px;
}

If you want to remove Header Top Black Border of Theme: Twenty Ten

#branding img {
border-bottom-color: black;
border-bottom-style: solid;
border-bottom-width: 1px;
display: block;
float: left;
}

If you want to remove sidebar from twentyten (twenty ten) theme homepage and make the content section central aligned

.home #primary {
display: none !important;
}
.home #content {
margin-right: auto !important;
margin-left: auto !important;
width: 76% !important;
}
twenty ten sidebar remove and modification

If you want to remove sidebar from single post page in twenty ten theme and make the post section centered aligned use this code

.single-post #primary {
display: none !important;
}
.single-post #content {
margin-right: auto !important;
margin-left: auto !important;
width: 76% !important;
}
twenty ten theme single post sidebar remove


If you have any issue feel free to ask me question here in comments section

OR

You can take my personal help in skype : om2000_cuet

Published by allaboutbasic

429 thoughts on “Twenty Ten Theme Documentation : Modification , Customization and Review using CSS”

  1. Wow, lots of useful CSS tricks for this theme! I just made a spanish translation for Twenty Ten, I’ll leave you the link in case any of your readers could use it.

    Like

    Reply


    1. Hi Solveig

      Just finished reading your problem.

      What You have told you have moved to your own domain.

      What I know when you will moved to your own domain you will lost your previous stats as you are not on wp.com server

      I am using WP.com self hosted blog, and I am using Roytanck.com flash based flickr gallery in my site, but as you are using own hosting so you can try for

      Lightbox Gallery
      NextGEN Gallery
      PhotoSmash Galleries etc

      Hope these galleries will help you.

      Feel free to contact me if you face any type of problem.

      I will try my level best

      Regards
      Om PRakash Chowdhury

      Like

      Reply

  3. To put your google adsense in place of Header Image of Twenty Ten Theme, try the following steps

    1. Create a <div id="add"> just under <div id="site-description"> 

2. <div id="add">  Your google code </div>

    3. Modify your CSS as below

    #branding #add {
    border-bottom: 1px solid #000000;
    border-top: 4px solid #000000;
    display: block;
    float: left;
    width:940px;
    height:195px;
    }

    ** To make your whole twenty ten theme wider, try the followings

    Note: other portion of your site may need to be changed to cope with the following changes in width

    #access .menu-header, div.menu, #colophon, #branding, #main, #wrapper {
    margin: 0 auto;
    width: 1024px;
    }

    Liked by 1 person

    Reply


  4. Hi I am trying to disable or remove the comments boxes from my static pages in this theme but havent been able to. Some site say its a simple setting but i can not locate it. If you could give any feedback to that specific issue it would be greatly appreciated. For example, on my about page: http://www.anythinggoespodcast.com/about/
    I dont see any reason to have a comments box. How should i go about removing it? If i need to change the text details in the pages’ scripts please let me know where to modify and with whay verbiage, as well as if anything needs to be removed. Thanks, if you can comment on this.

    Like

    Reply


    1. Hi Dennis

      If you want to disable / hide comments you can do it easily by modifying the CSS also, Here is the code

      #comments {
      clear: both;
      display: none;
      }

      Feel free to let me know if you face any type of problem.

      Regards
      Om Prakash Chowdhury

      Like

      Reply

    2. I know this is all about CSS changes but a simpler way to do this is to use the admin.

      Go to your page within admin and edit it. Click on screen options (towards the top on the right) and tick the discussions tick box. Then scroll down on the page and untick allow comments.

      Hope this helps.

      Like

      Reply

      1. Thanks for the solution you give.

        Do you think the solution you provided is applicable for every wordpress theme?

        Actually I did not get “Discussion Tick box” in “Screen Option” in the “Theme Enterprise” which I am using.

        Any Idea?

        Regards
        Om Prakash Chowdury

        Like

  5. I looked for the options Allaboutbasic mentioned, i dont have them on my theme “twenty ten”.

    As far as what Om suggested, I tried placing the text in the script but cant seem to get it right. I keep getting a syntax error when i include

    #comments {
    clear: both;
    display: none;
    }
    anywhere I try to place it, i get the same error. It sometimes mentions a line where the error occured but thats it. Could you be more specific as to where the text needs to be inserted and if it has to be placed in more than 1 place as I have .php files for multiple things on my page (i.e. archives, header, footer, etc).
    Thanks for your input so far.

    Like

    Reply

  6. FYI. I found a different way to solve this issue. There is a plug in called “No Comments On Pages” that simply disables comments on all pages once activated. I installed it and activated it and since I want no comments on my site at all, it works perfectly.

    Thanks for the help anyway. Hopefully this update will help someone else.

    Like

    Reply


    1. Hi dennis

      Thanks for the solution You have provided.

      Actually Dennis, I am using and Mentioned “Theme Enterprise” not “Twenty Ten” . I didn’t get the “Discussion Tick Box” in my present theme. Thats why i mentioned the solution provided by Mytex may not be applicable for other themes.

      Not sure where you have placed the CSS code I have provided to you.

      Would you mind to paste/ Replace (#comments portion) the CSS code in “Appearance -> Edit CSS “?

      I do really appreciate your solutions and comments.

      Regards
      Om Prakash Chowdhury

      Like

      Reply


    1. Hi Misty,

      Thanks for your Comments.

      Actually I didn’t Understand your question. Are you talking about your blog post Content’s to be justified as straight line?

      Try this Code: It will make your blog post content justified as straight line.

      .entry-content, .entry-summary {
      clear: both;
      padding-bottom: 0;
      padding-left: 0;
      padding-right: 0;
      padding-top: 12px;
      text-align: justify;
      }

      If it is not your requirement,Would you mind to make me clear?

      Regards
      Om Prakash

      Like

      Reply


    1. Dear Simon

      Thanks for visiting my blog and comments.

      Simon, I didn’t get any option by which you can display comments on each post as on your home page. Actually I am using WordPress Self Hosted Blogging Platform thats why I am unable to give you a solution by installing Additional Plugins for WordPress which will meet your demand.

      I hope you will search (google) and get additional Plugins for wordpress and by installing that plugins you will be able to display comments on each post on your home page of Twenty Ten Theme.

      Also I will Appreciate, If you get the solution and Let us know How you solved this problem(by installing plugins or any other way) by replying through commets.

      Eagerly Waiting for your Solutions.

      Regards
      Om Prakash Chowdhury

      Like

      Reply


    1. Dear James,

      You can do it easily.

      When writing your blog, upload/add your favorite image by “Left” align.
      And..To use “Read More” Just use the option “Insert More Tag” of your blog Visual editor.

      Or You can use the following code in the HTML editor.

       <!--more-->

      Regards

      Like

      Reply


  10. Hi.. thanks 4 the tuts.. i’m new to this and find the info in this blog very helpful.. 🙂 i have made several changes on my blog, like font style.. etc. but i’m still working on several issue (and still confuse) like:
    1. how to change font style in widgets area..?
    2. how to clear the space at the top of the header?
    3. My friend recommended me to use Advance Excerpt Plugins on my blog, so i do not need to set “read more” every time i add new post but in stuck in step; replacing the code become in index.php i couldn’t find the code. Do you have any idea?

    Thanks
    http://babychildrenkids.com
    4.

    Like

    Reply


    1. Hi Rian,

      * If you want to remove the space at the top of the header

      #wrapper {
      background-color: #FFFFFF;
      background-image: none;
      background-position: 0 0;
      background-repeat: repeat;
      margin-top: 0;
      padding-bottom: 0;
      padding-left: 20px;
      padding-right: 20px;
      padding-top: 0;
      }

      * If you want to change Widget Title Font type,font color and font size

      .widget-title {
      color: #222222;
      font-family: times New Roman;
      font-size: 20px;
      font-weight: bold;
      }

      *If you want to change WIdget BOdy’s font color ,font size and color

      .widget-area a:link, .widget-area a:visited {
      font-family: cursive;
      font-size: 16px;
      text-decoration: none;
      }

      * If you want to change the Link color in your widget body you can change it from here

      a:link {
      color: #0066CC;
      }

      *For Read More…..I use the following code where i need to show “Read More”. 

      <!--more-->

      as I am using WordPress self hosted blog, so i don’t have access to the PHP code and to install additional plugins. So, now I am unable to answer your third question.

      If you face any problem let me know.

      Like

      Reply


  11. I spent a while trying to sort out how to remove only the posted “by”, while still keeping the posted on
    Adding this coded to the style.css worked well for me:
    .meta-sep {
    display:none;
    }

    Like

    Reply

  12. THANK YOU so very much for all of the helpful information you have here. I have used several of these ideas to improve my blog.

    Is there anyway to change the actual size of an image to upload? I wish to use an image, currently only partly showing in my header. Changing the height of the header only stretches the image.

    http://myheritagefabrics.wordpress.com/

    Like

    Reply

    1. Your actual image is cropped to 940 × 198

      As you are using WordPress.com self hosted blog so you can’t change the main html code.

      So, i think it would better for you to manage your full header image in 940×198 px

      Like

      Reply

  13. And, another question: can I reverse the location of the sidebar. In other words, move it from the right side to the left side? Thanks!

    Like

    Reply


      1. You are very kind, but after your answer to the header question I think I will change to Duster theme, which seems easier with both questions. I see you also have a page for it, which I will use (and probably have more questions). Thank you very much.

        Like

  14. Hi again,

    Please let me know how to adjust the area for the article ( maybe it call coloum) i want to make it a little bit wider.. and i want to adjust the sidebar space little bit narrow. and how to find the current size of it..?

    Thx

    Like

    Reply

    1. Hi Rian

      Current Size of your right sidebar is 300px…. if you want to make it narrower change the width in the code below

      #primary, #secondary {
      display: block;
      overflow-x: visible;
      overflow-y: visible;
      width: 300px;
      }

      Also If you want to make your Content Column wider..try it (by changing your right side bar 250px)

      #content, #content input, #content textarea {
      color: #333333;
      width: 667px;
      }

      Please let me know it works for you or not

      Like

      Reply

  15. i still cannot use it.. 🙂 so i use manual method, hehe… btw i have problem in single.php maybe you can help me with this problem..? if you enter to one of my pages i.e >> http://bit.ly/glhY8c at the bottom there are Amazon product (i put the code on single.php), but it doesn’t have the “Content Column” how to add the “Content Column” on the products..? do you have any idea? so it can display nicely… and has a place & background. your help very much appreciated.

    Like

    Reply

  17. Hi There
    i installed the new wordpress 3.1.1 in arabic and using the default theme, in the old version i was able to add anything on the side bar

    in the new version i noticed i can only add links or image under the ‘secondary-widget-area’

    but i need to be able to add such as hotels search box under the default search box or on top of side bar or under archieve and the new posts
    i tried it and this didnt work with me
    waiting your help
    thanx

    Like

    Reply

    1. I need to check the attributes of the new themes….but you can also add your own widget area in your new theme as your own…Not sure it will meet ur demands or not..
      thanks

      Like

      Reply

    1. Vinod vai…
      To change the right sidebar link font color and style paste the following code in your style.css or custom.css

      .xoxo a:link {
      color: red;
      font-family: times New Roman;
      font-size: 13px;
      }

      If you want to replace the word “Posted In” to “Category” you have to modify it from Header.php (Not sure ..need to check though).
      Please let me know the CSS works for you or not

      Like

      Reply

      2. To make your link black when u put your mouse over there with underline try the following code

        .xoxo ul li a:hover {
        color: black;
        text-decoration:underline;

        }

        By the way..do u want to change your Twenty ten header according to the link you have shared?

        Like

  19. Hi
    for understanding to what i want i send link below this,you can see how link work in underline and posted in word (category). :-http://www.mitchellkphotos.com/blog/. you see heder .how i change it this type.
    please reply.
    thanks.

    Like

    Reply

    1. Vinod vai..try the following code….just paste the code at the bottom of ur css file

      #wrapper {
      background: none repeat scroll 0 0 #FFFFFF;
      margin-top: 20px;
      padding: 0 0;
      }

      #access .menu-header, div.menu, #colophon, #branding, #main, #wrapper {
      margin: 0 auto;
      width: 970px;
      }

      #access {
      background: none repeat scroll 0 0 #000000;
      display: block;
      float: left;
      margin: 0 auto;
      width: 970px;
      }

      #branding img {
      border-bottom: 1px solid #000000;
      border-top: 0 solid #000000;
      display: block;
      float: left;
      width: 970px;
      }

      #site-title a {
      color: #EFEFEF;
      font-family: trajan pro;
      font-size: 1.2em;
      font-weight: bold;
      text-decoration: none;
      }

      #site-description {
      clear: right;
      color: #EFEFEF;
      float: right;
      font-style: italic;
      margin: 15px 0 18px;
      width: 220px;
      }

      #header {
      padding: 0 0 0;
      }

      #site-title {
      background-color: #0F0F0F;
      float: left;
      font-size: 30px;
      height: 51px;
      line-height: 47px;
      margin: 0 0 0;
      width: 700px;
      }
      #site-description {
      background-color: #0F0F0F;
      clear: right;
      color: #EFEFEF;
      float: right;
      font-style: italic;
      height: 51px;
      margin: 0 0;
      width: 270px;
      }

      Like

      Reply

      1. Hi,
        Many many thanks for this kind of help.
        that look great but not like that link which i was sending you,
        please chek this and reply me
        again thanks.
        vinod

        Like

  21. Hi Om,
    I am asking about title size, font thickness.and side of title. i think that link title space from right side & top pad is more broad. i don know how is this possible.so please help me make my site that kind.
    Thanks again.
    and i want to link from my blog to my photoshelter gallery from navigation menu. how i do this?

    Like

    Reply

    1. Vinod vai..
      actually the site which u gave me as reference used Image as Header Text. So it would better for me if you kindly give me the header Title font color…
      moreover you can try the following code….just paste them at the bottom of style.css

      #site-title {
      background-color: #1C1C1C;
      float: left;
      font-size: 25px;
      height: 59px;
      line-height: 56px;
      margin-bottom: 0;
      margin-left: 0;
      margin-right: 0;
      margin-top: 0;
      width: 700px;
      }

      #site-title a {
      margin-left: 20px;
      }

      #site-description {
      background-color: #1C1C1C;
      clear: right;
      color: #EFEFEF;
      float: right;
      font-style: italic;
      height: 59px;
      margin-bottom: 0;
      margin-left: 0;
      margin-right: 0;
      margin-top: 0;
      width: 270px;
      }

      Like

      Reply

      1. Hi Om,
        that look beautiful but i don’t ask about used image. i ask about title font size and thickness.
        The mitchell kanashkevich word seen very beautiful. but my title not seen like that. so what i do.
        and please suggest me how i link my photoshelter gallery and flickr gallery at navigation bar.
        please suggest me about link.

        Like

      2. Vinod vai..
        Actually mitchell kanashkevich used image instead of Text..thats why it is quite tough to find out what font he used actually in his text.

        for your next question…
        You want to modify your menu suppose “Gallery” so that if you click in the Gallery menu it will open your photoshelter or flickr gallery..???? is my understanding right?

        Like

  25. Hi Om bhai,
    according to title font style i have the font (IrisUPC) is right font but they seem bold. how i make that non bold .
    please reply . very thankful your kind of help. if you want some fees i am ready to pay.
    thank you very much.

    Like

    Reply

    1. Vindo vai..
      try with these
      #site-title a {
      color: #A4A4A4;
      font-family: irisUPC;
      font-weight: normal;
      text-decoration: none;
      }

      but..it would better for you to use Image as header text in you Twenty Ten theme…because…if any of your blog visitor doesn’t have IrisUPC font installed in his pc then it may happen that he will be unable to see your header text perfcectly.

      It will be highly motivative for me if you pay me…i do appreciate it… do you prefer paypal?

      Like

      Reply

  27. Hi Om Bhai,
    do you not reply how can i pay you?
    please reply.
    and suggest me how i add image in link which show when link open in address bar .
    i see your image that god Shri krishnji.
    how it happen.
    please reply.

    Like

    Reply

      1. WOW….Thanks a lot Vinod Vai.. I will check it when my brother (He is in USA) will be Online
        I am really grateful to you for your kind help. I am really feeling great.

        Like

      7. send me the header.php file in my mail + url of favicon icon.. i will send it back to u after modifying it….. the code which I have shared in the comment box is not showing perfectly.

        Like

      9. URL means Address…. You have to prepare a small image called favicon to show it in the addressbar…there are several website which offers free favicon icon generator. favicon is actually a 16×16 or 32×32 px small image.
        So, you prepare a favicon icon….upload it…and give me the address…..

        Also send me the header.php file so that i could past the code perfectly in it .

        Like

      12. Vinod vai…while checking your header.php file i found there is already favicon icon is added….so no need to change anything…just do one thing

        at the bottom of the header.php ( just below the

        ) there is two amibigious line (mentioned below)….delete them

        ?

        2
        <link rel="icon" href="http://s.wordpress.org/favicon.ico&quot; type=”image/x-ico”/>

        Like

      16. Vinod vai..u there?

        To add favicon icon in your wordpress blog you have to modify the header.php and need to add the following code

        U have to change the URL of your favicon icon..

        
<link rel="shortcut icon" href="http://s.wordpress.org/favicon.ico" type="image/vnd.microsoft.icon"/>
<link rel="icon" href="http://s.wordpress.org/favicon.ico" type="image/x-ico"/>

        Like

      17. Vinod vai…. I am leaving from office now… I will answer your question after i have reached home….

        ” How i add my website link in navigation bar. ” would you mind to clear me this question? i didn’t understand…. and as my office is closing now i will give u the solution after reaching home… i.e .. after 1.3 hours

        Like

  31. Om bhai.
    tomorrow is holiday.
    so i will contact you Monday for my website link in navigation bar like mitchell kanashkevich. you check that blog and send me solution,one more thing i want to icon of tweeter in header .
    thanks
    have good weekend my friend.

    Like

    Reply

    2. Vinod vai…

      link rel=”icon” href=”%3Ca%20href=” http:=”” s.wordpress.org=”” favicon.ico&quot=””

      may be u put this code in any other php file…….delete it also

      Like

      Reply

    3. Vinod vai..u there?

      Please there are another unwanted line remains.. it may be in page.php not sure though….

      delete that unwanted favicon icon line from there… then ur site will work perfectly also in IE

      Like

      Reply

  34. Hi, can anybody tell me how to have 2 font size in WP site title w/ Twenty ten theme. Ex: The Big Fish in the Sea,… the Big fish- 14 px and in the sea – 16 px…
    pls. somebody help me.

    Like

    Reply

  35. Hi,

    How can I add an external link to my photo caption text on Twentyten?

    I’ve tried wrapping the entire caption code between the link code. Ex: , but this makes the photo a link also, whereas I only want to link from the caption text.

    I’ve also tried using the html view, highlighting the caption text, and toggling the LINK button, but this doesn’t work either since it just cancels out the link.

    Any suggestions would be appreciated.

    Like

    Reply

    1. Helen Woud you mind to share me the web page link where you have tried to use caption in your photo?

      another thing…are you using wordpress.com self hosted blog or you have your own hostings where you have installed twenty Ten theme?

      Like

      Reply

    1. Helen
      Would you mind to try this

      /*************Change the image URL and Your Caption with Link URL********/

      /********Put theseCSS Code at the bottom of your stylesheet **********/
      #caption-txt {
      text-align: center;
      }

      #img-caption {
      background-color: wheat;
      padding-bottom: 10px;
      padding-left: 10px;
      padding-right: 10px;
      padding-top: 10px;
      width: 300px;
      }

      Like

      Reply

  37. thanks allaboutbasics…! am really new in this world… where particularly and how in header.php… pls. help me.
    ALSO, … in the footer I wan’t to add description aside from my title page.

    Like

    Reply

  39. Would like to change the width of the menu hover … did so (I thought) by changing the width in “#access ul ul a {“…unfortunately, the difference between the original 160px; and me changing it into a 100px; became white/visible…(see http://www.avonturiers.nl) What else should be changed / added to make it nicely fit again?

    Like

    Reply

  40. Hi – thanks so much for the info on this page, it’s been really helpful to me as a beginner!

    I have a couple of questions and I was wondering if you could please help? My blog theme is twenty ten at WP.

    1. I’d like to use CSS to remove the link from the date under the blog posts so that the text remains but the link disappears (I’ve already got rid of the ‘posted on’ and the ‘posted by [author]’ text.

    2. I’ve deleted the ‘categories’ and ‘tags’ lists at the bottom of the posts on the homepage but they are still there when you view the post in the archives – do you know the CSS code to remove them?

    Thank you very much in advance!

    Like

    Reply

    1. Hi Elly

      Actually as you are using wordpress.com self hosted blog (me too also) we can’t change the HTML code to remove the hyperlink as you mentioned in your 1st question..but you can try this one..to remove the underline from the Date field in Twenty Ten theme. Just paste this at the bottom of your style.css

      .entry-meta a:link {
      text-decoration: none;
      }

      2. About Categories and Tag lise from the bottom of the posts……. Would you mind to try this?

      .entry-utility {
      display: none;
      }

      Please Let me know this code works or not…..

      Thanks again.

      Like

      Reply

  41. Hi – sorry, can’t see my original comment on this page so am starting a new one.

    Thank you for the code you suggested. The first one works perfectly, except that it only changes the entry-meta on the first post on my homepage, and all the rest are still the same – do you know how to make all the rest of them non-underlined also please? Here’s a link to the blog, so you can see what I mean, thank you:
    http://caribbeanlivingblog.com/

    The second code won’t work I don’t think, as I’d like to keep the comments option there. To remove the tags and categories from the homepage I used:

    .cat-links {
    display:none;
    }

    .tag-links {
    display:none;
    }

    So I guess I just need to add something to these to make sure they are also removed in the archived posts, I just don’t know what it is I need to add!

    Thanks once again for the help, much appreciated!

    Like

    Reply

    1. Hi Elly…
      Yes.. i checked your other pages..and found the underline is showing….not sure it is hard coded or not…. i will check it more…
      Your site is too loaded that it takes time to load every page… which is not good for SEO…
      another thing
      The second code which i have provided you…is for the tags/categories… not for comments…

      .entry-utility {
      display: none;
      }

      also..can u give me the link of any post of your archive page? it would better to mention precisely..

      thanks again.

      Like

      Reply

      1. Hi – sure, here’s a link to one of the archived pages:
        http://caribbeanlivingblog.com/2011/03/15/colourways-of-india-part-2/

        It’s strange, on some posts on the homepage the underline is showing, but on some it’s not showing.

        I tried the second code you sent over, but unfortunately it also removes the ‘Leave a comment’ text from the entry-utility area, as well as the tags and categories. I want to keep that text there.

        Thanks again for your help – if you have any ideas how to solve these issues I’d really appreciate it!

        Like

      2. Elly would you mind to try this code to remove the Underline below the date

        .entry-meta a {
        text-decoration: none;
        }

        I found this code works (which i have given before) and it is not removing “Leave a Reply” —— “Leave a reply” is not in entry-utility area.

        .entry-utility {
        color: #000000;
        display: none;
        }

        Like

      3. 1. You’re a genius thank you! The underlining is totally gone now.
        2. I tried the code you sent but it does remove the comment text in the entry-utility unfortunately (on my blog anyway!).

        Thanks though, the main issue was the underlining, I think I can live with the tags in my archives!

        Like

      4. Hi – I solved the last problem for my blog, thought you might be interested to know the code. To get rid of the categories and tags but leave the comments, try:

        .single .entry-utility {
        display:none;
        }

        Thanks again for yuor help!

        Like

  42. hello: i am a super green newbie. i understand the directions, but do not know into which folder to make the change. i want to remove the black navigation bar in my twenty ten. what folder\heading do i go into to? also, where do i make the insert and what do i delete? i also need to remove the seach bar on the right side along with the archives/meta/site admin & log out. thank you for your help

    Like

    Reply

  43. hi,
    this is an urgent life-and-death-matter… how do i turn off the “leave a reply” in some pages?
    is it possible to display multiple pages in the frontpage? I’m using twenty ten theme.

    thank you very very much

    xoxoxox
    lisa

    Like

    Reply

    1. Lisa…
      there is a plugins called “No comments in pages” which will help you to remove comments from pages.

      but..I am not sure this plugins will let you not to show comments in some specific pages….

      and..

      to show several pages in the front page.

      why don’t you show several posts in your home page? i think it is easy…

      please let me know if you need any type of help

      Like

      Reply

  44. FIrst off, I will tell you I am new to WordPress. I am building a website and one of the main things I would like to build is something called “Today in Twins History”. I envision something that gives users a chance to enter a month and a date and this would then search a MySql database (maybe) to tell the user whtat happened to the Twins on that date through out their 50+ year history. Any suggestions for a non-techie? Thank you. John

    Like

    Reply

  45. Hi. How can I reduce the padding between my Page Title/Entry Title and the share buttons underneath it? I’d also like to tighten the space between the share buttons and the the next line of text that appears on each of my pages and posts. (I think these three lines: title, buttons, and first line of text for page/post are taking up way too much vertical space.) DiggDigg doesn’t seem to have any settings for this and I’ve tried to write my own code (like you have above) to paste as a snippet into Weaver. That hasn’t worked yet and I am really only guessing with code. Do you have any ideas? (These comments are about the website I list below with my signature.)Thank you.

    Like

    Reply

    1. Hi Christy Thanks for your comments…
      I think you are searching for this code..Please let me know if the following code works for you or not..
      If you want to reduce Space between Entry Title and Share Button
      .entry-content, .entry-summary {
      clear: both;
      padding-bottom: 0;
      padding-left: 0;
      padding-right: 0;
      padding-top: 1px;
      }

      If you want to reduceSpace between Share Button and Page Title

      .dd_post_share {
      display: block;
      margin-bottom: 0;
      padding-bottom: 0;
      padding-left: 0;
      padding-right: 0;
      padding-top: 0;
      }

      Code For Digg:
      Are you using any plugins for this share buttons?

      Like

      Reply

  46. Thank you very much! It worked and looks so much better! I am using the WordPress plugin, “Digg Digg” for the buttons. I like it other than the spacing isn’t perfectly even. Do you know how to solve this issue, too? 🙂
    Thank you for your help. I never would have written this code on my own!

    Like

    Reply

    1. Hi Christy..
      as it is external plugins…so there may be the option to make the spacing between the buttons spacing even….

      Also you can try this code.. and let me know it works for you or not….

      .dd_button {
      float: left;
      padding: 0;
      }

      Regards
      Om

      Like

      Reply

      1. Hi, Om.

        I tried this code and the spacing between the buttons was better, but they still were not perfectly aligned. After searching plugins, I discovered “Easy Buttons” and installed that plugin. I like it much better since it doesn’t take up space on the pages of my site. Instead, the buttons appear on the far right-hand side of the screen.

        Thank you for everything. You’ve been a big help!

        Like

  47. Hi ! Great Article, any chance you could answer a newbie question for me ?
    I want to change the styling for posts according to categories in the twenty ten theme. I can do this for the post itself, however am struggling to do this for the entry title. How would I address this in the style.css file ? I know I have to change “#content .entry-title {” but how ?
    Cheers Vic

    Like

    Reply

      1. Unfortunately, its a sandbox installation at this stage.
        The bit I’m trying to change from ordinary post to the one in a specific category is
        In the the style.css file
        #content .entry-title { /* post title font */
        color: #980000;
        font-family: ‘Helvetica Neue’,’Helvetica’,’Arial Black’,’Arial’,San-serif;
        /*font-family: Georgia,”Times New Roman”,Times,serif;*/
        font-size: 16px;
        font-weight: 400;
        text-shadow: 0 1px #AAAAAA;
        /*font-style: italic;*/
        }
        The bit that works is :-
        /* House Rules Sections */
        .category-house-rules{
        color: #78FF4B;
        }
        I’m just confused about the correct naming conventions.
        What do I change “#content .entry-title” to style the title of the post for the “House Rules Category” ?
        Cheers …Vic

        Like

      2. Umm..Victor… Without seeing the website it is quite tough to answer perfectly…
        Sorry for this.. but.. if you can share your website URL..Please let me know..I will must help you..

        Like

  48. Hi, Om.

    You were kind enough to help me with social media buttons last week. I wonder if you can work your wonders on my latest issue…

    In my sidebar, I have two post categories: tools & appliances and blog. I also have two link categories: product reviews and reference. I am using the avh extended categories plugin to show these two separate post categories and so far, that is working well.

    Here is my question, is there a way to have my sidebar appear in this order: tools & appliances, product reviews, blog, and reference? I don’t see a way to insert my product review links between two post categories.

    My website is the one in my signature below and I’d appreciate any advice you have…Best regards,Christy

    Like

    Reply

    1. Hi Christy…
      Thanks again for your comments…..
      If your plugins doesn’t facilitate to order them according to user’s requirement then you can try by modifying the related php codes (though it may be tough).
      So, Without checking the functionality..i can’t answer that….
      Sorry for that Christy…
      Regards
      Om

      Like

      Reply

  49. Hi, I have the CSS upgrade on TwentyTen. I’ve noticed that the caption text size (that appear under images) is too large for my liking (seems to be the same size as normal text. On most themes, the caption text is quite small – which I like). Any idea how I can reduce the caption font size using CSS upgrade? Thanks if you can help.

    Like

    Reply

    1. Hi Milo..

      To reduce the Caption Text size using CSS try the following code

      .wp-caption-dd {
      font-size: 11px;
      }

      Please let me know if it works for you or not….
      and if you are happy..let me buy a coffee.. 🙂

      Regards
      Om

      Like

      Reply

  50. Hi Om,

    I made a lots of changes in the theme based on your guidelines. Thanks for writing such a nice article.

    I’m facing below issues, can you please help me on this. Thanks in advance.
    1. I reduced spacing between menu and blog post by modifying below code
    #main {
    clear: both;
    overflow: hidden;
    padding: 20px 0 0 0; // originally it was 40 px
    }
    This is working fine
    http://homeremediesforyou.com/blog/

    but when clicked on blog post it still shows wider gap between menu and post, which part of the css code need to be modified to reduce the gap?
    http://homeremediesforyou.com/blog/2011/07/23/hello-world/

    2. When I changed font for the blog post to verdana it is not working but when set to Arial it works, any idea why?

    #content, #content input, #content textarea {
    color: #333;
    font-family: Arial; //Verdana is not working when set here
    font-size: 16px;
    line-height: 24px;
    text-align: justify;
    }

    Thank.

    Like

    Reply

    1. Hi,

      For Problem 1 try this

      .paged #nav-above, .single #nav-above {
      display: none;
      }

      Problem 2:

      would you mind to try this

      #content p, #content ul, #content ol, #content dd, #content pre, #content hr {
      font-family: verdana;
      margin-bottom: 24px;
      }

      Please let me know it works or not..

      Also.. please use your own name in the comments box…

      Regards
      Om

      Like

      Reply

      1. Thanks Om!

        both tips works very fine. font of post looks litter bigger, how to reduce font size?

        also can you please help on creating menu bar and footer similar to that is there in primary domain. http://homeremediesforyou.com
        (putting black and green line below menu bar etc)

        Like

      2. Hi Lisa..
        for your blog post content try the following code and let me know..

        #content p, #content ul, #content ol, #content dd, #content pre, #content hr {
        font-family: verdana;
        font-size: 16px;
        margin-bottom: 24px;
        }

        ** For the menu bar… would u mind to add me in skype? om2000_cuet is my id

        Regards
        Om

        Like

      3. Thanks again Om! post content font is also working fine. I’m able to add line below menu bar but would like to add one more 4px line below that; also there is white space on both the sides of menu and footer, how to fill that?

        It might to difficult to setup time for the chat but you can mail me on the email associated with this comment.

        Thanks you very much for all your kind support.

        Like

      4. Hi Lisa….

        For the gap/space try the following code . in my previous response the answer was not full….

        #wrapper {
        -moz-background-clip: border;
        -moz-background-origin: padding;
        -moz-background-size: auto auto;
        background-attachment: scroll;
        background-color: #FFFFFF;
        background-image: none;
        background-position: 0 0;
        background-repeat: repeat;
        margin-top: 0;
        padding-bottom: 0;
        padding-left: 0;
        padding-right: 0;
        padding-top: 0;
        }

        #access .menu-header, div.menu {
        font-size: 13px;
        margin-left: 0;
        width: 928px;
        }

        Also… for the additional 4px line

        It needs to modify the php files to add this…thats why i asked you for the skype.. 🙂

        Regards
        Om

        Like

      5. Thanks Om, sorry for late reply. both the tips works but how to make width of main area to 980px so that it will match with the main sites pages. I tried changing at below place but width increases but menu line remains same, I’m also not sure at how many other places I need to take care of widths, like menu, sidebar etc.
        #wrapper {
        margin: 0 auto;
        width: 940px; ///changed to 980px
        }

        regarding 4 px line below menu bar can you please send me a mail or just explain in which php file I need to add hr tag.

        Thanks a lot for helping me out.

        Like

      6. Hi Lisa….
        Would u mind to share me the link or page which you want to make wider to 980 px.?
        I think you better skype me as to check your php files i will need something more…

        Regards
        Om

        Like

    2. Hi Om, sorry, I never used skype. for chat normally I use gmail chat, we can sync up there.

      I mentioned about the width of the blog to 980px, I already did this change, by modifying below line
      #wrapper {
      margin: 0 auto;
      width: 940px; ///changed to 980px
      }

      you can see on my blog but would like to know if there are any other places where I need to modify widths like, menu, sidebar etc because of this change.

      The line below menu bar is not extended till end, how to extend it till end?

      also I would like to have padding of 10px (white space) before “Ailments” on menu bar when we do mouse over. How to fix this?

      Thanks,

      Like

      Reply

      1. Hi Lisa
        I think you are searching for this. would you mind to try this and let me know this code works for you or not?
        **It will increase your content area width.

        #content {
        margin-left: 20px;
        margin-right: 235px;
        margin-top: 0;
        }

        Regards
        Om

        Like

  51. Hi Om, I modified my blog using your helpful instructions but I’m hoping you can me modify it a little more. I would like my wordpress blog (http://www.hoganwood.com/blog/) to have the same header and look as other pages on my website (http://www.hoganwood.com/ourdryingracks.html).

    I have tried using a header which incorporates “Hogan Wood Drying Racks and A simple way to reduce your footprint” with the background image but the background image in the header and the “real” background image don’t line up so it doesn’t look good.

    The only way I can think to solve this is to change the opacity of the header so the background image is visible. Then upload a header image with “Hogan Wood Drying Racks and A simple way to reduce your footprint” and my logo. I have tried this but the background of the header is white.

    Any suggestions?

    Best regards,

    Miles

    Like

    Reply

    1. Hi Miles
      Try the following code and let me know it works for your or not..

      #branding {
      background-image: url(“http://www.everythingregarding.com/wp-content/uploads/2011/07/hj.png”);
      opacity: 2;
      }

      #branding {
      border-top: 0 solid #BBBBBB;
      padding-bottom: 10px;
      position: relative;
      z-index: 2;
      }

      #site-title a {
      color: white;
      font-size: 30px;
      font-weight: bold;
      line-height: 36px;
      text-decoration: none;
      }

      #site-description {
      color: white;
      font-size: 14px;
      font-weight: bold;
      margin: 0 270px 1.65625em 0;
      }

      Regards
      Om

      Like

      Reply

      1. Hi Om, I placed it in a child theme and it didn’t work. You can see the results at the webpage I provided previously. Any other thoughts?

        Best regards,

        Miles

        Like

  52. Thanks Om, I re-installed Word Press and inserted the code at the bottom of the parent. No luck.

    I will move from Word Press if it can’t be modified to fit my needs and I did test with iframe and it looked good but I understand it doesn’t help SEO.

    Any other suggestions?

    Best regards,

    Miles

    Like

    Reply

  53. I am using a twentyten-child and need help to make the footer center Justified. I have tried several changes but nothing has worked. I appreciate if you can make some recommendations.

    Thanks
    Adam

    Like

    Reply

      2. Hi Adam….
        I think, you already have added the site info in the footer site… better you add me in skype as i need some details to make it center align..
        Regards
        Om

        Like

  54. How can I edit the CSS in the Twenty Ten theme so that when I format text in my blog posts to ‘Heading 2’ and ‘Heading 3’ they don’t change font. In other words I’d like my H2 and H3 fonts to be the same as the regular font for posts?

    Massive thanks,

    James.

    Like

    Reply

      1. Thanks Om,

        I’m able to access the Style.CSS ok but I’m not sure what/where code to edit the font for the H2/H3 tags?

        Cheers! j.

        Like

    1. Hi Jay..
      Here is the code..

      #content h1, #content h2, #content h3, #content h4, #content h5, #content h6 {
      color: #000000;
      font-family: times New Roman;
      line-height: 1.5em;
      }

      You need to paste the code at the bottom of style.css..but it would better if you cleared me which H1 or H2 you want to change.. as the code i am giving you may not work if it it overriding by other code.

      Regards
      Om

      Like

      Reply

  56. Thanks Om,

    Do you mean you’re not sure what text I’d like to change? On my posts, the first paragraph is formatted as a H3 tag (you will see text is big). The last paragraph is formatted as a H2 tag (text is really big). I’d like these tagged paragraphs to appear in the same font size as the body of the post. I’m obviously using the H2/H3 tags to improve SEO. Sorry if I’m making this confusing!

    Cheers, j.

    Like

    Reply

    1. HI Jay…
      Would you mind to try this code and let me know it works for you or not..

      h1, h2, h3, h4, h5, h6 {
      clear: both;
      font-family: Georgia,”Bitstream Charter”,serif;
      font-size: 16px;
      font-weight: normal;
      }

      Regards
      Om

      Like

      Reply

  60. thanks a lot for the handy information. I really was confused about some of them before I founded this topic.

    but I still have an issue and I can’t arrange it. How can I push the primary widget a little bit downer?

    I also want to have a border around them. I insert the code of border but the ‘enumeration’ is not included. I mean I can’t get the enumeration inside the border. can anyone help?

    Like

    Reply

    1. HI Danial..
      Paste the following code at the bottom of style.css and let me know it works for you or not.

      #primary, #secondary {
      border: 3px solid green;
      float: right;
      margin-top: 13px;
      overflow: hidden;
      width: 220px;
      }

      Regards
      Om

      Like

      Reply

  61. Hi Im hoping you can help me. I am a complete amateur at coding so I hope you can answer these questions.

    The first the I need help with is how to have more space at the top of my header so that I can put advertisements there.

    The second thing is how do I make my sidebar bigger so that I can fit more content such as ads and various plugins?

    The third thing is how do I change the color and font of my post titles. Currently the titles are in default black and the same default font. I want them in red and a better font!

    Thanks so much for your help because I need it!

    Like

    Reply

    1. Hi Kasey,

      Here I have tried to answer your questions…..

      1. You can manage more space at the top of your site header by modifying the php file (header.php).
      2. Paste the following code at the bottom of style.css to make your sidebar little bit bigger.. (pls check it and let me know..)

      #primary, #secondary {
      float: right;
      overflow-x: hidden;
      overflow-y: hidden;
      width: 240px;
      }

      3. To change your Post Title font color, font type and others try the following code..

      .entry-title a:link, .entry-title a:visited {
      color: red;
      font-family: times New Roman;
      font-size: 1.2em;
      text-decoration: none;
      }

      Please let me know if they are Ok for you or not..

      Om

      Like

      Reply

    1. Hi Michael

      For Page Title font and color change…try the following code (paste them at the bottom of style sheet)

      .singular .entry-title {
      color: red;
      font-family: tahoma;
      font-size: 36px;
      font-weight: bold;
      line-height: 48px;
      }

      Also, site title color

      #site-title a {
      color: #47381F;
      font-family: tahoma;
      font-size: 30px;
      font-weight: bold;
      line-height: 36px;
      text-decoration: none;
      }

      Pls let me know it is Ok or not..

      Om

      Like

      Reply

  66. Hey Michael hear again, need suggestion on page title size. I’ve done a bunch of changes since last visited. http://www.eastbaypillows.com.

    I tried this code without success. Need it little over half the size??
    .entry-title a:link, .entry-title a:visited {
    color: #000000;
    font-size: 1.2em;
    text-decoration: none;
    }
    Is this the right one? Thanks, I guess I need to buy you a coffee maker instead of a cup…

    Like

    Reply

    1. HI Morko…
      Paste the following code at the bottom of your style sheet to give space between sentence….and let me know it is Ok or not

      #content p, #content ul, #content ol, #content dd, #content pre, #content hr {
      line-height: 25px;
      margin-bottom: 24px;
      }

      Regards
      Om

      Like

      Reply

      1. I still can make it work. You can see on front page, or the page titled “Kontakt” how big space is between text lines. I’ve edited something and some of the text on the first page is ok now, but the rest, under it, is still with lot of space between.

        Like

      2. Hi Marko…
        sorry for my late response as i was not available for last 2 days..

        please check the following code and let me know it is Ok or not..

        #content p, #content ul, #content ol, #content dd, #content pre, #content hr {
        margin-bottom: 13px;
        }

        Om

        Like

  69. Ok I did some things to my website and I think I messed it up. I tried uninstalling the 2010 theme and then reinstalling it but the css code did not revert to the original one. I am trying to make a website and not a blog. I am trying to figure out how to change the blog background color to something else other than black and am also trying to figure out how to get rid of that meta and archives crap. The website is http://www.monsterponics.com I am a newbie and learning this as I go.

    Like

    Reply

  70. Ok I have been dabbling with it for a little bit, but am not sure how to change the blog background from grey to white? I previously deleted all the sidebar.php files but then put them back in to see if that would make a difference, but it hasnt. I previously changed the blog background color to grey, but now want to change it to white or something else.

    Like

    Reply

  71. I dont even know how to reinstall it, it seems like the code I put in does not even work anymore even when I try to revert back to the old default stuff.

    Like

    Reply

  72. The URL is http://www.monsterponics.com

    I had everything set up then I tried changing the site blog background to white and it didnt work. I tried reinstalling everything and its still showing up grey, I would also like to change text color and text size for the header tabs.

    Like

    Reply

    1. HI Johnny,

      Paste this code at the bottom of your style sheet.. it will make the Dark Green background to white

      #wrapper {
      background-color: white;
      }

      Pls let me know it is Ok or not

      Regards
      Om

      Like

      Reply

  73. Hi Om,

    i was wondering if I could use your wise words to fix the following:

    http://3neoneone.com

    i would like to remove the secondary widget section from the home page. i want only the primary widget on the home page and both primary and secondary on the blog page.

    is that possible with css custom design?

    thanks a lot for your help!

    Like

    Reply

  74. Oh, also.. If you look below each post, you’ll find the tags and categories. i was wondering if I can move the tags and categories to the top of the posts and leave the comment link under it. Can i do that?

    Thanks a lot!

    Like

    Reply

  77. Hi, cannot remove header top black border and footer black border of Theme: Twenty Ten with your codes.

    Also I was wondering if I can remove all the white above my header, I want my header at the top of the page without the spacing .

    Thanks !

    Like

    Reply

    1. HI Daniel Labelle,
      You can remove the black border which is showing at the top of your header image in Twenty Ten theme… Just paste the following code at the bottom of your style.css

      #branding img {
      border-bottom: medium none;
      border-top: medium none;
      clear: both;
      display: block;
      }

      Also, If you want to remove the gap at the top of your site paste the following code

      #wrapper {
      background: none repeat scroll 0 0 #FFFFFF;
      margin-top: 2px;
      padding: 0 20px;
      }

      Regards
      Om

      Like

      Reply

  79. Hi, A Question Adding this coded to the style.css remove my site title and the other code my site description, i’m not sure if the search engines can see my site or blogs title after the modifications. Is it just hide ?….

    #site-title {
    display: none;
    float: left;
    font-size: 30px;
    line-height: 36px;
    margin-bottom: 18px;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    width: 700px;
    }

    #site-description {
    display: none;
    clear: right;
    color: #000000;
    float: right;
    font-style: bold;
    margin: 15px 0 18px;
    width: 220px;
    }

    Thanks,
    Daniel

    Like

    Reply

  81. Hi,

    How i can modify “sticky style title of the first sticked post ?” Now it’s RED for the title and Blue for text; no goog for me

    Thanks a lot anf have a nice day!!

    Nicola

    Like

    Reply

  82. Hi Om,

    Never mind! this is my web site http://www.sport2win.com ; If you notice , under the menu bar there is a sticky post with red and blu font ; I’d like to change it or better remove it; When i put on evidence two posts , the second one is much better because it’s well integrated with the theme and has short story ; Is it possible to do the same thing with first sticky post?

    Thanka s lot and sorry for my bad english 🙂

    Like

    Reply

    1. Hi Nicola…
      I think u r using a plugins relate to theme extension… which is not allowing u to show that top read and blue sticky post..

      Though your requirements is not clear to me…but i am giving u the code to remove it..

      #post-923 {
      display: none;
      }

      Regards
      Om

      Like

      Reply

      1. Thanks Om,

        Yes, i’ve installed theme extensions for twenty eleven; I’ don’t know if this feature is included in it or not; In Post “quick edit” i only put a tick on “put on evidence this post” …. The problem is font color first and the second is that there is only the post title…

        Is it more clear?

        Thanks a lot again 🙂

        Like

      2. Hi Nicola..

        To make that hidden post appear and to change the color u can try the following code

        *** pase the following code at the bottom of moztheme2011.css in the following location.

        http://www.sport2win.com/wp-content/plugins/twenty-eleven-theme-extensions/moztheme2011.css

        .moz-headline.sticky .headline-text {
        color: black;
        }

        .moz-headline.sticky .entry-title a {
        color: black;
        font-size: 80%;
        font-style: italic;
        }

        .moz-headline.sticky .entry-content, .moz-headline.sticky .entry-meta, .moz-headline.sticky .entry-format, .moz-headline.sticky .comments-link {
        display: block;
        }

        Regards
        Om

        Like

  83. Hello OM,
    Thank you so much for helping us beginners customize our blogs. Your info on the 2010 theme was terrific. I don’t know if I missed this, but can you please tell me how to get the search bar in the navigation menu? I really like how it looks in the 2011 but I don;t want to change my theme at this time.
    Thanks again for your superb information!!
    Geralyn

    Like

    Reply

      1. Hi Om,
        Thank you for your reply. I have not fixed this issue. If you could please take a look at the blog site unitedboomersofamerica.com/blog you will see there is no search bar in the navigation menu. Like I said in my prior post, I am a newbie at this so I am still learning how to manipulate my widgets and so forth. Any help would be greatly appreciated. We are so lucky to have someone like you to turn to for WP support.
        I loo forward to your response.
        Thanks again!!
        Geralyn

        Like

      2. Hi Geralyn,
        Good Morning
        Pls check the site http://2011.everythingregarding.com/ , here i have added the search form in the navigation menu..

        IF you are looking for this..then you need to modify your header.php file with some css code to achieve this…

        Pls let me know it is something you are looking for or not..as i will change the theme of that site after your checking..

        Regards
        Om

        Like

  84. Hi Om!

    sorry for my late reply but i’ve turned on my computer just now..

    Your code works! great! Just one more thing: Is it possible to delete the center title? Or Better : Transform it like other title news; moving it on the right?

    Have a nice evening!!

    Nicola

    Like

    Reply

  86. Is it possible to customize drop down for the archives?
    The website I’m working on is dark and the white Archives drop down menu is standing out too much. The drop down option I choose from the default option in archives.
    Thank you 🙂
    Olena

    Like

    Reply

      3. Hello Om,
        Sorry for not being clear.
        I need to make the “white field” of the archives of drop down menu a darker color same as Search box right now, change the drop down arrow to custom color on up and over and change text inside of drop down menu to dark grey instead of black to match the site. I have tried a bunch of ways, but still cant figure it out.
        Thank you very much for looking in to it,
        Olena

        Like

      4. HI Olena,
        Sorry, i missed your comments…sorry for that..
        **** To change your right sidebar’s drop down. pls check the following code

        .widget-area select {
        background-color: red; //to change drop down background color
        color : white; //to change the font used in drop down..
        }

        Regards
        Om

        Like

      5. Hello Om,
        I was wondering if I was able to convey what I’m looking for?
        I can put together image files to demonstrate exactly what I’m trying modify.
        Please let me know if it can be helpful.
        Thanks a bunch,
        Olena

        Like

      6. Hi Olena,
        sorry for the late..

        I have replied your previous comments.. here is the code again

        .widget-area select {
        background-color: red; //to change drop down background color
        color : white; //to change the font used in drop down..
        }

        Pls let me know if you have any confustion..

        🙂

        Regards
        Om

        Like

      7. Hello Om,
        Thank you very much for your help!!!!!!!!!!

        It did the trick for the background, but the text is remaining black and I really would like to change it to grey.

        Is it any way to change the black outline around the drop down box to grey as well?

        Also I was wondering if it is any way to control the colors of the button on the right side of the drop down. Right now it is very light grey and on over it turns blue?

        Thank you,
        Olena

        Like

      8. HI Olena,
        Pls try this code… it should work..

        .widget-area select {
        color: grey;
        }

        ALso.. where is the button? i didnt see any button in the right side….would u mind to clarify?

        Om

        Like

      9. Hello Om,
        Thank you for the respond!!!!
        Strange thing… The code will work only if I separately write it as shown below. It will not change the color of the text any other way…?… but it works now, so I guess I’ll just let it be 🙂

        .widget-area select {
        color: grey;
        }
        .widget-area select {
        background-color: red;
        }

        My other question was about small, square, looking down arrow button right next to “Select month” I’m not sure how else to describe it 😦 I would like to change it to the custom color if possible.

        Also I was wondering if it would be possible to make the blue highlight color on the drop down menu change to custom color?

        Thanks a bunch for all the help!!!
        Olena

        Like

  87. Hi

    Wow, great info! Thanks!

    I was looking for a way how to change the font color in my blog post headings and came across your tips. I did apply what you wrote under “Page Title/Entry Title font color” and it did work, well: partially. The strange things is that the entry title color was only changed on the first page, where only the first part of the blog post is displayed. When I click an entry title to see the full post, the heading is again black…

    Any answer??

    Regards,
    David

    Like

    Reply

      2. HI David,
        WOudl u mind to try the following code and let me know it is ok or not

        ** the code will will change your full post’s site title color

        #content .entry-title {
        color: #183884;
        }

        Regards
        Om

        Like

  88. Hey Om,

    I actually do have another question (although now its twenty ELEVEN related): can I have as default that every time I bold a text that this bolded text appears in a certain color?

    Regards,
    David

    Like

    Reply

      1. Sure, sorry 🙂

        When I write a blog post sometimes I highlight parts of the text by bolding it. I would like to appear all bold text automatically in a certain color, in each article I write. So I was wondering if it is possible to set a default for that somewhere in the style sheet, so that I don’t have to adjust the color of bolded text manually all the time.

        Does that make my question better understandable?

        David

        Like

      2. Hi David,
        yes, you can easily do the job by using some css rule…
        Would u mind to share me the link of that page where u used that bolded text? Also.. let me know which color u prefer for the bolded text…

        I will share you the css code..

        Regards
        Om

        Like

      5. shoot, missed a letter 🙂

        http://www.kohlenhydrate-tabellen.com

        By the way: I am going through your list, trying to find where I can adjust ALL fonts in ALL written text to Verdana. Is that possible? Or do I have to gho through each and every instance where font family comes up in the CSS? The thing is that in the twenty eleven tips you mention ‘font family’ but I can nowhere find that attribute in the twenty eleven style sheet…

        Like

      7. Om

        The issue is: I can’t find any ‘font family’ in the style sheet of twenty ELEVEN (sorry, I know, this should better go under your twenty eleven post not under this twenty TEN post)… I looked for the body attribute and found some, but not in connection with the font family attribute. Even when I look only for the term font family I get an error message. Strange. So I can’t change the font.

        Regarding the site: yes, it’s indeed new. I am working on it now. As a different example you can look at my other (German speaking) blog where I want to apply the same settings regarding bolded text: http://www.davidaltmann.com/wettbewerbsbeobachtung-und-marktforschung-mit-xing

        David

        Like

      8. Hi David,
        Just paste the code

        body {
        font-family: verdana;
        }

        at the bottom of theme’s (either it is twenty eleven or twenty ten 🙂 ) style sheet (style.css) and save it… the body font should change..

        Also,

        if you want to change the bolded text (dont use your manual change) paste the following code at the bottom of style.css and check

        strong
        {
        color:red;
        }

        Like

      9. Cool, Om! Will try immediately, but: when you say ‘bottom’ you mean at the very very end, meaning after the very last }

        Right?

        Like

      10. Right David.. the code will go at the very bottom of style.css..

        *** i am leaving from office after 15 minutes..will reply u back from home.. i will be available after 4 hours from now..

        🙂

        Regards
        Om

        Like

      12. Om 🙂

        How does the color code #0066CC have to be applied as a color name? In your example above you write ‘red’ but how is #0066CC called? Blue? Or can I still use the color code?

        So many questions, but also so many great expert advise from you 🙂

        Like

  89. Aaaah, it all works!! Great!!!

    Thanks so much Om!

    Currently I am only trying to find out who I can disable the comment function on certain pages or posts. Do you have a solution for that too?? 😉

    Like

    Reply

    1. Hi David,
      there is a plugins called “No comments on pages” which will remove comments section from all of your pages (not from posts).
      You can try that..

      🙂

      will be back after 4 hours..

      Regards
      Om

      Like

      Reply

      1. When you’re back: is there a way to significantly decrease the empty space between the tagline and the header at the very top?? This space is so big (at least in twenty ten and twenty eleven) that it moves the content unnecessarily lower. I have already applied what you wrote at the twenty eleven article about the blank space above the site title.

        Like

      2. Hi David,
        if you want to remove the empty space between your site description and top image in twenty eleven theme try the following code..

        #site-description {
        margin: 0 270px 1.65625em 0;
        }

        Regards
        Om

        Like

      3. Hi Om

        Thanks for the additional tip, so far everything worked out just fine 🙂

        I came across another issue: I am tryingto create a blog post that contains more then 60.000 words (it’s a very long table with words and numbers). I saved the text also in a rtf file and I see therefore that is has a bit less than 1MB in size. Well, when I copy the text into the WP post and want to do a preview, I get the following error message:
        Fatal error: Allowed memory size of 33554432 bytes exhausted (tried to allocate 933160 bytes) in /home/XXXXXX/public_html/wp-includes/post.php on line 2554 (I exchanged some info with XXXXX here). Any idea on how to solve this?

        A second question would be: is it possible to link within this post? I mean: since the info is very wide spread, I would like ot give the reader the option of a list at the very beginning where with a click the reader will be automatically jump down to the spot s/he wants to be, in order to avoid excessive scrolling.

        Regards!
        David

        Like

      4. Hi David,
        Good morning..
        It may be memory allocation problem which u r facing…
        without checking i cant say anything about it..

        Also.for your 2nd problem..
        you can use Recent Posts widget in the sidebar to show the posts link in the sidebar for your readers..

        Om

        Like

      5. Hi Om

        In the meantime the memory issues is solved. I contacted my hosting company and they adjusted the memory in the php.ini file.

        I am facing another serious challenge now: since the post I want to publish is very long (70.000 words), the post remains blank after saving it. I have tried to save it as post and as a page but the result stays always the same: a blank page…. I have tried splitting it up into pieces, which works, but it’s just a second option and I’d prefer to publish the whole thing instead of 10 different pieces. Is there any plugin or other solution about this? I have tried it with twenty eleven as well as another theme (clear light blue), always the same issue though.

        David

        Like

      8. as you can see, I changed theme because of this issue, because if I have to split the post up into different chapters then I need a theme that allows for sub-pages, which twenty eleven doesn’t offer.

        Like

      9. Umm..Just check..
        The content is missing somehow.. without checking it cant say anything..
        If you are doing copy paste from ur word document to wordpress post…then check any unwanted character or something is inserting or not..though the possibility is low..

        Regards
        Om

        Like

      10. Hi Om

        Thanks so much for all your support! Indeed there must have been a certain character or command that WordPress didn’t like. I didn’t find out what exactly but that’s not so important because in the end I was able to filter out the part that disturbed WordPress, so that I am online now with my list: http://kohlenhydrate-tabellen.com/kohlenhydrate-tabellen/ 🙂

        The only strange thing now is that when I want to do adjustments to that list is that I have to work in the html view because if I choose the visual view then the whole tables get messed up… well, I guess that’s the price I have to pay for being allowed to reuse this table from a university and thus not having to collect all the data by myself… 🙂

        One question for the time being: as you can see, the font is not Verdana. What code would I have to enter in the html view of this page in order to adjust the font of all tables to Verdana? I did adjust that in the style sheet but somehow this is overridden by the font of the table.

        Regards from Greece!
        David

        P.S.: I recommended your site strongly to my network and also to the big readership at http://www.smartpassiveincome.com (a blog worth following, by the way 🙂 )

        Like

      11. Hi David,
        Good Morning..
        Yes..you are right.. there is some html characters which may cause wordpress not to show Posts or pages …

        To change your table’s font you can try the css/html of the following html tag

        ” pre ” which is used to show your page’s tabular view..

        Regards
        Om

        Like

  91. Good morning. I want to have same-day posts show up under a single date entry, but there doesn’t seem top be an easy ‘toggle’ or ‘switch’ to do so…

    Gotta hack?

    Like

    Reply

      1. Sorry about the time, and certainly no hurry. Let me clarify….

        I want all posts for one day to only display a single date/time stamp; as it sits now the latest ver of TwentyTen displays a date/time stamp for each post, same day or not…

        Thanks.

        Like

  92. Hi Om,

    You were a great help to me previously, giving me code to default header text to standard text i.e…

    }
    h1, h2, h3, h4, h5, h6 {
    clear: both;
    font-family: Georgia,”Bitstream Charter”,serif;
    font-size: 16px;
    font-weight: normal;
    }

    I’ve now changed to a different theme and have tried adding this code to the style sheet but I’m having no luck. Can you help?

    http://www.soundsbetterwithreverb.com

    Many thanks,

    James.

    Like

    Reply

    1. Hi James..
      to make changes in your theme’s post title try the following code

      h4 a {
      color: #181818;
      font-size: 16px;
      font-weight: bold;
      }

      h1,h2 is not used in your site’s front page..

      Regards
      Om

      Like

      Reply

  93. Thank you for writing such a thorough article – you have answered so many questions for me!

    A problem I am having is that I adjusted the content area on my blog (http://hernewleaf.wordpress.com) to 550px to allow for a larger sidebar – the code you provided worked well, but when I try to widen the sidebar to anything larger than 240px, it falls to the bottom of the page. I would love to have it be (at least) 300px wide. Perhaps it’s to do with my content, not the code. Do you have any suggestions for trouble-shooting this problem?

    I am also interested in adding a navigation bar below the header with an image as the background, as opposed to a solid box of color. Do you know if this is possible?

    Again, thank you SO MUCH! I have learned just as much reading through the comments as I did on your original post. Thank you!

    Like

    Reply

    1. Hi Kira,

      thanks for ur comments..and sorry for the late reply..
      Would u mind to try the following code.. it will help u to make ur sidebar 300px width..

      pls let me know it works or not…

      #container {
      float: left;
      margin-bottom: 0;
      margin-left: 0;
      margin-right: 0;
      margin-top: 0;
      width: 640px;
      }
      div#content {
      margin-left: 0;
      margin-right: 0;
      }
      #primary, #secondary {
      float: right;
      width: 300px;
      }
      #main .widget-area ul {
      margin-left: 0;
      padding-bottom: 0;
      padding-left: 20px;
      padding-right: 0;
      padding-top: 0;
      }

      Regards
      Om

      Like

      Reply

      1. Om, that worked beautifully! Thank you so much for getting back to me so quickly. I have one more question if it’s not too much trouble:

        The links on my blog are blue (or purple when visited), but I want to change them to a dark gray, #333333. Could you help me out with the code for that?

        Thank you!

        Like

      2. Hi Kira,
        Pls check this code

        a:link {
        color: #333333;
        }

        Also..pls check ur site with different browser.. as due to increase of width different browser may render it differently..

        Regards
        Om

        Like

  95. I just created a new website with wordpress and am trying to change the color and font size of my site title and site description. I went into style.css and changed the color to red (FF0000) and tried to increase the size. It appeared to have updated my changes, but when I checked my home page, nothing had changed.

    I am using 2010, and HostGator. Perhaps I need to do it through my c-panel with HostGator, instead. I’ve been banging my head against the wall with this problem all weekend! Please help. I’m such a non-techie…

    Like

    Reply

      1. I am NOT using child theme. Hmmm, maybe that means the basic template of 2010 stands as is. Should I be using that instead if I want to make changes?

        As for saving the code, I’m just hitting the button at the bottom of the page that updates the changes.

        Thanks for responding.
        Tiffany

        Like

  96. Hi there,

    I’ve been trying and surfing the net for answers, but still without luck 😦

    Do you know how I can create a page with 10 lines of text that will not change (static) followed by an overview of lets say 30 posts. I want to create that for several pages on my site.

    Hope anyone has some tips & tricks for me.

    Cheers, JA

    Like

    Reply

    1. Hi Jeron..
      Yes.. u can create it by using page template.

      where the page content will be shown in the top..and below of that page some posts of specific category can be shown..

      i think u r searching for this type of something..right?

      Om

      Like

      Reply

  97. Ok, it’s me again. I’m ready to bash my head against a wall.

    I am trying to upload a photo of myself into my About me page and it won’t let me. I added the plugin and still nothing. Do I have to resize it? It’s just a photo from a regular camera.

    I downloaded Photoscape, but am not sure if I can use it to make my photo uploadable.

    Help!

    Like

    Reply

  98. Hello again! I would love some help editing the menu below my header. I want the background to be gray (#cccccc) and the links to be white (#ffffff). I would also like to be able to change the font of the links to a sans serif font.

    Thank you!

    Like

    Reply

      2. Hi Kira,
        pls try the following code

        #access {
        background: none repeat scroll 0 0 #CCCCCC;
        display: block;
        float: left;
        margin: 0 auto;
        width: 940px;
        }

        #access a {
        color: white;
        display: block;
        line-height: 38px;
        padding: 0 10px;
        text-decoration: none;
        }

        Pls let me know it works or not

        Om

        Like

  99. Hi there. I am new to wordpress. I am trying to delete the “Theme: Twenty Eleven | Blog at WordPress.com. Fonts on this blog” in the footer. What code should I use?

    Many thanks!

    Like

    Reply

      1. Which one should I put the code under….and I assume just at the bottom of editor script.

        RTL Stylesheet
        (rtl.css)
        Stylesheet
        (style.css)
        Visual Editor RTL Stylesheet
        (editor-style-rtl.css)
        Visual Editor Stylesheet
        (editor-style.css)

        I think it’s style.css which I think I did 8 months ago when working with this theme…thanks

        Like

  101. I inserted code at the end of my style.css and hit save, and the search area at top and title to page is still there…..added
    #page {
    margin: 0 auto;

    }
    #branding hgroup {
    display: none;

    }
    and
    li#search {
    display: none;
    }

    Like

    Reply

      2. Hi Michael

        🙂 thanks for the coffee…

        would u mind to check the following css code to remove the search bar from the top

        #branding #searchform {
        display: none;
        }

        Om

        Like

  103. OM, AWESOME, you just saved me a ton of time, the Title and search gone, and love how the banner it spaced at the top….Your’re the BEST!!!! If I have any other questions, I’ll come back and ask and get you more coffee…..smiling….

    Like

    Reply

  104. OK Om, one more for the day, then done…my Page titles, I want gone….and eliminate the space between content on page and menu bar…I guess I’m heading back to the donate bucket earlier than planned…..

    Like

    Reply

    1. Hi Michael..
      i think u r searching for this

      .page .entry-header {
      display: none;
      }
      .page .entry-content {
      padding-top: 0;
      }

      this code will work for all pages.. pls let me know it is ok or not

      Om

      Like

      Reply

      1. Beautiful!!! OK, taking a break, moving onto another clients site (different theme) I got ya another pot of coffee….smiling….be back next week if needed….THANK YOU again!!!!!!!

        Like

  106. hello,
    I want to place google adsense ads below or left side of every post.I have self hosted wordpress site.please help me.

    Like

    Reply

  107. Great post. Thanks for all the information.

    How do i modify the menu in Twenty Eleven?

    Example:
    Have this:
    Home Products Services About
    Want this: (Right justify About)
    Home Products Services About

    I want to be able to control each menu item.

    JB

    Like

    Reply

      1. Sure. Here it is Om. johnborsch.com.

        I would like to be able to move “Experience” & “LinkedIn” to the right and leave “Home” and “Posts” to the left.

        JB

        Like

      3. Om

        Thanks for looking. I would like the LinkedIn Menu item to be all the way to the right. Only the LinkedIn item. The other three I want where they are.

        John

        Like

      5. Om, you are the best. Thank you. Could you please explain the code to me. How did you determine the item number?

        John

        Like

  110. WOW, again awesome. I’m assuming I can play with that % number to widen it further if I want. I don’t want to go to wide where it looks weird….Enjoy the coffee, I’m heading to the gym, then coffee. Lost 25 pounds since Feb 1st this year….Again, THANK YOU!!!!!!!

    Like

    Reply

    1. Hi Michael..
      wow..thats great…
      and thanks for the coffee..
      if u have any problem in future..just share me here in the comments section.. i will try my level best to reply asap…

      Om

      Like

      Reply

  111. Thank you so much for all of the info here. It has been really helpful. But I still have a problem, actually two problems within the 2011 theme.
    First, i have replaced my home page with a splash page (with a .swf file). I have a function time that sends the index page to the first page of the site, home. Now having said that:
    I also replaced the site title with an logo image and now it is no longer clickable to return to the home page. And now that the index is actually a splash page when a visitor would click on the featured image, it returns them to the splash page en lieu of the actual home page.
    I hope that is not too confusing. I am working on a redo of this site for a class project and I am just really stuck. I am familiar with php, but apparently not as familiar as I should be.
    Here’s the site: ebisusushisd.com/v2. It’s a work in progress.

    Like

    Reply

  113. Hello, is it possible to upload a new font into the Twenty Ten theme? I downloaded a “hand-written” font from the internet, but now I want to use it on a webpage. If it’s possible, how can I do this best, ’cause I’m not that good with CSS.

    Thanks and regards,
    Josephine

    Like

    Reply

  114. How can you ad a link button on your header?

    Say: like ” get quote” button

    Like a hot spot on your header. (link area)

    Thanks
    Gabby

    Like

    Reply

    1. Hi,
      thanks for ur comments again… yes. i can help u to remove the titles from pages..
      would u mind to check this code pls

      .post .post-title {
      display: none;
      }

      is that something u were asking for?
      let me know pls

      Om

      Like

      Reply

  120. Okay, I see that they are. Let me try again.

    I hope it’s not too late to ask a question on this thread. I have an upgraded 2010 theme, and though I know a fair amount of html and css, I find the css sheet and template system unusually complex. Anyway, I’d like to modify a couple of things. After each entry title there is entry-meta, and after the post there is another entry-meta (or perhaps it’s called post-meta). Above the post is this: Posted on December 31, 2012 by My Name.

    1. I’d like to get rid of the words “Posted on.”
    2. I’d like to increase the spacing between the date, the word ‘by,’ and My Name.
    3. to change the font style and family of any of that text at will. Especially I’d like My Name to be in italics.
    As to the second set of meta info, I’d like to get rid of “Posted in (whatever category) and leave only the “Leave a comment.”

    Any chance we can do this?

    http://williamluse.net/Apologia

    Like

    Reply

    1. Hi WIlliam
      thanks for ur comments…actually it is my blog hosted in wordpress.com

      regarding ur issues

      1. To remove the word “Posted On” from Twenty Ten

      .meta-prep-author {
      display: none !important;
      }

      2. To increase spacing between “Date”, “by” and your name

      .entry-meta span {
      padding-left: 6px;
      }

      3. Author name (your) to be Italic

      .author a {
      font-style: italic;
      }

      4. To Remove the Category Meta from footer

      .entry-utility .cat-links,.entry-utility .meta-sep {
      display: none;
      }

      Regards
      Om

      Like

      Reply

      2. It all worked, like magic, and even enabled me to modify a few other things. A couple more things, for which I will of course buy you a coffee.
        1. I was able to transform the author’s name font style (in entry-meta), but not its size. I’d like to increase it by at least one point, say from 12 (which is what I think it is now) to 14.
        2. I’d like to put a border just below the post content ( 2px width, 50%length, color=navy) and before the entry-utility.
        3. And finally a hard rule or border after the entry-utility to separate one post from another.

        Thanks in advance.

        Like

      3. Hi William

        1. To change Author meta’s font size of Twenty Ten Theme use this

        .author a {
        font-size: 15px !important;
        }

        2. If you want to use border Just bottom of Content and before Entry-Utility

        .entry-content {
        border-bottom: 2px solid navy !important;
        border-color: navy;
        margin-bottom: 9px;
        padding-bottom: 6px;
        }

        3. I think if u use issue 2… issue 3 not necessary…

        let me know what u think

        Om

        Like

      4. Mostly it’s worked quite well. Your last suggestion didn’t give me quite what I wanted with the borders, but a little tweaking and a hard code in a couple of templates did the trick. You can see what it looks like here: http://williamluse.net/Apologia

        The main thing I haven’t been able to figure out is that the font size of the site-title on the author archive page (accessed by clicking on my name at the top of the post) has fallen from its normal 30px to about 15 px, and so have the entry titles for each post. They seem to have been overridden by this:

        .author a {
        font-family:Times New Roman;
        font-size:15px !important;
        font-style: none;
        text-decoration: none;
        }

        However, that’s how you fixed the font-size of the author’s name, and I certainly don’t want to lose that. Under font-style I changed ‘italics’ to none, because that changed everything on the author archive page to italics except for the post content. But the italics weren’t that important anyway.

        Everything seems to be ok on all the pages except that one, the author archives.

        Like

  121. Donation made. One last thing and then I’ll leave you alone. Any idea how to put a 2px border to the right of the sidebar, and another one under each of the widget areas in the sidebar? I ask only because I’ve been struggling to do this for a couple of days and have had no luck.

    Like

    Reply

    1. Hi William
      for the border between left sidebar and content section use this code

      #container {
      border-left: 1px solid lightgrey;
      float: right;
      margin: 0 -240px 4px 0;
      width: 100%;
      }

      And..widget seperator border

      .widget-container {
      -moz-hyphens: auto;
      border-bottom: 1px solid lightgray;
      margin: 0 0 18px;
      padding-bottom: 7px;
      word-wrap: break-word;
      }

      Om

      Like

      Reply

  122. Hi there! I want to create a new heading (h7) so that I can customize text w/n a post (to the orange Honey Script text). Tried adding to the stylesheet, unsuccessfully.

    Like

    Reply

  124. I’am a beginner and I have a problem and I know It’s a simple case for you. but I prefer get help via email . pls let me know your email addr.

    Like

    Reply

      1. Hi Om,
        I have tried using Simple custome css plugin.
        First try , I used code #15 to change Header Image size , it’s work , only it’s not centered then I remove again the code.

        Second I used code #17 and #18 To make the Header and Menu Full width , but it’s not work, do I must use also code #15 ?

        sorry for the stuppid questions, I am only a beginner

        Rgds,

        Like

      2. Hi Mujid
        i have checked your header image issue….
        i found the header image is showing Ok?

        REgarding full width issue

        .styles #header, .styles #main {
        padding-left: 0px !important;
        padding-right: 0px !important;
        }
        #branding {
        width: 100% !important;
        max-width: 100% !important;
        }
        #branding img {
        width: 100% !important;
        }
        #access {
        width: 100% !important;
        }

        Let me know if it works

        Om

        Like

    1. HI
      thanks
      sorry for the late response
      i was away for few days to reply properly

      would u mind to try this code to make the content section wider?

      #content {
      margin: 0 252px 0 20px !important;
      }

      let me know what you think
      Om

      Like

      Reply

      6. thanks sorry for the late response
        umm..got your point… ok..if you use that theme..i can help to make it smaller too

        but..better you can contact me in my fiverr profile..I may need the dashboard access
        Om

        Like

      1. Thanks, Om. I don’t find any text matching this in the Widget area of the style.css page. What I do find is this:

        .widget-container {
        word-wrap: break-word;
        -webkit-hyphens: auto;
        -moz-hyphens: auto;
        hyphens: auto;
        margin: 0 0 18px 0;
        }
        .widget-container .wp-caption img {
        margin: auto;

        ___________________________

        I’m guessing that if I set the 18px setting in that to 0 it will have the same effect. Does that sound right to you?

        Thanks. David

        Like

  129. This is such a wonderfully summary of useful css. Thanks! It did not answer one question for me. How can I center the menu items in the menu bar under the header image. I have not had any luck with it. Thanks..

    Like

    Reply

      1. The site is https://thoughtpaths.com I want the main menu bar items centered. The custom css I have used elsewhere does not work for twenty-ten. Also, I would like to reduce the height of the header image to about 175px while keeping the menu at the bottom of the image as it is now.

        Like

      2. I have figured out and the menu is now centered. However, if you can tell me how to reduce the header image height I would greatly appreciate it. Thanks.

        Like

      3. Ok I have figured out how to center the menu. But if you can tell me how to reduce the height of the header image it would be much appreciated. Thanks.

        Like

      5. It worked but even though the image is exactly the right size the theme insists on cropping it to a much narrower wide and then stretches and distorts it. Strange.

        Like

  130. Hello 🙂
    Thanks for this beautiful Theme! I did a few changes in the CSS with the help of this site. But a few days later I cannot access the “Edit CSS” anymore.. can you please help me what to do? I just wanted to do a border around each post to separate them.
    Regards, Tina

    Like

    Reply

  131. Hello and thank You for your help by providing all these usefull css-tips.
    My question is: How can I center my navigation menus?
    Best regards
    Herbert

    Like

    Reply

Leave a comment