Animal Links Coding Snippet

This coding snippet is another very unwieldy looking one, but it’ll make sense soon! The CSS below controls how you want your horses or dogs to display. The guide comments in the CSS will not show up on your page, but will stay where they are in your coding.

/* Controls the size of your animal name links. */
big {
font-size: 12px;}

/* Makes the 'Shows' section of your table automatically expand without needing to click on it. If you'd prefer it to be hidden, delete this element. */
#shows {
display: block!important;

/* Deletes the arrow image that appears next to divider names. Delete these elements if you'd prefer it to show. */
[id^="divider"] img[src="images/arrow-down.gif"] {
display: none;}

.box a img {
display: none;}

/* Controls the size of the text next to your animal's name */
[id^="divider"] td, [id^="divider"] td, [id^="divider"] th, [id^="divider"] th {
display: inline;
font-size: 12px;}

/* Deletes the border around divider name and allows for a margin to create a buffer around multiple dividers. */
[id^="divider"] tbody tr th {
display: inline;
border: 0px;
box-shadow: none;
margin-bottom: 10px!important;}

[id^="divider"] *{
border-spacing: 0px;
border: 0px;
border-collapse: collapse;
margin-bottom: 10px!important;
margin-top: 5px!important;}

/* Deletes the background of dividers and controls the size of divider subheadings */
.box th + th {
background: transparent;
text-align: center;
font-size: 12px!important;}

/* Deletes the for sale and feed information from animal information. Remove this element if you want these to show. */
[id^="divider"] tbody td:nth-child(1), [id^="divider"] tbody td:nth-child(5) {
display: none}

/* Deletes all of the controller animal information settings. Remove this element if you want those to show. */
[id^="divider"] tbody th:nth-child(1), [id^="divider"] tbody th:nth-child(5), [id^="divider"] tbody th:nth-child(2), [id^="divider"] tbody th:nth-child(3), [id^="divider"] tbody th:nth-child(4), [id^="divider"] tbody th:nth-child(6) {
display: none;}

/* Aligns the animal information to the center. Change the alignment to right or left to suit your aesthetic. */
[id^="divider"] * {
text-align: center!important;}

/* These change the appearance of the divider heading links. */
tbody th:nth-child(1) a {
font-family: Times New Roman;
font-size: 18px;
letter-spacing: 1px;
color: #444400;}

tbody th:nth-child(1) a:hover {
font-family: Times New Roman;
font-size: 18px;
letter-spacing: 1px;
color: #aa9911;}

%d bloggers like this: