0

Can I use the chatter api to bypass salesforce standard stylesheets in my visualforce pages?

Short explanation: I have a chatter group that is set to broadcast only, and is used for posting updates from our organization's CEO to the whole team. I'm having trouble displaying this feed on a visualforce page I've constructed with a custom CSS stylesheet.

@Sean UPDATE: I added in the styling instead of having a separate sheet because I found it easier to work on. Obviously, some of the code you see will be used on other pages. I tried setting off the entire page (except for the chatter component) in a custom class, but it doesn't work. Ideally, I would like one of my columns or a sidebar to channel some kind of blogging capability.

<apex:page docType="xhtml-1.0-strict" showheader="false" sidebar="false" standardstylesheets="false">
<style>
html, body {
    height: 100%;
}

body {
    margin: 0px;
    padding: 0px;
    background: #F1E9D4 url(images/bg01.jpg) repeat;
    font-family: 'Open Sans', sans-serif;
    font-size: 10pt;
    color: #747474;
}


h1, h2, h3 {
    margin: 0;
    padding: 0;
}

p, ol, ul {
    margin-top: 0px;
}

p {
    line-height: 120%;
}

strong {
}

a {
    color: #706C53;
}

a:hover {
    text-decoration: none;
}

a img {
    border: none;
}

img.border {
}

img.alignleft {
    float: left;
}

img.alignright {
    float: right;
}

img.aligncenter {
    margin: 0px auto;
}

hr {
    display: none;
}

ul.style1
{
    margin: 0;
    padding: 0;
    list-style: none;
}

ul.style1 li
{
    padding: 15px 0px 15px 0px;
    border-top: 1px solid #E5E5E5;
}

ul.style1 a
{
    color: #747474;
}

ul.style1 .first
{
    padding-top: 0;
    border-top: none;
}

/** WRAPPER */

#wrapper {
}

.container {
    width: 1200px;
    margin: 0px auto;
}

.clearfix {
    clear: both;
}

/* Header */

#header-wrapper {
    overflow: hidden;
    height: 600px;
}

#header {
    width: 960px;
    height: 200px;
    margin: 0 auto;
    padding: 0px 20px;
}

/* Logo */

#logo {
    overflow: hidden;
    padding: 3em 0em;
}

#logo h1, #logo p {
    text-align: center;
}

#logo h1 {
    padding: 0px 0px 0px 0px;
    text-transform: lowercase;
    font-size: 4em;
    font-weight: 600;
    color: #706C53
}

#logo p {
    margin-top: -20px;
    padding: 0px 0px 0px 5px;
    font-size: 20px;
    font-weight: 300;
    color: #696969;
}

#logo p a {
    color: #696969;
}

#logo a {
    border: none;
    background: none;
    text-decoration: none;
    color: #3C342E;
}

/* Menu */

#menu-wrapper {
    overflow: hidden;
    height: 52px;
    margin-bottom: 32px;
    background: #093B7D;
    border-top: 1px solid #D7CFAD;
    border-bottom: 1px solid #D7CFAD;
}

#menu {
    overflow: hidden;
    height: 52px;
}

#menu ul {
    margin: 0;
    padding: 0px 0px 0px 0px;
    list-style: none;
    line-height: normal;
    text-align: center;
}

#menu li {
    display: inline-block;
}

#menu a {
    display: block;
    padding: 0px 30px;
    line-height: 52px;
    border: none;
    text-decoration: none;
    text-transform: lowercase;
    text-align: center;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 300;
    color: #fff;
}

#menu a:hover, #menu .current_page_item a {
    background: #093B7D;
    text-decoration: none;
    color: #DD9754;
}

#menu .current_page_item a {
}

/** PAGE */


#page {
    overflow: hidden;
    width: 1100px;
    margin-bottom: 3em;
    padding: 5em 50px;
    background: #FFF;
    border: 1px solid #D9D2A5;
}

#page h2 a
{
    letter-spacing: -2px;
    text-decoration: none;
    font-size: 1.7em;
    font-weight: 400;
    color: #706C53;
}


#box1
{
    float: left;
    width: 450px;
    margin-right: 50px;
}

#box2
{
    float: left;
    width: 300px;
}

#box2 h2, #box3 h2
{
    padding-bottom: 1.2em;
    font-weight: 400;
    font-size: 1.7em;
    font-weight: 400;
    color: #706C53;
}


#box3
{
    float: right;
    width: 250px;
}


/** CONTENT */

#content {
}

/** SIDEBAR */

#sidebar {
    position:absolute;
        left:0; top:92px; bottom: 0;
        width: 178px;
}

/* Footer */

#footer {
    overflow: hidden;
    padding: 3em 0em;
    border-top: 1px solid #D9D2A5;
    color: #7A7762;
}

#footer p {
    text-align: center;
}

#footer a {
    color: #7A7762;
}
.center {
    margin: auto;
    width: 100%;
    padding: 5px;
    padding-bottom: 10px;
    padding-top: 0px;
}

</style>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<!--[if IE 6]>
<link href="default_ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
<body>
<div class="custom">
<div id="logo" class="container">
    <apex:image url="{!$Resource.erplogo2}" alt="" width="352" height="108"/>
</div>
<div id="menu-wrapper">
    <div id="menu" class="container">
        <ul>
            <li class="current_page_item"><a href="#">ERP Home</a></li>
            <li><a href="https://na14.salesforce.com/home/home.jsp">Salesforce</a></li>
            <li><a href="https://c.na14.visual.force.com/apex/isidirectory">Directory</a></li>
            <li><a href="#">Calendar</a></li>
            <li><a href="#">How Do I...?</a></li>
            <li><a href="https://c.na14.visual.force.com/apex/handbook">Team Handbook</a></li>
        </ul>
    </div>
</div>
</div>
<div class="custom">
<div id="page" class="container">
  <nav class="center">
   <h1 class="title" align="center"><a href="#">Mission Statement</a></h1>
        <div style="clear: both;">&nbsp;</div>
        <div align="center" style="margin-bottom:35px">
            <p><strong> Mission Statement Here. </strong></p>
        </div>
  </nav>
    <div id="box1">
        <h1 class="title"><a href="#">News</a></h1>
        <div style="clear: both;">&nbsp;</div>
        <div class="entry" style="margin-bottom:50px">
        <h2 class="title">President's Office Letter to Donors</h2>
            <p>February 1, 2016</p>
            <p>In recent weeks I have met with dozens of your fellow supporters and friends, and the conversations inevitably turn to the horse race that is ... (<a href="https://home.isi.org/donors/president%E2%80%99s-letter">Read more</a>)</p>
        </div>
        <div class="entry" style="margin-bottom:50px">
        <h2 class="title">Expense Reports due Friday</h2>
            <p>February 23, 2016</p>
            <p>Don't forget: Your expense report is due Friday, February 26. Click <a href="#">here</a> for a tutorial on how to do it. Log into Concur and Amex from the links at the bottom of this page.</p>
        </div>
        <div class="entry" style="margin-bottom:50px">
        <h2 class="title">March Birthdays</h2>
            <p>February 23, 2016</p>
            <p><strong>Happy Birthday!</strong></p>
            <p>Snoop Dog - March 15</p>
            <p>Funky Winkerbean - March 22</p>
            <p>Starsky and Hutch - March 30</p>
            <hr/>
        </div>
        <div class="entry" style="margin-bottom:50px">
        <h1 class="title"><a href="#">From the Archives</a></h1>
        <div style="clear: both;">&nbsp;</div>
        <div class="entry">
            <p>Gordon Wood at Princeton University, June 17, 2010</p>
            <p><iframe width="420" height="315" src="#"></iframe></p>
        </div>
        </div>
    </div>
    <div id="box2">
        <h2>Links</h2>
        <ul class="style1">
            <li class="first"><a href="https://www.concursolutions.com/"><apex:image url="{!$Resource.concur}" width="75" height="18"/></a></li>
            <li><a href="http://mail.isi.org"><apex:image url="{!$Resource.mail}" width="75" height="18"/></a></li>
            <li><a href="https://www.flickr.com/"><apex:image url="{!$Resource.flickr}" width="50" height="15"/></a></li>
            <li><a href="http://www.americanexpress.com"><apex:image url="{!$Resource.amex}" width="75" height="18"/></a></li>
            <li><a href="https://c.na14.content.force.com/servlet/servlet.FileDownload?file=015d0000003fwb3#page=2">Paid Time Off (PTO) Requests</a></li>
            <li><a href="#">Strategic Plan</a></li>
        </ul>
    </div>
    <div id="box3">
        <h2>Departments</h2>
        <ul class="style1">
            <li class="first"><a href="#">Development</a></li>
            <li><a href="#">Programs</a></li>
            <li><a href="#">Events</a></li>
            <li><a href="#">HR/Finance</a></li>
            <li><a href="#">Operations</a></li>
        </ul>
    </div>
</div>
<div id="footer" class="container">
    <p>Company Name</p>
</div>
</div>
</body>
</html>
</apex:page>
  • you might want to include the relevant bits of the VF page and what you see with a screenshot – cropredy Feb 25 '16 at 19:01
  • Um, ok. To embed a user's chatter feed into my VF page (which uses a custom style sheet) I add this: <chatter:feed entityId="{!$User.Id}"/> When I do, it jumbles the formatting on the page. There is nothing really complex about the CSS on the page. It looks great before I embed the feed. So, what I'm trying to accomplish is the following: In a container on this visualforce page I want to display the feed of a specific chatter group, but I want to only show the text from the feed (no profile picture, like button, comment button...etc.) Just text of the post. – jeremy Feb 25 '16 at 20:07
  • If you want just the text, you'll need a controller that does a query and then an apex:repeat or datatable or pageBlockTable in your VF page -- see developer.salesforce.com/page/Chatter_Code_Recipes for lots-o-examples of queries against Chatter objects – cropredy Feb 25 '16 at 23:00
1

What's happening is your custom css is overriding the standard salesforce css.

And what you want to do is to specifically apply your custom css to your custom components only.

In order to do this you'll need to encapsulate them on a custom css class selector that will not affect all components that is not contained within your specified class name.

On my example below, I've used the custom class in order to specifically style both <p> and <h1> tags that are inside div tags that has the custom class.

<style>
    .custom p {
        color:red;
    }

    .custom h1{
        font-size: 10px;
    }


</style>

<div class="custom">
    <h1>
     Hello!
    </h1>
    <!--Visualforce Components-->
</div>

<h1>
    I am not affected by your puny css
</h1>
<p>
    Me too!
</p>


<div class="custom">

    <p>
    Hi!
    </p>
    <!--visualforce components-->
</div>

This is the same concept as namespacing bootstrap in order for it to not override the standard salesforce css. http://scottvonschilling.com/blog/2014/08/using-bootstrap-in-visualforce/

Based from your css, you haven't put the custom css class in your selectors.

Here's a sample how to put your custom class on all of your css attributes. You'll have to add the custom class on each and everyone of your attributes that you're trying to specify on your css.

.custom html,.custom body {
    height: 100%;
}

.custom body {
    margin: 0px;
    padding: 0px;
    background: #F1E9D4 url(images/bg01.jpg) repeat;
    font-family: 'Open Sans', sans-serif;
    font-size: 10pt;
    color: #747474;
}


.custom h1,.custom h2,.custom h3 {
    margin: 0;
    padding: 0;
}
.custom p, .custom ol, .custom ul {
    margin-top: 0px;
}

.custom p {
    line-height: 120%;
}

.custom strong {
}

.custom a {
    color: #706C53;
}

.custom a:hover {
    text-decoration: none;
}

.custom a img {
    border: none;
}

.custom img.border {
}

.custom img.alignleft {
    float: left;
}

.custom img.alignright {
    float: right;
}

.custom img.aligncenter {
    margin: 0px auto;
}

.custom hr {
    display: none;
}

.custom ul.style1
{
    margin: 0;
    padding: 0;
    list-style: none;
}

.custom ul.style1 li
{
    padding: 15px 0px 15px 0px;
    border-top: 1px solid #E5E5E5;
}

.custom ul.style1 a
{
    color: #747474;
}

.custom ul.style1 .first
{
    padding-top: 0;
    border-top: none;
}
| improve this answer | |
  • Very helpful. Is there a way to flip your suggestion on its head, by making the custom CSS the rule, and the chatter feed the exception? I'm pretty happy with the custom formatting I have. I only want the chatter group feed I choose to be the exception. Does that make sense? – jeremy Feb 26 '16 at 5:30
  • Unfortunately at the moment, there is no way you can exclude the standard salesforce css since it is a prebuilt css. What you can though is to build the chatter group feed from scratch using visualforce components. – sfdx Feb 26 '16 at 5:48
  • Also enclosing your custom visualforce page and css in a custom class would be easier than recreating the feed itself. Unless you have a complex visualforce and css structure – sfdx Feb 26 '16 at 5:52
  • I attempted to close my CSS in custom classes as you suggested, but whenever I try to drop the chatter feed into it, it still jumbles everything. – jeremy Feb 29 '16 at 15:09
  • I've spent a long time searching the web for resources on how to build "from scratch" and I'm having difficulty identifying the best way to do this at least at the 30,000 foot level. Can you sum up what you mean by building from scratch in a few sentences? I need a way for my CEO to create something like a post, and have the post text automatically displayed on a visualforce page I've constructed. Nothing else is really necessary (no comments, likes, emoticons, pictures or anything). – jeremy Feb 29 '16 at 15:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.