i made a cladogram... how do i make it pretty?

Help
,
1

hello hello everyone! my first time asking for coding help!

so i’ve been slowly accumulating things to create a website. but the first thing i know i wanted to do was make a cladogram (taxonomy chart) of all the birds i’ve seen, incredibly inspired by @ribose who has the most gorgeous cladogram of the plants they’ve eaten! also shout out to them because they were patient in explaining to me how they did their cladogram :slight_smile:

but now that the info is all down and the clade has been grammed, i am having … so much confusion over how to make it look pretty. when i look at the css that the html already has, i just get CONFUSED. i basically converted the wiki programming language to html, and so it already came with some styling when i pasted it into my document. i’m just not sure how to… spread it all out?

basically, i don’t like how squished it looks, and the placement being on the left. how can i make the lines longer? how can i change the font size? i just want it to look more balanced… when i put ‘center’ in the css line, the lines detach from the words, so the words are floating in the middle, while the lines are staying in the left. i hope this makes sense.

here is the page i need help on. please excuse the random colors, i was trying to see what things were changing as i was playing around with it!

thank you everyone <3 again… i am super newbie so i appreciate any help :smiling_face_with_tear:

3 Likes
2

hello hello i am here with some style tips! the wiki template-generated html and css are sort of a nightmare, but hopefully i can address the things you mentioned wanting to change.

the lines have the class clade-label and are styled by the following chunk of css:

table.clade td.clade-label {
    min-width: 0.2em;
    width: 0.1em;
    padding: 0.1em 0.15em;
    vertical-align: bottom;
    text-align: center;
    border-left: 1px solid;
    border-bottom: 1px solid;
    white-space: nowrap;
}

what you’ll want to change to make the lines longer is the padding. the first value sets the vertical padding and the second the horizontal. to space it out more, increase the values. i gave my clade labels padding: 0em 0.5em; so they’d be more spaced horizontally but more squished vertically.

* the css above is a great example of the nightmarishness at play here… why would the min-width be wider than the width???

to change the font size, i’d apply the style to the body, which will affect the whole page, inside and out of the cladogram. in your code, inside the style tag (after <style> and before </style>), add the following:

body {
    font-size: medium;
    font-family: serif;
    color: black;
    background-color: white;
}

these are default values, so it won’t change anything about how the page looks now, but from here you can adjust the size, colors, etc.

the whole cladogram is in a table element with the clade class. find this in the css:

table.clade {
  border-spacing: 0;
  margin: 0;
  font-size: 100%;
  line-height: 100%;
  border-collapse: separate;
  width: auto;
}

and change margin: 0; to margin: 0 auto; to center the whole table horizontally. if you wanted to change the font size to the text inside the table only, but not any text outside of it, you’d change the font-size: 100%; here to whatever size you want.

2 Likes