Home>Support>Style instructions do not work when logged out

Style instructions do not work when logged out

By horhau, 9 years ago. Last reply by Support Assistants, 9 years ago.
Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].

I had a similar problem like the thread Custom inline CSS stripped for not logged-in users? and could reproduce the cause for my problem.

Inside a text editor field I put a style instruction for a background image.
When being logged in everything was fine. Being logged out the background image wouldn’t show.

I disabled all plugins but the Page Builder Plugin and then it worked!
By enabling the plugins one after another I found the reason for the error.
It’s the SiteOrigin Widgets Bundle!

Unfortunately the Page Builder does not work for editing without the Widgets Bundle.
However the created pages are shown properly, even if the Widgets Bundle is disabled.

For reproducing the error and to find a solution here are the versions I am using:
– WordPress 4.4
– SiteOrigin Page Builder 2.2.2
– SiteOrigin Widgets Bundle 1.5.4

The CSS instruction I use in a text editor widget is:

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 9 years, 6 months ago Support Assistants

    Hi Horhau

    Thanks for posting your question.

    Was the style block just a test? Ideally, a rule like the one you’ve posted above should be placed in a Custom CSS plugin like SiteOrigin CSS. The body rule should be inserted at Appearance > Custom CSS.

  2. 9 years, 6 months ago horhau

    No it wasn’t. I tried several approaches and only one worked – at least when being logged in.

    As far as I understand the CSS plugin, it works for the whole web site and therefore for all pages. However I need the background-image on some pages only. So the CSS plugin does not do the job for my requirements.

    Putting the CSS instructions into the CSS styles field of a text editor widget on a page does the job only for that widget and not for the whole page.

    Writing the CSS instructions into a SiteOrigin text editor widget does the job. However only when being logged in.

    See below the three screenshots:
    1. The design of the page by PageBuilder. The CSS instruction is inserted into the editor widget in the top row.
    2. Page as desired – however only when being logged in.
    3. Page when being logged out.

    What do you recommend?

    Horst

    PageBuilder_Design

    Page_Logged_in

    Page_Logged_out

  3. 9 years, 6 months ago Support Assistants

    Please, send us the link to the page you’d like to apply the image on and we’ll assist with a CSS rule that can be inserted at Appearance > Custom CSS. WordPress adds a unique body class to every post and page so it’s relatively easy to target page/post specific elements.

  4. 9 years, 6 months ago Private Message - horhau

    This is a private message.

  5. 9 years, 6 months ago Support Assistants

    Thanks. If you inspect the source code on this page you’ll see the following body class:

    page-id-997

    You can therefore say:

    body.page-id-997 {
background-image: url(http://'');
}

    You can also get a page ID by going to Pages in WordPress and editing a page. Check the URL, there will be a single number visible, that’s the page ID.

  6. 9 years, 6 months ago horhau

    Perfect, that works :-)

    A last question: If I want to apply the same background image to several pages, how do I need to address those pages? Must I repeat the CSS instruction for every page or can I use somehow a list of the pages for which to apply the background image?

    Thanks, Horst.

  7. 9 years, 6 months ago Support Assistants

    Super :)

    To do a batch you can say:

    body.page-id-997,
body.page-id-xxx,
body.page-id-xxx,
body.page-id-xxx,
body.page-id-xxx {
background-image: url(http://'');
}

    Replacing xxx with the required page ID’s.

  8. 9 years, 6 months ago horhau

    Thanks for your help.
    Everything works fine now.

    Horst

  9. 9 years, 6 months ago Support Assistants

    That’s great news :) Glad we could assist.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More