Docs

[GeekSpeak411]

Hi X Team,

Great work I’m very much enjoying your theme and am looking forward to using it for many client projects going forward!

I’m having an issue with the customizer, X Theme’s Typography panel is very limiting font-wise and I have installed the Easy Google Fonts (EGF) plugin to diversify my header fonts by header level. By default, the priority value of the EGF panel is larger than the X Theme panel so it made sense that the X Theme options override the EGF options when it comes to compiling CSS however I have since modified the EGF panel priority in the customizer to 7 which places it directly above the X Theme panel and still the X Theme CSS settings are taking priority.

What do I need to modify to have the EGF CSS process after X Theme’s?

The site in question can be found at http://www.intuitiontech.net/other/wp-x and the settings being overwritten can be seen in the inspector on the chunk of text under “A Destination”

Thank you! Chris

[Paul R]

Hi Chris,

Thanks for writing in!

You can try adding !important to your css code.

eg.

h2,.h2 {
    font-family: "Yantramanav",sans-serif !important;
}

Hope that helps.

[GeekSpeak411]

Thanks, can I programatically apply !important all settings coming from that panel?

Manual CSS changes to override existing GUI options are pretty last-resort for this project. The solution I’m looking for is more a way to disable the X Theme Typography panel in the customizer so these changes can be made quickly from the gui as intended.

This base will be deployed to all of my client site redesigns so these settings will be changed often in the future and I would like to avoid having to rediscover the broken functionality + manual work-around so that the process is seamless and support time is minimized.

I’ve been looking through customizer documentation for the better part of a day and am hoping someone on staff can give me an idea of where I should be looking to make a code edit to either disable the X Theme Typography panel entirely, or change its CSS processing order priority. I’m coming from Drupal development so I’m still getting familiar with WordPress. If that’s outside the scope of this support I suppose I’ll just keep hunting!

[Paul R]

Hi,

Regretfully, this particular customization request is outside the scope of our support as this is not related to an issue with the theme and instead has to do with your customization of it. As such, you will need to investigate this particular issue on your own or seek help from a developer should you not feel comfortable making these changes yourself. If you have any further questions about the theme, we are more than happy to provide you with assistance on these inquiries.

Thank you for your understanding.

[GeekSpeak411]

I understand, here’s my solution should anyone else be looking for greater flexibility with different heading fonts.

Easy Google Fonts is a free typography plugin with 200k active installs. It can be easily modified to work with X Theme.

The customizer accepts priorities for panels and the Easy Google Fonts plugin needs to be modified to have a higher priority so it appears with the X Theme panel, and the CSS needs to be flagged !important.

Solution:

1.) On the site filesystem open the following file:

wp-content/plugins/easy-google-fonts/includes/class-egf-register-options.php

2.) Find the following section:

$panels = array(

3.) Modify the ‘Title’ to add EGF and set the ‘Priority’ value to 7 so the end section should appear as follows:
$panels = array(
‘tt_font_typography_panel’ => array(
‘name’ => ‘tt_font_typography_panel’,
‘title’ => __( ‘EGF Typography’, ‘easy-google-fonts’ ),
‘priority’ => 7,
‘capability’ => ‘edit_theme_options’,
‘description’ => __( ‘Your theme has typography support. You can create custom font controls on the google fonts screen in the settings section.’, ‘easy-google-fonts’ ),
),
);

4.) Save the file and refresh the customizer, the Easy Google Fonts Typeography panel should now appear just above the X Theme panel.

Note: Lower priority numbers are given higher positions.

5.) On the site filesystem open the following file:

wp-content/plugins/easy-google-fonts/includes/class-egf-frontend.php

6.) Find the following section:

public function generate_css( $option, $force_styles = false ) {

7.) Modify the $importance line to have ‘!important’ on both sides of the colon so the section appears as follows:

public function generate_css( $option, $force_styles = false ) {
$output = ”;
$importance = $force_styles ? ‘!important’ : ‘!important’;
$properties = $this->get_css_properties();

8.) Find the following section:

public function generate_customizer_css( $option, $selector, $id = ”, $force_styles = false ) {

9.) Again modify the $importance line to have ‘!important’ on both sides of the colon so the section appears as follows:

public function generate_customizer_css( $option, $selector, $id = ”, $force_styles = false ) {
$output = ”;
$importance = $force_styles ? ‘!important’ : ‘!important’;
$properties = $this->get_css_properties();

10.) Save the file, the EGF Typography panel settings will now take precedence.

[Joao]

Hi There,

Thanks a lot for sharing your solution with the community we really appreacite it.

Pleas reach us if you ever need help with anything.

All the best,

Joao

[Author]

Posts