Beefy Boxes and Bandwidth Generously Provided by pair Networks
laziness, impatience, and hubris

Comment on

( #3333=superdoc: print w/replies, xml ) Need Help??
design additional themes

There was a time — long years ago, when vroom was still lord of the manor — when themes were the One Way to style your PerlMonks experience, and new theme contributions were actively solicited. Themes Design Quest

Thankfully, those days are behind us.

A Better Way to style PerlMonks to your liking is to use CSS. See your Display Settings.

Note that PerlMonks provides a couple of levels of manipulexity for custom CSS styling. One is to start with a theme selected and then tweak things via your custom CSS. The next level is to forego virtually all styling provided by PerlMonks and Do It All Yourself. For the latter, select "No Theme" from the themes picklist.

That is what I do. I also select all of the "Lay out X as <div> instead of <table>" options.

Then I go to town with the fun and fabulous CSS.

I also put some javascript code in my Free Nodelet to hack up some additional nodelets and move things around on the screen.

The result looks something like this.

There have been threads in which people have shared their custom css. It's actually quite easy to share your css via a link people can paste into their Display Settings: Put the css in a <code> block in a post, then refer people to the "download" link. Like so.

/* This is a COPY of [jdporter]'s current On-Site CSS Markup (from his + [Display Settings]) */ .highlight { background-color: #DFB; } textarea { width: 100%; height: 30em } table#u-s-freenodelet, table#u-s-css { width: 100% } div.main_content { height: 35em; overflow: scroll } div.listcode { height: 35em; overflow: scroll } td { background-color: #FC7 } td { background-color: #FBB } td.reply-new { background-color: #FC7 } td.reply-new-body { background-color: #FBB } table#replies_table tr.reply br { display: none; } table#replies_table tr.reply ul { display: inline; white-space:nowrap; + } tr.post_head br { display: none; } tr.post_head td { white-space:nowrap; } ul.word-list, ul.inline-list { display: inline; margin: 0; padding: 0; list-style: n +one; } .word-list li, .inline-list li, li.inline { display:inline; margin-left: 3pt; } .word-list li:before, .inline-list li:before, li.inline:before { content:" \A0\A0" } .word-list br, .inline-list br { display:none } ul.spacey-list { margin: 0; padding: 0; list-style: none; } .spacey-list li { margin-left: 3pt; } .spacey-list li:before { content:" > " } table#titlebar-top, table#titlebar-bottom, form, h3 { display: inline; } tt.inlinecode { color: #070; background-color: #CCC; } /* this occurs only on user display pages: */ { background-color: #EEF; } .spoiler { background-color: black; color: black; } .pmsig { background-color: #888; font-size: smaller; padding: 8px; } span.see-also { font-size: smaller; } /* XXX only commented out while trying non-null Themes: */ tr.titlebar td, center table th, td.section_title { background-color: #CCF; font-size: larger; font-weight: bold; } tr.post_head td { background-color: #DDD; } tr.ntc-head { background-color: #FC7; } tr.ntc-voted { display: none } input#talkbox { width: 60em; } div#footer, /* kills the Pair ad at the bottom */ td.monktitlebar, /* kills the menu and the "Need Help" link */ /* kills the Search, MonkPic/Quip, etc. */ table#monkbar { display:none } /* { display: table; border: 3px solid +green; } */ div.Nodelets2 { float: left; width: 25%; } div#nodelet_container { float: left; width: 75%; } table.paneled td { border-style: groove; border-width: 2px; padding: 6px; } { background-color: #FA7 } div.reputation { background-color: #A96 } .QAapprove { background-color: #AF7 } /* from common.css. needed to make RAT look somewhat normal. */ p.nnt-p { display: inline; } span.tutlist-seen { background-color: #DDE; } /* td.reply-body { font-size: smaller; } */ div.voteit { width: 100%; background-color: #DDE; } div.notes { border: thin solid black; padding: 3px; height: 35em; over +flow: scroll } div.editnodetext { border: thick solid black; padding: 5px; } div.editnodetext input[type="text"] { width: 50em; } { text-align: center; background-color: #DED; } a.nodelethead-annot { display:none; text-decoration:none; font-size: s +mall } /* b:before { content: url("") +} */ /* See: +e.htm */ div.comment-on { text-align: center; font-size: larger; background-col +or: #DFB; } div.header { background-color: #DFB; padding: 3px; } ul.replies:before { content: url( +ng) } ul.replies { border-left: 2px solid red; padding: 3px; list-style-type +: none; padding-left: 20px; } li.reply { border-top: 2px solid blue; padding: 3px; } /* div.header { background-color: #EEE; padding: 3px; border-bottom: 1px +solid blue; } ul.replies:before { content: url( +ng) } ul.replies { list-style-type: none; padding-left: 40px; } li.reply { border: 1px solid blue; } */ div.catqa-commandbox { border: thick solid black; padding: 5px; text-a +lign: center; font-size: larger; } /* use this in certain "menus", such as the monkbar and certain nodele +ts, when they are "display as div" and are <li>: li { display:inline } li:before { content:" " } */ body { font-family: "Arial Unicode MS",sans-serif; font-size: smaller; + } ul.spacey-list#external { display:none } div#Approval_Nodelet div.nodelet_body br { display:none } span#holder-power { background-color: #BFB; } span.readmore-title { background-color: #FAE; } div.nodelet_head, div.nodelet_body { display:inline } /* border: thin solid black; */ div.nodelet { text-align: left; background-color: #BCF; padding: 6px; margin: 8px; border-radius: 2mm; -moz-border-radius: 2mm; } div.nodelet a {text-decoration: none} div.nodelet_head { background-color: #FFF; text-align: center; /* font-weight: bold; */ padding-left: 2px; padding-right: 2px; border-radius: 1mm; -moz-border-radius: 1mm; } div.diff_strings pre, div.listcode pre, tt { font-size: larger } h3 { background-color: #BFC; } td.titlechooser a { text-decoration: none; } td.titlechooser h3 { background-color: inherit; } td.titlechooser h3:after { content:"\A0\A0\A0\A0"; } div.pageheader, div#pageheader, table#titlebar-top { background-color: #BCF; padding: 6px; margin: 8px; border-radius: 2mm; -moz-border-radius: 2mm; } div#Node_Statistics br { display:none } div#Node_Statistics span.label { color: #222 } div#Node_Statistics span.label:before { content:" \A0" }

It is also possible to use the URL of the css pages associated with each of the "themes". For example, Red Theme CSS.

There have been some pretty nice threads in which users have shared CSS tips and code. See especially PerlMonks CSS HOWTO and User CSS Repository.

What is the sound of Windows? Is it not the sound of a wall upon which people have smashed their heads... all the way through?

In reply to Re^2: Site facelift? by jdporter
in thread Site facelift? by locust

Use:  <p> text here (a paragraph) </p>
and:  <code> code here </code>
to format your post; it's "PerlMonks-approved HTML":

  • Posts are HTML formatted. Put <p> </p> tags around your paragraphs. Put <code> </code> tags around your code and data!
  • Titles consisting of a single word are discouraged, and in most cases are disallowed outright.
  • Read Where should I post X? if you're not absolutely sure you're posting in the right place.
  • Please read these before you post! —
  • Posts may use any of the Perl Monks Approved HTML tags:
    a, abbr, b, big, blockquote, br, caption, center, col, colgroup, dd, del, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, ins, li, ol, p, pre, readmore, small, span, spoiler, strike, strong, sub, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, wbr
  • You may need to use entities for some characters, as follows. (Exception: Within code tags, you can put the characters literally.)
            For:     Use:
    & &amp;
    < &lt;
    > &gt;
    [ &#91;
    ] &#93;
  • Link using PerlMonks shortcuts! What shortcuts can I use for linking?
  • See Writeup Formatting Tips and other pages linked from there for more info.
  • Log In?

    What's my password?
    Create A New User
    and all is quiet...

    How do I use this? | Other CB clients
    Other Users?
    Others having an uproarious good time at the Monastery: (6)
    As of 2017-07-22 00:05 GMT
    Find Nodes?
      Voting Booth?
      I came, I saw, I ...

      Results (336 votes). Check out past polls.