On trying to recreate a design.

User 2864313 Photo


Registered User
2 posts

Greetings, friendly humans! I'm fairly new to Responsive Site Designer, but I've already done a few interesting things with it. Much easier than my previous approach of coding everything by hand.

While I've got more traditional designs pretty much figured out, for my current pet project (a gallery of landscape photography from hikes and bushwhacks in the western United States), I've a vision in my head that is a bit nontraditional. The Flux theme looks close-ish to what I'm aiming for, but not close enough that I can just swap out my own pictures and call it a day. It is going to need a significant amount of modification to fit my needs.

Unfortunately, I've spent the last three days studying the theme and trying to figure out how everything works, but find myself not much closer than where I was when I began playing with it. There seems to be rather a lot going on under the hood that I'm not all that familiar with.

I like the idea of a vertically centered navigation bar on the left side of the page that stays put as you scroll down, but in trying to recreate it, I have only managed to get it to work completely by accident. In working on other things, I invariably end up breaking it and have no idea how to get it working correctly again. If you friendly folks could explain how this is set up, it would be greatly appreciated.

I'd also like a better understanding of how the various gallery buttons are set up. When I try to do something similar, I can't seem to get it to work as expected. There is at least one thing I'm missing and probably several.

Thank y'all for your time. Have a great day!
User 10077 Photo


Senior Advisor
1,096 posts

I can't tell you how many times I've posted a question here thinking it is totally clear only to find that people couldn't picture what I thought I described perfectly. Unfortunately, the vision that you have in your mind is not shared by the rest of us, and I don't mean that sarcastically in any way.

If you don't mind, share a URL with us so we can see the items you are talking about.
ASK ME ANYTHING
I provide personalized help for Coffeecup Users including personal or group training for Site Designer, Web Form Builder and more via Zoom.
Email me at support@uscni.org or call 865-687-7698.

Did you know that Web Form Builder can be used for both simple and complicated forms and that it's not limited to the default fonts and buttons? Take a look at a form we developed for WindowTinting.com.
https://forms.windowtinting.com/forms/w … ppingcart/
User 2864313 Photo


Registered User
2 posts

This is basically what I'm trying to do. It is somewhat similar to the Flux theme, but has several differences.

http://rsd.coffeecup.com/themes/flux/index.html

The attached pictures should give you a better idea of what I'm trying to build. I can't figure out how to get the column with the logo and navigation on the left to stay vertically centered and still play nicely with the other things on the page. I'm also having a very hard time figuring out the somewhat unusual approach used in this theme for picture links.
Attachments:
User 122279 Photo


Senior Advisor
14,652 posts
Online Now

If you study the Flux theme, you will see that the column down the left side is sitting in a row which has a narrow width and is given a fixed position and some z-index value that makes it appear on top of the next row, which is positioned 'static'.

On narrow screens the navigation row is positioned absolute, but still has the high z-index. The row width is normal wide. If you set that row to position fixed at narrower widths too, you will have the menu staying visible when scrolling the page.

The rest is actually just new rows with columns and containers that hold the contents, as far as I can see.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 122279 Photo


Senior Advisor
14,652 posts
Online Now

What you could do, would be to 'undress' the theme file, that is remove the graphics by replacing them with placeholder images, then remove the colours, so that you only have the 'naked' skeleton. Then switch the guides on, and it will be easier to see how it is all put together. If you do this, don't forget to save it under a different name, so that you can get back to it without losing the actual template.

After that, you can start putting on the new 'clothes'.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com



Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.