More text formatting options? Bullets? Tables?

pekr

Hi,

working on our studio website via Smug, so far http://studio.2zone.cz . I tried to do some Team and Price list section, where there is some text added. Adding photos, text, basic formatting is nice, but as for e.g. for the price list, I would welcome more structural aproach, e.g. at least some ability to have bullets, if tables are not part of the design.

Can it be somehow done via custome CSS, including custom thumbnail for the bullet? Hmm, maybe I will use a workaround - crate such design in some other SW, making it an image, but that is not the way I would like to go ...

Thanks,
Petr

rnrjosh

You can make something like a bulleted list using HTML. To add HTML to any page, click Customize > Customize site, and drag an HTML content block to the page. Something like this will give you a simple bulleted list:

• text
• text
• text

If you want a special thumbnail for a bullet, you'd really need to create an HTML table to really accomplish this. Or, you could build something with a bunch of individual photo content blocks, and a text box next to each image with the text you want. It may take a little finagling, but that might be another option if you don't want to use an HTML table.

pekr

Well, your example did not add any bullets, just some left padding. Maybe because the template does not implement the corresponding css. So I tried to add some CSS, and I have the following issue:

- first, when I try to upload really small bullet image, and finally get to the image link via Firebug, the system upsizes small image to this ugly stuff: http://studio.2zone.cz/photos/i-TCBKtT8/0/Th/i-TCBKtT8-Th.png. Is there any minimal size I have to work with?

I tried to add following code, linking it to our project page:

ul > li {
background-image: url("http://2zone.cz/images/postbullets.png");
background-position: left bottom;
background-repeat: no-repeat;
overflow-x: visible;
overflow-y: hidden;
padding-left: 20px;
}

It kind of works, need to play with the placement of the bullet arrow ... You can see the result here: http://studio.2zone.cz/Cenik

Allen

pekr wrote: »

Well, your example did not add any bullets, just some left padding. Maybe because the template does not implement the corresponding css. So I tried to add some CSS, and I have the following issue:

- first, when I try to upload really small bullet image, and finally get to the image link via Firebug, the system upsizes small image to this ugly stuff: http://studio.2zone.cz/photos/i-TCBKtT8/0/Th/i-TCBKtT8-Th.png. Is there any minimal size I have to work with?

I tried to add following code, linking it to our project page:

ul > li {
background-image: url("http://2zone.cz/images/postbullets.png");
background-position: left bottom;
background-repeat: no-repeat;
overflow-x: visible;
overflow-y: hidden;
padding-left: 20px;
}

It kind of works, need to play with the placement of the bullet arrow ... You can see the result here: http://studio.2zone.cz/Cenik

I stopped using ul's and use div's instead. bullet is • required space is  

<div class="myLinks" style="float: left;">
     [I]&[/I]#8226;[I]&[/I]nbsp;<a href="/Birds/Birding-2013-January">January Galleries</a><br />
     [I]&[/I]#8226;[I]&[/I]nbsp;<a href="/Birds/Birding-2013-February">February Galleries</a><br />
     [I]&[/I]#8226;[I]&[/I]nbsp;<a href="/Birds/Birding-2013-March">March Galleries</a><br />
     [I]&[/I]#8226;[I]&[/I]nbsp;<a href="/Birds/Birding-2013-April">April Galleries</a><br />
...

Then add this CSS in box CSS tab

.myLinks {
  margin-left: 20px;
  color: #ccc;
}

Darter02

Here's how I make bullet points. This method was shown me by a SM support person.

Use an HTML block.

In the HTML tab.

<ul>
    <li>List Name
       <ul>
          <li>List Item</li>
       </ul>
    </li>
</ul>

In the CSS tab.

ul {
  list-style: inside;
  margin-left: 12px;
  padding: 5px 0;
}

You can see it in this test folder I'm using to redesign my site.

pekr

OK, got it working in the end, as can be seen here: http://studio.2zone.cz/Cenik

I used a little trick, to get it under the text box, which normally aligns with the bottom of the image - created empty html container on the left side, and shifted the bullet related block top margin in negative direction ....

Darter02

They're not in-line when I checked your link.

pekr

Darter02 wrote: »

They're not in-line when I checked your link.

Well, when you enlarge the picture, then yes, you might be right. I tried to align bullets via CSS, but not much of a luck, so I use background-position: left bottom. It is generally good to give site a go for the testing purposes.

Of course it would be better if smugmug added the the bullet option to the text editor, or even simple tables option ;-)

I might do some tweaking, before our site goes into production ...