Replies to This Discussion

Permalink Reply by JenSocial on July 7, 2011 at 12:02am

Basic CSS Styling Lesson:

Let's say you wanted to add special content to a special box, that has a thick dark blue border with a light blue background, to several paragraphs across your site - - here's what you could do to save time:

• Add the following line of code to your Advanced CSS - - we are creating a class called mybluebox.
• .mybluebox { background-color:#99D0E7; border: 5px solid #003366; padding:10px; }
• I will add the class to my Advanced CSS right now, and not take the chance of the CSS working in a comment. So, I can show you the live example below.
• Add your newly created class to a paragraph or DIV, or just about any HTML tag. You could add to a text box, a new page, a Group Text Box, etc...:

<div class="mybluebox">This is my first basic CSS style. It's a class. I named it mybluebox. I must add a period before the name in my CSS. I must use class="mybluebox" when I apply this style to a paragraph, a DIV, or other HTML tags.</div>

Example Below:

This is my first basic CSS style. It's a class. I named it mybluebox. I must add a period before the name in my CSS. I must use class="mybluebox" when I apply this style to a paragraph, a DIV, or other HTML tags.

Permalink Reply by elsodev on July 9, 2011 at 3:59am

well explained. :D

Permalink Reply by Michel Poisson on July 13, 2011 at 3:15pm

Great Tip !!!!

Permalink Reply by Michel Poisson on July 18, 2011 at 1:59pm

There's also a blue one.

Very cool! And simple to use.

 

<div class="dy-ning-msg"><p>Your Text Here.</p></div>

 

---------------------------

One caveat: It sometimes requires a page re-load (in Chrome) for the div to display.

Permalink Reply by Michel Poisson on July 13, 2011 at 3:25pm

On our network (a Design Studio theme mod) it comes up with its icon.

Maybe I'm missing something.

But it's not a big deal as we'll be using these boxes for warnings and support comments, so the icons fit.

• ‹ Previous
• 1
• 2
• Next ›
• Page