Upfront Spirit Theme Customize

Hi Guys,

Just started using upfront and shows you guys have put in a lot of blood and sweat into it. I have hit a early designing hiccup and want your take on it / solution.

The Idea: Add circle logo area and then user can add text / image on top of it for their own site.

The Initiative:

– Creating circle via css of text element or region – failed.

– Adding text element to a custom floating region and then move it on top of image – failed

– Adding image and text to separate regions and then get them to sit on top of each other. – Some success.

Problem: Cannot get text to sit on top of image of a circle. Even if I do get them on top of each other, its a selection chaos on trying to select to modify text or image.

Any help or ideas would be great! Because creating the company logo/text as a custom image defeats the purpose of giving power to new user ability to change.


  • Ali
    • Flash Drive

    Hi again,

    I just tried another method. I added caption and modified it with css (see code below for others). But I still think there are going to be situations where you will wish to overlap one element on to another, may that be a widget. I am just getting started with upfront so please let me know if there is a reason for not doing something.

    .wp-caption div {
    font-size: 4em;
    text-align: center;
    vertical-align: middle;
    font-family: oswald;

  • Tyler Postle
    • CGO

    Hey Ali,

    I tried the floating region on top of a code element and that seemed to work for me :slight_smile:

    So add the code element and an html tag with a unique class or ID, then add this CSS to it:

    .circle-logo {
    border-radius: 50%;
    width: 200px;
    height: 200px;
    background-color: #000;

    Then add a floating region on top of it with the settings seen in my screenshot. The background colour selected there is transparent.

    Then add a text element inside of the floating region.

    Let me know if that works for you!

    Look forward to hearing back.

    All the best,


  • Ali
    • Flash Drive

    Hi @tyler,


    Your solution works but with a minor tweak. I got it working but text (in float) will scroll if the circle is large. Even if the restrict to parent is checked. This does add a cool factor but some may not prefer it. Depends on perspective.

    I managed to get it working by throwing both the circle (code block) and Text in separate floating regions with parent restrictions. No more moving.

    Closing thread.


Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.