Notifications
The X Clone Theme has special settings and configurations allowing you more control over the design of your site.
When working with X 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.
X 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.
Some settings below are only for specific landing page designs.
You'll need to be logged into your Admin Panel.
Navigate to "X Clone Theme."
You have a choice for your guest landing page design and layout. To enable, click the bubble to the left of the choice and save changes when done.
The following screenshot is for the default style.
Landing Page
Landing page gives a layout with a single landing page widget, designed in the same way as X with Footer links.
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 in dark and light modes. You can also edit the title and subtitles which is showing in the right side. This screenshot shows logo upload section with title and subtitle.
Set Member Home Page
You have a choice for your Member Home page design and layout. To choose one, click the bubble to the left of the choice and save changes when done.
Set Member Profile Page
You have a choice for your Member Profile page design and layout. To choose one, click the bubble to the left of the choice and save changes when done.
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.
Show Footer in Vertical Sidebar
This allows you to choose whether to show the Footer menus in the vertical sidebar or not.
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.
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.
X Clone 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.
.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 for member home page and member profile page from this page. You can also add, edit, delete, enable or disable any menu anytime.
Remember to enable and disable development mode after making any changes!