[Pro] Backdraft & Adding Graphic Item

I just started using Backdraft and love it so far. I develop simple websites so I think it’s going to be quite valuable to me.

I created my first page and want to add additional design elements to it (e.g., flower.png). I cannot figure out how to do it. I basically want to lay it beneath some of the modules that contain text and images. For example, I want to place something on top of the 3 and 2-wrapper modules you’ll see on the linked-to page.

Thanks in advance!

Hal

laurieandlawrenceadopt . com


freewaytalk mailing list
email@hidden
Update your subscriptions at:

Hm - let me say it that way:

####Backdraft

Backdraft is to be seen as framework. It’ll mean, that you can grab from the available modules with different columns - but only from those. If nothing fits into your world, you’ll need to rewrite your outline (your change your design attitude)

####Templates

They’re “As Is”. You’ll need to write your outline exactly to the template, changing words, images and colors. If your outline doesn’t fit - either seek for another template or change your outline, cause you wear another designers worn shoes!!

####So something wrong with Freeway?

Nope. Freeway is just a pro tool, which allows you building your own stuff. That’s what the app has been created for. Doing so it requires some additional knowledge. It has the tools for doing everything - you just need to know where they are and how to handle those. Being aware of those tools, you won’t need neither backdraft nor a template.

####The Precise Answer to your request

In the above mentioned surroundings, items are place relative. An “in between”, “above” or “below” item will be positioned absolute. So what you basically need to know is, that an absolute positioned item is to be treated as a child item and obeys its parent. The parent can be everything, from the top-level surrounding DIV (called PageDiv), down to every single DIV in hierarchy.

So if you want to dip your toes deeper in this rather cold water, I recommend to seek for “Inflow Design” or even “BoxModel” which teaches you how to position items relative (or how Backdraft basically has been built and why). Then you slightly can start to combine this with you already known method of “Drop and Drag”. Once there, you realize that you can drag those items beyond a DIV in the sidebar. Finally it’s a question of positioning within the parent which can be done by negative values - and so on and so on.

But more than often, the trick is simply changing your attitude asking yourself:

“Do I really need it??” Think about it - even twice.

Cheers

Thomas


freewaytalk mailing list
email@hidden
Update your subscriptions at:

Thanks for the advice Thomas. Something to ponder. :slight_smile:


freewaytalk mailing list
email@hidden
Update your subscriptions at:

I cannot figure out how to do it.

Essentially what you need to do is choose the Module that is closest to what you want to achieve. Copy it from the Available Section.

Insert your cursor (so it is flashing) between the existing modules that you are using and paste it in.

You then may have to adjust the content of your new module to suit your design plan.

So when you say

I want to place something on top of the 3 and 2-wrapper modules you’ll see on the linked-to page.

I assume that you actually mean ‘before’ the 3 and 2-wrapper modules.

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Thanks David. I mean “overlay” and not above/below or before/after another module, but I understand your point about leveraging the modules as much as I can for what they are. That’s the point of templates. Fair enough.


freewaytalk mailing list
email@hidden
Update your subscriptions at:

I mean “overlay” and not above/below or before/after

The problem is that if you add something as an overlay it is then out-with the inline layout and will not be Responsive - the whole point of Backdraft is to give you a Responsive site.

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Right, but if I were more of an expert with Freeway I’m sure I could add images where I wanted and that would be responsive while still leveraging Backdraft modules.

But, I’m not. :slight_smile:


freewaytalk mailing list
email@hidden
Update your subscriptions at:

Yes - but in the Framework of a Backdraft site you are limited to the existing modules and leveraging them to suit your needs.

Maybe a clearer description of what you are trying to achieve would help us to guide you.

A simple page with just the basics of what you want would be a good starting point.

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:

Here’s the page: laurieandlawrenceadopt . com

What I’d like to do is not have to put images (the star-like graphics) on the yellow background image or in a straight line like you see below the heading and instead place them on every page wherever I want.

Does that help?

Thanks for taking the time to help me out!

Hal


freewaytalk mailing list
email@hidden
Update your subscriptions at:

instead place them on every page wherever I want.

Then you need to click inside each wrapper item and insert html item. You could then set the background image of each to your graphic that you want to use.

Positioning can be achieved using margins, floats etc. but exact positioning over all sizes is going to take a bit of work.

Try it on a copy of this page.

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

I’ve tried that, but the result is an image that isn’t responsive and isn’t transparent. I’m sure I’d doing it wrong. If you have the patience and time you can send me the specific steps. That would be awesome, but I know I’m asking a lot.


freewaytalk mailing list
email@hidden
Update your subscriptions at:

Needs to be a png with transparency, you need to set the container size to a % and background-size to cover (centre, centre no repeat)

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:

It’s a png with transparency. The rest of what you said I don’t fully understand. This may be best suited to Skype. :slight_smile:


freewaytalk mailing list
email@hidden
Update your subscriptions at:


freewaytalk mailing list
email@hidden
Update your subscriptions at:

Thanks D. I have the background image OK. What I don’t know how to do exactly is …“click inside each wrapper item and insert html item. You could then set the background image of each to your graphic that you want to use.”


freewaytalk mailing list
email@hidden
Update your subscriptions at:

What I don’t know how to do exactly is …”click inside each wrapper item and insert html item.

This is a very basic level of FW use - have you followed any of the tutorials?

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Yes I have. I’m probably not explaining myself clearly.

I uploaded a new page at laurieandlawrenceadopt. com/favorites.html.

I added a graphic box, imported a png as a pass-through, changed the width to fixed %, and looked at the break points to move the image where I want it.

So now I have a transparent image that scales and rests its location at the break points.

Is there a way to layer the item so the photos are in front (on top) of the image?

Hal


freewaytalk mailing list
email@hidden
Update your subscriptions at:

Is there a way to layer the item so the photos are in front (on top) of the image?

Certainly but you are missing the point about the use of BackDraft - it is designed to give you an easy inline construction (using relative positioning).

By adding that graphic element in that way your layout isn’t really inline anymore as the graphic you have added is an absolutely positioned child.

By selecting the graphic item and using Item>Send to Back you may be able to move it ‘behind’ other items in that same wrapper. But it really isn’t the way to go.

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Is there a way to layer the item so the photos are in front (on top) of the image?

Certainly but you are missing the point about the use of BackDraft - it is designed to give you an easy inline construction (using relative positioning).

By adding that graphic element in that way your layout isn’t really inline anymore as the graphic you have added is an absolutely positioned child.

By selecting the graphic item and using Item>Send to Back you may be able to move it ‘behind’ other items in that same wrapper. But it really isn’t the way to go.

D

And this is what I already mentioned in my post above?

Cheers

Thomas


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options