Text on Image in Foundation 6

I’m trying to rebuild a site in Foundation 6 and must admit that in comparison to Foundry it’s like pulling teeth. The documentation is poor and many elements simply have no tutorial. Some of the tutorial videos listed are over an hour long and not guaranteed to contain what you’re looking for. Some videos contain information that is no longer relevant. I logged into Weaver.space and did a search to only get an internal server error and the site is slow a molasses.

All this brings me here.

I’m hoping to place text on an image (no hero stack in Foundation). I can add a picture stack and a text stack, but how do I add the text over the picture?

You don’t just have to use F6 stacks!!
Eternity 2 is my fav
https://www.doobox.co.uk/stacks_store/demos/eternity.html

I can’t point you to the proper tutorial. Did you download the templates(free)?

There is a template called “Picture Overlay” that does what you want.

I would stick to F6 and not use other stacks if you can get it to do what you want. Since most of the code that makes it work is already loaded.

1 Like

What @teefers said… :grin:

Also the Caption Stack does what you wanted without a single swatch. Caption Demo

Many thanks, and this helps to a degree.

I have decided to stick with Foundry. As much as I like Foundation there is no proper help mechanism. With Foundry I can simply click on the item in question in the stack and the help leads me to a page that describes how to use the stack item and a video demonstrating this. Although there are some videos like this for Foundation, it’s all over the place and unclear. It is taking me far too long to do simple things. I could have built my site in Foundry three times over already. Foundry also hase a simple forum where help can be obtained. Weaverspace is confusing and phenomenally slow and search produces too many internal server errors.

My conclusion is that Foundation is indeed powerful, has a massive learning curve and is not for the visual web builder but more for coders. It’s also made me realise that comprehensive documentation and a forum are every bit as necessary as the product itself. No point in having a Ferrari, if you can’t get the thing started.

I don’t want this to come across as a negative for Joe Workman, as I have many of his stacks and he does fantastic work. This is simply my frustration in trying to use a complex tool with a bare bones manual.

I read your post from bed this morning and took some time to reflect on it. I feel that the root of the issue is that you have been a Foundry user for sometime and you know where to find everything. Foundation 6 is all new to you. Not just the stacks, but where and how to find help.

For example, the Foundation 6 Demo Site is a nicely organized site that contains explanations and demos for every F6 stack. Every video that has ever been made about Foundation, is organized in a tutorial section at the bottom of each page. The videos range from short targeted videos to longer live streams. The project file that was used to build that exact website has been made available as well so that you can see how each and everything was made.

In fact as I was reflecting on this response today, I realized that I was a bone head. Going back to your original question on this thread. The Caption Stack does exactly what you wanted without a single swatch. Caption Demo

As for the WS Community, it’s unfortunate that you never made a single post. Had you actually interacted with the community for help, I would be willing the bet we would be having a completely different discussion right now. I will concur that the search is far from stellar. I am working on migrating my community to a new platform. It’s a big project.

As for thinking that Foundation 6 is for coders… While you can build amazing websites with zero HTML, CSS and JS, you are not 100% wrong in the spirit of the comment. You can build spectacular websites with F6 without ever doing a single line of code. However, I architected F6 to follow the same design patterns of someone that would code a website by hand. There are many reasons for this…

  • It makes designing websites faster
  • It makes maintaining websites faster
  • It makes websites faster
  • It, in a backdoor way, teaches you the principles and terminology of basic web design. These are skills that will port to any other web design tool.

Foundation 6 peels away most of the layers so that you are closer to a true web design experience. I understand that some people prefer those extra layers of abstraction and that is ok.

I would love to know what concepts were a road block. Since this was the first question that I have ever seen you ask about Foundation 6, what were some of the other simple tasks that you could not figure out?

I would like to open an invitation to have a one-on-one with me. I even have some open time today (on Saturday) to meet if that works best for you. My only request is that I am able to record the session for other’s benefit. Not a single person has taken me up on that offer yet. I hope that you do.

2 Likes

This is coincidental timing. I recently made an External and shared it on the Weavers Space community. Here’s a link to the post from which you can download the zip. You will need two things to use it:

  1. Foundation 6
  2. Joe’s free Pen stack

When you unpack the External and add it to your project, you’ll find that instructions are included.

1 Like

Hi Joe,

Many thanks for you thoughtful response, it is really appreciated. I do agree that my use of Foundry is impacting my use of Foundation. I’d probably go a step further and say my use of RW is affecting my use of Foundation. I’ve only just fully recognised that every setting in Stacks that I’m used to is now gone in Foundation and in Site Styles/Swatches. I think this is a good thing, but takes some getting used to and is not explicitly understandable when you first start using Foundation. It also means that the muscle memory of looking at the stack and thinking, hey, where’s the setting for x and not finding it and then thinking, ok, how do I do this in Site Styles or with a Swatch?

I think the Demo Site would benefit from some examples of how a stack/site style/swatch works in practice. I downloaded the foundationstacks demo, which told me I was missing stacks or it said they needed reinstalling. When I tried to unpack a partial RW crashed.

In terms of your Weaverspace community site, it’s not quite clear where to post. Am I supposed to post in the dashboard? I looked at spaces but couldn’t find a Foundation+Rapidweaver, I did see one for CMS for Rapidweaver, but it was unclear. I did try to search for my needs, but that bombed out with an error.

I really like the direction of Foundation as it seems the flexibility is so much more powerful leveraging more of what’s available with CSS. It’s what I really like about Blocs (another web builder).

I build and maintain charity websites. They have little funding and do good work. Most of the sites require some kind of blog/news flow as well as making video and audio information available.

I would certainly take you up on your offer for a 1-2-1 and am happy for it to be recorded. I believe you’re GMT-7? I’m in GMT+0.

You have realized what I (maybe poorly) explained in the Why Foundation 6 Stacks Changes the Game video. Foundation 6 stacks try to have as minimal amount of settings as possible. This is so that you can create centralized styles to apply to your content. This video and more for beginners are on the Getting Started section on the demo site.

I did use a few non F6 stacks to build that demo page. I used Wallpaper and Quickflip in the page headers. This however, should not impact the functionality of the pages whatsoever. As for the partial extract crash. That is an issue that Isaiah is aware of. I thought that it was fixed in Stacks 4.2.2. It’s an intermittent issue that does not happen to everyone.

In order to post on the WS Community, you need to navigate to the “space” that you want to post to. For example, if you wanted to post a question about F6, you would go into the Foundation 6 space. You can access spaces via the “My Spaces” item in the top navbar.

I will DM you a link to schedule a time that works for both of us.

Just a quick follow up. @joeworkman kindly gave over an hour of his time to walk me through the difficulties I’ve had with Foundation. Firstly, a big thank you to @joeworkman, I really appreciate the time given.

During the session a number of things became really apparent. Firstly, it pays to read the documentation! I know it takes time, but it is there. Second, once the penny dropped that all the customisation for all stacks are in Sites Styles and Swatches, many things are possible. It does mean you need to get to know what they all do, but rather than looking at the info pane for settings, you looks at the Site Styles and Swatches. Thirdly, classes are really powerful, especially the parent classes. It was great to see that a parent class can be applied to a container and any other classes you create that have that parent class are automatically applied. Finally, things can be achieved in mutliple ways. There’s sometimes no single route to the solution, but a number of different routes. What is clear is that the power and possibilities to create massively increase using Foundation. @joeworkman is bringing the feature set of CSS to the table. It does mean that knowing CSS gives you a head start in terms of what is possible.

If you’re stuck with Foundation I would encourage reading the documentation on the Foundation Stacks website and watching the tuorials available. I’d also encourage you to look at the Helpers available in the stacks list. I hadn’t realised that there are a whole host of CSS utility classes that work by just typing them into the custom classes box! Just drag the Classes helper onto your canvas and it’s all the info is there.

Foundation is very powerful, but as with any tool, it requires learning well and scheduling some time to develop your knowledge in what it can do. The session with @joeworkman has really shown me it will do what I want and encouraged me to spend some time developing my skill in using it. Thanks @joeworkman!

4 Likes

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.