No styling (CSS)

Resolved robstyrrell
(@robstyrrell)

2 years, 10 months ago
Hi,

I have a test site that I’ve created, just using the Twenty Twenty-Three theme and only your plugin, but it’s pulling through none of your styling at all?

Can you help?

Rob

https://test.choosepurpledev5.co.uk/customer-area/file/my-files/

[redacted]
- This topic was modified 2 years, 10 months ago by Steven Stern (sterndata).
The page I need help with: [log in to see the link]

Viewing 10 replies - 1 through 10 (of 10 total)

Plugin Contributor Thomas
(@tlartaud)

2 years, 10 months ago
Hi there,

Sorry that you are experiencing issues.

We’ll try to debug that in a few steps:
- Could you please, first, post a screenshot of the frontend part of your site where no styles are being displayed?
- Could you please check and save the settings again, make sure that the frontend-master skin is selected
- Could you please check in Settings > Frontend that the checkbox print CSS styles is not unchecked (important step)
- Could you please try to switch to Twenty Twelve theme, just for testing purposes, and see if the issue persists.
If the issue still persists after those checks, please:
- Browse the frontend where styles are missing, open the debugger view (F12 or CTRL + SHIFT + I), click on the “console” tab. You might probably see some red output errors, like “404 – file not found”. Copy/paste those errors there.
- Then click the “sources” tab, and make sure you actually find a file named styles.min.css in wp-content/plugins/customer-area/skins/frontend/master/assets/css
- Then click the “elements” tabs, and hit CTRL + F which should open a search box. Type “cuar-js-container”. This should actually show a div and this one should not be missing.
Do not hesitate to tell me about the results. We’ll then be able to investigate further in case you’re still experiencing issues. If you require to post screenshots including senstive data such as URLs, post on our main forums and mark your post/reply as private.

Note: Please never post credentials or URLs to your site, either on WP.org forums, or anywhere else. This is for your safety.

Regards.
Thread Starter robstyrrell
(@robstyrrell)

2 years, 10 months ago
Hi,
- Could you please, first, post a screenshot of the frontend part of your site where no styles are being displayed?
  
  Attached
- Could you please check and save the settings again, make sure that the frontend-master skin is selected
  
  Yes, it is
- Could you please check in Settings > Frontend that the checkbox print CSS styles is not unchecked (important step)
  
  This does not exist.
- Could you please try to switch to Twenty Twelve theme, just for testing purposes, and see if the issue persists.
  
  Yes, this works.
If the issue still persists after those checks, please:
- Browse the frontend where styles are missing, open the debugger view (F12 or CTRL + SHIFT + I), click on the “console” tab. You might probably see some red output errors, like “404 – file not found”. Copy/paste those errors there.
  
  Uncaught Error: Syntax error, unrecognized expression: #cuar-js-content-container>.cuar-page-footer” data-tray-height-minimum=”400″ data-tray-mobile=”#cuar-js-mobile-sidebar” data-content-substract=”#wpadminbar
  at se.error (jquery.min.js?ver=3.6.3:2:13759)
  at se.tokenize (jquery.min.js?ver=3.6.3:2:21770)
  at se.select (jquery.min.js?ver=3.6.3:2:22597)
  at Function.se (jquery.min.js?ver=3.6.3:2:7116)
  at Function. (jquery-migrate.min.js?ver=3.4.0:2:2847)
  at e. as find
  at S.fn.init.find (jquery.min.js?ver=3.6.3:2:25167)
  at S.fn.init (jquery.min.js?ver=3.6.3:2:25656)
  at e.. (jquery-migrate.min.js?ver=3.4.0:2:2387)
  at new e. (jquery-migrate.min.js?ver=3.4.0:2:1566)
- Then click the “sources” tab, and make sure you actually find a file named styles.min.css in wp-content/plugins/customer-area/skins/frontend/master/assets/css
  
  Yes, this is present.
- Then click the “elements” tabs, and hit CTRL + F which should open a search box. Type “cuar-js-container”. This should actually show a div and this one should not be missing.
  
  No, this isn’t there.
Thanks,
Rob
Plugin Contributor Thomas
(@tlartaud)

2 years, 10 months ago

Hi,

Then click the “elements” tabs, and hit CTRL + F which should open a search box. Type “cuar-js-container”

Sorry, I made a typo, check that the div cuar-js-content-container actually exists.

Could you please check in Settings > Frontend that the checkbox print CSS styles is not unchecked (important step)

This does not exist.

Sorry, I wasn’t precise enough, please make sure the following option is checked:

Settings > WP Customer Area > Frontend > General Settings > Use skin > Includes the WP Customer Area skin to provide a stylesheet for the plugin

Also which WPCA plugin version are you using, please? I’ll try that theme locally.

I am waiting for your feedback.

Regards.

Thread Starter robstyrrell
(@robstyrrell)

2 years, 10 months ago

Hi,

No, cuar-js-container doesn’t exist.

Yes, this is checked.

I’m using version 8.1.6.

Thanks,
Rob

Plugin Contributor Thomas
(@tlartaud)

2 years, 10 months ago

Hi,

No, cuar-js-container doesn’t exist.

cuar-js-container doesn’t exists, but does cuar-js-content-container exists?

Thread Starter robstyrrell
(@robstyrrell)

2 years, 10 months ago

Hi,

Yes, that exists as you can see for yourself here:
My files – My WordPress (choosepurpledev5.co.uk)

Thanks,
Rob

Plugin Contributor Thomas
(@tlartaud)

2 years, 10 months ago

Thanks, I’ll check that in the few incoming hours and let you know.

Regards.
Plugin Contributor Thomas
(@tlartaud)

2 years, 10 months ago
Hello @robstyrrell

Please open the file wp-content/plugins/customer-area/src/php/core-addons/customer-pages/customer-pages-addon.class.php, line 1130, you will find a function named wrap_content_into_container().

Please, replace the whole function by this:
```
/**
 * Wrap the WP Customer Area generated content into a container, always
 *
 * @param string $content
 *
 * @return string
 */
public function wrap_content_into_container($content)
{
    $atts = apply_filters('cuar/core/page/sidebar-attributes', [
	    'data-tray-height-base' => 'window',
	    'data-tray-height-substract' => '#wpadminbar,#header,#footer,#cuar-js-content-container>.cuar-toolbar,#cuar-js-content-container>.cuar-menu-container,#cuar-js-content-container>.cuar-page-header,#cuar-js-content-container>.cuar-page-footer',
	    'data-tray-height-minimum' => 400,
	    'data-tray-mobile' => '#cuar-js-mobile-sidebar',
	    'data-content-substract' => '#wpadminbar,#header,#footer',
	    'data-bypass-pages-without-sidebars' => true,
    ]);

    $resets = '';
    $disable_CSS_resets = apply_filters('cuar/private-content/view/disable-css-resets', false);
    if ($disable_CSS_resets === false)
    {
	    $resets = ' cuar-css-resets';
    }

    return '<div id="cuar-js-content-container" class="cuar-content-container cuar-css-wrapper clearfix'
           . $resets . '" data-tray-height-base="' . esc_attr($atts['data-tray-height-base']) . '"'
           . 'data-tray-height-substract="' . esc_attr($atts['data-tray-height-substract']) . '"'
           . 'data-tray-height-minimum="' . esc_attr($atts['data-tray-height-minimum']) . '"'
           . 'data-tray-mobile="' . esc_attr($atts['data-tray-mobile']) . '"'
           . 'data-content-substract="' . esc_attr($atts['data-content-substract']) . '"'
           . 'data-bypass-pages-without-sidebars="' . esc_attr($atts['data-bypass-pages-without-sidebars']) . '">'
           . $content . '</div>';
}
```
This will solve your issue and this fix will be added to next release.

Thank you for the report.

Best regards.
- This reply was modified 2 years, 10 months ago by Thomas.
- This reply was modified 2 years, 10 months ago by Thomas.
Thread Starter robstyrrell
(@robstyrrell)

2 years, 10 months ago

Hi,

Thanks for coming back to me.

That’s now sorted it.

Thanks again,
Rob

Thread Starter robstyrrell
(@robstyrrell)

2 years, 10 months ago

Hi,

As you were probably aware, I was working on this in a test site.

I’ve now added the plugin to the site that it’s actually going to be used on.

The layout is now fine, however, the menu isn’t being outputted. I’ve even tried using the shortcode [customer-area-dashboard /], but this doesn’t work either.

The theme is Twenty Twelve.

Can you help?

Thanks,
Rob

Viewing 10 replies - 1 through 10 (of 10 total)

The topic ‘No styling (CSS)’ is closed to new replies.