WordPress.org

Ready to get started?Download WordPress

Forums

How to change font/background color in Twenty Ten them (41 posts)

  1. Punardeep
    Member
    Posted 3 years ago #

    I would like to know how I can change the Font size/color of the page names that appear in the header, I am trying to modify color codes in style.css in the following code but it doesn't seem to change work:

    /* =Global Elements
    -------------------------------------------------------------- */

    /* Main global 'theme' and typographic styles */
    body {
    background: #f1f1f1;
    }
    body,
    input,
    textarea {
    color: #666;
    font-size: 12px;
    line-height: 18px;
    }
    hr {
    background-color: #e7e7e7;
    border: 0;
    clear: both;
    height: 1px;
    margin-bottom: 18px;
    }

    Please help.

  2. stvwlf
    Member
    Posted 3 years ago #

    Hi

    If you are referring to the site Nav, in twenty ten that is associated with #access in the CSS - it is LI and A tags you need to adjust

  3. spacejamz
    Member
    Posted 3 years ago #

    you should use firefox with the firebug plugin, it will tell the exact code it is that you are trying to change so you don't have to go through each one of the codes.

  4. Punardeep
    Member
    Posted 3 years ago #

    Stvwlf - Do you mean update the Li and A tags in style.css file?

  5. stvwlf
    Member
    Posted 3 years ago #

    the CSS you need to change is in the area of

    #access li

    and #access a

    in the stylesheet. There are many settings, so make a copy of the file before you change anything.

    I completely agree with spacejamz that using Firebug makes this all much simpler. But many people I suggest that to never install it or learn how to use it, so I am pointing you to what in the stylesheet you need to change.

    Firebug is like having a microscope or stethoscope that shows you exactly what is going on with your CSS. But there is a learning curve associated with it.

  6. Punardeep
    Member
    Posted 3 years ago #

    I changed the color code in style.css in the area of both

    #access li
    and
    #access a

    Updated file and then when I check, still no change. I am really confused now, I even try changing color codes at other places, but nothing seems to change on the home page menu.

  7. stvwlf
    Member
    Posted 3 years ago #

    is your site online? what is a url of a page you want to change the color of? what color do you want to change it to?

  8. Punardeep
    Member
    Posted 3 years ago #

    stvwlf - My site is not live right now, but maybe you can check out the link:

    http://74.220.207.146/~ecojuice/

    I am trying to change the color of the black menu bar, to green and the text on the bar such as 'home', 'about us', 'contact us' to color white.

  9. stvwlf
    Member
    Posted 3 years ago #

    on line 369 in style.css is nav background styling

    #access {
        background: #000000;   --> change to #476d06 (or green of your choice)
        display: block;
        float: left;
        margin: 0 auto;
        width: 940px;
    }

    on line 392 is

    #access a {
        color: #AAAAAA;      --->  change to #ffffff to make nav letters white
        display: block;
        line-height: 38px;
        padding: 0 10px;
        text-decoration: none;
    }

    A problem you will have making that white is the Active nav tab is also displaying in white, so there will be no indicator of the active tab.
    On line 433 is the code that makes the active nav tab white. You can change the #ffffff to another color for the active tab:

    #access ul li.current_page_item > a, #access ul li.current-menu-ancestor > a, #access ul li.current-menu-item > a, #access ul li.current-menu-parent > a {
        color: #FFFFFF;   -->  change this to something not white
    }
  10. Punardeep
    Member
    Posted 3 years ago #

    stvlf - Thank you soo much, i finally got it to work, but I did had to update the file functions.php for changes to show up, i modified the color code in the function:

    function twentyten_admin_header_style()

    and then when i refreshed it, the changes showed.

    I am glad it finally works.

  11. stvwlf
    Member
    Posted 3 years ago #

    glad to hear!

  12. Punardeep
    Member
    Posted 3 years ago #

    stvwlf - One last thing I wanted to ask you was, since I was able to change the menu bar to green and the text to white, but i ran into another problem, on tabover, when you tab over other buttons, the entire thing shows white, so you cannot read the button text, do you know how to fix that, I will appreciate your help, you can visit the same URL above to see what I mean.

  13. stvwlf
    Member
    Posted 3 years ago #

    I am seeing the tab overs as grey and I am able to read the word in the button when the tab is over it. But none the less:

    The background and foreground colors in the hover state are on line 425

    #access li:hover > a, #access ul ul :hover > a {
        background: #AAAAAA;
        color: #FFFFFF;
    }

    you can experiment with different colors until you find the setting you like.

  14. Punardeep
    Member
    Posted 3 years ago #

    stvwlf - Thank you soo much, I finally figured this out, i am not a very tech savvy person, I appreciate your help, now i can play around with different colors.

    Thank you.

  15. stvwlf
    Member
    Posted 3 years ago #

    glad to hear it.

    So you know, you are more tech savvy than many people who ask questions on this forum. You know what a stylesheet is, you can find the code sections I pointed out, you can change them without blowing up your site! These are not small things.

    I wish for you a great site.

  16. Punardeep
    Member
    Posted 3 years ago #

    Hi stvwlf, One more questions I have for you is on a different topic, how do I insert a video on the home page, i have a video on youtube that I would like to display and play on the right side of the page in the widgets area, so when user clicks on it, it starts playing.

    I know how to put a link to a video, but i dont want to open a second browser window, i would like to play the video within the page itself.

    Thanks

  17. stvwlf
    Member
    Posted 3 years ago #

    Try this plugin - it has a widget you can use to embed the video in the sidebar.

    http://www.prelovac.com/vladimir/wordpress-plugins/smart-youtube

    I've not used this one before. The plugin author does excellent work so it should be fine. Follow the instructions closely

  18. Punardeep
    Member
    Posted 3 years ago #

    This worked like a charm, I am pretty close to completing my website, one last question I want to ask you is about the shopping cart, i am looking for a free wp shopping cart that integretes seamlessly and has basic capabilities to accept payment via paypal where I can manage product inventory, I downloaded wp simple paypal shopping cart but that one does not allow me to put images of product.

    Any suggestions??

    Again, thanks a lot.

  19. stvwlf
    Member
    Posted 3 years ago #

    see if eShop has what you need

  20. esmi
    Theme Diva & Forum Moderator
    Posted 3 years ago #

  21. Punardeep
    Member
    Posted 3 years ago #

    Yes, this seems like a good one, but it is still in test phase, not sure if I should put it live on my site.

    It does have a lot of features that i need.

  22. Punardeep
    Member
    Posted 3 years ago #

    Nevermind, i changed the setting to live, i had to add an email address.

    I have a 'buy now' page and i want the eshop shopping cart to show under that page, i pasted the short code [eshop_details] in that page but that didnt work, any ideas on how I can get the cart to show up under a specific page.

  23. esmi
    Theme Diva & Forum Moderator
    Posted 3 years ago #

    but it is still in test phase

    Erm - no it's not! eShop has been out of beta for about 4 years! 6.2.1 is the latest stable release.

  24. esmi
    Theme Diva & Forum Moderator
    Posted 3 years ago #

    but that didnt work

    Have you filled in all of the product details and ticked Stock Available on that page?

    FWIW, there's dedicated eShop support available on http://quirm.net/forum/forum.php?id=14

  25. Punardeep
    Member
    Posted 3 years ago #

    esmi - Yes, I did fill out all the details in the settings under the general tab, still the cart does not show up any where on the site, I will try to find it on the eShop support if there is any thing, usually placing the short code on the page works (Atleast it did with the paypal shopping cart) not sure about eShop.

  26. stvwlf
    Member
    Posted 3 years ago #

    (esmi is being quiet about it but she is the co-developer of the eShop plugin, thus knows it quite well)

  27. Punardeep
    Member
    Posted 3 years ago #

    Hi Stvwlf - Do you know how I can show certain widgets under specific pages only. Right now if i add a widget like 'calender' recent posts' etc, it shows up under all pages of my site, do you know how to customize so that only certain widgets show on certain pages.

  28. stvwlf
    Member
    Posted 3 years ago #

    widget logic plugin

  29. Punardeep
    Member
    Posted 3 years ago #

    cool, thanks.

  30. innkeeperea
    Member
    Posted 3 years ago #

    Alright I guess my problem is similar. I have changed all different settings in the style sheet but I am still having problem trying to get the white background to change to the beige color I want. The white just seems too stark with the dark background

    It is like trying to find a needle in a haystack:-( I did it once with another site and now I forget where it was :-(

    Can some one point me to the right area in the style sheet I need to change? I already using a child theme I created.

    Here is a link to my test site:

    http://bluemontinluray.com/

    Thanks one and all.

Topic Closed

This topic has been closed to new replies.

About this Topic