custom css

Blocks Design

    Design Options

    When you add a new content block as described in How to Use Content Blocks?, a modal shows up with some tabs. One of them is Design options. Follow to know how to customize content blocks design.

    Content blocks design

    1- Show on Desktop: Show/hide this block on desktop computers.

    2- Show on Tablet Portrait: Show/hide this block on Tablets Portrait.

    3- Show on Phone: Show/hide this block on phones.

    4- Custom CSS Class: If you want to define custom CSS rules for this block, you can assign a class to it then assign rules to this class in Publisher → Theme Options → Custom CSS. You can add as many as classes you want and separate them by spaces. Read more about Custom CSS.

    5- Custom ID: If you want to define custom CSS rules for this block, you can assign an ID to it then assign rules to this ID in Publisher → Theme Options → Custom CSS. You can assign just one ID.

    6- Override Listing Settings?: If you toggle this to on, you see block global settings previously described in Blocks Settings. Now in Blocks Design you can override global options for this specific block.

    7- CSS box: Here is a very user friendly menu for customizing CSS options of this block. You can assign different CSS properties here; margin, border-width, padding, background, etc.

    NOTE: When you select a border color, do not forget to select border width in left hand-side scheme.

    Custom CSS & Class

      What is CSS?

      CSS is responsible for webpage layout. Without CSS, a webpage looks like just a bunch of disordered HTML elements.

      CSS:

      • stands for Cascading Style Sheets
      • describes how HTML elements are to be displayed on screen, paper, or in other media
      • saves a lot of work. It can control the layout of multiple web pages all at once
      • CSS files store external stylesheets

      How Can I Add Custom CSS Codes or Classes?

      Publisher gives you the ability to assign CSS codes for: whole website, Responsive view, Admin area. Also you can add new classes to <body> tag. For this purpose go to Publisher → Custom CSS.

      custom CSS setting in Publisher

      1- Custom CSS Code: Paste your CSS code, do not include any tags or HTML in this field. Any custom CSS entered here, overrides the theme CSS. In some cases, the !important tag may be needed.

      2- Custom Body Class: These classes will be added to body. Separate classes with space. Now you can assign CSS properties to these classes in the above field.

      Custom CSS in Publisher - image (2)

      3- Desktop: These changes only apply to viewports bigger than 1200px.

      4- Tablet Landscape: These changes only apply to viewports between 1019px and 1199px.

      5- Tablet Portrait: These changes only apply to viewports between 768px and 1018px.

      6- Phones: These changes only apply to viewports smaller than 768px.

      Custom CSS change in Publisher - image (3)

      7- Categories Custom Body Class: These classes add to body of all categories. Separate classes with space.

      8- Tags Custom Body Class: These classes add to body of all tags. Separate classes with space.

      9- Authors Custom Body Class: These classes add to body of all authors. Separate classes with space.

      10- Posts Custom Body Class: These classes add to body of all posts. Separate classes with space.

      11- Pages Custom Body Class: These classes add to body of all page custom posts. Separate classes with space.

      Custom CSS change in Publisher - image (4)

      12- Admin Pages CSS Code: You can change admin pages style with adding CSS code into this field (Admin means WordPress admin area).