Topic: homepage list: removing bullets and text postioning next to thumbnails

Tagged: bullets, list, text postioning next to thumbnails

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

Author

Posts
January 17, 2013 at 2:22 am #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

January 17, 2013 at 2:58 am #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 :)
January 17, 2013 at 3:43 am #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.

January 17, 2013 at 3:56 am #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?

January 17, 2013 at 4:17 am #128839

nycal99

I think that would work…

January 17, 2013 at 4:42 am #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">
```
January 17, 2013 at 5:17 am #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?

January 17, 2013 at 5:29 am #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;

}
```
January 17, 2013 at 5:30 am #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;

}
```
January 17, 2013 at 5:57 am #128858

nycal99

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

January 17, 2013 at 6:04 am #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?
January 17, 2013 at 6:17 am #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.

January 17, 2013 at 6:19 am #128864

Michael Fields

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

January 17, 2013 at 6:28 am #128865

nycal99

Yes. :-D
Author

Posts

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.