Brand new to CSS Editor

  • Unknown's avatar
    teresafogel · Member ·

    Hi. I am totally new to WordPress, CSS and HTML. I am currently using the Yoko theme with the Custom Upgrade (thepixelandtheegg.com).

    I’ve been playing with the Appearance without editing the CSS, but I need to make some additional changes to the pages, etc. that I think will require the CSS Editor. The problem is, I don’t know how to begin.

    For example:
    If I want to remove my header image and some of the sidebar widgets (like the mouse image) from all pages except the home page, how do I use the CSS editor to do this?

    If I want to change the spacing on the image text attached to the mouse image “Meet Algae [a model organism]” so that it breaks in just the right place, how do I do that?

    And once I do have the code for these issues, where do I enter it on the stylesheet? Do I just open the editor, remove that welcome message and copy and paste my code, or is there an extra step/s involved?

    I realize these are basic questions from a total novice, but many of the tutorials I’m finding both on WordPress and the internet do not start at the absolute beginning. Any help or feedback would be greatly appreciated.

    Thanks for reading.

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    justpi · Member ·

    For the “absolute beginning” see here:
    http://wpbtips.wordpress.com/2013/02/21/where-is-the-theme-css-and-how-do-i-edit-it/

    To make changes you need to find the selectors for the elements you wish to modify. The selector for the header image in Yoko is:
    .headerimage

    Removing “some of the sidebar widgets (like the mouse image)” is vague: I can’t tell if you mean remove that particular widget but retain Sidebar 2, or if you mean remove Sidebar 2 altogether. If you mean the latter, the selector for Sidebar 2 is:
    #secondary

    So (assuming you mean remove Sidebar 2), you’d say don’t display the second sidebar and the header image in general, but display them on the homepage. In code: 

    .headerimage, #secondary {
    display: none;
}
.home .headerimage, .home #secondary {
    display: block;
}

    In that case you’d also need to increase the width of the main column on the homepage – I’m not continuing with this before you clarify whether you want to remove the whole sidebar or not.

    Making the widget title “break in just the right place” isn’t really a CSS question. Do you mean forcing a line break after “Algae”?

  • Unknown's avatar
    rtmillarholdingsinc · Member ·

    I’m also new to the Yoko theme and wondering how I can get rid of page titles? I’ve tried in CSS, but it’s not working… can someone point me in the right direction? Thanks!!

    http://www.toddmillarspeaking.com

  • Unknown's avatar
    designsimply · Member ·

    Looks like you figured out how to hide page titles on the Yoko theme with this CSS:

    .page .entry-title {
	display: none;
}

    Nice work!

  • The topic ‘Brand new to CSS Editor’ is closed to new replies.