homepage list: removing bullets and text postioning next to thumbnails

Home Forums Automattic Basic Maths homepage list: removing bullets and text postioning next to thumbnails

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #105208 Resolve

    nycal99

    On our home page (titled “About”), can I get suggestions for 1.) removing or making the bullets in the list invisible and 2.) moving the text descriptions upward against the thumbnails so that the long ones don’t run under the thumbnail?

    I tried using alignleft, but it forced the subsequent thumbnails under the text description.

    Thanks.

    The blog I need help with is dorothydunnconsulting.com
    #128824

    Michael Fields

    Hello,

    I think that the following styles will get you to where you want to be:

    body.home #content .entry-content .rightcolumn > ul,
    body.home #content .entry-content .leftcolumn > ul {
    list-style: none;
    margin-left: 0;
    }
    body.home #content .entry-content .rightcolumn > ul,
    body.home #content .entry-content .rightcolumn > ul li,
    body.home #content .entry-content .rightcolumn > ul li img,
    body.home #content .entry-content .leftcolumn > ul,
    body.home #content .entry-content .leftcolumn > ul li,
    body.home #content .entry-content .leftcolumn > ul li img {
    float: left;
    }
    body.home #content .entry-content .rightcolumn > ul li img,
    body.home #content .entry-content .leftcolumn > ul li img {
    position: relative;
    top: -5px;
    }
    body.home #content .entry-content .rightcolumn > ul li,
    body.home #content .entry-content .leftcolumn > ul li {
    margin-bottom: 10px;
    }
    body.home #content .entry-content .rightcolumn > ul a,
    body.home #content .entry-content .leftcolumn > ul a {
    margin-left: 0;
    }

    Please note that these style should only work on the home page when you are using the rightcolumn and leftcolumn classes.

    Please let us know how this works and if you have any questions about it :)

    #128829

    nycal99

    That is extraordinary. It worked brilliantly. BRILLIANT. Thank you so much!

    So I was hoping to just cut and paste whatever solution you had supplied to me to also use on our SELECTED PROJECTS page. Clearly that won’t work. Can I substitute something for the string “home” in what you gave me??

    I am so happy with the home page, that if you say it is problematic to work on the SELECTED PROJECTS page, I’ll just make that page single column, and still be happy.

    THANKS.

    #128830

    Michael Fields

    You’re very welcome! Glad the code worked for you :)

    So I was hoping to just cut and paste whatever solution you had supplied to me to also use on our SELECTED PROJECTS page. Clearly that won’t work. Can I substitute something for the string “home” in what you gave me??

    Kind of, if you would like this formatting available throughout your whole site you can try removing the body.home part from the beginning of each selector. This should work rather well, but could cause a bit of confusion if you add a normal looking list inside of “left-column” or “right-column” in the future.

    Perhaps the best thing that we can do would be to define a custom class that you can add in addition to “left-column” and “right-column”. this way you can use normal lists where needed and the custom “thumbnail lists” on your home and selected projects pages. What do you think?

    #128839

    nycal99

    I think that would work…

    #128843

    Michael Fields

    OK, cool! First you will want to replace the code above with the following:

    body #content .entry-content .project-column > ul {
    list-style: none;
    margin-left: 0;
    }
    body #content .entry-content .project-column > ul,
    body #content .entry-content .project-column > ul li,
    body #content .entry-content .project-column > ul li img {
    float: left;
    }
    body #content .entry-content .project-column > ul li img {
    position: relative;
    top: -5px;
    }
    body #content .entry-content .project-column > ul li {
    margin-bottom: 10px;
    }
    body #content .entry-content .project-column > ul a {
    margin-left: 0;
    }

    Then you will need to add the “project-column” class in addition to the “left-column” and “right-column” classes in the post content. Your new html should look something like this:

    <div class="leftcolumn project-column">

    and

    <div class="rightcolumn project-column">

    #128846

    nycal99

    Again, THANK YOU!

    I left the front page as is — just because it was working and to leave it in case I had a a problem…and tried it only on the SELECTED PROJECT page, where it worked right away….except the two-line “Smithsonian Cooper Hewitt National Design Museum” title doesn’t line up so well. Any thoughts?

    #128850

    Michael Fields

    There are more specific styles for static pages in Basic Maths’ stylesheet. We can use !important to override this behaviour. Please try changing the first bit of code to:

    body #content .entry-content .project-column > ul {
    list-style: none;
    margin-left: 0 !important;
    }

    #128851

    Michael Fields

    Opps, sorry, that was incorrect. Here’s the correct place:

    body #content .entry-content .project-column > ul a {
    margin-left: 0 !important;
    }

    #128858

    nycal99

    That worked like a charm to line up the text….but it reintroduced the bullets.

    #128860

    Michael Fields

    Strange, it looks like this rule got removed:

    body #content .entry-content .project-column > ul {
    list-style: none;
    margin-left: 0;
    }

    Could you try to add it back in?

    #128863

    nycal99

    Ahh. My fault: I replaced it with the last bit you sent, rather than just adding the last bit. THANKS FOR ALL YOUR HELP.

    #128864

    Michael Fields

    You’re welcome! Can we close this ticket as resolved?

    #128865

    nycal99

    Yes. :-D

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

The topic ‘homepage list: removing bullets and text postioning next to thumbnails’ is closed to new replies.