imnotascientist
-
Posts
8 -
Joined
-
Last visited
imnotascientist's Achievements
Level 2 (2/20)
0
Reputation
-
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.
-
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...
-
Making the footer fixed to the browser window?
imnotascientist replied to imnotascientist's topic in Customize with code
Hi @tuanphan thanks; so I put it in design>custom CSS and it works on the homepage, but doesn't appear on others, even if I add the image as a block to those pages or try putting the code in individual pages Is there a way I can tweak that code so instead of using the block at the bottom of the page, it just references the image directly from the link on the hidden assets page? This is the URL to the image itself after doing rightclick-> view image. I think if I just replace that "block" in the code with an HTML link, it would apply to all pages, since it's not referencing the bottom block on a single page, right? Not sure what code I'd need specifically to do so I've also noticed, on mobile, there seems to be a gap between the image and the bottom of the browser window, attached in screenshot Thanks so much for the help on this 🙂 https://images.squarespace-cdn.com/content/v1/57a8d77c440243645807eb72/1623172204565-CR3ZT4PVTVMZ98EDPOCM/ke17ZwdGBToddI8pDm48kJVueEqCqkKVN20nWOwcc0dZw-zPPgdn4jUwVcJE1ZvWQUxwkmyExglNqGp0IvTJZcY1lis3u7ujHaqKviAjfgBXb2P7ACMlJX44aBDLb--x26Vnom-qD4cuFrC9uHbiIEi1h0mXlgIPeJqw4nIAgai9OflExw4ZUr3LhjcKhR9_/taskbar+footer.png?format=2500w
-
Making the footer fixed to the browser window?
imnotascientist posted a topic in Customize with code
Site URL: https://imnotascientist.com I'm not sure if I worded the title correctly; I'm trying to take this image that's currently in the footer and make it fixed to the bottom of the browser window, so it spans the page completely and stays on the screen as you scroll, and appears on every page Password for the site is: missingno Here's how it currently looks in the attached screenshot. Right now I have an un-linked page www.imnotascientist.com/png-assets which I'm using for some code another user wrote for the nav bar icons. I figured I can take the image out of the footer container, put it on that page, and use some CSS in the site design to make it a fixed image, right? Because I already have some text on the footer underneath it, I'd actually like to keep the text in the footer exactly as it sits. It's just that start-bar image I want to work with I found some threads on this forum related to this but none of the code seemed to work
