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...
-
Site URL: https://imnotascientist.com I want to make three identical versions of my site, but with completely different aesthetic themes. I currently have this windows 98 theme, and I want to do a minimalist one and one more. I know I can duplicate every single page and re-design them, but I can't seem to duplicate the main template homepage in the screenshot here. There's no option in settings. Is this possible? Also, right now I have a site-wide background color, and injected some code to add icons to the nav links. I'm not sure how I'd be able to do that all in my same one URL domain, is it even possible or would it take like some serious coding?
-
Replacing navigation text titles with thumbnails?
imnotascientist replied to imnotascientist's topic in Customize with code
Hi there, Right now, the thumbnails are perfect and the social icons are not a problem. The only issue left is on my other post regarding the footer, I'm having issues getting the footer to appear on all pages automatically, and there's a gap at the bottom when viewing on mobile Here's the link to that thread -
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
-
Replacing navigation text titles with thumbnails?
imnotascientist replied to imnotascientist's topic in Customize with code
@tuanphanIt worked! Thanks so much 🙂 Looks great on desktop and mobile -
imnotascientist reacted to a post in a topic:
Replacing navigation text titles with thumbnails?
-
Site URL: https://imnotascientist.com Hi all, first time here. I'm customizing my design to look like an old Windows 98 theme, using a Squarespace template and customizing everything I can, but this one will require some CSS, and I'm not sure where to put it or what to write. Haven't dabbled with code in years. Right now, the navigation bar is text-only. I want to add some PNG thumbnails above the text that look like Win 98 desktop thumbnails I made (folders, settings, etc) and have the text for the link go underneath them. I imagine I'll have to make an unlinked page with the thumbnails on it so I can link the images individually (right click, view image). But right now, I can't even figure out where or how to do that, and I'm a little uneasy about possibly breaking the site if I do something wrong. I also want to make sure the menu continues to function on mobile with the icons and text underneath. Currently experimenting with adding the thumbnails as images in a header area on each page, but that requires doing it one by one to each page, and then they end up stacking vertically on mobile instead of being part of a dropdown menu. And I can't figure out how I'd hide the nav bar if I do it that way. Also trying to make the navigation go from the top right to centered underneath or left-justified underneath the logo. Can't figure out if that's a custom design setting somewhere, or if that also requires CSS. Here's screenshots of the current NAV bar with the thumbs as images underneath with the method I'm trying without CSS (removed the icons since this screenshot, so they're not like this on the current site). If the CSS is a bit of a problem. Site is imnotascientist.com and pass is: missingno
