Editing Chunk theme using CSS

  • Author
    Posts
  • #816654

    imveryape
    Member

    I guess my messages are getting through. What I wrote earlier was that it did finally work after I realized I was copying and pasting your code with a ( instead of a {. Now it totally works. Thank you very much. My other question was – Am I able to remove the “blog” area from the home page. So the area that says “Home” and “Share this” and the Facebook and Twitter signs. Also can I remove the “categories” section at the bottom and the “Meta” section at the bottom on the homepage only? And is it possible to change recent posts and archives on the bottom of the homepage to that aqua colour?

    #816655

    imveryape
    Member

    *aren’t

    #816660

    Sorry, that was entirely my fault. I used a standard parenthesis instead of a bracket. Use this.

    .home #site-title a {
    color: #FFFFFF;
    font-size: 200%;
    }
    #816673

    imveryape
    Member

    No worries, I am just happy it worked.

    What do you think of those other questions:

    1. Can I use CSS to remove the “blog” area of my home page? The area with “Home” and “share this” and the Facebook and Twitter symbols.

    2. Can I use CSS to take out the “meta” and “categories” lists of my homepage (not the menu but the list at the bottom)?

    3. Can I use CSS to change the color of the “most recent posts” and “archives” on my homepage to that aqua color?

    Thanks

    #816675

    1. Can I use CSS to remove the “blog” area of my home page? The area with “Home” and “share this” and the Facebook and Twitter symbols.

    .home #contents {
    display: none;
    }

    And you might want to also get rid of and extra border and some padding and margin if you do that:

    .home #widgets {
    border: none;
    padding: 0;
    margin: 0;
    }
    #816676

    2. Can I use CSS to take out the “meta” and “categories” lists of my homepage (not the menu but the list at the bottom)?

    To remove the meta widget from all pages, go to Appearance → Widgets and delete the Meta widget from theere

    To hide the meta widget just on the home page, you can use this CSS:

    .home #meta-2 {
    display: none;
    }
    #816677

    3. Can I use CSS to change the color of the “most recent posts” and “archives” on my homepage to that aqua color?

    To change all widget headings like “Recent Posts” and “Archives” and “Categories” to that aqua color, you can do this:

    .widget-title {
    color: #36BCAB;
    }

    To change them just on the home page, do this:

    .home .widget-title {
    color: #36BCAB;
    }
    #816678

    imveryape
    Member

    Thank you very much! I was very curious about the bordering to so thank you for giving me that info.

    However, the code to remove the Meta section didn’t work. Not sure why.

    #816679

    I can’t see the meta widget at http://imveryape.com/ and so it looks to me like it worked. Can you describe what you expected compared to what you’re seeing on your home page?

    #816680

    imveryape
    Member

    Really? Bizarre. I still see it under categories on my home page. Oh, I was also wondering if I can get rid of categories on the home page, since my menu bar already shows it.

    #816681

    imveryape
    Member

    Also, how can I cange the actual selection under “recent posts” and “archives” to white? For example, I would like to make the “february 2012” under archives white.

    #816682

    Here’s what I see on your home page: http://cl.ly/Dzsf

    #816683

    Also, how can I change the actual selection under “recent posts” and “archives” to white? For example, I would like to make the “february 2012” under archives white.

    If you make “February 2012” white, then it will be unreadable. I wouldn’t recommend doing that. Maybe another color? Try this, it will change the color of all links inside widgets:

    .widget a {
    color: darkslategrey;
    }

    Also see http://www.w3.org/TR/css3-color/#svg-color

    #816684

    imveryape
    Member

    That is super weird. I checked my iphone and I didn’t see the meta thing there. But I can see it on my desktop. Oh well. And I noticed from your view that white would definitely not work. I’ll try the grey, thanks. Because on the ipad for some reason you can see the whole image, and the black at the bottom make the widgets impossible to read. hopefully the grey will solve the problem. Too much aqua is not gonna look so great. Also, I noticed on the ipad and on your screen view the title isn’t centered. Anything I can do about that?

    #816685

    imveryape
    Member

    The title seems to just extend to the right instead of centering

    #816686

    I see that too. It looks to me like Firefox is displaying the bold font quite a bit wider than in Webkit browsers like Chrome or Safari. You could handle this in a couple ways. One way would be to make the font smaller. Another would be to widen the container widths like this:

    #container, #header, #menu, #footer {
      width: 900px;
    }
    #816687

    imveryape
    Member

    Your genuis is unparalleled, designsimply. You deserve a prize or a raise or something.

    Next thing to try is the changing the fonts on the widgets.

    Thanks for all your help!

    #816688

    imveryape
    Member

    Oh, sorry! One more question. I am looking to get rid of the categories widget on just the home page. Can you assist?

    #816689

    Sure. Look at the page source until you find the widget. You can use your browser’s web inspector (right-click → Inspect Element) or use an add-on such as Firebug for Firefox, or you can just look at the page source, it’s under View → Developer → View Source in Chrome for example.

    What you’re looking for is the “Categories” heading. Once you find it. Look one step above it in the html until you see the “id” or “class” for that specific widget. Then just use the same code you used to hide the meta widget on the home page and change out the selector for the categories one.

    Let me know if you get stuck.

    #816711

    imveryape
    Member

    Hi designsimply, I tried creating the code on my own and it worked great. But something weird is happening. Internet Explorer does not display some of the changes I have made, such as removing the meta and categories section from my homepage, and changing the color and hover colors on the widgets on the homepage. However, Safari and Firefox do. Anything I can do about it?

The topic ‘Editing Chunk theme using CSS’ is closed to new replies.