Post
Ask Question

Use Custom CSS In SharePoint 2013

Step 1. Open the SharePoint team site.

Open SharePoint team site

Step 2. Open SharePoint Designer.

Step 3. Create a new custom.CSS file under Site Assets.

Custom.CSS

Set the alternate CSS URL.

Step 4. Click site actions, then site settings.

Under look and feel.

Click Masterpage.

Masterpage

In the first step remove the Page title.

Customize

Code

#pageTitle {
   display: none;
}

Result

See Result

Step 5. The next step is to remove the Edit Links Option on the page

Remove the Page title

Code

#zz13_TopNavigationMenu_NavMenu_Edit {
    display: none;
}

Result

Edit Links Option

Step 6. Remove the left quick links bar.

Quick links bar

Code

#sideNavBox {
   display: none;
}

Result

Remove the left quick links bar

Step 7. Move the widgets to the left margin.

Code

#contentBox {
   margin-left: 10px;
}

Result

Move the widgets to left margin

Step 8. Now remove all the default widgets from the page and add some web parts.

Step 9. Set the background color for the web part header and fonts.

Going to set the backgroud

Code

.ms-webpart-titleText,
.ms-webpart-titleText > a {
    background-color: Orange;
    font-size: 12px;
    font-weight: bold;
    color: White;
    padding: 5px 5px;
    border-top-left-radius: 1em;
    border-top-right-radius: 1em;
}

Result

Backgroud color

Step 10. The next one is to remove the browse, follow, and share from the top ribbon.

Code

#s4-ribbonrow {
   display: none;
}

Result

Result

Remove another bar.

Code

#suiteBar {
   display: none;
}

Result

Remove the another bar

Full code

#pageTitle {
    display: none;
}

#zz13_TopNavigationMenu_NavMenu_Edit {
    display: none;
}

#sideNavBox {
    display: none;
}

#contentBox {
    margin-left: 10px;
}

.ms-webpart-titleText,
.ms-webpart-titleText > a {
    background-color: Orange;
    font-size: 12px;
    font-weight: bold;
    color: White;
    padding: 5px 5px;
    border-top-left-radius: 1em;
    border-top-right-radius: 1em;
}

#s4-ribbonrow {
    display: none;
}

#suiteBar {
    display: none;
}

This is the of branding the SharePoint page using custom CSS.


Similar Articles