Astra 文档

New Color Controls in Astra theme & Astra Pro Addon

We have been working on quite a few things lately.

To begin with we have moved all our controls in our Customizer from PHP to ReactJS controls. Which means we have new and better and optimized performance.

Further for all Color, Responsive Color, Background & Responsive Background control now uses Gutenberg』s control in Customizer.

Let』s see how it would look –

Previous Color Picker Controls

New Color Picker Controls

Next, for the Background control in the Customizer, we have provided the Gradient color option –

New Gradient Control Option –

Astra Pro Shortcodes Reference

Following are the list of all the Shortcodes which can be used for the respective Astra Pro features or modules –

Breadcrumbs Shortcode

Here』s a link to the article.

EDD Mini-Cart Shortcode

Here』s a link to the article.

Search Box Shortcode

Here』s a link to the article.

Lifter LMS Profile Shortcode

Here』s a link to the article.

LearnDash Profile Shortcode

Here』s a link to the article.

WooCommerce Mini-Cart Shortcode

Here』s a link to the article.

How to Add Gutenberg Design Compatibility?

With Astra theme v2.6.0 we are providing enhanced Gutenberg Design Compatibility. [ Read more here in our post ]

What does this mean?

In this theme update we are adding design specific compatibility with Gutenberg plugins.

We received many requests from our users to provide enhanced or full compatibility in terms of Design.

So with this update, we have added some default Spacings & CSS Styles to make any Gutenberg site more elegant.

For New Users: Those users who are downloading Astra theme on your environment from v2.6.0 and above. No need to make any changes, these changes will be auto applied to your core Gutenberg Blocks.

For Existing users: Users who are using Astra theme from previous version 2.6.0 and update to version 2.6.0 and above. To get this compatibility you will need to add the following filter –

add_filter( 'astra_gutenberg_core_blocks_design_compatibility', '__return_true' );

Note

Add the above code into the child theme』s functions.php file.

Introducing Global Color Palette

One of the most awaited features which will provide a better control across all the Color settings in the Customizer settings of the Astra theme.

Let』s see what are the options quickly and on how to make better use of it –

Palette

Under the customizer settings of the Astra theme – Global section > Colors > Base Colors > Palette you will notice the Palette section that will insert the color options for the default Text Color, Theme Color, Link Color, Link Hover Color, Heading Color (H1 – H6)

[Palette screenshot settings]

Global Color Settings

Under each of the Color options in the Customizer you will now notice an Globe Icon, this will help fetch the Palette colors with just a click.

Also, modifying or finding the Palette options can be achieved by clicking on the wrench icon that will take you to the Palette option under the Global settings of Base Colors.

[Screencast of the settings]

Add New Color / Presets

The Add New Color option will insert Custom Color options and will also have the option to edit the color name.

[Settings option]

Presets

This option will help select from the pre-defined Presets and also provides the option to Import other pre-defined presets.

[Location of the Presets option]

Select from Pre-defined Presets

Presets allow you to switch to different default Presets available with just a click of a button. You can rename the color options once selected.

[Screenshot of Select a Palette section]

How to Import to add More Color Options

If you have saved colors they can be imported with just a simple copy and paste of the Color』s values like this –

["#733492","#AC238C","#24B460","#C0C2BA","#CBCB38"]

You can replace the above color options and paste the same under the Import section of the Palette and click on Import button to find your choice of colors imported.

Edit the Label of the Colors

Editing the label of the Palette colors is very simple as you just need to click on the label and update it as per your requirement.

[Screencast of how to edit

Delete the Unwanted Color Options

Apart from the default Color options as mentioned at the start you will find the Delete option enabled to remove them with just a click.

[Screencast of the settings]

Filter to Remove Starter Templates Button on Post Types

If you are looking to remove the Starter Templates button visible on the top of the Pages/Posts of your website.

You can insert the following filter in your child theme』s functions.php file (How?) –

You can insert the following filter –

1) To disable the Gutenberg Templates button from all post types.

add_filter( 'ast_block_templates_disable', '__return_true' );

2) To disable the Gutenberg Templates button for Page post type.

add_filter( 'ast_block_templates_disable', function( $default = false ) {
if( isset( $_REQUEST['post_type'] ) && 'page' === $_REQUEST['post_type'] ) {
return true;
} return $default;
} );

Note:

Please add the required code to the functions.php of your child theme.Refer to this doc on How to Add Custom Code to the Child theme?

Can』t See Newly Added Templates in Starter Templates Library?

Starter Templates library provides extensive range of ready-made templates. We keep adding new templates to this library.

In case while importing Starter Templates on your website –

You are not able to see newly added templates in the libraryYou can see new templates on one website and not on another

here are steps to follow –

In dashboard, under Appearance > Starter Templates, you will observe a sync option in library window.

Click on this option to refresh the library and fetch newly added templates.

Once the sync is complete you will see all newly added templates in list.

How to Remove the White Bars in the Safari Browser on iPhone X and Higher

The new iPhone X features a beautiful edge-to-edge display. But you might observe a small gap at the top of the browser.

When viewing the website in an upright (portrait) position, you will not notice this gap. But if you rotate your screen to horizontal (landscape) position mode you』ll notice white space on both sides of the screen.

In order to to avoid any such obstruction of the content, the iOS system restricts website display within a 「safe area」 on the screen.

On the websites, this results in letter-boxing on the left and the right.

You can read more about 「Positioning Content Relative to the Safe Area」 at official Apple website.

To avoid white bars around the browser you would need to extend the Safe Area. To do so you would need to add a custom code.

Simply adding 「viewport-fit=cover」 to your viewport meta tag will expand your site to fill the entire screen and not just the safe area.

Here is a custom code that you will need to add to your website –

Your website would look something like this as a result:

As you can see, the white spaces on left and the right side of the screen were removed.

How To Add Custom Code To Your Website

There are two ways to add this code to your website –

1. With Custom Layouts (Astra Pro)

Custom Layouts is an Astra Pro module. This means that for this method you would need to have your Astra Pro addon installed and activated. Follow these  steps to add the code with Custom Layouts: 

Activate the Custom Layouts module at Appearance > Astra Options > Astra Pro modules.

Navigate to Appearance > Astra Options > Custom Layouts and add a new Custom Layout.

On the next step, click 「Enable Code Editor」 to activate it.

Insert the code in the Code Editor.

Scroll down to the Settings and set the following options:

Layout: HooksAction: wp_headDisplay On: Entire Website

Publish the layout.

2. With Astra Hooks Plugin

If you』re using the only Astra Theme without an Astra Pro addon, you can add this code using the Astra Hooks plugin. Just go to Dashboard > Plugins > Add New, find Astra Hooks, install and activate it.

Once the plugin is activated follow these steps:

Open your Customizer (Dashboard > Appearance > Customize)

In the Customizer, go to Hooks > Header

Add the code to the wp_head section and Publish

That』s all!

Your website will now look great on iPhone edge-to-edge screens too.

Sorry, You Are Not Allowed To Access This Page

While trying to activate Astra Pro Addon, you may get a message 「Sorry, you are not allowed to access this page」.

Why Is This Happening?

Seeing this message means that you』re being blocked due to some settings. Some of the reasons that can cause this are:

Your Astra theme is not activated or updated.There is some issue with your Astra (parent) or Astra Child theme.Renaming or modifying Astra theme or Astra Pro plugin folders or files

How To Solve It?

If this happens, please try these steps:

Please make sure that you have the Astra theme activated and updated to the latest version.

Suppose you tried activating the Astra Pro using the activation link on the Plugins page. Try navigating to Dashboard > Appearance > Astra Options and try activating Astra Pro from here.

Deactivate the Astra theme, delete it, reinstall and reactivate. Try activating the Astra Pro.

If you』re using a child Theme, please try switching to Astra (parent) theme and try activating the Astra Pro.

If this doesn』t help, try enabling the debug log to see if there are any errors related to Astra Pro.

You can find out more about this issue and how to solve this in this article, or you can contact our support team.

Astra』s Default Font Icons Replaced With SVG

Astra uses beautiful font icons internally in header, footer and other sections. You will see font icons like arrows, hamburger, search, account, cart and so on.

These font icons used to load from astra.woff file.

With Astra version 3.3, these font icons are replaced with SVG. SVG icons are lighter and look sharp on all devices.

Replacing Astra font icons with SVG icons can uplift page loading speed by 29ms and reduced about 12.5% part of the page load.

Users who are starting using Astra after version 3.3, can directly get icons in SVG format.

Users who are updating Astra from previous versions to v3.3, would need to use the following filter in order to replace font icons with SVG.

Here is a code you can paste into child theme』s functions.php file.

add_filter( 'astra_is_svg_icons', '__return_true' );

How do I check my Support Ticket History?

We have recently implemented a new ticketing system that allows to check your Support Ticket history.

Step to Check the Support Ticket History —

If you are registered user on our Store, you can view the tickets history under My Tickets page.

Here』s a screenshot of how the page would look like –

To track or view the tickets please confirm, if the ticket was opened after 21st April 2021.

Once a ticket is opened you will be able to track the status of the ticket and even respond to it from the same window itself.