AJAX problem is it poss to export all customiser styles into one file?

  • Hi Tom,
    I’m working on an AJAX page loaded Generatepress site am having problems with CSS not being applied to certain pages. Having searched for what seems an age for an answer to this I have a theory it’s because the inline styles generated by the customiser are specific to each page and therefore the styles loaded for the initial landing page are those then applied to all others subsequently loaded by AJAX and not the ones generated if the page is loaded directly by URL or page refresh. As I’ll be using a constant audio player in the header I can’t use page refreshes.

    I was therefore thinking if there was a way to export all inline styles created in customiser into 1 stylesheet I could then load that into the footer via the AJAX complete function?
    Thanks in advance for any advice.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Theme Author Tom

    (@edge22)

    Hi there,

    Do you mean the inline CSS generated by GeneratePress? If so, that CSS isn’t page-specific, it’s site-wide.

    What CSS are you having trouble with on specific pages?

    Let me know ??

    Thread Starter deeve

    (@deeve)

    Hi Tom, many thanks for the reply. I’d been trying to get the Zajax plugin to work to load all pages via AJAX and CSS rules for whatever the landing page seemed to be applied to all subsequent loaded page data. The blog page was most obvious in dropped styles. I thought I’d checked before posting this question so thought to double check; did a quick comparison between the 2 page’s generated inline styles when loaded directly via URL and the home page had this extra:

    .generate-sections-inside-container {padding-left:0px;padding-right:0px;}#generate-section-1 .generate-sections-inside-container{padding-top:0px;padding-bottom:0px;}@media (max-width:768px) {.generate-sections-inside-container {padding-left: 0px;padding-right: 0px;}}#generate-section-2 .generate-sections-inside-container{padding-top:40px;padding-bottom:40px;}@media (max-width:768px) {.generate-sections-inside-container {padding-left: 0px;padding-right: 0px;}}#studio.generate-sections-container{background-color:#111111;}#studio .generate-sections-inside-container{padding-top:0px;padding-bottom:0px;color:#ffffff;}@media (max-width:768px) {.generate-sections-inside-container {padding-left: 0px;padding-right: 0px;}}#generate-section-4 .generate-sections-inside-container{padding-top:0px;padding-bottom:0px;}@media (max-width:768px) {.generate-sections-inside-container {padding-left: 0px;padding-right: 0px;}}#focus.generate-sections-container{background-color:#111111;}#focus .generate-sections-inside-container{padding-top:0px;padding-bottom:0px;color:#ffffff;}@media (max-width:768px) {.generate-sections-inside-container {padding-left: 0px;padding-right: 0px;}}#featuredmixes .generate-sections-inside-container{padding-top:0px;padding-bottom:0px;}@media (max-width:768px) {.generate-sections-inside-container {padding-left: 0px;padding-right: 0px;}}

    The blog page does not contain the above but has this in addition to the homepage styles:

    .blog footer.entry-meta, .archive footer.entry-meta {display:none;}#nav-below {display:none;}

    I had tried putting the blog page’s inline CSS into an external stylesheet and imported that upon AJAX complete but didn’t change anything.

    I then thought to try a different AJAX page loader so tried AJAXify (AWS) and that loaded all CSS correctly but now have probs with some missing JS scripts.

    Is it not right that my customiser inline styles are being generated differently for each page?

    Thanks

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘AJAX problem is it poss to export all customiser styles into one file?’ is closed to new replies.