Call-outs for Articles
-
Could we get maybe the below two CSS styles defined for articles? I'd like to use some call-outs like they do in Reader's Digest. I don't want to use the "nav-right-sidebar" because call-outs shouldn't be tied to the layout of your hosting interface. You have a call-out style defined, but it doesn't have any width. Also, is it possible to create a "code-collapsed" style? I want to be able to display collapsed segments of code so the user can orient themselves within a segment of auto-generated code (by the MS InterOp Toolkit). I can get close with a span style set to box, but the padding is causing overlap with the line above. .right-sidebar { float:right; width:190px; background-color:#FFFFEF; margin: 10px 7px 15px 15px; border: 1px #FFCC66 solid; border-radius:10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2); -moz-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2); } .left-sidebar { float:left; width:190px; background-color:#FFFFEF; margin: 10px 7px 15px 15px; border: 1px #FFCC66 solid; border-radius:10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2); -moz-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2); }
Without darkness, there are no dreams. -Karla Kuban
-
Could we get maybe the below two CSS styles defined for articles? I'd like to use some call-outs like they do in Reader's Digest. I don't want to use the "nav-right-sidebar" because call-outs shouldn't be tied to the layout of your hosting interface. You have a call-out style defined, but it doesn't have any width. Also, is it possible to create a "code-collapsed" style? I want to be able to display collapsed segments of code so the user can orient themselves within a segment of auto-generated code (by the MS InterOp Toolkit). I can get close with a span style set to box, but the padding is causing overlap with the line above. .right-sidebar { float:right; width:190px; background-color:#FFFFEF; margin: 10px 7px 15px 15px; border: 1px #FFCC66 solid; border-radius:10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2); -moz-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2); } .left-sidebar { float:left; width:190px; background-color:#FFFFEF; margin: 10px 7px 15px 15px; border: 1px #FFCC66 solid; border-radius:10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2); -moz-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2); }
Without darkness, there are no dreams. -Karla Kuban
-
Nevermind about the sidebars for call-outs. I kept using "style:" instead of "style=" for setting width. I'd still like to have a collapsed code style because of the munging of the formatting tool.
Without darkness, there are no dreams. -Karla Kuban
Not exactly sure what you mean by this: is it simply that you want to wrap some code in a collapsed block with a [+] sign to expand it later? This would require code changes. Alternatively, we could offer somethind like
<pre lang="C#" collapsed="true">
so that the code block starts off collapsed. Or am I missing your point?
cheers, Chris Maunder The Code Project | Co-founder Microsoft C++ MVP
-
Not exactly sure what you mean by this: is it simply that you want to wrap some code in a collapsed block with a [+] sign to expand it later? This would require code changes. Alternatively, we could offer somethind like
<pre lang="C#" collapsed="true">
so that the code block starts off collapsed. Or am I missing your point?
cheers, Chris Maunder The Code Project | Co-founder Microsoft C++ MVP
Segments that could be dynamically collapsed/expanded would be over the top fantastic. But what I need is something that mimics it. Here's what I'm after: I'm using a tool that auto-generates code. My article isn't focusing on explaining the auto-generated code, but the stuff that's added to it. As such, the reader will find the collapsed properties and methods useful in orienting themselves within the overall code. What's not helpful is displaying the mountain of code that's in the collapsed segment. What I can do now is something like this:
<pre lang="whatever">
...
<span class=tiny-text>[+]</span> <span class=box style=font-size:10pt>Public Property MyProperty...</span>
...
</pre>Notice that I've left off the quotes. You have to leave them off because the <pre> tag processing adds them back automatically. As a direct result, though, you can't use multiple classes. The real problem, though, is that the box class is too large cuts into the code line above it. Again, if there were a class like code-collapsed, you could actually place code into it that could, for now, be marked invisible, but later could be made dynamic to allow the curious reader to expand and collapse.
Without darkness, there are no dreams. -Karla Kuban
-
Segments that could be dynamically collapsed/expanded would be over the top fantastic. But what I need is something that mimics it. Here's what I'm after: I'm using a tool that auto-generates code. My article isn't focusing on explaining the auto-generated code, but the stuff that's added to it. As such, the reader will find the collapsed properties and methods useful in orienting themselves within the overall code. What's not helpful is displaying the mountain of code that's in the collapsed segment. What I can do now is something like this:
<pre lang="whatever">
...
<span class=tiny-text>[+]</span> <span class=box style=font-size:10pt>Public Property MyProperty...</span>
...
</pre>Notice that I've left off the quotes. You have to leave them off because the <pre> tag processing adds them back automatically. As a direct result, though, you can't use multiple classes. The real problem, though, is that the box class is too large cuts into the code line above it. Again, if there were a class like code-collapsed, you could actually place code into it that could, for now, be marked invisible, but later could be made dynamic to allow the curious reader to expand and collapse.
Without darkness, there are no dreams. -Karla Kuban
You need to surround class names and styles in quotes
<span class="class1 class2" style="whatever">...
(I edited and fixed your message above)
cheers, Chris Maunder The Code Project | Co-founder Microsoft C++ MVP
-
You need to surround class names and styles in quotes
<span class="class1 class2" style="whatever">...
(I edited and fixed your message above)
cheers, Chris Maunder The Code Project | Co-founder Microsoft C++ MVP