Theme colors introduction

The colors are part of a website’s identity and their customization is important. Our color picker supports Hex codes (like #FA4FBCA), and RGBA (like rgba(213,152,65,0.4)) and it has sliders for transparency and color intensity. The main difference between them is that RGBA has a transparency value, while Hex Codes do not.

There are two different ways to use theme colors in Newspaper:

  • Change Colors Using The theme panel
  • Change Colors Using the TagDiv Composer page Builder.


Theme panel colors

The Theme Panel option is split into sections, and each section has multiple elements with a color picker, this gives you the flexibility to customize each section of your website the way you always wanted

In Newspaper > Theme Panel > Theme Color you have 4 areas to manage colors for your website:

  • General theme colors – Set or change colors for Theme accent (hover, links, buttons, Ajax load animation color) and Background.
  • Header section – This area allows you to set or change colors for Top Menu (Background, Top menu text, Top menu text hover, Social icons, Social icons hover color), Main Menu (Menu background, Active and hover, Menu text color), Sub-menu, Mega menu, Live search, mobile menu, Header background colors as well as the sign-in modal background colors.
  • Footer section – In this area, you can customize the colors for footer and sub-footer (both background and text color)
  • Sub-footer – This section allows you to change the sub-footer background color, text color, and footer menu hover colors.
  • Content area – This section allows you to add or change color for posts (title, blocks, author name, text, blockquote, and H1, H2, H3, H4, H5, H6 Color) and pages (title, text and H1, H2, H3, H4, H5, H6 Color).

Note: When you set a color as the background, your website will automatically change to the boxed version.

tagDiv Composer Page Builder Colors:

The Page Builder offers a Style tab for every element you add to your pages or Cloud Library templates.

However different blocks show different color settings for each element in particular.