FreewayTalk

11 replies to this thread. Most Recent

gfel

12 May 2020, 8:47 pm

Centre of Page Graphics - responsive design

Hi,

I’m sure this is really easy but for some reason I can’t work it out.

I have ‘add to basket’ rollovers graphics which I need to make sure remain in a central position on each of my responsive pages. How can I make sure these will stay in the correct place on each responsive page please?

Many thanks

gfel

waltd

12 May 2020, 9:07 pm

Do you want these images to remain centered vertically and horizontally? What else is in the page? Do these buttons “float” over the top of the page content, or are they a part of the page content?

Walter

On May 12, 2020, at 4:47 PM, gfel <[email protected]> wrote:

Hi,

I’m sure this is really easy but for some reason I can’t work it out.

I have ‘add to basket’ rollovers graphics which I need to make sure remain in a central position on each of my responsive pages. How can I make sure these will stay in the correct place on each responsive page please?

Many thanks

Freeway user since 1997

http://www.walterdavisstudio.com

gfel

15 May 2020, 9:56 am

Hi Walter

Thank you for the reply. I would like these buttons to be horizontally centered. On my responsive pages I have a series of Pass through, high res graphics which I have set to be 100% width and then the add to basket button centrally underneath each separate image as they run all down the responsive pages. So 15 images each with the add to basket option centrally underneath please. I believe this makes them part of the page content?

Many thanks

gfel

waltd

15 May 2020, 1:01 pm

Great. This is pretty straightforward. And once you do it once, you can copy the outermost container and paste it inline each place you need it, and update the button target. To begin, ensure that you have two graphics, exactly the same size as one another, that represent the two states of your rollover button image.

Make a full-width HTML box below each image. Insert the button into it as an inline image (import the “normal” state of the graphic). With the button image still selected (handles showing), apply the link to it using the Hyperlink dialog or the main menu (Edit / Hyperlink). Double-click into the text flow within the HTML box that contains the button, and set the text alignment to center. That centers your graphic button. Now, to add the rollover effect to it, you need to use the original interface for rollovers, all the way back to Freeway 1.x.

Click once on the button graphic and apply the Rollover Action to it. In the Actions palette, click on the Parameters tab. Pull down the MouseOver picker to “Select…” and choose your over-state image in the resulting file dialog.

Now that you have assembled this layer-cake, you can select the outermost HTML box, copy it, then put your text cursor inline after the next responsive image, and paste. Update the link on the button, rinse and repeat.

Walter

On May 15, 2020, at 5:56 AM, gfel <[email protected]> wrote:

Hi Walter

Thank you for the reply. I would like these buttons to be horizontally centered. On my responsive pages I have a series of Pass through, high res graphics which I have set to be 100% width and then the add to basket button centrally underneath each separate image as they run all down the responsive pages. So 15 images each with the add to basket option centrally underneath please. I believe this makes them part of the page content?

Many thanks

Freeway user since 1997

http://www.walterdavisstudio.com

gfel

20 May 2020, 1:24 pm

Hi Walter, thank you so much for this help. I am getting stuck when it comes to adding the hyperlink and clicking within the box to set the alignment to central. I am using mal’s shop actions on the add to basket and also the field above the button which has the the Multiprice action on it, as each item comes in three sizes? Does this mean I’ve not got my shop setup correctly. Are you advising for hyperlinks to the basket rather than using the Ma’s action? Thanks

gfel

waltd

20 May 2020, 3:16 pm

I was referring to an inline graphic used as a link. I don’t think it matters if you apply another action or three to it, the link is what drives the rollover. If the Mal’s action is written to override an existing link, then this should still work. If the Mal’s Action creates a link, and exposes that to the other Actions applied to the item, then that should also work. But you may want to first try this composition without any other Actions than Rollover. See if you can get that to work, so that you have a link, and when you roll over it, it changes images. Once you have that, you can layer on the other Actions and see if you can extend it.

Walter

On May 20, 2020, at 9:23 AM, gfel <[email protected]> wrote:

Hi Walter, thank you so much for this help. I am getting stuck when it comes to adding the hyperlink and clicking within the box to set the alignment to central. I am using mal’s shop actions on the add to basket and also the field above the button which has the the Multiprice action on it, as each item comes in three sizes? Does this mean I’ve not got my shop setup correctly. Are you advising for hyperlinks to the basket rather than using the Ma’s action? Thanks

Freeway user since 1997

http://www.walterdavisstudio.com

gfel

20 May 2020, 4:18 pm

Hi Walter, Thank you I have this working on the add to basket no :). I also have the Mal’s Form and Mal’s Multiprice Select set up in the three different size option and these are in a table cell. Is there a way of centralising this horizontally above the add to basket on my responsive pages also please?

gfel

waltd

20 May 2020, 4:24 pm

Rather than putting those separate selects in a table cell, you could put them inline within the same block of text with the button, just one line above it. The idea is to have this construction:

    <div (with mals form applied to it)>
    <p style="text-align: center">[multiple select]</p>
    <p style="text-align: center">[add to cart]</p>
</div>

This should let the two controls center horizontally.

Walter

On May 20, 2020, at 12:18 PM, gfel <[email protected]> wrote:

Hi Walter, Thank you I have this working on the add to basket no :). I also have the Mal’s Form and Mal’s Multiprice Select set up in the three different size option and these are in a table cell. Is there a way of centralising this horizontally above the add to basket on my responsive pages also please?

Freeway user since 1997

http://www.walterdavisstudio.com

gfel

20 May 2020, 4:39 pm

Thank you that is really helpful and keeps things nicely together. How do I change the dimensions of the Mal’s Multiprice selection ‘menu List field’ as now I’ve ‘inserted’ the menu list field (inline) into the line above the add to cart I am unable to change the size in the inspector as it has red dots around it and I can’t change the dimensions?

gfel

waltd

20 May 2020, 4:59 pm

How does it appear in the browser? What you see in the design interface is not necessarily going to be the same thing.

Walter

On May 20, 2020, at 12:39 PM, gfel <[email protected]> wrote:

Thank you that is really helpful and keeps things nicely together. How do I change the dimensions of the Mal’s Multiprice selection ‘menu List field’ as now I’ve ‘inserted’ the menu list field (inline) into the line above the add to cart I am unable to change the size in the inspector as it has red dots around it and I can’t change the dimensions?

Freeway user since 1997

http://www.walterdavisstudio.com

gfel

20 May 2020, 5:35 pm

Thank you yes, I have just realised when I preview the box stretches to show the text :)). Could I possibly ask two more things? I posted another question on here about making a link to new window high res, as there doesn’t seem a way to do this?

Also, I’m currently running 10.10.5 Yosemite on my old iMac. If I upgrade how far could I go before FW 7.1.4 stops working please? Do you anticipate that websites designed in FW7 will be able and editable in Xway when it is finished?

Thank you so much for your help!!!! :))))))))))

gfel

Back to Top

waltd

20 May 2020, 6:16 pm

On May 20, 2020, at 1:35 PM, gfel <[email protected]> wrote:

Thank you yes, I have just realised when I preview the box stretches to show the text :)). Could I possibly ask two more things? I posted another question on here about making a link to new window high res, as there doesn’t seem a way to do this?

If you make the image that you select in the Action high res, Freeway doesn’t do any resampling of the target image, so you could get it has high res as you want.

Also, I’m currently running 10.10.5 Yosemite on my old iMac. If I upgrade how far could I go before FW 7.1.4 stops working please? Do you anticipate that websites designed in FW7 will be able and editable in Xway when it is finished?

I am using Mojave on my Mac, as that is the end of the road for 32-bit applications. Softpress have stated that their goal is to have Xway be able to open Freeway documents (and convert them). Once converted, they won’t be re-usable in Freeway, but they would be able to be further modified in Xway. This goal is dependent on Xway growing a few more limbs, first. And it’s further complicated by the default layout mode being entirely different (layered absolute DIVs in Freeway need to become inline, relative DIVs in Xway). That’s quite a leap, hard to imagine how they will pull that off. Perhaps you would be able to open it with all the layers preserved, and then convert to inline yourself once you have all the content visible and in place in the new app. Just guessing, though.

Walter

Thank you so much for your help!!!! :))))))))))

Freeway user since 1997

http://www.walterdavisstudio.com