Some CSS tricks for your Salesforce Community / Public Knowledge Base

Knowledge Articles:

The fields that display in the Community are determined by several factors:

1. The Knowledge Object’s Page Layout. You can control everything except required fields here.
2. Field Level Security for the Profile viewing the Knowledge Article can also lock down ability to view fields. For an unauthenticated experience you will need to make changes to the guest profile which can be configured here. When you’re testing this, you should preview it from the customer’s User (login as…), not as an admin, because the fields you’ll be able to view may be different
3. You can use CSS to hide the fields in the Community as well. See documentation here.

How to make changes to the CSS for a Salesforce Community

Here’s some example CSS you might want to use:

Hiding required field names in the article layout (such as Body, Title, and URL)

article.content .forcePageBlockSectionRow ~ .forcePageBlockSectionRow{
display:none;
}

Hides the Title and URL fields (these two fields are required in the layout)

.selfServiceArticleLayout .forcePageBlockSectionView.full .test-id__field-label, .selfServiceArticleLayout .forcePageBlockSectionView.full .test-id__grouped-field-label-icon{
display:none;
}

Hide the field label (“Article Body”)

.test-id__field-label{
 display:none;
}

Hide the login/username and profile info

.cProfileCon > div{
display:none;
}

Remove Knowledge label at the top of the Knowledge Article

.selfServiceArticleHeaderDetail.meta {
margin-bottom: 30px;
display: none;
}

Trending Articles Title Size/Weight

.selfServiceTopicTrendingArticles42>h2 {
font-size: 1.6rem !important;
font-weight: 200 !important;}

Similar Articles Title Size/Weight

.selfServiceSimilarArticles42>h2 {
font-size: 1.6rem !important;
font-weight: 200 !important;
}

Trending Articles Padding

.selfServiceTopicTrendingArticles42 .slds-grid — vertical a {
padding-top: 15px;
padding-bottom: 15px;
}