Facebook Feed Template Styling & Connection

This guide will walk you through all the options in the Style tab of the Facebook Feed template editor.

While the General Settings tab controls what content is shown (e.g., your source, filters, and header), the Style tab controls the visual design. This is where you can change all the colors, fonts, spacing, and borders to perfectly match your brand and website's look.

1. Feed Header

This section controls the complete visual design of the Header at the top of your feed. The header is the box that contains your main page information, like your cover photo, page name, description, and likes count.

User Name

These settings control the appearance of your Page Name in the header.

• Text Color: This opens a color picker that allows you to select the exact color of your Page Name text.
• Typography: This opens a full set of font controls for your Page Name. You can change the Font Family (e.g., Arial, Roboto, etc.), Font Size (in pixels), Font Weight (e.g., Light, Regular, Bold), Line Height, and Letter Spacing.
• Bottom Spacing: This controls the amount of empty space (in pixels) directly below your Page Name, pushing the content (like the description) further away from it.

Description

These settings control the appearance of your Page's "About" Text or biography, located in the header.

• Text Color: This opens a color picker to set the color of the description text.
• Typography: This opens the same set of font controls (Font Family, Size, Weight, etc.) specifically for your description text.
• Bottom Spacing: This controls the amount of empty space (in pixels) directly below the description text, pushing the "Likes" count or other elements away from it.

Likes

These settings control the appearance of the Total Likes Counter text in the header.

• Text Color: This opens a color picker to set the color of the "Likes" text.
• Typography: This opens the full set of font controls (Font Family, Size, Weight, etc.) specifically for the "Likes" text.

Box

These settings control the overall container or "box" that holds all the header elements (your profile pic, user name, description, etc.).

• Background Color: This allows you to set a background color for the entire header area. By default, it's usually transparent, but you could set it to white, light gray, or any brand color.
• Padding: This is the "breathing room" inside the header box. It's the empty space between the border of the box and the content (like your profile picture and text). You can set the padding (in pixels) for the Top, Right, Bottom, and Left sides individually.
• Border Type: This lets you choose the style of the border for the header box. You can select:
  • Solid
  • Dotted
  • Dashed
  • Double
  • None (to have no border)
• Width: This setting (which appears if you select a Border Type) lets you control the thickness of the border. You can set the thickness (in pixels) for the Top, Right, Bottom, and Left sides individually.
• Color: This opens a color picker to set the color of the border itself.

2. Content

This section of the Style tab controls the appearance of all the text inside each individual post card. This includes who posted it, when it was posted, and the post's main text.

Author

This styles the Author's Name (your Page Name) on each post.

• Text Color: This opens a color picker to set the color of the Author's Name text.
• Typography: This opens a full set of font controls for the Author's Name. You can change the Font Family, Font Size, Font Weight, Line Height, and Letter Spacing.

Post Date

This styles the Date (e.g., "October 30, 2025") on each post.

• Text Color: This opens a color picker to set the color of the date text.
• Typography: This opens the full set of font controls (Font Family, Size, Weight, etc.) specifically for the date.

Post Text

This styles the main description, or caption, of your Facebook post.

• Text Color: This sets the color of the main body of your post's text.
• Typography: This opens the full set of font controls for the post text, allowing you to make it larger, smaller, or easier to read.
• Link Color: This is a special setting that controls the color of any clickable links inside your post, such as #hashtags or @mentions. This helps them stand out from the rest of the text.
• Read More Link Color: This controls the color of the "Read More" link that appears if you have a long post (based on your settings in the General tab).

Summary Card

This section styles the "link preview" box that appears when your Facebook post shares a link to another website. This box typically has a large image, a title, and a short description.

• Domain Color: This sets the color of the small text that shows the website's address (e.g., "wpsocialninja.com").
• Typography (for Domain): This controls the font settings for the domain text.
• Bottom Spacing (for Domain): This adds a bit of empty space (in pixels) below the domain text, pushing it away from the title.
• Title Color: This sets the color of the main (and largest) text in the summary card—the title of the article or page.
• Typography (for Title): This controls the font settings for the title.
• Bottom Spacing (for Title): This adds empty space (in pixels) below the title, pushing it away from the description.
• Description Color: This sets the color of the small snippet of text (the description) in the summary card.
• Typography (for Description): This controls the font settings for the description text.

3. Like & Share Button

This section styles the main "Like Page" and "Share" buttons, which you can enable in the General tab. These are the buttons that usually appear in the Header or Footer of your entire feed.

• Text Color: This opens a color picker to set the color of the text on the buttons (e.g., "Like Page").
• Background Color: This sets the main background color of the buttons themselves.
• Typography: This opens the full set of font controls (Font Family, Size, Weight, etc.) for the button text.
• Padding: This is the "breathing room" inside the button. It is the empty space between the button's text and its border. Increasing the padding makes the button look larger and easier to click.

4. Item Box

This is a very important section. The Item Box is the entire container or "card" that holds each individual post (including the author, text, image, etc.). These settings control the design of that main box.

• Background Color: This sets the background color for the entire post card. By default, it's usually white or transparent, but you can set it to a light gray or any other color to match your brand.
• Padding: This is the "breathing room" inside the post card. It's the empty space between the card's border and the content inside it (like the author's name and the post text). You can set the padding (in pixels) for the Top, Right, Bottom, and Left sides individually to get the spacing perfect.
• Border Type: This lets you choose the style of the border for the post card. You can select:
  • Solid
  • Dotted
  • Dashed
  • Double
  • None (to have no border)
• Width: This setting (which appears if you select a Border Type) lets you control the thickness of the border. You can set the thickness (in pixels) for the Top, Right, Bottom, and Left sides individually.
• Color: This opens a color picker to set the color of the border itself.

Connection Settings

The Connection tab is a simple shortcut. It allows you to connect a new Facebook Page or manually add one using a Page ID and Access Token, right from within the template editor.

Please Note: The steps to connect a page here are identical to the main Facebook connection process.

For a complete, step-by-step guide on how to use these settings, please see our main Facebook Feed Configuration documentation.