Facebook Clone Theme

• Posted by socialenginestaff Apr 26 Filed in Admin Panel #SocialEngine  #Tutorial  #Facebookclonetheme  24 views

  The Facebook Clone Theme has special settings and configurations allowing you more control over the design of your site.

  Important

  When working with Facebook Clone, it's very important to enable development mode after changing any settings for this theme. We recommend that you enable and then immediately disable development mode after doing any changes for this theme. 

  Facebook Clone has a "Custom CSS" section to allow for CSS changes that you need to make. This allows you to make changes that won't be impacted by upgrades. Please read the full tutorial below before making any changes.

  Step-by-step guide

  Some settings below are only for specific landing page designs.

  You'll need to be logged into your Admin Panel.

  1. Navigate to "Facebook Clone Theme."

               

  Global Settings

  Set Landing Page of Facebook Clone Theme

  You have a few choices for your guest landing page design and layout. To choose one, click the bubble to the left of the choice and save changes when done.

  

  The following screenshots are for the default style. Your style choice may look different.

  Layout 1

  Layout 1 gives a layout with a single landing page widget, designed in the same way as Facebook with Footer links.

  

  Footer:

  

  The Landing page widget is controlled via the Layout Editor. Click "Edit" to edit the widget or click "x" to delete. 

  

  Landing Page Widget

  You can edit the landing page widget to change the left side logo. You can also edit the heading which is shows in the left side and edit the description which shows below the login form. This screenshot shows logo upload section with heading and description.

     

  Layout 2

  Layout 2 gives a layout with various widgets, a banner and widgets for custom text and images as well as a different layout with Blogs, and Mobile Apps links section.

  

  Landing Page Banner

  You can edit the landing page banner to change the banner and height. The default height is 650. You can also edit the heading and description with CTA button text and link that shows with the banner image. This screenshot shows banner selections with heading, description, CTA button text, and link.

       

  Landing Page Features

  The landing page features are the text and image widgets seen below the banner widget. Edit the widget to change each as you want it. For the Icon, use Font Awesome v6 icons.

     

  Landing Page Blog

  You can edit this widget and set the title for blogs.

  Landing Page Mobile Apps Section Widget

  You can add your mobile apps links to your website, edit this widget to add the heading, description and your mobile apps links for this widget. You can also choose an image to show with the mobile apps section.

     

  Header Options for Logged in Members

  Choose the header options for members that are logged in by checking or unchecking the boxes to the left of each selection.

  Header Options for Non-Logged in Members

  Choose the header options for guests by checking or unchecking the boxes to the left of each selection.

  Logo In Header 

  Choose your default logo. You'll need to have uploaded one in the File & Media manager first.

  Logo In Header (Contrast Mode)

  Choose a logo for contrast mode. In case your default logo isn't looking good in contrast mode. You can also choose the same logo you chose for the default logo.

  Widget Corner Radius

  Enter the radius of widgets on your website. The default radius value is 10px.

  Show Accessibility Options

  This allows you to choose whether to show the accessibility options or not. Please note that most areas now require websites to be handicap accessible. If not accessible, there can be hefty fines in some areas. Please check with the laws in your area before disabling this.

  Main Menus Count

  You can enter the count of main menus which you want to show before "More" dropdown menu occurs.

   

  Footer Settings

   

  You can configure your footer features via the settings here.

   

  Enable Footer Menu Links

   

  Do you want to enable the default footer menu links in the footer?

   

  

   

  If you choose Yes, then the menu items will display links which have been configured in your Menu Editor.

   

  

  Enable Social Site Links Menu

  Do you want to enable the social site menu links in the footer?

   

  

  If you choose Yes, then the menu items will display links which have been configured in your Menu Editor.

   

  

  Color Schemes

  You can choose from three color schemes or make your own. Click the "Color Schemes" tab to view the choices. Note that in order to make color changes you'll want to create a custom theme (see below).

   

  

  Choose a color by clicking it and clicking "Save Changes.

  Create a new theme by clicking "Add New Custom Theme." (Recommended if you want to change colors and other CSS or the theme layouts.)

   

  

   

  Enter the new theme name and choose which theme to clone. Save changes when done by clicking "Create." Activate the theme by clicking on it and saving changes. Don't forget to change to Development mode and then back to Production mode in order to see changes on your site.

   

  

  Manage Fonts

  You can configure the font settings for this theme on your website. You can also choose to enable Google Fonts or use web safe fonts. Also, you can change the fonts sizes. Click the "Manage Fonts" tab to configure your fonts. Be sure to save it after.

  

  Custom CSS

  Harmony theme has a special section for you to add custom CSS for items that can't be changed in the Color Schemes section. This helps to prevent any issues with upgrading and allows you easier access to change CSS for your site. See below for an example of changing CSS.

   

  

   

  Example of Changing CSS

   

  We recommend using browser tools to find your CSS, such as Inspect (right click in chrome and choose Inspect):

   

  

   

  Using the above tool, let's see how to change the hashtag CSS for the Trending Hashtag widget. Perhaps we want to make it stand out more.

   

  

   

  Using the Inspect tool, we can find the CSS. Right click on the hashtag and choose Inspect.

   

  

   

  You'll see the CSS details in the bottom of the page, in the inspect tool, on the right:

   

  

   

  Copy the code:

   

  

   

  And paste it into the input box in the Custom CSS page:

   

  

   

  We want to change the text color so we need to add the following as well as a closing curly brace:

   

  .layout_core_hashtags_cloud ul > li > a {
  color: #2817bd;
  }

  Save it and be sure to enable/disable development mode. You should see the following:

  

   

  Manage Sidebar Dashboard

   

  You can configure the sidebar dashboard menu links and categories for member home page from this page. You can also add, edit, delete, enable or disable any category or submenus anytime.

   

  

   

  Voila! 

  Tip!

  Remember to enable and disable development mode after making any changes!