customise or create similar style

customise or create similar style

by Werner van Staden -
Number of replies: 5
I am trying to emulate the styling of the <pre> tag for a custom tag called <file>. Is it sensible to declare a new style ("file") or do I have to extend the <pre> tag and use this? I am unsure how to do the latter in CSS...

here is the context:

Our Moodle site provides training courses in Open Source code. We provide most of the learning materials with the book module which is just great.

For the purpose of indicating command line code I have personalised the <pre> CSS style in our custom theme:

.book_content pre
{
background-color: black;
color: white;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: dashed;
border-right-style: dashed;
border-bottom-style: dashed;
border-left-style: dashed;
border-top-color: orange;
border-right-color: orange;
border-bottom-color: orange;
border-left-color: orange;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 10px;
font-family: "lucida typewriter",lucidatypewriter,monospace;
font-size: 1em;
}

The result of this looks as follows (black box with white text):

screenshot.png

However, the black text with orange dashed border above has the same CSS code (tag called "file" but with different colours) but it somehow does not display a single block of text even if I wrap it in <p></p> tags.

How can I code <file> to output a block of outlined text like <pre> above? Or alternatively how do I extend the pre tag to display differently in another context?

Average of ratings: -
In reply to Werner van Staden

Re: customise or create similar style

by Zoe Bogner -
Unless you're working in a language that permits custom tags, such as xml, you can't invent your own tags (I'm pretty sure file isn't a tag.. is it?). Instead, use classes. .book_content in your example, is a class of pre, and you can create another just like it:

.file pre
{
background-color: black;
color: white;
border-top-width: 1px;
... etc

Then apply it to you text like so:
<pre class="file">text goes here</pre>


Hope that's of some help.
Zoe
Average of ratings: -
In reply to Zoe Bogner

Re: customise or create similar style

by Werner van Staden -
Zoe, thank you very much for the guidance.

I implemented your solution and what I get now is that the section styled with <pre class="file">...</pre> is somehow overwritten with the <pre> style defined for .book_content. This must be because the text is in the book module...

Is there a way of extending the

.book_content pre
{...
}

definition so that it will do what I want?

I know this is a very rudimentary CSS question, but somehow I got this far without ever having learnt the fundamentals!
Average of ratings: -
In reply to Werner van Staden

Re: customise or create similar style

by David Scotson -

I think Zoe got slightly mixed up when updating your example, the .file goes on the other side of the html tagname.

I think what you actually want is .book_content pre.listing

That is more specific than .book_content pre so anything you put in that selector will add to or overrule what has been specified in the current one.

That should get you going but, without wanting to confuse you further, you should really be putting the code inside <code> tags and only adding <pre> tags around those if you want to format one or more lines as a separate block/paragraph.That means you can use single variable names in a sentence with similar formatting.

And if you have two different types of code (one for the command line and one for file listings you should really have two classes:

In that case you'd use as many of these as you need:

   .book_content
   .book_content pre.file /* for things that affect the whole block of file listings e.g. the color of the box border that goes round the whole block
   .book_content pre.shell /* for things that affect the whole block of shell interaction
   .book_content code /* for things that affect the code text e.g. font selection, font color  
   .book_content pre.file code /* for things that only affect text in files e.g. use a different text color
Average of ratings: -
In reply to David Scotson

Re: customise or create similar style

by Werner van Staden -
David, Thank you very much for offering and explaining the solution to my problem.

I certainly have a better grasp of what I am doing now and I have implemented some of the examples you listed.

when using, say, .book_content pre.file as you suggested, does this type of CSS declaration (pre.file) overrule an earlier .book_content pre .file (with a space between pre and .file) declaration?


You also advise: "you should really be putting the code inside <code> tags and only adding <pre> tags around those if you want to format one or more lines as a separate block/paragraph."

Are you referring to the following?: <pre>my paragraph containing code examples <code>echo "hello world!"</code> here and also seperately here: <code>$ sudo apt-get update<br />$ sudo apt-get install moodle<br />$ cd /var/www/moodle </code></pre>

Lastly you mention: "That means you can use single variable names in a sentence with similar formatting." Could you please expand on that? I don't get the context...

Once again, thanks a lot.
Average of ratings: -
In reply to Werner van Staden

Re: customise or create similar style

by David Scotson -
Hi,

`.book_content pre.file` means "any pre section with the class '`file`', somewhere inside any item (e.g. div, p etc.)with a `.book_content` class.


`.book_content pre .file` (with the space) means "any item (e.g. pre, p, span etc.) with the class '`file`', somewhere inside a pre tag which is in turn inside any item with a `.book_content` class.

They won't interfere with each other since you'd need to have a `pre class="file"` inside another pre class="file"` in order for both to apply to the same section.

For your second question, in _theory_ `pre` is used for any preformatted text where you want to put in linebreaks like poetry for instance. On the other hand `code` is for designating computer code, things to type into command line prompts etc.

So if you want multiple lines of computer code, you really should use both.

But from you example it seems like you might want to refer to a variable or command inside a normal paragraph of text like when I refered to CSS class names above. If you put those in pre tags they'll be in a paragraph of their own. In code tags they'll just sit in the flow of the sentence.

edit: annoyingly there appears to be a filter running on these forums that grabs any such code tags and reformats them in pre tags as if they were PHP so I can't really demonstrate it live.

Average of ratings: -