Kaptinlin Themes Support

Many people learn from examples. Let people show off what they have done and create little tutorials for others.

Here is an example of a post that might help others:

The code below puts a framed box within a note box. It changes the colors of the note box and rounds the corners. It changes the colors of the framed box, adds a drop shadow and inner shadow, and adds a 2nd border. The div id in the CSS code keeps these changes from affecting other note boxes and framed boxes.


HTML:

<div id="mynotebox"> [note title="Title:"]
[one_fifth]
&nbsp;
&nbsp;
&nbsp;&nbsp;&raquo;&nbsp;&nbsp;Feature
&nbsp;&nbsp;&raquo;&nbsp;&nbsp;Feature 2
&nbsp;&nbsp;&raquo;&nbsp;&nbsp;Feature 3
&nbsp;&nbsp;&raquo;&nbsp;&nbsp;Feature 4
[/one_fifth]
[four_fifth_last]

<div id="myframedbox"> [framed_box bgColor="#8bb381" textColor="#5e7d7e" rounded="true"]
<font color=black> <big>Feature -</big></font> This is a paragraph that describes the feature............................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................

<font color=black><big>Feature 2 -</big></font> This is a sentence that describes the feature 2
[/framed_box]</div>
[/four_fifth_last]
[/note]</div>


CSS:

/* ======================================================= */
/* Boxes Styles */
/* ======================================================= */
/* Page I use the code
---------------------------------------------------------- */
#mynotebox {
}

#mynotebox .note {
border: 6px solid black; /* There are different border options like double. */
color:black; /* changes text color */
background-color:#8bb381;
border-radius: 20px: /* You have different options for rounding corners - see a tutorial */

}

#myframedbox {
}

#myframedbox .framed_box {
border: 4px solid black; /* You can make each border a different color - see a tutorial */
border-radius: 12px; ;/* fixes the gap between the border corners */
box-shadow: 5px 5px 2px 3px #333;/* horizontal offset, vertical offset, blur radius, spread radius, color */
}
#myframedbox .framed_box_content {
border: 4px solid #617C58;
box-shadow:inset 0 0 10px #000000/* inset makes the inside shadow */
}


Note: The above code still needs some work. I learned most of it from BackuPs's posts. For myself to learn the above took reading a lot of differents posts and many outside tutorials.

If this post include a picture and or link showing what the above did, this could be a good learning tool for others.