How to add a class?

  • Ichirei

    #2693

    I need to modify the CSS class “.post .entry” differently for the Home and other pages, but I can’t do it because they use the same class, so if I change that, I’ll change even the other pages where I don’t want the change. Is there any way to add another class so I can customize differently the posts in Home and the other pages?

    Thanks!

    Anonymous

    #21518

    Try using

    #home .entry-content {}

    (This is untested)

    Do you mean .post .entry? I think it will need to be .entry-content.

    What, exactly, are you wanted to change?

    Ichirei

    #21519

    So, I’ll try to explain better (with the small amount of english that I know XD).

    My first intention was to move the date on the left, outside the main content, and I did it –> http://i41.tinypic.com/wwjluu.jpg

    Now I want to give more horizontal space to the post, so I added “margin-left: -60px” to the “.post .entry” of the style.css, and now it looks OK! –> http://i40.tinypic.com/1655ee.jpg

    But when I go to a page, since pages don’t have date, the space is already full horizontally, so my modification margin-left: -60px to the .post .entry gives this result –> http://i43.tinypic.com/121voub.jpg

    So, the home looks ok, pages not, because both use he .post .entry CSS class, so my question is: how can I modify the posts in home, but not those in pages? The only thing that comes in my mind is to create a new class, but I can’t do that because WordPress doesn’t let me change the HTML. Maybe I could do this with PHP, but I know nothing about PHP 🙁

    Any idea, please?

    Anonymous

    #21520

    I see you are working on a localhost. Do you have a live version of the site where I can “play” with it?

    Anonymous

    #21521

    Remove what you modified… and try adding this to your child theme stylesheet (or custom css box in admin panel):

    .post .date {
    margin-left: -60px;
    }
    .post {
    padding: 25px 15px 20px 30px;
    }

    That should knock the date icon over to the left, and also adjust the content area to the left by 40 pixels. (original left padding was 70px)

    Anonymous

    #21522

    NOTE: You can also set your date to display as inline, rather than an icon, which will also give you more space in the content area.

    appearance -> graphene options -> “display” tab -> Posts Display Options

    Under “post date display”… choose “as inline text”.

    Ichirei

    #21523

    I did it! Thanks again, Josh!

    I played a little with the padding, and then changed the width value in .two-columns .post

    Anonymous

    #21524

    Great!! You’re very welcome.

    (Marking thread as Resolved)

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

Do NOT follow this link or you will be banned from the site!