Showing posts with label Branding. Show all posts
Showing posts with label Branding. Show all posts

Wednesday, August 27, 2014

Web Part Branding















Create css file "WebPartStyle.css" & upload in Style Library with below mentioned contents :

.ms-wpTdSpace{
display:none;
}
.ms-WPHeader td:first-child {
    background: url('g-03.png') no-repeat top right;
    background: url('g-01.png') no-repeat top left;
    margin: 0;
    padding: 0px 0px 0px 20px;;
    height: 20px;
    display:inline;
}

.ms-WPHeaderTdMenu {
    margin:0px 0px 0px 20px;
    background: transparent url('g-02.png') scroll repeat-x right top !important;

    border: 0;
}

.ms-WPTitle
{
   background: url('g-02.png') no-repeat top repeat-x !important;
}
.ms-WPTitle A {
color:white !important;
}
.ms-WPHeaderTdSelection{

    background: transparent url('g-03.png') scroll repeat-x right top !important;
}

/* border (title and border) */
.ms-rtestate-field table
{
    border-collapse: separate;
}
.ms-WPBorder
{
    border-top: none;
    border-right: 1px #C0C0C0 solid;
    border-bottom: 1px #C0C0C0 solid;
    border-left: 1px #C0C0C0 solid;
}
/* title (title and border, title only) */
.ms-WPHeader > td
{
    border-top: none;
    border-bottom: none;
}
.ms-WPHeader > td:first-child
{
    border-left: none;
}
.ms-WPHeader > td + td.ms-wpTdSpace
{
    border-right: 0px #C0C0C0 solid;
}


/* Hide
.ms-WPHeaderTdSelection{

 background: transparent url('/_layouts/images/DesignerListWebPart/topchannel.png') repeat-x  !important;
}
*/



Now edit the v4.Master page & place below given line just above this tag :  <asp:ContentPlaceHolder id="PlaceHolderAdditionalPageHead" runat="server"/>


 <link rel="stylesheet" type="text/css" href="../../Style Library/WebPartStyle.css" /> "
  <asp:ContentPlaceHolder id="PlaceHolderAdditionalPageHead" runat="server"/>

You can find images on One Drive.


Branding Left Navigation











Create css file "LeftNavStyle.css" & upload in Style Library with below mentioned contents :

/* To Set minum Height of the page */
.s4-ca{
 min-height:500px !important;
}

/* Remove Top Space From Left Navigation */
.ms-quickLaunch  {
padding-top:5px !important;
}

/* For Footer */
.custom-footer
{
clear:both;
text-align: center;
padding: 10px;
background-color: #FCFCFC;
border: 1px solid #DBDDDE;
}
/* Left Navigation Heading */
.s4-ql ul.root > li > .menu-item, .s4-qlheader, .s4-qlheader:visited {
   
    border-bottom:1px solid #B8BABD !important;
    border-top: 1px solid #E0E0E0 !important;
    font-size: 1.2em;
    margin: 0;
    overflow-x: hidden;
    padding: 3px 4px 3px 10px;
    word-wrap: break-word;
 background:  url('../SiteAssets/01-03.png') repeat-x;
 /*background-color:#005B96 !important;*/
 color:#fff;

}
/* Left Navigation item Hover */
.s4-ql ul.root ul > li > a:hover{
 color: #005B96 !important;
 background-color: #CCE3F2 !important;
 background: url('../SiteAssets/01-hover.png') repeat-x !important;
}

/* Left Navigation item Selected */
.s4-ql ul.root ul > li > a.selected{
color: #fff !important;
    background-color:#0072BC!important;
  background: url('../SiteAssets/01-SElect.png') repeat-x !important;
    height:15px !important;
    padding: 3px 4px 0px 10px !important;

}

/* Space from left side */
.s4-ql ul.root ul > li > a {

 margin-left:10px;
 background-position: left center;
 background-image:url('/_layouts/images/scrollbar-mousein-rightarrow.png');
 background-repeat:no-repeat;
    padding: 3px 4px 4px 10px;
}

/*Left Nav Color */
body #s4-leftpanel-content {
    border-style: solid;  
    background-color:#fff;
}


/* Top Navigation Color */
.s4-tn{
margin:0;
padding:0;
/*background-color:#0072BC!important;*/
background:  url('/_layouts/images/DesignerListWebPart/topchannel.png') repeat-x;

}

/* Hide Recycle Bin & View All site contant */
.s4-specialNavLinkList{
 display:none;
}


/*Left Nav Selected Heading
.s4-ql a.selected {
 color: #fff !important;
    background-color:#0072BC!important;
  background: url('/_layouts/images/DesignerListWebPart/jewel_select_middle.png') repeat-x !important;
    height:15px !important;
    padding: 3px 4px 0px 10px !important;

}
.s4-ql a:hover{
 color: #005B96 !important;
 background-color: #CCE3F2 !important;
 background: url('/_layouts/images/DesignerListWebPart/jewel_hover_middle.png') repeat-x !important;
}

*/
Now edit the v4.Master page & place below given line just above this tag :  <asp:ContentPlaceHolder id="PlaceHolderAdditionalPageHead" runat="server"/>


 <link rel="stylesheet" type="text/css" href="../../Style Library/LeftNavStyle.css" /> "
  <asp:ContentPlaceHolder id="PlaceHolderAdditionalPageHead" runat="server"/>

You can find images on One Drive.

Tuesday, December 27, 2011

SharePoint 2010 Branding

Real World Branding with SharePoint 2010 Publishing Sites

http://msdn.microsoft.com/en-us/library/gg430141.aspx#Y13640


The most important source of information is the SDK. I can’t stress that enough. There is so much more documentation with this release than there was with 2007. However, we are all in the habit of looking to each other for information first. Researching the SDK and walking through the Development classes, even if you aren’t a developer. is an important step in understanding the complex relationships between the objects in SharePoint and ASP.NET.

Planning Strategy and Design

Visual Design

Usability

Wireframes and prototypes

Web Content Management

Implementation

Microsoft SharePoint Designer 2010

Downloads:

CSS and HTML Resources

SharePoint 2010 requires a better understanding of CSS than you needed in SharePoint 2007. You really should be able to plan your css. If you can use the box model on purpose. If you know how to clear a float. If you understand a stacking index, you are okay. If you don’t, practice on plain old HTML first. Build your own HTML from scratch and style it. Draw a design and build it from scratch Plan it.
CSS Sticky Footer You may find yourself struggling to get your footer to stay at the bottom of your page. If you really want this to be a part of your site, test the layout and structure all alone to troubleshoot. Test with and without content on as many site templates as possible.

Themes

General SharePoint CSS and Markup

Master Pages

Starter Master Pages

Master Page Tips and Tricks that will save your ARSE

Simply Cool Tips and Tricks

Upgrading 2007 Designs

Ribbon