Changing backgrounds in Able theme

  • Author
    Posts
  • #1211551

    honestpuck
    Member

    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”

    Suggestions?

    // Tony

    The blog I need help with is honestpuck.wordpress.com.

    #1211753

    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.

    #1211754

    Also, I don’t think WordPress.com supports svg images.

    #1211755

    honestpuck
    Member

    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 – http://philbit.com/svgpatterns/

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

    // Tony

    #1211756

    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 WordPress.com 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.

    #1211759

    honestpuck
    Member

    Aaaah, I didn’t realise that it was filtered by WordPress.com

    That would explain it!

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

    // Tony

    #1211761

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

    #1211794

    sixhours
    Staff

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

    #1211795

    @sixhours, many thanks for the confirmation.

    #1211816

    honestpuck
    Member

    Thank you sixhours. Now I know :)

The topic ‘Changing backgrounds in Able theme’ is closed to new replies.