Citilights Customizer

Our theme customizer works as the original WordPress customizer feature but be much more versatile. All our theme options can be changed in our Customizer on the left side and live previewed instantly in previewed site on right side. With its intuitive interface, you can customize your website as you wish at your fingertips without writing a line of code.

To start using Customizer, in Admin Panel, navigate to Customizer, you will be redirected to a live preview screen where you can change options on left side and preview your site on your right side promptly. All your change will not be committed and viewed on your site until you click Save & Publish on top right of Customizer bar. You are also able to Export your settings in Customizer and Import to apply for other sites.

Let’s take a quick overview throughout all options in our Customizer. When using Customizer, you also will get our short guide for each option right in Customizer bar.

Site Enhancement

  • Custom Favicon: A favicon is a simple square image viewable in browsers for users to identify your website among many tabs. Ideally, it should be a 32×32 pixels or a 16×16 pixels image. Most modern browsers can display a favicon in PNG format but older versions of Internet Explorer may not. To make sure your favicon be shown nicely, it is recommended to be in .ico format. Add your favicon in our customizer simply by clicking “Open Library” button in “Custom Favicon“, selecting your existing image or uploading new image.
  • Smooth Scrolling: Enable/disable the smooth scrolling feature.

Design & Layout

  • Site Layout: Choose Full-width or Boxed layout for your site. With Boxed layout, you will have additional below options for background setting:
  • Color: You can set the color for links and various elements on your site. You can choose color for links, links hover and secondary color by select to color on color table or enter color code on box.

Typography

  • Custom Font: CitiLights integrated all Google Fonts. Enable Custom Font to customize font, font size and other settings for heading and body text.
  • Custom Font Color: Enable Custom Font Color to customize font color of headings and body

Header

Customize your settings for your Header including Navigation Bar (Logo and Navigation) and an optional Top Bar.

  • Navigation Bar: This tab adjust settings for Navigation Bar. You also can customize some settings for the Toggle Button on Mobile in this section.

This tab has many options with the consider bellowing:

    • NavBar Position: This option allows selecting position which header top will be displayed. That includes Static & Fixed top. Besides, there are 2 checkbox that help to shrink NavBar when scroll or Display when Scroll Up which will help you choose style of NavBar when displayed on frontend.
    • Show Search Icon: If you turn On this option, you will have search button on your main menu. You can only search properties by click to checkbox Only Search Properties under Show Search Icon button.
    • Phone Number: You can enter the phone number on this box. The number will be displayed on the right side of header.
    • Use Custom NavBar Font and color:  If On, you will select font family, font size, link color and link hover color for Main Menu.
    • Custom Dropdown Style:  You can configure background color, font size, link color and link hover color for menu when you scroll up by some options of Dropdown Background Color.
  • Logo: Upload your logo image and retina one (a larger image, with double the amount of pixels that your image will be displayed at). Enter your image height you want to display on navigation bar and we will do the calculation part for you to make it look great on all screen size.
  • NavBar Alignment: Adjust link alignment, height of navigation bar and size of mobile navigation button.
  • Top Bar: Enable/disable top bar. Top bar lays on top of your site, above Navigation Bar. It is suitable for placing contact information and social media link. You can choose to display social icons, set it as a top menu or custom content by checking each option. By checking Custom Content option, you are able to add content for top bar. Choose layout to display social icon and content of top bar.

Footer

This section contains all settings for Footer in your site.

  • Footer Columns: Set the number of column shown in footer.
  • Footer Background Image: Select a photo to be displayed on footer background. You can upload your footer background by click “Select Image” button.
  • Upload Footer Logo: select a photo to be displayed at the right bottom corner of the footer.
  • Bottom Bar Content: Add content shown in bottom bar.

Widgets

You can create widgets with various type of contents to put in the footer. To create a widget, click Add a Widget.

Blog

  • Blog Page: Choose page layout for your blog page. It can be full-width, with right sidebar or left sidebar. If you choose layout with sidebar, select blog sidebar for your blog.
  • Archive Page: Setup layout and style for your Archive Page. You can choose same layout and style as blog page by checking the box beside each option or uncheck the box to select other layouts and styles.
  • Single Post: Choose Post layout same as blog layout by checking the box beside the option or uncheck to choose another layout. You also can choose to show or hide Post Meta, Tags and Author’s Bio. In addition, by enabling Social Sharing, you enable visitors to share your post. Enter Social Sharing Title and decide which social media your post can be shared.

Agent & Property

  • Agent Layout: Configure the layout of all the pages relating to Agents, including index page, archive page and single agent page. In Agent layout, choose whether sidebar is enabled. In Agent Sidebar, select a sidebar among those available. Main Sidebar is default, although you can create custom sidebar in Appearance>Sidebar Generator. You can find details about this plugin and instruction at https://wordpress.org/plugins/smk-sidebar-generator/
  • Property Listing: This section has settings for the Property listing pages specifically, including Index and Archive Page.
  • Listing Page Layout: Property Listing layout supports 3 layouts which will be displayed on page. Including Full-Width, With Right Sidebar and With Left Sidebar. If you choose With Right Sidebar you need to choose Listing Page Sidebar for your layout.
  • Listing Style: You can choose 2 styles hat is Grid and List for Listing Properties.

Grid

grid

List

list

  • Enable Properties Sort: If checked on this checkbox, properties are sorted by Date, Price, Name, Area, Bath and Bed.
  • Show Map on Header: If you want to have map on header of properties listing you can turn On this option
  • Show Property Search: Similarly Map, if you turn On this option, search property will be displayed on Listing Properties page. In addition, you can select layout for Search, including Horizontal & Vertical layout.
  • Enable Features/Amenities Search: If checked this checkbox, you can some options which supports for search button.
  • Property Detail: This section has setting for Property detail pages(Single pages)
  • Property Page Layout: Same as Listing Layout, property single pages is inherited Listing Layout.
  • Show Map on Header: If On this option, you will have map which will be displayed on single property page.
  • Show Property Search: If On, search property will be displayed on single property page. Beside, you can choose search layout: Horizontal & Vertical for search form.
  • Enable Social Sharing: Turn on this option and tick on social checkbox, you will have social icon on property detail page.
  • dsIDXpress Plugin: This section has settings dedicated dsIDXpress Plugin. Please note that you will have to use “dsIDX Template” on dsIDX general option for it to work.
  • IDX Layout: You can choose 3 layouts for IDX that is Full- Width, With Right Sidebar and With Left Sidebar. If you choose With Right Sidebar, please choose IDX Sidebar for page.
  • Show Google map on IDX Page: If checked this checkbox the map will show if you use IDX Listing widget on the same page.

Social Media

Input URLs of your social media profile. Inputting URL here means that corresponding social icon will be displayed when Social Icon is enabled on Top Bar and/or on Bottom Bar.

Custom Code

In this section you can add custom JavaScript and CSS to your site. Your Google analytics tracking code should be added to Custom JavaScript field.

Import/Export Settings

All themes from NooTheme share the same theme setting structure so you can export then import settings from one theme to another conveniently without any problem.

  • Import Settings: Click Upload button then choose a JSON file (.json) from your computer to import settings to this theme. All the settings will be loaded for preview here and will not be saved until you click button “Save and Publish“.
  • Export Settings: Simply click Download button to export all your settings to a JSON file (.json). You then can use that file to restore theme settings to any theme of NooTheme.

Login