CSS :before and :after Pseudo-element

The before and after insert content before and after of the element .

Let’s see an example below.

Here is HTML:

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc adipiscing tristique dictum. Nunc odio sapien, sagittis a viverra non, consequat sed urna. Nunc blandit mi nisl, ut condimentum mi iaculis ut. Morbi eget ante luctus, venenatis augue sed, condimentum tortor. Aliquam pretium commodo enim, vel consequat lacus dignissim quis. Vivamus tristique luctus egestas. Mauris aliquam enim et velit rhoncus, a tempus neque faucibus. Pellentesque nec erat ut nunc ultrices suscipit eget ac metus. Suspendisse eget auctor eros, ut dignissim ante. Nunc non justo facilisis odio blandit euismod non nec metus. Quisque eu felis nisl. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam tempus consectetur lorem vitae facilisis.
</p>

And here is CSS

p:before
{
    content:"'";
    font-weight:bold;
}
 p:after
{
    content:"'";
    font-weight:bold;
}

In the above css we have applied: before and :after on the p element. We have set content to single quote and weight of the font is set to bold.

Here how the p element will render to browser.

beforeandafter

You will see the single quote appears before and after the content of the p element.

You can see live example here http://jsfiddle.net/mandarBadve/3ye7E/

Metro style context menu using JavaScript and CSS

What is context menu?

When you right click on browser window, browser will show you a menu containing some common functions.
See following image for reference.

Metro style context menu using JavaScript and CSS

If you want to build your own custom context menu, follow the easy steps below.

Step 1 – HTML

<div id="context-menu">
<ol>
<li><a href="#">menu 1</a> </li>
<li><a href="#">menu 2</a> </li>
<li class="list-devider">
<hr />
</li>
<li><a href="#">menu 3</a> </li>
<li><a href="#">menu 4</a> </li>
<li><a href="#">menu 5</a> </li>
<li class="list-devider">
<hr />
</li>
<li><a href="#">menu 6</a> </li>
<li><a href="#">menu 7</a> </li>
</ol>
</div>

Step 2 – CSS

Following is CSS declaration for above context menu structure. This will give metro style look to context menu.

#context-menu
{
z-index: 1000;
position: absolute;
border: solid 2px black;
background-color: white;
padding: 5px 0;
display: none;
} #
context-menu ol
{
padding: 0;
margin: 0;
list-style-type: none;
min-width: 130px;
width: auto;
max-width: 200px;
}
#context-menu ol li
{
margin: 0;
display: block;
list-style: none;
zoom: 0;
padding: 5px 5px;
}
#context-menu ol li:hover
{
background-color: #efefef;
}
#context-menu ol li:active
{
color: White;
background-color: #000;
}
#context-menu ol .list-devider
{
padding: 0px;
margin: 0px;
}
#context-menu ol .list-devider:hover
{
/*background-color: #efefef;*/
}
#context-menu ol .list-devider hr
{
margin: 2px 0px;
}
#context-menu ol li a
{
color: Black;
text-decoration: none;
display: block;
padding: 0px 5px;
}
#context-menu ol li a:active
{
color: White;
}

Step 3 – JavaScript

To enable context menu, write down following script.

$(document).ready(function () {
try {
$(document).bind("contextmenu", function (e) {
e.preventDefault();
$("#context-menu").css({ top: e.pageY + "px", left: e.pageX + "px" }).show(100);
});
}
catch (err) {
alert(err);
}
});

Note: Above script require JQuery to be included in document.

In above script we have set context menu function to our custom function. This function will prevent default context menu of browser and
will show custom context menu.

Here we can add following function when user clicks on document, will hide context menu.

$(document).bind("click", function (event) {
$("#context-menu").hide();
});

look at the beautiful metro style context menu tested in IE9.

Metro style context menu using JavaScript and CSS

Enjoy JavaScript…

Fixed width, centered design in SharePoint site using css

By default SharePoint gives 100% width to sites created. We can fixed width of site by using custom css and changing some class names
in master page.

Lets have look to the solution.

div.s4-title.s4-lp, body #s4-mainarea, #s4-topheader2, #s4-statusbarcontainer
{
width: 960px;
margin: auto;
padding: 0px;
float: none;
background-image: none;
background-color: white;
}

To get fixed width design add css classes to the following element.

Default

<div id="s4-workspace">

Fixed Width

<div id="s4-workspace">

Default

<div id="s4-titlerow" class="s4-pr s4-notdlg s4-titlerowhidetitle">

Fixed Width

<div id="s4-titlerow"  class="s4-pr s4-notdlg s4-titlerowhidetitle s4-nosetwidth">

Fixed width, centered design in SharePoint site using css