Hello everyone. I am new to Site Designer. I have used Coffee Cup editor in the past as well as Dreamweaver. I felt I needed to upgrade my site with the current coding. I am building my own template as my site has a very simple design and was struggling with editing pre built templates to look like I want. Part of the reason for the reboot is I currently have not been able to figure out how to have a link on my page (separate from the top menu links) for example I want my main menu links to be 24px but the separate link that I have under my main image photo Fosters Creations Shop. I would like it to be 36px so it stands out. I have not been able to accomplish it with my current site. You can view my site here http://fosterscreations.us

If I am correct if I want the same footer links that will auto update on all pages I need to create a symbol for that element?

I also currently have a cookie pop up that is controlled by code how do I insert that into my new index page with Site Designer?

I hope this software isn't too much for me to figure out.
Thanks,
Shannon

Hi Shannon.

1. The main CSS file (FCstyle.css) in your website suggests that the appearance of all the elements has been purely by reference to the type of element, and without giving any element a class name. https://blog.hubspot.com/website/what-is-css-class is an introduction to the matter of CSS class names.

Site Designer (SD) makes the matter of class names simple. For example, one could make the menu items with SD's text link elements and give them all the same class name (say, "menu-link", without the inverted commas) in the Styles panel; then whatever styling is applied to one of those links will be applied automatically to all of them.

If one then used a text-link element for the words under the main image one could style it differently by giving it a different class name, such as "pic-link".

2. Yes, you're right about using a Symbol for the container that includes the footer links.

3. The cookie popup script is currently in your header code. To place the script in header code of the SD page one can select the Body element, go to the Element panel and place the script in the Head Code box.

4. SD may seem a bit daunting at first, but even I can use it: it's just a matter of getting used to it. I recommend starting a project file (.rsd) to use for experimenting, in addition to the project file in which you're reconstructing your website. One learns a lot by experimenting in a project file where it doesn't matter what mistakes one makes.

Frank

Frank ,
Thank you so much for the insight. I just dove right in. Had a few hiccups when after I uploaded it none of my header and footer images showed nor the main photo on my index page. Finally got that fixed and tested it in my laptop that is 1920 have it set to 1937 for desktop and it still breaks if my browser is full screen. Not sure how to fix it. I have been up for 26 hours. Time to give it a rest. I also can’t figure out how to get the copyright paragraph centered on the desktop toggle and it also isn’t centered on my iPad. I am sure I will figure it out eventually. My other hair pulling issue is a simple contact form. I couldn’t figure out what all needed to go in the form elements so put up a simple form from a free form creator but need to figure out another alternate as their free version doesn’t allow for many responses. The tutorials are good but wish there were more in depth details in some of them.

Oh and the other thing I can’t figure out is why my larger Fosters Creations Shop link under the main image on my index page doesn’t change even though I have the colors set for hover, viewed etc. all of the other links function properly.

I am sure I did a few unorthodox maneuvers to get spacing where I wanted it but for now it is up. Will try to work out the other issues at a later date.
Shannon

Hi Shannon,
One thing you need to do is take away the widest width limitation. If someone has a wider screen than what you have made the page for, they will see an unstyled page, like the one I have attached.

If you want a maximum width for your site, you can create a wrapper tag to put everything else into. Then set the width on that wrapper, like e.g. width: 100%; max-width: 1200px; Then you probably want to center this wrapper. That is done by setting both the left and right margin to auto.

Hi Shannon again.

Inger's answer is probably all you need, but I'd already typed the following, and it may just help a bit.

I see that you're using the desktop-down Frameworkless template. That means that, when making adjustments for various screen widths,
(a) one starts by looking at the canvas when the slider to the right of the highest breakpoint, and makes adjustments to get things how you want them to look there;
(b) one then moves the slider to the left of the highest breakpoint, and makes adjustments to get things how you want them to look there;
(c) one then moves the slider to the left of the next breakpoint down, and makes adjustments to get things how you want them to look there;
(d) one repeats (c) until there are no lower breakpoints.

It may be that the problem mentioned regarding the whole screen window on the laptop was because item (a) above was overlooked.

An easy way of sorting the positioning of the paragraph with the copyright dates may be as follows.
1. With the slider to the right of the highest breakpoint set the paragraph, make the settings of the paragraph element
in Styles > Design > Typography > Align centre
in Styles > Layout left and right padding of say 20px
2. Going down the breakpoints in turn as mentioned in the first paragraph above, remove any settings that are preventing it from following the layout as at item 1 above.

Regarding forms, it may help to look at the examples/components in the BareBone > Forms,tables section of https://mock-up.coffeecup.com/ .

Frank

Regarding the paragraph that you cannot get centred. You may have the text centred in the class .paragraph-1, but the parent container, .container-2 is not centred. Use the margin: auto; as mentioned above, to get it centered. Apparently, you're building your site 'desktop-down', so when making adjustments, start at the wide viewport.

I don't understand what has happened to cause that. Perhaps if a zipped up copy of the project (.rsd) file is posted here someone may be able to spot the problem.

Frank

The URL to the Fosters Creations Shop is not correct. You have just written shop.fosterscreations.us but it has to be https://shop.fosterscreations.us/

Thank you so much. I truly appreciate your help. After I get some sleep I will work on those fixes. I honestly have no idea what desktop-down means unless you mean I mistakenly started in the desktop view and then adjusted the other two views after the fact then yes you are correct. I have made notes of everything mentioned here and will see what I can accomplish. I truly appreciate your help. My brain is a bit overtaxed at the moment as I just completely set up my store at shopify then my blog had an issue so more coding than I planned on this week.

Oh and not sure how to set a wrapper tag but will see if I can figure that out

OK link is fixed. It was correct on some pages but not all. Ironically that also fixed the hover issue on the larger link on my index page.
Also fixed copyright info some how the container that holds my footer image and the copywright paragraph
<div class="container custom-sd-two-cols sd-two-cols footer">
was set to grid instead of Flex. Setting it back to Flex fixed the centering issue. I truly am amazed at how much I got accomplished with this extremely daunting software. I learned html design in 2000 using a very old copy of coffee cup and then went to Adobe GoLive and then Dreamweaver. So this is a huge change for me. I appreciate your patience with me.