imnotascientist Posted June 30, 2023 Share Posted June 30, 2023 Hello all, so maybe I'm way in over my head. I'm trying to make my template really work like an old windows 98. Previously I just used PNGs I made and custom colors. Well, I duplicated the site to try something new, and thought I'd get chatGPT to write some new fancy code. It's not going great. I'm including all of it here. I wanted to take the navbar at the top of the page and turn it into a fixed bar at the bottom of the screen that opens vertically when you press a button. Site test url: https://clavichord-khaki-hj9g.squarespace.com/ Password: testing First, here's how my main site looks, with just some minor code. I added the icons on top with code someone wrote, and a fixed PNG of a startbar at the bottom for aesthetics Here's the actual code. I keep those icons and stuff on an unlinked page so I can use their URLs directly. This code is only in the custom CSS of the design area, I didn't put anything in the code-injection page where there's headers and footers. nav.main-nav>ul>li a:before { content: ""; background-size: contain; display: block; width: 50px; height: 50px; background-position: center center; text-align: center; margin: 0 auto; } nav.main-nav>ul>li:first-child a:before { background-image: url(https://images.squarespace-cdn.com/content/v1/57a8d77c440243645807eb72/1623154759937-LOIC73R0KLPE540LXTVJ/ke17ZwdGBToddI8pDm48kMpagLdZPgiW6yD5i4KsS9VZw-zPPgdn4jUwVcJE1ZvWhcwhEtWJXoshNdA9f1qD7UnCxNA8dHvmd7460Z7fbKFSZnIIAPuX1C4iUTyn4Xd4-76gsgk4xgxAaWTBSRHt9w/anti-ad_thumb.png?format=300w); } nav.main-nav>ul>li:nth-child(2) a:before { background-image: url(https://images.squarespace-cdn.com/content/v1/57a8d77c440243645807eb72/1623154774483-FY3TB8KN45CGLMKIN6UC/ke17ZwdGBToddI8pDm48kMpagLdZPgiW6yD5i4KsS9VZw-zPPgdn4jUwVcJE1ZvWhcwhEtWJXoshNdA9f1qD7UnCxNA8dHvmd7460Z7fbKFSZnIIAPuX1C4iUTyn4Xd4-76gsgk4xgxAaWTBSRHt9w/sideprojects.png?format=300w); } nav.main-nav>ul>li:nth-child(3) a:before { background-image: url(https://images.squarespace-cdn.com/content/v1/57a8d77c440243645807eb72/1623154784859-2QEUKKCIWHIPPWYTXKJ7/ke17ZwdGBToddI8pDm48kMpagLdZPgiW6yD5i4KsS9VZw-zPPgdn4jUwVcJE1ZvWhcwhEtWJXoshNdA9f1qD7UnCxNA8dHvmd7460Z7fbKFSZnIIAPuX1C4iUTyn4Xd4-76gsgk4xgxAaWTBSRHt9w/about+me+thumb.png?format=300w); } nav.main-nav>ul>li:nth-child(4) a:before { background-image: url(https://images.squarespace-cdn.com/content/v1/57a8d77c440243645807eb72/1623154795272-KVQIJCDBQVQ9ECE7YSD1/ke17ZwdGBToddI8pDm48kMpagLdZPgiW6yD5i4KsS9VZw-zPPgdn4jUwVcJE1ZvWhcwhEtWJXoshNdA9f1qD7UnCxNA8dHvmd7460Z7fbKFSZnIIAPuX1C4iUTyn4Xd4-76gsgk4xgxAaWTBSRHt9w/classifieds.png?format=300w); } /* Image bottom bar */ div#block-yui_3_17_2_1_1622715638108_6833 { position: fixed; bottom: 0; left: 0; width: 100%; z-index: 999; margin-bottom: 0; padding-bottom: 0; padding-left: 0; } So, I tried to get ChatGPT to move it around, after providing it with the entire source code. No matter how many times I described problems, this is what I got (ignore the icons, I'm working on changing them. Just take a look at the start bar at the bottom) So the menu never moved, this unclickable start bar that turns into a pointer-finger when hovered doesn't actually do anything, and the designs don't work. Here is the code chatgpt gave me: In code injection on dev tools, it had me put this into the header. Note that I did change the URL to the proper source of the images <!DOCTYPE html> <html> <head> <div id="taskbar"> <div id="start-menu"> <button id="start-button">Start</button> <div id="menu" class="hidden"> <ul> <li><a href="/work"><img src="URL_OF_YOUR_WORK_IMAGE" alt="Work"> Work</a></li> <li><a href="/side-projects"><img src="URL_OF_YOUR_SIDE_PROJECTS_IMAGE" alt="Side Projects"> Side Projects</a></li> <li><a href="/about-me"><img src="URL_OF_YOUR_ABOUT_ME_IMAGE" alt="About Me"> About Me</a></li> <li><a href="/contact-cv"><img src="URL_OF_YOUR_CONTACT_CV_IMAGE" alt="Contact/CV"> Contact/CV</a></li> </ul> </div> </div> </div> </head> </html> Next, it asked me to put this into the footer <!DOCTYPE html> <html> <head><script> document.getElementById("start-button").addEventListener("click", function() { var menu = document.getElementById("menu"); if (menu.style.display === "block") { menu.style.display = "none"; } else { menu.style.display = "block"; } }); </script> </head> </html> Finally, in the design tab, it asked me to put this into the "custom CSS" area /* Custom Taskbar CSS */ #taskbar { position: fixed; bottom: 0; left: 0; width: 100%; background-color: #008080; padding: 5px; display: flex; justify-content: space-between; align-items: center; z-index: 9999; } #start-menu { display: flex; align-items: center; } #start-button { background-color: #C0C0C0; border: none; padding: 5px; cursor: pointer; } #menu { background-color: #C0C0C0; position: absolute; bottom: 30px; left: 0; border: 1px solid #000; display: none; } #menu ul { list-style: none; padding: 0; margin: 0; } #menu li a { display: block; padding: 5px; text-decoration: none; color: black; } #menu li a:hover { background-color: #008080; color: white; } #menu li a img { width: 20px; height: 20px; margin-right: 5px; } And it didn't work. Below is a screenshot of what I was hoping to get I'm not sure what went wrong where. I read that you can do all of this entirely with CSS and no javascript, but that's not working for me at all. Chatgpt suggested "CSS conflicts may arise from the built-in Squarespace styles, and would need some kind of !important override code" but I’m not having success at all. I'm sure coders here are banging their heads at the idea of using chatGPT for this, but I heard elsewhere it works. I also tried asking it to take styles I copied from this site https://jdan.github.io/98.css/ For creating the look and feel. Nothing works. Is this even possible? Is it too much? Why is JS even needed? Maybe this is way too over my head... Link to comment
imnotascientist Posted June 30, 2023 Author Share Posted June 30, 2023 I forgot to mention I don't think it ever successfully used any of the code from that github site anyway. But long story short is I wonder if this is too much to ask of the customization options? I am not a programmer, consider my knowledge on how it works from a semester course in HTML5 in 2012 and a month of CSS. Link to comment
tuanphan Posted July 1, 2023 Share Posted July 1, 2023 Hi, You mean you want to achieve current site with CSS only, no JavaScript? I haven't tried, but I think some below are possible with CSS + Menu at bottom of screen + Start icon + Time - You will need to use JavaScript, because CSS can't achieve running time + Click Start >> Show Menu bar with links + icon Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment