Category Archives: CSS

A Bit of a New Look, or Fun With CSS

4
Filed under Blogging, CSS

The formatting of the code snippets I post from time to time have always bothered me.

They didn’t wrap, which is good (wrapping code just annoys the hell out of me), but they trailed off the edge and just appear to get cut off.

If you selected the text, it was all there and could be copied to the clipboard, but… well…. yuck.

Anyway, I finally figured out how to change the CSS such that you get a nice little scrolling window for the snippet.

I should point to Scott Hanselman’s blog as the source of the example I found, but I did tweak it a bit.

Here’s an example:

Public Function AppVersion$()
   '---- Get the Current Application file's "Full" version info
   Dim p$

   If IsIDE() Then
      '---- just pull from the App values (because the version resource
      '     isn't available
      AppVersion$ = App.Major & "." & App.Minor & ".0." & App.Revision
   Else
      '---- get from the VersionInfo resource, will include the real revision and build numbers
      AppVersion$ = GetFileVersion$(App.Path & "\" & App.EXEName)
   End If
End Function

Since this is purely a CSS thing, it works backwards in all my old posts, and it appears to be (so far) cross browser compatible.

Here’s the style (I’ve enclosed it in a STYLE tag so you can embed it directly in a html file, otherwise, just use the PRE definition).

<style type="text/css">
pre {
	border: 1px solid #e3a83d;
	border-left-width: 2px;
	background-color: #444;
	padding: 1em;
	margin: 2em;
	line-height: 1.2em;
	overflow: auto;
	width: 90%
	font-size: small;
	color: white;
	font-family: consolas, "Courier New", courier, monospace;
}
</style>

Yeah, it’s probably pretty minor stuff for all the CSS genii out there, but I’m still surprises with what you can do with a little CSS. Makes me really want to get into the whole WPF thing. 

New Comment Styles

8
Filed under Blogging, CSS

I’m experimenting with a new comment style on the site.

Basically, the idea is to make comments look like they’re speech balloons. Plus, I believe it makes them a little easier to follow. Here’s an example of what it should look like now.

I saw this on a blog somewhere, just not sure where anymore, and apparently I cleared my browser history since then because I couldn’t find it again.

I’d have preferred the Names to be on top, with the arrow pointing down into the comment, but dasBlog doesn’t have any support for templated comment elements. You have to have that to move the actual pieces of the comment (the name, comment, and date, for instance). From what I have found online, they just haven’t gotten around to it yet. That made modifying the comment item format, um, shall we say, an adventure.

This is the first round. It doesn’t seem to work completely in IE (the little dialog arrow doesn’t show up), but it doesn’t completely mess things up either. It looks right in FireFox. Not sure about other browsers.

The trick, as I’ve got it now, is that I’m using the AFTER pseudo-element along with the CONTENT keyword to create an image tag where there was none before, like so:

.commentPermaLinkStyle:after {
 content: " " url('quotearrow.png');
}

Unfortunately, this doesn’t appear to be handled properly by IE. I tried a background img, but that didn’t seem to work well either.

CSS, one giant, turbo-charged erector set full of parts that don’t always fit the same way 🙁

Formatting Code Snippets in a Blog Entry with CSS

1
Filed under Blogging, CSS

Since this blog is a relatively new thing for me, I’ve picked up quite a few tidbits while setting it all up.

One thing I just ran into is formatting code chunks. I’m guessing there’s loads of different ways to do it, but in my case, I just wanted something easy to tag, and with a nice format, but not necessarily “pretty printed” with color, keyword highlighting etc.

In researching it, I came across Nikhil Kothari’s blog. He has a number of nice things there, so check it out for everything else as well, but I noticed he was formatting code almost like what I had in mind.

The CSS he uses is:

pre {
 font: inherit;
 color: inherit;                        
 white-space: inherit;
 margin: 0;
}

The problem I had with this is that it tends to allow the text to flow over past it’s containing block on the right, which, to me, doesn’t look all that good.

Plus, to set off the code more, I’d prefer it indented to the left and right.

A little CSS reading later and I came up with this:

pre {
   font-family: 'Lucida Console', Courier;
   font-size: 10pt;
   color: inherit;
   white-space: no-wrap;
   margin: 0 3em 0 3em;
   overflow: hidden;
}

It gets the font right, the indents right, and just chops the text at the right edge. I suppose for some purposes, it might be better to wrap the code, but at least for what I need right now, it seems perfect.

Just Added: The above doesn’t quite work in all cases. Appearently, in IE6, overflow:hidden isn’t necessarily supported properly. You might also need to specify a Width property. In my case, I used:

pre {                        
   font-family: 'Lucida Console', Courier;
   font-size: 10pt;
   color: inherit;
   white-space: no-wrap;
   margin: 0 3em 0 3em;
width: 80%; overflow: hidden; }

Which seems to do the job just fine.