Upront Theme/Builder Help...

Hi WPMUDEV,

I was wondering if someone can help me out a little with using Upfront. This is my first attempt at using Upfront, using a child theme (Issue) and customising it from there on.
I am use to styling my websites by hand, through CSS, so moving onto a front-end GUI mode of doing this is really taking me a while to get used to, so I apologise if my questions seem very elementary to others.

I have read the documentation on UF, and I am finding that what is outlined there doesn't seem to want to work for me. These are positioning elements that I can easily achieve with a couple of simple CSS rules, however inside of UF and using its GUI, I am finding some problems with positioning the elements to the precision where I need them to be.

The first problem I am coming across is to simply modify the header to include the navigation to run across the bottom of my header container. Every time I pick the navigation element up with my cursor to drag it to the bottom, it automatically snaps right back to the top again (the top of the header region). I thought it was because it is inside the header element, so I tried adding a new region to just below the header and then insert a navigation element into that. This then brought up two issues, it does not appear on every page – even when I make it ‘global’, and this region does not align right under the header element, so there is a gap between the two elements which I don’t want to appear.

Again if I try moving this element with the cursor, it just snaps back into its place. I know that if I was ‘hand-CSS-ing’ this I would just use the margin-top/bottom..etc, but I cannot figure out how to do it within the UF editor….

In the UF tutorial articles, it mentions adding a ‘navigation region’ via the drop-down in the little interface that pops up (see attached screen-shot of the image shown in the article), however, in my interface, I do not receive any such options, and only have the following shown in the second screen shot attached here.

I am both confused and frustrated at tring to figure such a simple thing out within the UF interface, but after several days of trying to drill down to a solution, I am getting nowhere, thus resorting to posting here.

Hoping for some help on this.
Thank you all kindly in advance!

    Denitsa

    Hello Ana,
    I hope you are having a great day!

    Don't worry about using the GUI entirely - you can add your custom CSS to Upfront without a hassle when you need to.
    To edit the CSS of a region, you just need to click the pencil icon to edit the region,

    then choose the Settings (green gear icon) and press Edit Region CSS from the left-hand menu. You can then paste your CSS code in the field that appeared to the bottom of your page. Then hit Save and Ok and you're good to go!

    If you go to Theme Settings and choose Global Theme CSS you can edit the CSS for the whole theme in much the same way.

    You can also use the Code element if you want to insert a code snippet and edit HTML/CSS/JS. You just drag it from the Draggable Elements menu to the left and then when you double click on it a text area opens to the bottom of your page where you can enter your code and switch between HTML/CSS/JS.

    You can also use the Padding setting to set the padding between elements. When you click on an element that's the icon next to the Settings like so:

    To make a new menu, create a region and then you can drag the Menu element form the Draggable Elements and adjust it.

    I hope this helps! If you have any additional issues, please let us know and we'll be happy to help.

    Best regards,
    Denitsa

      Ana

      Hi Denitsa,

      Thanks for your help above, its taken me awhile but I have made a little progress working around the UF interface. There are still a few issues I am having though.

      1) I am using the drag code element as you suggested above. My goal with this is to create my own divs and then be able to target and style them myself through my own CSS. The first problem I am encountering with this is that I cannot get the code editor to load up on the screen as in your pic above, and by following the directions you stated (double clicking). The only thing I can get to load up is the little onscreen window that pops up once you click the little green settings icon. This isn't very user friendly, and there is no way to access the CSS panel from here. What am I doing wrong?

      2) In the instance above, when I do put in some HTML into that little onscreen editor, I am entering a div in which I am then loading my image logo into so that I can then target and position it precisely within the header of my site. The second problem I am having here is that the image is not loading as it seems the path cannot be found. The alt description does show up though, so there is no problem with the Markup. I have used the following function before in another theme that pulls out the image just fine:

      <?php bloginfo('template_directory');

      However this is not working with this theme. I thought it may be because of the child theme usage, so I then tried the following function:

      <?php echo get_stylesheet_directory_uri(); ?>

      But that also is not working. Does Upfront have a different structure to calling images? Is this why I cannot load in my image?

      Those are all the Questions for now, I am sure there will be more to come! Sorry!! And I appreciate any help! =D

      Thanks in advance =D
      Ana

    Denitsa

    Hi Ana ,
    I hope you're well!

    1) I am using the drag code element as you suggested above. My goal with this is to create my own divs and then be able to target and style them myself through my own CSS. The first problem I am encountering with this is that I cannot get the code editor to load up on the screen as in your pic above, and by following the directions you stated (double clicking). The only thing I can get to load up is the little onscreen window that pops up once you click the little green settings icon. This isn't very user friendly, and there is no way to access the CSS panel from here. What am I doing wrong?

    I'm sorry for the confusion here, let me try and clarify this:

    First, you drag the Code element from the left-hand menu onto your page. That's what you get:

    You then click once on the Write custom code link and the area where you can input HTML/CSS/JS will show itself at the bottom.

    As for your second issue, might I ask where is your image and why would you need to include it via php? Also, where are you putting your php code?

    Can you try the Link image option that appears after you do the above (insert the code element and click on "Write custom code ")?

    Tell me if those work for you! Your questions are always welcome

    Have a nice day!

    All the best,
    Denitsa