Change Font of Reference Number?

  • Resolved xammamax

    (@xammamax)


    12 years ago

    I could change the colour of the reference number in the text of the body by changing the side-matter.css to:

    a.side-matter-ref:hover {
	text-decoration: none;
	color: orangered;
	font-family:"Arial Black", Gadget, sans-serif;
}

    What I’d like to do now is to change the colour of the number in the sidenote to the same colour (orangered) — but I don’t want to change the colour of the actual text of the side note.

    Would that be possible?

    https://www.ads-software.com/extend/plugins/side-matter/

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author setzer

    (@setzer)

    xammamax, good question. Styling ol list numbers with CSS is unnecessarily complicated, but doable. Your question inspired me to include the following feature when I commit Side Matter 0.6 later this week, but you can also DIY, if you like, as follows:

    Since any style applied to an ol or li tag applies both to the list number and the text inside each li, the least complicated way to give your numbers their own style this is by interpolating a span tag inside each li. You can do this on your own by changing line 63 of side-matter.php to the following:

    $notes .= '<a id="note-' . $n . '" class="side-matter"></a><li id="note-item-' . $n . '" class="side-matter side-matter-notes"><span class="side-matter side-matter-note-text">' . $note . '</span></li>';

    Then, add to your side-matter.css some version of the following:

    ol#side-matter-list { color: orangered; }
span.side-matter-note-text { color: black; }

    (P.S. It’s also possible to style ol numbers without the additional span markup, but the process is complex and less widely supported across browsers: see here for details.)

    Plugin Author setzer

    (@setzer)

    Update to my previous post: version 0.6 of the plugin is now up, and does includes the extra markup needed to style sidenote numerals separately from sidenote text. I’ve also streamlined the classes used for Side Matter content, so the above example can be ignored in favor of the following:

    To customize Side Matter list numerals, style the ol.side-matter tag (either in side-matter.css or in your theme’s stylesheet):

    ol.side-matter {
    color: orangered;
}

    To customize the text within each list item, style the span.side-matter tag:

    ol.side-matter > li.side-matter > span.side-matter {
    color: black;
}
    Plugin Author setzer

    (@setzer)

    Another update: as of version 0.7, the span element referred to above has been replaced by a div tag. This addresses a persistent formatting issue in some themes/browsers. Use div.side-matter-text to style the text inside a sidenote. This should be the last such change to this feature.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Change Font of Reference Number?’ is closed to new replies.