pages : how can we do a ul and li bullet list

grosloulou

hallo,
how can we do a bullet list in pages ?
there is no special icon in the rough raw text block and if we use a html block with ul and li there is no default list

best regards
marc

aschendel

These are controlled by a CSS default that the themes seem to have... you just need to add your own CSS rules to make them work the way you want. I'd keep them localized or use your own class / id's so you don't break the theme's UL/OL's. I'm not an expert in lists but just adding this to a page-level CSS element where I also had a list started to show them better:

ol, ul {
    list-style: circle;
}

Andy

grosloulou

aschendel wrote: »

These are controlled by a CSS default that the themes seem to have... you just need to add your own CSS rules to make them work the way you want. I'd keep them localized or use your own class / id's so you don't break the theme's UL/OL's. I'm not an expert in lists but just adding this to a page-level CSS element where I also had a list started to show them better:

ol, ul {
    list-style: circle;
}

Andy

where do you write this ?
suppose i create a new page with html block and use a ul, li.
where do i specify the ul, li css code ?

i have seen in page a html/css block but no idea how css works in conjunctio with html i write

best regards
marc

aschendel

In your scenario, the simplest approach would be, on your HTML block, click the CSS tab and pop that in there. The CSS in the HTML block would only be applied to that HTML block (as I understand it).

If you (or anyone else reading this) find yourself copying that CSS into a lot of different HTML blocks, you are approaching a classic website "problem" (ease of maintenance - or more accurately the lack of ease). If you want to have a specific "style" for your own lists all around your site, then you would put a bit of CSS that is just a bit more sophisticated into either a CSS block on your "Entire Site" or into your Theme's Custom CSS field and apply that to your lists via a class name.

I'd start by getting it to work in your simple scenario and then if you plan to use it over and over, decide if you want to pursue the (slightly) more advanced approach.

Andy

grosloulou

aschendel wrote: »

In your scenario, the simplest approach would be, on your HTML block, click the CSS tab and pop that in there. The CSS in the HTML block would only be applied to that HTML block (as I understand it).

If you (or anyone else reading this) find yourself copying that CSS into a lot of different HTML blocks, you are approaching a classic website "problem" (ease of maintenance - or more accurately the lack of ease). If you want to have a specific "style" for your own lists all around your site, then you would put a bit of CSS that is just a bit more sophisticated into either a CSS block on your "Entire Site" or into your Theme's Custom CSS field and apply that to your lists via a class name.

I'd start by getting it to work in your simple scenario and then if you plan to use it over and over, decide if you want to pursue the (slightly) more advanced approach.

Andy

hallo,
you can see the result on :
http://labrophotography.smugmug.com/Essai

it works but not as expected.
I would prefer filled bullet but also having the li ofset to the right with respect to the text like :

http://www.labrophotography.com/about/

you will notice :
the link is a drop down menu of Infos (Yeah, drop down menu exist :-) I have seen it in the webinar)
your code for about page is working nice except text at bottom of page comes below image

many thanks for help
best regards

marc

macromeister

You can do it in Word then cut and past from Word directly into your page. I just tried it (but it's not saved so I can't show you). No need for code change.

macromeister

You can also go to the page edit and use the special character ALT keys for Windows. Bullet is ALT/7 - when you release the ALT key after depressing it will insert the character. http://usefulshortcuts.com/alt-codes/bullet-alt-codes.php

grosloulou

hallo Macromeister,
just visited your site and images are really beautiful !

how did you put all galeries in dropdown menu ???
i have seen it in webinar but not understood
I have one "galery" folder for all galeries like your image folder :
http://labrophotography.smugmug.com/Galleries
apparently, like me, you don't have rollover color on menu items except on drop down ones

let's come back to ul, li.
In my case because we can't specify two blocks float left and right for two columns, i can't have 600px left for titles and texts and 360px right for image so no other choice than using html.
however i am very surprised there is no default css for ul, li, <a>,... as we could find in a wordpress or joomla template (ie:yootheme)

in html block, how do you want i use ALT7 ??? or copy word list ???

i think something is getting wrong in html in new smugmug as if we wer in text mode instead of a advanced editor with icons for images, list numbered or not,...

best regards
marc

macromeister

grosloulou wrote: »

hallo Macromeister,
just visited your site and images are really beautiful !

Beautiful, but some are rather weird:D Thank you anyway.

grosloulou wrote: »

how did you put all galeries in dropdown menu ???
i have seen it in webinar but not understood
I have one "galery" folder for all galeries like your image folder :
http://labrophotography.smugmug.com/Galleries
apparently, like me, you don't have rollover color on menu items except on drop down ones

Edit the link in your menu bar and select the option 'include folder contents'. That will give you the drop down.

grosloulou wrote: »

let's come back to ul, li.
In my case because we can't specify two blocks float left and right for two columns, i can't have 600px left for titles and texts and 360px right for image so no other choice than using html.
however i am very surprised there is no default css for ul, li, <a>,... as we could find in a wordpress or joomla template (ie:yootheme)

in html block, how do you want i use ALT7 ??? or copy word list ???

i think something is getting wrong in html in new smugmug as if we wer in text mode instead of a advanced editor with icons for images, list numbered or not,...

best regards
marc

I can't see why you need to use HTML. Have a look at mine http://www.macromeister.co.uk/Admin/About I just adjusted mine to match yours. I inserted a text block and a photo block. I moved the photo block (single image) to the right of the page and left the text block on the left. You might need to adjust the 'container width' on the dimensions tab, but mine seems to have automatically adjusted to suit the page width of 960 pixels.

For the text block just add your text and lists using the edit panel controls such as centering, bold etc. For characters that are not typeable just use the special ALT character set - susch as ALT/7 for a solid bullet icon. I have put bullet marks on my text just to show you. No HTML!

grosloulou

macromeister wrote: »

Beautiful, but some are rather weird:D Thank you anyway.


Edit the link in your menu bar and select the option 'include folder contents'. That will give you the drop down.



I can't see why you need to use HTML. Have a look at mine http://www.macromeister.co.uk/Admin/About I just adjusted mine to match yours. I inserted a text block and a photo block. I moved the photo block (single image) to the right of the page and left the text block on the left. You might need to adjust the 'container width' on the dimensions tab, but mine seems to have automatically adjusted to suit the page width of 960 pixels.

For the text block just add your text and lists using the edit panel controls such as centering, bold etc. For characters that are not typeable just use the special ALT character set - susch as ALT/7 for a solid bullet icon. I have put bullet marks on my text just to show you. No HTML!

many thanks

i don't find "include folder content" when i edit menu, choose links, click on Galeries menu

I have followed your ideas :
http://labrophotography.smugmug.com/About-Me

it works fine !

It works in fact because there are only two blocks : text and images.
Previously i had lot of blcoks on left for title about me, text below, title my equipment,text below so image was floating right only for first text or about me title.

So now, according to your advises, i have just changed font size of text line "about me" to 20px instead of using title block

list is now ok because in fact we don't use a list but insert a character "bullet" on left.

I would say it is not very clean but works fine.

Have you noticed that when we copy past text, very often it becomes kilometric in text block with carriage return line feed ? I have left a part on my page to show.
I need to delete until next line is on right of previous one and press enter to create the new line

best regards
marc

grosloulou

grosloulou wrote: »

many thanks

i don't find "include folder content" when i edit menu, choose links, click on Galeries menu

I have followed your ideas :
http://labrophotography.smugmug.com/About-Me

it works fine !

It works in fact because there are only two blocks : text and images.
Previously i had lot of blcoks on left for title about me, text below, title my equipment,text below so image was floating right only for first text or about me title.

So now, according to your advises, i have just changed font size of text line "about me" to 20px instead of using title block

list is now ok because in fact we don't use a list but insert a character "bullet" on left.

I would say it is not very clean but works fine.

Have you noticed that when we copy past text, very often it becomes kilometric in text block with carriage return line feed ? I have left a part on my page to show.
I need to delete until next line is on right of previous one and press enter to create the new line

best regards
marc

Font size = 32 is not as beautiful as h1 !!!
compare
http://labrophotography.smugmug.com/About-Me
with :
http://labrophotography.smugmug.com/Links

I suppose font is not the same AND COLOR is not the same too !

marc

macromeister

grosloulou wrote: »

i don't find "include folder content" when i edit menu, choose links, click on Galeries menu

Click on galleries on your webpage then select customise site. Edit the menu box with the wrench. Select the links tab. Select the link you want to show sub-folders for and select 'include folder content'

grosloulou wrote: »

I have followed your ideas :
http://labrophotography.smugmug.com/About-Me

it works fine !

It works in fact because there are only two blocks : text and images.
Previously i had lot of blcoks on left for title about me, text below, title my equipment,text below so image was floating right only for first text or about me title.

Yes, that would complicate things. Just have one text block.

grosloulou wrote: »

Have you noticed that when we copy past text, very often it becomes kilometric in text block with carriage return line feed ? I have left a part on my page to show.
I need to delete until next line is on right of previous one and press enter to create the new line

Yes, it can cause problem with carriage return, but I found I could edit it to get it right.

macromeister

grosloulou wrote: »

Font size = 32 is not as beautiful as h1 !!!
compare
http://labrophotography.smugmug.com/About-Me
with :
http://labrophotography.smugmug.com/Links

I suppose font is not the same AND COLOR is not the same too !

marc

If you set up a theme just for one page (such as 'about') and apply it to that page only you can set whatever font and colours you want to. You can also apply a background image. Have a look at my about page, which is slightly different to the rest of the site. I have changed the colour and font in mine, but the rest of my site is as it was before. It's the theme you need to edit to change colours and fonts, not the content boxes. But if you only want it to apply to one page (such as about) then you need a separate theme for it. http://www.macromeister.co.uk/Admin/About

Notice on mine the images menu from about page is different to the images menu on the other pages.

I need to start being a Smug customizer!

grosloulou

macromeister wrote: »

Click on galleries on your webpage then select customise site. Edit the menu box with the wrench. Select the links tab. Select the link you want to show sub-folders for and select 'include folder content'

Yes, that would complicate things. Just have one text block.

Yes, it can cause problem with carriage return, but I found I could edit it to get it right.

thanks

no idea how to change color (white instead of grey like in title block) and font (thinner like title block) in text block ?

i don't have include folder content under Link tab but only :
Name : Galleries
Link to :custom url
URL :http://labrophotography.smugmug.com/Galleries
Open Link in new tab : OFF

best regards
marc

macromeister

grosloulou wrote: »

no idea how to change color (white instead of grey like in title block) and font (thinner like title block) in text block ?

See post #13 above. We crossed over.

grosloulou wrote: »

i don't have include folder content under Link tab

Are you actually selecting the specific link from the list of links. You should see it then. Yes?

grosloulou

macromeister wrote: »

See post #13 above. We crossed over.

Are you actually selecting the specific link from the list of links. You should see it then. Yes?

as said, i have described the link dialog box I have with name,... is it the same than yours ?
perhaps something on right (entire site, custom folder,...) is the guilty ?

marc

macromeister

grosloulou wrote: »

as said, i have described the link dialog box I have with name,... is it the same than yours ?
perhaps something on right (entire site, custom folder,...) is the guilty ?

i don't have include folder content under Link tab but only :
Name : Galleries
Link to :custom url
URL :http://labrophotography.smugmug.com/Galleries
Open Link in new tab : OFF

marc

You may have done that wrong.For my link I specified 'page/choose' rather than custom URL. When you specify page-choose you are asked to select the page required. That might make a difference. The only place I use custom URL is for my video link, which goes to Youtube in a new tab. I think that's what custom URL is meant for.

grosloulou

macromeister wrote: »

You may have done that wrong.For my link I specified 'page/choose' rather than custom URL. When you specify page-choose you are asked to select the page required. That might make a difference. The only place I use custom URL is for my video link, which goes to Youtube in a new tab. I think that's what custom URL is meant for.

YOUPI, it works !
thanks for your patience
for me a page was about,... i had no idea selecting choose page would allow me to select the icon "galery" and have a page
you are right, as soon as we choose page, we see include content

best regards
marc

macromeister

grosloulou wrote: »

YOUPI, it works !
thanks for your patience
for me a page was about,... i had no idea selecting choose page would allow me to select the icon "galery" and have a page
you are right, as soon as we choose page, we see include content

best regards
marc

! The secret of working these things out, Marc, is not to get frustrated about why it doesn't appear to work as it should. You need to put yourself in the place of the people who, for whatever reason, put the system together in the way they did!

Your menu works well from my end!

I like the cool layout of your site. Good work.

aschendel

grosloulou wrote: »

hallo,
you can see the result on :
http://labrophotography.smugmug.com/Essai

it works but not as expected.
I would prefer filled bullet but also having the li ofset to the right with respect to the text like :

http://www.labrophotography.com/about/

you will notice :
the link is a drop down menu of Infos (Yeah, drop down menu exist :-) I have seen it in the webinar)
your code for about page is working nice except text at bottom of page comes below image

many thanks for help
best regards

marc

My example CSS wasn't (couldn't have been, since I didn't know what you'd want) setup for anything other than an example showing that we can do lists. You should be able to located a multitude of CSS resources online that deal with list styles and tweak mine to be just how you want them to look without much trouble.

If I have time today I'll take another shot, knowing now how you want the page to look.

Thanks!

Andy

aschendel

If you want to switch back to HTML / CSS, here's markup you can use in an HTML block (using both the HTML and CSS tabs) (I thought you wanted the text to flow below the image, if not, let me know and I can make the necessary changes):

HTML:

<img src="http://labrophotography.smugmug.com/Galleries/Events/Cindy-aux-Guillemins/i-sjzKVfQ/1/M/D30_4417_web800-M.jpg" class="floatright" />
<h2>About me</h2>
    <p>Although I have always enjoyed photography, it wasn’t until I switched from film
        based photography to digital in 2007 that I really felt a passion for capturing
        fine nature and landscape images. With digital I can experiment freely without worrying
        about the cost of film and development, see the results instantly, and make adjustments
        to the shot in the field if necessary. I can control the whole process from capture
        to the final print, and I feel all of this has made me a much better photographer.</p>
    
    <h2>My Equipment</h2>
    <p>My current equipment is:</p>
    <div>Camera Bodies:</div>
    <ul>
      <li>Nikon D80</li>
      <li>Nikon D300</li>
    </ul>

    <div>Lenses:</div>
    <ul>
        <li>Nikkor 18-70mm f/4.5</li>
        <li>Nikkor 18-200mm f/5.6 VR</li>
        <li>Nikkor 70-300mm f/5.6 VR</li>
        <li>Nikkor 70-200mm F/2.8 VR</li>
        <li>Nikkor 35mm F/1.8</li>
        <li>Nikkor 50mm F/1.8</li>
        <li>Nikkor 10.5mm F/2.8 Fisheye</li>
        <li>Nikkor 105mm F/2.8 macro</li>
    </ul>

    <div>Tripod | Head | Filters | Other Accessories:</div>
    <ul>
        <li>Manfrotto Tripod</li>
        <li>Three Photoflex Starflash 300W studio flashes</li>
        <li>Nikon SB-800 Flash</li>
        <li>Nikon SB-900 Flash</li>
        <li>PocketWizard MiniTT1 Transmitter, FlexTT5 Transceiver, AC3 zone controler</li>
        <li>Circular Polarizing filter</li>
    </ul>

    <div>Computers and Software:</div>
    <ul>
        <li>I am currently running Windows 7 Professional 64-bit on an Intel i7 2600K processor
            with 8GB of memory. For photography, all my processing is done in Adobe Lightroom
            4 with any special processing done in Adobe Photoshop Elements. I also use plugins
            from Nik Software, Ononesoftware, Topazlabs, Alien Skin.</li>
    </ul>

CSS:

p {
  margin-top: 10px;
  margin-bottom: 10px;
}

ul, ol {
  list-style-type: disc;
  padding: 0;
  margin-left: 20px;
  margin-bottom: 10px;
}

li {
  margin-left: 10px;
}

.floatright {
  float: right;
  margin-left: 10px;
}

If you have any questions feel free to post them up...

Andy