Need help? Check out our Support site, then

Changing backgrounds in Able theme

  1. I'm attempting to get some custom backgrounds working in the Able theme and have run across some problems.

    Here is the CSS I am using

    body {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3MCIgaGVpZ2h0PSI3MCI+CjxyZWN0IHdpZHRoPSI3MCIgaGVpZ2h0PSI3MCIgZmlsbD0iI2JiZDgxNyI+PC9yZWN0Pgo8ZyB0cmFuc2Zvcm09InJvdGF0ZSg0NSkiPgo8cmVjdCB3aWR0aD0iOTkiIGhlaWdodD0iMjUiIGZpbGw9IiNhOWNlMDAiPjwvcmVjdD4KPHJlY3QgeT0iLTUwIiB3aWR0aD0iOTkiIGhlaWdodD0iMjUiIGZpbGw9IiNhOWNlMDAiPjwvcmVjdD4KPC9nPgo8L3N2Zz4=");

    #page-liner {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSI5Ij4KPHJlY3Qgd2lkdGg9IjIwIiBoZWlnaHQ9IjkiIGZpbGw9IiNmMmYyZjIiPjwvcmVjdD4KPHJlY3Qgd2lkdGg9IjIwIiBoZWlnaHQ9IjIiIGZpbGw9IiNlN2U3ZTciPjwvcmVjdD4KPHJlY3QgeT0iMiIgd2lkdGg9IjIwIiBoZWlnaHQ9IjMiIGZpbGw9IiNlY2VjZWMiPjwvcmVjdD4KPC9zdmc+");

    .entry-content {
    background-image: none;

    The first problem is that while this has the two backgrounds working in the CSS editor if I save and then look at my blog I don't see any changes.

    The second problem is that even in the preview I don't get a white box for my content.

    Just to note that I get a warning on the above 'body' CSS to "make sure you add '.custom-background' to your 'body' selector"


    // Tony

    The blog I need help with is

  2. First thing I see is the URLs are not "absolute" URLs starting with http:// .

    Secondly, #page-liner has a "background" declaration so you need to use that to override the #FFFFFF specified there. Background will override background-image.

    Thirdly, I see no background image declared for .entry-content, so you are hiding something that doesn't exist.

  3. Also, I don't think supports svg images.

  4. thesacredpath,

    The URLs don't need http: as they are data URLs not page URLs. They should be fine. They work fine when previewing in the CSS editor and work as they are in the page I grabbed them from -

    How do you suggest I override the background declaration? I thought defining a background-image after the background would override it?

    // Tony

  5. I would make them background declarations instead. You could use the !important attribute, but that would be sort of a hack. The right way, at least here at would be to use the same declaration.

    It might show in preview since the CSS would not yet have been run through CSS tidy and the filters here. At least that is what I suspect.

    I'll tag this for staff attention and hopefully someone will come around in a while and verify that one way or the other.

  6. Aaaah, I didn't realise that it was filtered by

    That would explain it!

    OK, so I can't use SVG and will have to create actual images to do it. Rats!

    // Tony

  7. Tony, I'm pretty sure that is the case, but keep an eye on this thread and wait for staff to verify that.

  8. Howdy! Just popping in to confirm that we do not allow SVG graphics on for security reasons. Hope this clears things up!

  9. @sixhours, many thanks for the confirmation.

  10. Thank you sixhours. Now I know :)

Topic Closed

This topic has been closed to new replies.

About this Topic