Home › Forums › Automattic › Basic Maths › homepage list: removing bullets and text postioning next to thumbnails
Tagged: bullets, list, text postioning next to thumbnails
-
AuthorPosts
-
nycal99MemberOn 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.comJanuary 17, 2013 at 2:58 am #128824
Michael FieldsMemberHello,
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
andleftcolumn
classes.Please let us know how this works and if you have any questions about it :)
January 17, 2013 at 3:43 am #128829
nycal99MemberThat 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.
January 17, 2013 at 3:56 am #128830
Michael FieldsMemberYou’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?
January 17, 2013 at 4:17 am #128839
nycal99MemberI think that would work…
January 17, 2013 at 4:42 am #128843
Michael FieldsMemberOK, 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">
January 17, 2013 at 5:17 am #128846
nycal99MemberAgain, 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?
January 17, 2013 at 5:29 am #128850
Michael FieldsMemberThere 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;
}January 17, 2013 at 5:30 am #128851
Michael FieldsMemberOpps, sorry, that was incorrect. Here’s the correct place:
body #content .entry-content .project-column > ul a {
margin-left: 0 !important;
}January 17, 2013 at 5:57 am #128858
nycal99MemberThat worked like a charm to line up the text….but it reintroduced the bullets.
January 17, 2013 at 6:04 am #128860
Michael FieldsMemberStrange, 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?
January 17, 2013 at 6:17 am #128863
nycal99MemberAhh. My fault: I replaced it with the last bit you sent, rather than just adding the last bit. THANKS FOR ALL YOUR HELP.
January 17, 2013 at 6:19 am #128864
Michael FieldsMemberYou’re welcome! Can we close this ticket as resolved?
January 17, 2013 at 6:28 am #128865
nycal99MemberYes. :-D
-
AuthorPosts
The topic ‘homepage list: removing bullets and text postioning next to thumbnails’ is closed to new replies.