Showing posts with label CSS. Show all posts
Showing posts with label CSS. Show all posts

Monday, February 22, 2016

Auto trim row as per width in HTML

Here is the CSS for the same :

.trimLine
{  
 white-space: nowrap; text-overflow:ellipsis; overflow: hidden; max-height:27px; padding:0px; margin:0px;
}

Tuesday, September 8, 2015

Create Responsive Circle



About

Let’s see how to create a responsive circle with use of DIV tag in HTML

CSS

First we need to write some css for the circle:
.circle {
            margin-left: auto;
            margin-right: auto;
            border-radius: 50%;
            width: 100%;
            position: relative;
            border: 3px solid #D21009;
            background-color: #d9534f;
        }

        .circle:before {
            content: "";
            display: block;
            padding-top: 100%;
        }

        .circle-inner {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            text-align: center;
        }

        .circle-text {
            margin: auto;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            height: 1em;
            line-height: 1em;
            font-size: 2em;
            color: white;
        }

HTML

<div class="circle" style="width:100px; height:100px;">
        <div class="circle-inner">
            <div class="circle-text">
                999
            </div>
        </div>
    </div>

Monday, April 30, 2012

SharePoint 2010 CSS Reference Chart

SharePoint 2010 CSS Reference Chart: A Complete reference for SharePoint 2010 CSS. You must read it.

http://sharepointexperience.com/csschart/csschart.html

Tuesday, December 27, 2011

SharePoint 2010 CSS Chart

CSS Comments Screenshots
body #s4-ribboncont{background-image:none;} /*Globally turning off bordersThis is needed to have any of the style below to take effect.  
.ms-cui-groupSeparator {border-right:1px solid #E7E7E8 !important; }.ms-cui-topBar2{border-width:0px;}*/ /*Turn on separators in the Ribbon  
.ms-cui-ribbonTopBars{background: red url() repeat-x !important;
padding-top:0px;
}
/* Set the background for the tabs at the top (Browse / Page) */ ms-cui-ribbonTopBars
.ms-cui-cg-i{background-image:url() !important;
background-position:bottom left;
background-repeat:no-repeat !important;
height:15px;
margin-bottom:2px;
}
.ms-cui-cg-db .ms-cui-cg-t{height:17px; background-image:url(‘http://integration.echn.ca/Media/SiteImages/bgBackground.gif’) !important; background-position:bottom right !important; background-repeat:no-repeat !important; margin-left:4px;}
.ms-cui-cg-t-i{ color:white; font-weight:bold; }
.ribbon-wrapper{position:relative;}
/* Set the background for the additional dynamic tabs (Web parts / Lists etc.) */  
.fixed-ribbon{position:fixed; top:0; width:950px; z-index:21;}    
.s4-title{height:34px; background: red url() repeat-x;
}
  s4-title
.s4-title h1 a,.s4-title h2 a,.s4-title h2 {color: red;}  
.s4-title .s4-pagedescription,.s4-title .s4uniqpermdescription {color:red;}   s4-title-s4-pagedescription
.ms-cui-tt-s .ms-cui-tt-a {color:red !important;
background: red url();
}
 
.ms-cui-tabBody{background:red url();
}
/* Set the background of the Tab Body */
  The next section changes the style one of the additional tools menu items. There are several in the Corev4 CSS to change.  
.ms-cui-cg-db .ms-cui-cg-t{color: red;
background:url(“/_layouts/images/bgximg.png”) repeat-x -0px -834px;
}
/* Font color of the Library Tools and background using bgximg.png offset by -834px */
.ms-cui-cg-db .ms-cui-tt-a:hover {border-color: red;
border-top-color:red;
background:url(“/_layouts/images/bgximg.png”) repeat-x -0px -834px;
}
/*Borders and background of Library Tools when menu is not selected.
.ms-cui-cg-db .ms-cui-cg-i{border-color: red;} /* Border above library tools when not selected*/
.ms-cui-cg-db.ms-cui-cg-s .ms-cui-cg-i{border-color: red;} /* Border above library tools when sub-menu item selected*/
.ms-cui-cg-db.ms-cui-cg-s .ms-cui-ct-ul{background-color: red;
border-color: red;
}
/* Gap between menu items in the Library Tools when sub-menu item selected */
.ms-cui-cg-db.ms-cui-cg-s .ms-cui-cg-t{color: red;
background:url(“/_layouts/images/bgximg.png”) repeat-x -0px -834px;
}
/* Background of Library Tools when sub-menu item selected */
.ms-cui-cg-db .ms-cui-ct-first .ms-cui-tt-a{border-left-color: red;} .ms-cui-cg-db .ms-cui-ct-last .ms-cui-tt-a{border-left-color: red;} /*Borders of the Library Tools when Browse tab selected*/
.ms-cui-cg-db.ms-cui-cg-s .ms-cui-ct-first .ms-cui-tt-a{border-left-color: red;} /* Border color on the first sub-menu item when selected*/
.ms-cui-cg-db.ms-cui-cg-s .ms-cui-ct-last .ms-cui-tt-a{border-right-color: red;} /* Border color on the last sub-menu item when not selected*/
.ms-cui-cg-db.ms-cui-cg-s .ms-cui-tt-s .ms-cui-tt-a{border-left-color: red; border-right-color: red;} /* Border color on the last sub-menu item when it’s selected*/
.ms-cui-cg-db.ms-cui-cg-s .ms-cui-tt-a{border-color: red;
border-top-color:red;
background-color:red;
}
/*None selected sub-menu item*/
.ms-cui-cg-db.ms-cui-cg-s .ms-cui-tt-a:hover{background-color: red !important;
border-top-color: red;}
/*Library tools none selected sub-menu item on hover */
.ms-cui-cg-gr.ms-cui-cg-s .ms-cui-cg-t{

color:#0e400d;

background-color:red;

background-image:none;

}
 

.ms-cui-cg-gr .ms-cui-tt-a:hover{


border-color:#56c553;

border-top-color:#56c553;

background:red;

}
 

.ms-cui-cg-gr .ms-cui-tt-a:hover{


border-color:red;

border-top-color:red;

background:url(“/_layouts/images/bgximg.png”) repeat-x -0px
-832px;
}
 

.ms-cui-cg-gr .ms-cui-ct-last .ms-cui-tt-a{


border-right-color:red;

}
 

.ms-cui-cg-gr .ms-cui-ct-first .ms-cui-tt-a{


border-left-color:red;

}
 

.ms-cui-cg-gr.ms-cui-cg-s .ms-cui-cg-t{


color:#0e400d;

background-color:red;

background-image:none;

}
 

.ms-cui-cg-gr.ms-cui-cg-s .ms-cui-tt-a{


background-color:red;

border-color:#56c553;

border-top-color:#56c553;

}
 

.ms-cui-cg-gr.ms-cui-cg-s .ms-cui-tt-s .ms-cui-tt-a:hover{


border-color:#03a200;

background-color:red !important;

}
 

.ms-cui-cg-gr.ms-cui-cg-s .ms-cui-tt-a:hover{


background-color:red !important;

border-color:#56c553;

border-top-color:#56c553;

}
 

.ms-cui-cg-gr.ms-cui-cg-s .ms-cui-tt-s .ms-cui-tt-a{


border-left-color:red;

border-right-color:red;

}
 

.ms-cui-cg-gr.ms-cui-cg-s .ms-cui-ct-last .ms-cui-tt-a{


border-right-color:red;

}
 

.ms-cui-cg-gr.ms-cui-cg-s .ms-cui-ct-ul{


background-color:red;

border-color:#03a200;

}
 
  /*Start of the Browse menu formatting.*/  
.s4-tn {background:red url();} /*Menu Bar background*/
.s4-tn li.static > a:hover{/* [ReplaceColor(themeColor:"Accent1")] */ color:red;} /*Browse none selected menu items on hover */
.s4-toplinks .s4-tn a.selected:hover{color: red;} /*Color of selected menu item on hover event.*/
.s4-toplinks .s4-tn a.selected{border-color: red;
border-bottom-color: red;
border-top-color: red;
background-color: red;
}
/*Border and Background of selected menu item.*/
  /*Start of the Main Area formatting.*/  
body #s4-mainarea.s4-pr{background: red url();} /*Below the Ribbow half of the page.*/
.s4-ca.s4-ca-dlgNoRibbon{background: red url();} /*Behind the Main Content*/
body #s4-leftpanel-content{background: red url(); } /*Background of the Left Panel*/
.s4-specialNavLinkList{background: red url();} /*Background of the navigation link list on quicklaunch*/
body #s4-leftpanel-content{ padding:0px 0px 0px;
border:1px solid #ffffff;
border-top-width:0px;
border-right-width:1px;
border-bottom-width:0px;
border-left-width:1px;
}
/*Border of the quicklaunch*/

To help find additional styles in corev4.css please see this post on using the IE8 Developer Tools.

It will help you identify all the CSS that is affecting a selected region. 

Reference From : http://sp2010notes.wordpress.com/sharepoint-2010-css-chart/