Appearance: header, footer, home page, themes and fonts

How the public site looks is set under Admin → Appearance. Changes show at once.

Header & menus

Admin → Appearance → Header & menus has two cards.

Logo & icons: the Logo (PNG or SVG, about 300×80), the Logo for dark backgrounds (dark mode and the footer), the Site icon (favicon) and the App icon (512×512, for phones that install the site as an app). Switches: Show the site name beside the logo, Header stays at the top while scrolling, Search button, বাংলা / English switch and Light / dark switch. Press Save header.

Menus: two menus, chosen by the tabs Main menu (header) and Footer bottom bar.

• Add menu item asks for both labels, the Link, Under (dropdown), an Icon, Opens in, a CSS class and Shown.
• Start typing in Link and the site suggests its own pages, courses and tools; or paste any address.
• Choose a top item under Under (dropdown) to make a dropdown. Drag items to reorder; the bin deletes an item with everything under it.
• The class menu-cta shows an item as a gold button, like Donate.

Footer

Admin → Appearance → Footer.

• Layout: how many widget columns (1 to 4), the Footer background and the Footer text colour (empty: the theme's colours).
• Widgets: Widget 1 to Widget 4, one per column. Add widget offers about text with logo, a list of links, a menu, text / HTML, today's prayer times, latest blog posts, contact details, social icons and an app / subscribe box. A list of links has one link per line: নামাজের সময় | Prayer times | /prayer-times. Widgets save on their own.
• Copyright: one line in each language. {year} becomes this year and {site} the site name. The Designed & Developed by line comes from the licence and is always shown.
• Social links: as many as you like. Type a name (Facebook, ইউটিউব, WhatsApp …) or paste the link, and the logo and colour appear by themselves. The sliders button sets a colour or Upload icon; the eye hides a link. Icon style: Brand circles, Brand squares, Name badges or Plain.

Save footer saves the columns, colours, copyright and social links together.

Home page

Admin → Appearance → Home page. The home page is a stack of sections. Drag them into order, Switch off one for a while, copy one, or delete it. Add section asks for the Type, a Title and Subtitle in both languages, the settings of that type, and Shown.

The types are: Hero banner with Quran search (search box, ayah of the day, a button, a background picture), Prayer times, sunrise/sunset, sehri/iftar, Continue reading + ayah of the day, Surah cards (the surah numbers, such as 1, 18, 36, 67), Juz (para) grid, Reciters / audio, Learning courses, Islamic tools grid, Latest blog posts (how many, which category), Donation appeal, Counters, Custom HTML / text, Call to action banner and Questions and answers.

Plugins add their own types while they are on: Names of Allah (Asma-ul-Husna), Du‘a of the day (Du‘a Collection), Hadith of the day (Hadith) and Islamic days, counting down (Islamic Days). Such a section shows nothing while its plugin is off.

Themes

Admin → Appearance → Themes shows each theme as a card, with the filters All themes, Free and Premium. Four come with the script, each with a light and a dark mode:

• Noor (Default): deep emerald and gold. Every other theme falls back on it.
• Rawdah: fresh teal and warm sand, rounded cards, a soft glass header.
• Layl: a night sky of deep indigo with golden stars and a crescent.
• Madinah (premium): ivory pages, navy and gold, framed ayahs. See The Madinah theme.

On each card:

• Activate makes it the site's theme.
• Preview shows the public site in that theme to you alone. Stop the preview on the Themes page ends it.
• Customise opens the theme's own choices: Main colour, Second colour, an accent colour, Corner roundness (px), Show the top bar (dates, next prayer), Show the app-style bottom bar on phones, and depending on the theme Home banner style, Round (pill) buttons or Stars and crescent in the banners.
• The bin removes a theme that is not in use. Noor always stays.

A premium theme shows Locked until your licence includes it: Unlock opens the License Center, Add a key opens Admin → License. If the licence stops including it, the site falls back to Noor until it does again.

Install a theme from a zip takes a zip holding one folder with theme.json directly inside it; tick Replace it if already installed (update) to update one. Whatever a theme leaves out comes from Noor. Keep small changes of your own in Settings → Advanced → Custom CSS: an update replaces the files of the themes that ship with the script.

Fonts

Admin → Appearance → Fonts. Each font is a card written in its own face; choose one in each group and press Save fonts.

• Bengali text: 14 fonts, such as Hind Siliguri (the default), Noto Sans Bengali, SolaimanLipi and Kalpurush.
• Numbers (০ ১ ২ ৩ …): some fonts draw ১, ২ and ৯ very alike. Pick a font for the numbers only, or Same as the text font.
• Bengali headings: a font for titles, or Same as the text font.
• English text: 11 fonts, Plus Jakarta Sans by default.
• Quran (Arabic): six fonts, Amiri Quran by default. It is the first font the Quran reader shows; readers can pick another.
• Size & admin panel: Bengali text size from 90% to 130% (105–110% often reads best), and Use these fonts in the admin panel too.

Upload a font takes a .woff2 (best), .woff, .ttf or .otf file up to 15 MB, with an optional Bold file. Give it a Font name, choose Used for (Bengali, English or Arabic), and it appears in its group. Remove deletes it; whatever used it goes back to the default.