Colored Box Around Text

Welcome! Forums TypeMetal Support Colored Box Around Text

This topic contains 4 replies, has 2 voices, and was last updated by  Troy Stephens 7 months, 1 week ago.

Viewing 5 posts - 1 through 5 (of 5 total)

  • Author

    Posts

  • #1385

    Reply


    T. Babb

    I got Typemetal yesterday so I could do some simple HTML. I’m stuck however in that I cannot figure out how to create a snippet that will make a colored box (grey, with a thin border) around text.

    The documentation shows that snippets can be shared amount users, but I could not find anywhere showing where users are sharing their code snippets. Did I miss something or does this not exist?

    Thanks in advance.

    Tim

    #1390

    Reply


    Troy Stephens

    Keymaster

    Hi Tim!

    The short answer is, if you make a <code> element inside a <pre> element, TypeMetal’s bundled “Clarity” or “Luminance” stylesheet will display a gray box around the contents. To learn how to do the same for other HTML constructs besides <pre><code> (which is mainly suitable for typesetting program code), read on:

    With modern HTML, styling such as you describe is split out into a separate .css stylesheet file. Many .html files can then reference that same .css file, giving you uniform styling that’s centrally described and easily changed.

    The .css file is where you’d say that a “featurebox” (or whatever you decide you want to call these objects in your documents) should be rendered as “grey, with a thin border”. In your .html file, you then only have to say you want a “featurebox” surrounding some text, and application of the .css stylesheet to the .html file at viewing time grants your wish! Making a stylesheet file seems like extra work at first, but it pays off in the long run, as you can change your mind about styling later and have the styling of all your pages automatically update.

    Building streamlined, ready-to-style HTML is the part that TypeMetal helps with. A snippet set provides a central place to list the custom class and id names you make up, and describe HTML structures that you repeat often in a given set of documents, so you can remember to use a consistent styling vocabulary and create those repeated structures more quickly. The snippets you define become a first-class part of the vocabulary of available elements that TypeMetal offers you when writing your HTML.

    While very helpful, snippet sets are therefore not the central answer to your first concern, which is how to get some text to appear with your desired styling. (A repository for sharing snippet sets is a great idea, by the way, that, to my knowledge, hasn’t been implemented yet.) What you really need is a suitable .css file. Fortunately, TypeMetal comes bundled with a few you can start with, and you can also use any other .css file you can obtain or design.

    For a quick start using the default “Clarity” stylesheet for example:

    Create a New HTML File and save it somewhere.

    In the toolbar’s “Main Style Sheet” picker, choose “Clarity”, then choose “Export Copy…”

    Choose a filename and folder in which to save the style sheet copy. (Usually you want it in close proximity to your .html files.)

    Open the .css file you just exported in a plain-text editor. (TextEdit will do, if you don’t prefer another.)

    If you search for “pre code“, you’ll see that Clarity applies “gray box” styling much like what you describe to any <code> element that’s inside a <pre> element:

    pre code {
    font-size: 80%;
    background-color: #f8f8f8;
    display: block;
    padding: 0.5em 1em;
    margin: 1.5em 2em;
    white-space: pre;
    line-height: 1.4;
    overflow: auto;
    color: #5e5e5e;
    border: 1px solid #eaeaea;
    }

    You could copy this rule as a starting point, and say that you want similar style rules applied to some other HTML construct. For example, with a little simplification:

    .featurebox {
    background-color: #f8f8f8;
    padding: 0.5em 1em;
    margin: 1.5em 2em;
    color: #5e5e5e;
    border: 1px solid #eaeaea;
    }

    gives you a set of style rules that will be applied to any HTML element that has “featurebox” in its “class” attribute.

    In your .html file, you’d then want to create:

    
    <div class="featurebox">
    <p>This is some text that we want displayed in a special box.</p>
    </div>

    You can do this by telling TypeMetal to create a plain <div>, and then using the attribute editor (Cmd+L) to add a “class” attribute with value “featurebox” to the <div>. To make faster work of creating these in the future, you can create a snippet set and define a “div.featurebox” snippet within it, so you only have to type the first few letters of “featurebox” to be able to quickly autocomplete to creating a <div class="featurebox">.

    If you prefer not to edit .css files manually, there are apps that put a graphical UI around stylesheet editing. (I’ve enjoyed using MacRabbit’s CSSEdit, which is now part of Espresso.)

    I’m sorry you got “stuck” and this wasn’t clearer from the start! Maybe some clarification on this issue in the TypeMetal User Guide could help? Hopefully the above will get you un-stuck. — Let me know!

    Regards and kind thanks for your support of TypeMetal!
    Troy

    #1392

    Reply


    Troy Stephens

    Keymaster

    You’ll find a bit more about CSS on this page in the TypeMetal User Guide, by the way.

    Hope this helps,
    Troy

    #1395

    Reply


    T. Babb

    Thank you for the very thorough explanation. I was able to create the custom css and the featurebox snippit and use it. I assume the expresso app would make it easier if I wanted to create other featureboxs with different attributes such as colors, line thickness?

    Would expresso help with creating custom tables? I was able to create a some tables in TypeMetal but could not seem to make them the same size. </p>

    Thanks

    Tim

    #1396

    Reply


    Troy Stephens

    Keymaster

    Hi Tim,

    TypeMetal’s bundled stylesheets let <table>s shrink-to-fit their contents. To make all of your tables have the same desired width, you can simply specify a value for the CSS “width” attribute, like so:

    
    table {
        width: 100%;
    }
    

    “100%” always fills the full width of the containing element. You could also specify a width in pixels (e.g. “700px”), printer’s points (e.g. “700pt”), or relative to the current font size (e.g. “100em”).

    Espresso enables you to do this kind of stuff with a visual inspector interface, which helps relieve you of the need to remember attribute names and allowed values, but in the end you still need to know a bit about CSS, and it’s not too hard to do the basic stuff by hand, which is what I do most of the time.

    Hope this helps!
    Troy

Viewing 5 posts - 1 through 5 (of 5 total)

Reply To: Colored Box Around Text
Your information:





56 − = 54