Improving the website name index layout

Post by **ColeValleyGirl** » 16 Mar 2015 10:31

Has anyone given any thought to improving the layout of the web page produced by _nameindex.html ? (Trying to avoid re-inventing the wheel here).

I know the "Improve website or CD DVD HTML" plugin can deliver better search/filter facilities and add alternate/married names, but I'm looking at the basic layout -- try opening it and shrinking the width of your browser window right down. After running Mike Tate's plug-in there is some improvement, but the left-hand 'column' never shrinks/wraps and it's probably more apt to do so than the right-hand 'column'. There's some improvement possible via css but I'd like to see both columns shrink/wrap.

Post by **tatewise** » 16 Mar 2015 14:02

Yes, I tried to improve it, but it is quite tricky.
In the default fhstyle.css the .FhIndexList ul defines it as fixed width margin-left:15em
In _nameindex.html my Plugin redefines it with margin-left:10%;width:90%;
If the left margin is made much smaller then the list tends to be very off-centre to the left, especially if no ID are listed to the the right of the names.
Any suggestions are welcome.
All you should need to do is adjust .FhIndexList settings near the top.

Post by **ColeValleyGirl** » 16 Mar 2015 14:38

My use-case is quite specialised (it's going in a narrow region on the rh navigation region in a cms-based website) but it has highlighted the basic issues for use on mobile devices, I think.

For small devices, left-aligned works best. Plus "centring is for wimps"

according to http://www.amazon.co.uk/Non-Designers-D ... 0133966151 which moulded my thinking many years ago...

My modified css looks like the below -- not perfect, but a step on the road. Long surnames don't wrap (but overlap) and I need to work out how to fix that but otherwise it isn't bad.

Code: Select all

.FhIndexList {margin-bottom: 2em; margin-left:0%;width:100%}
.FhIndexList p { padding: 0px; margin: 0p; }
.FhIndexList ul { list-style: none; text-align: left; padding: 0px; margin: 0px; margin-left:0em;  margin-top: -1.25em}
.FhIndexList a { font-weight: bold; text-decoration: none}
.FhIndexList a.name {display:inline-block; width:65%}
.FhIndexList span.married { font-style:italic } 
.FhIndexList span.alternate { font-style:italic }
.FhIndexList ul li p{margin-left:0%; width: 35%}
.FhIndexList ul li ul {margin-left:36%; width: 64%}

Post by **tatewise** » 16 Mar 2015 15:14

Yes, zero margin left alignment is the way I was thinking, but I also cannot solve the long name wrap problem.

In case others are unfamiliar with these CSS adjustments the following advice is worthwhile.
Put these CSS changes in your own file such as mystyle.css rather than edit the fhstyle.css standard file.
Put your file along with any other custom files in a sub-folder of the ...\Public\FH Website folder e.g. ...\Public\FH Website\custom to avoid being deleted by the Create a Website Wizard.
Then in Step 8 of the Wizard use the Advanced button to add at the end of the <head> section:
<link rel="stylesheet" type="text/css" href="custom/mystyle.css">

See how_to:make_family_tree:alter_css_default_styles|> Family Tree Tips ~ Alter CSS Default Styles for details.

Post by **ColeValleyGirl** » 16 Mar 2015 15:23

It may make sense to put the surname on a line of its own to avoid the overlap problem with long surnames.... If I can work out how.

PeterR · Post by **PeterR** » 16 Mar 2015 16:13

In a sense, the surname is already on a line of its own, but it doesn't look like it because of the negative top margin for the unordered list:

Code: Select all

.FhIndexList ul { list-style: none; text-align: left; padding: 0px; margin: 0px; margin-left:15em; margin-top: -1.25em; }

I also wonder whether a table might work any better, with each surname in a cell in the 1st column and the corresponding list all in the adjacent cell in the 2nd column.

Post by **ColeValleyGirl** » 16 Mar 2015 16:18

I'm wondering about a table as well, but haven't had the time to work out the logic and coding for the changes required.

Post by **tatewise** » 16 Mar 2015 22:02

I think earlier versions of FH used a table for the Index of Names, but it suffered from extremely slow loading times when there are large numbers of names.

Post by **ColeValleyGirl** » 17 Mar 2015 08:34

The only other alternative I can think of is css columns.

Family Historian User Group

* Improving the website name index layout

Improving the website name index layout

Re: Improving the website name index layout

Re: Improving the website name index layout

Re: Improving the website name index layout

Re: Improving the website name index layout

Re: Improving the website name index layout

Re: Improving the website name index layout

Re: Improving the website name index layout

Re: Improving the website name index layout