Jump to content

imnotascientist

Member
 View Profile  See their activity

  • Posts

    8

  • Joined

  • Last visited

 Content Type 

Posts posted by imnotascientist

    Moving the navigation bar and turning it into a dropdown, used AI to write the code and it is not going well at all

    in Customize with code

    Posted

    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

    image.thumb.png.30c22da2f22681b4cee20bab2418a10f.png

    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)

    image.thumb.png.27a076ab885ef459685f901a1928e77d.png

    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

    image.png.f328a5b160fdf43941b7436131afd925.png

    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...

    Duplicate homepage completely with template?

    in Pages & Content

    Posted

    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?

    Screen Shot 2021-10-15 at 00.55.42.png

    Screen Shot 2021-10-15 at 00.54.47.png

    Screen Shot 2021-10-15 at 00.54.40.png

    Making the footer fixed to the browser window?

    in Customize with code

    Posted · Edited by imnotascientist
    mobile issue

    15 hours ago, tuanphan said:

    Add to Design > Custom CSS 

    

/* 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;
}

     

    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 🙂

    taskbar+footer.png?format=2500w

    https://images.squarespace-cdn.com/content/v1/57a8d77c440243645807eb72/1623172204565-CR3ZT4PVTVMZ98EDPOCM/ke17ZwdGBToddI8pDm48kJVueEqCqkKVN20nWOwcc0dZw-zPPgdn4jUwVcJE1ZvWQUxwkmyExglNqGp0IvTJZcY1lis3u7ujHaqKviAjfgBXb2P7ACMlJX44aBDLb--x26Vnom-qD4cuFrC9uHbiIEi1h0mXlgIPeJqw4nIAgai9OflExw4ZUr3LhjcKhR9_/taskbar+footer.png?format=2500w

     

    IMG_6502.PNG

    Making the footer fixed to the browser window?

    in Customize with code

    Posted · Edited by imnotascientist
    needed to mention I want the footer image to appear on every page

    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

     

    Screen Shot 2021-06-08 at 14.34.27.png

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Upcoming Webinars →

Hire a Designer

Stand out online with the help of an experienced designer or developer.

Get Matched →

Support

Community

Developers

Resources