All the latest Neocities site news!

Neocities allows anyone to create a free web site to express themselves. Want to create your own awesome site? Join us!

SUPER COOL SITE !!!
1 like
Hello again! I am very inspired by your website. I especially love the sleek minimalistic layout, responsive design of the nav bar, original banner with added text title, and the zonelets blog you're maintaining! I read through your Copyright page and the Creative Commons License agreement, and I saw you mention that copying your source code for learning purposes is okay with you. How do I do that? c: Thanks so much
1 like
pixelglade's avatar pixelglade 2 years ago

Thank you! Feel free to take a look at the source code - the way to do it on Firefox on Windows is to right click on the web page and click View Page Source. There are some Javascript objects on the homepage for the Search and the Webrings so I would recommend looking at a simpler page so there's less clutter. Interpreting what you see will become easier as you write/learn more HTML/CSS code.

1 like
pixelglade's avatar pixelglade 2 years ago

One of the simpler pages is the Contact Me page. view-source:https://pixelglade.net/about/contact.html The responsive parts are due to the divs flexcolumn and flexbox. To see what they are referring to you open the .css style page.

1 like
sugarblush's avatar sugarblush 2 years ago

Thank you so much!! I really appreciate it c: I'll do my best. Something I'm struggling with for my Zonelets blog is that the Blog title and Date aren't showing up automatically, despite there being divs for them and I am labeling the html files appropriately. If I type something in the divs the text will not appear on my page. Im assuming it is a Javascript error? I don't know how to fix it tho, do you an idea?

pixelglade's avatar pixelglade 2 years ago

I do have an idea, actually. The first issue is that if you deviate from the template too much or decide to not use on the the variables in the script file, it can break the Javascript that Zonelets uses. For that reason (and because the Javascript was a bit slow sometimes) I actually removed the Javascript from the blog and replaced it with HTML, but I kept a lot the styling divs the same.

1 like
pixelglade's avatar pixelglade 2 years ago

I kept the footer for zonelets because that's how I started with my blog, but it's deviated from the original code a fair bit. I think it was actually the blog title and date issues that made me remove all the Javascript. But I would recommend editing the template file first and testing with that to try troubleshoot. Not sure if that's super helpful, but in the end - it probably is an issue with the Javascript.

1 like
sugarblush's avatar sugarblush 2 years ago

Thank you so much for the suggestion!! I removed the Javascript on the Post Template and I'll continue fiddling around with it while referencing your code c:

sugarblush's avatar sugarblush 2 years ago

Something I'm trying to achieve on my home page is a cute header banner like yours but with my own pixel art. I copied your code and replaced the background image file with mine, but the banner appears as blank. Do you know what is going on? (Thank you so much for all the help by the way, I hope I am not troubling you)

pixelglade's avatar pixelglade 2 years ago

in terms of the background image, check that it's in the root directory of the website. Check the path and file name are correct "./" in the css style file means it's looking in the root directory. Also check the height and width arguments are correct with units (px). You don't have to load the image as a background image, you can load it as an image in HTML in the file instead if you want.

1 like
pixelglade's avatar pixelglade 2 years ago

When I tried looking for your background image by navigating to the filename I got a 404 error so I think the path is probably wrong. The paths are all relative, you can read about it here: https://www.w3schools.com/Html/html_filepaths.asp

1 like
pixelglade's avatar pixelglade 2 years ago

Since you're using my code as a base/reference, I'd appreciate it if you could mention it somewhere on your site like "this website layout was inspired by pixelglade's site" with a link to my site - that's just the terms of the Creative Commons license, you can remix and build upon the content or alter it but attribution is usually required. Whenever your website is finished, I'd appreciate the mention. 🙂

1 like
sugarblush's avatar sugarblush 2 years ago

Thank you a lot for the help!! I'll double check the path to make sure I get it right. And yes absolutely! I'll be sure to give a link back to pixelglade on my main page since I am referencing your code :) thank you for letting me use it to learn, I appreciate it.

1 like
pixelglade's avatar pixelglade 2 years ago

You're welcome! Let me know if you have any more questions.

1 like
sugarblush's avatar sugarblush 2 years ago

Hi again! I've made a lot of progress on my site that I'm very happy with c: Thank you for letting me learn from your code. I have three minor things on my site I want to debug.

sugarblush's avatar sugarblush 2 years ago

First two have to do with responsive design; I want to achieve the equally spaced nav box effect your site has on mobile. I referenced your code, but on my phone my site's "About" box is too squished, making the text feel crammed, while my "Projects" box is too spread out. My "Misc" box seems just fine though. What can I do to even out the "about" and "projects" boxes?

sugarblush's avatar sugarblush 2 years ago

The second thing on mobile; if I swipe on my phone it will reveal that there is extra unused space to the right of my page. I was looking stuff up, and I think it comes from me adding padding to a box that had "width=100%" for responsive design. I can't seem to find the offending box though. This extra space on mobile isn't something present on your site, do you know how you prevented this?

sugarblush's avatar sugarblush 2 years ago

The last thing is very minor, but something I notice on my home page is that there is some extra space between the start of the content box and my beginning header. I checked the css for h2 but I can't find any extra padding, so I'm not sure what is going on. Do you have any ideas?

sugarblush's avatar sugarblush 2 years ago

Sorry for all the questions haha, thank you a lot for all the help. Wishing you the best

pixelglade's avatar pixelglade 2 years ago

In regards to the size of the nav box in mobile when it's running along the top, it's set to fill 100% of the space. It looks like the middle column might be larger is due to the line length- the Pokemon: Sceptre/Spear could be the culprit, I generally tried to keep all my heading names roughly a similar length for that reason. A way to test is to temporarily remove all the headings and see what the columns look like

1 like
pixelglade's avatar pixelglade 2 years ago

I recommend testing your website in a browser and you can do Right Click > Inspect (Q) and then hover the mouse over different elements. When I did this, I found your h1 banner is what is causing the extra space on the right. If you click the element in this mode you can see a highlight for what the padding is, the position, etc.

1 like
pixelglade's avatar pixelglade 2 years ago

My suspicion is the extra space and the header positioning are related issues, if you solve one it might fix the other. The inspect says it's the h1.banner element rather than the header so I'd look into that.

1 like
pixelglade's avatar pixelglade 2 years ago

So don't get me wrong, testing on mobile is important but for narrowing down issues with elements you can resize your browser window to be squished and it will have approximately the same effect which can help you search for issues this way with Inspect.

1 like
sugarblush's avatar sugarblush 2 years ago

Thank you so much! Your responses helped me fix all of those issues c:

1 like
sugarblush's avatar sugarblush 2 years ago

Hi again! c: I am trying to create "favorite things" sections with booktable grids like yours. But one issue I am running into is that when I resize my browser window, the .bookdescription text will go off of the page. Do you know how to keep it in the main container?

pixelglade's avatar pixelglade 2 years ago

Hello~ I actually had this problem with css-grid as well but I never got around to fixing it. In other parts of the site where I have tables (e.g. guestbook, resources root pages) I use just html tables that are set to fit the window. You could try something like that instead, sorry I can't be more help about this right now.

1 like
sugarblush's avatar sugarblush 2 years ago

No need to be sorry at all! Thanks for the suggestion c: I'll see what I can do

1 like
ok that was almost a mess but i think i have everything relinked... new homepage :)
2 likes
Amazing artwork! :)
1 like

Popular Tags

art   music   videogames   programming   anime   games   personal   food   writing   cats   blog   movies   gaming   books   fashion   photography   comics   design   animation   horror   game   coding   drawing   furry   manga   portfolio   technology   poetry   cute   ocs   reading   programacion   arte   education   kpop   history   musica   fun   sports   animals   film   html   roblox   literature   philosophy   programing   science   tech   nature   web   travel   politics   videogame   minecraft   gamedev   retro   school   youtube   computers   cartoons   pokemon   videojuegos   2000s   life   video   illustration   blogging   diary   fantasy   love   dogs   memes   internet   random   comic   pink   gardening   videos   idk   linux   test   webcomic   queer   kawaii   nostalgia   tv   y2k   oc   news   fandom   fanfiction   cooking   arg   ai   aesthetic   business   emo   worldbuilding   journal   cars   silly   health   vocaloid   stuff   learning   media   90s   math   fiction   space   crafts   films   website   stories   scifi   css   cutecore   graphics   homestuck   software   football   lgbt   culture   etc   cat   marketing   painting   goth   sanrio   arts   punk   3d   commissions   pixelart   sport   artist   digitalart   archive   baking   journaling   funny   me   characters   cinema   metal   religion   dnd   diy   javascript   crochet   trans   lgbtq   psychology   dance   entertainment   comida   program   cool   graphicdesign   development   fanart   scene   streaming   sonic   makeup   code   rpg   aboutme   editing   webcomics   shows   friends   story   indie   creativity   roleplay   comedy   plants   webcore   lifestyle   series   clothes   gay   weird   webdesign   hacking   guitar   languages   cyberpunk   electronics   educacion   ttrpg   zines   rock   reviews   computer   engineering   informatica   aesthetics   it   soccer   oldweb   basketball   originalcharacters   sewing   community   everything   weirdcore   fnaf   social   study   vaporwave   vtuber   discord   beauty   about   pets   spirituality   photos   vintage   project   html5   information   shop   nintendo   language   movie   testing   clothing   architecture   storytelling   japan   blogs   mlp   undertale   magic   deltarune   coffee   biology   cosplay   shopping   money   flowers   crypto   thoughts   digital   blinkies   radio   experimental   nothing   ttrpgs   fitness   tecnologia   lore   book   creative   chat   physics   furries   info   hobbies   bugs   resume   japanese   autism   cybersecurity   lain   websites   occult   futbol   alternative   site   witchcraft   wip   other   birds   astronomy   singing   fandoms   research   profile   dolls   television   vr   gamedevelopment   ghchs   juegos   finance   events   band   anything   sleep   system   projects   sleeping   carrd   theatre   webdevelopment   linguistics   apps   genshin   splatoon   python   work   transgender   tvshows   fish   meme   free   crafting   photo   dreams   rap   personalwebsite   vampires   toys   all   knitting   pixels   fortnite   mentalhealth   aliens   developer   robots   fanfic   deportes   interests   windows   touhou   app   astrology   puzzle   wiki   drawings   dog   collecting   security   animations   a   family   stamps   links   coquette   online   fnf   humor   cartoon   yaoi   dancing   gothic   pizza   english   mathematics   fansite   bio   skateboarding   visualnovels   moda   modding   interactive   data   lol   roleplaying   poems   gallery   dragons   adventure   characterdesign   romance   gamedesign   no   teaching   gyaru   mystery   journalism   intro   hiking   tarot   osc   zonelets   essays   hobby   twitch   breakcore   marvel   objectshows   frutigeraero   medicine   rp   zine   gatos   gifs   pixel   chess   twine   gym   jfashion   resources   ffxiv   creepypasta   scenecore   home   tf2   privacy   death   meow   hiphop   dreamcore   android   puzzles   noise   animes   mythology   blender   danganronpa   vkei   audio   graphic   rpgs   ocean   law   musicals   swag   robotics   awesome   myself   podcast   popculture   traveling   recipes   plushies   shrine   progamming   car   communism   ecommerce   piano   introduction   socialmedia   novels   hellokitty   dark   bfdi   deporte   none   indiegames   omori   stars   activism   boardgames   paranormal   yuri   misc   christianity   pictures   production   lolita   bitcoin   electronic   mario   educational   things   anarchism   utau   scratch   old   wrestling   pjsk   girls   bunnies   birthday   student   lesbian   foods   style   computing   vent   spanish   feminism   clowns   webdev   java   doom   jewelry   god   dev   flash   realestate   80s   vtubers   travelling   images   jpop   pc   running   geography   sharks   store   maths   filmmaking   grunge   help   tumblr   3dmodeling   college   epic   jogos   transformers   designing   brasil   starwars   outdoors   computerscience   studying   trains   craft   translation   unblocked   cafe   js   environment   creepy   tools   dinosaurs   escuela   plurality   songs   bts   event   peliculas   warriorcats   stickers   baseball   southpark   collage   collection   pastel   volleyball   programar   lego   yoga   programas   novel   otherkin   tabletop   jazz   retrogaming   cyber   pinterest   services   monsters   multimedia   persona   estudiante   tcc   chemistry   construction   forum   acting   enstars   videoediting   gamer   weed   yes   mcr   bl   podcasts   fotografia   cine   therian   homepage   whatever   techno   shoes   args   horses   supernatural   blue   curso   hardware   weather   search   jesus   tea   insects   amor   libros   truecrime   theater   trading   cricket   closedspecies   kirby   miku   opensource   freedom   skating   medical   kidcore   angels   pop   maps   videography   turismo   salud   sound   learn   lgbtqia   programmer   socialism   shitposting   people   petz   vlog   surrealism   restaurant   economics   text   skincare   alt   ecology   hi   tiktok   dj   bsd   vhs   digitalmarketing   tourism   drama   kandi   animanga   hockey   historia   modeling   egl   world   ideas   depression   conspiracy   bible   service   edm   author   drugs   analysis   swimming   green   furniture   draw   cozy   blockchain   tattoos   dc   artwork   fishing   did   cryptocurrency   animales   ropa   rats   halloween   cv   mobile   homework   chatting   surreal   racing   species   videogaming   frogs   3dprinting   general   healthcare   academia   academic   nerd   miriadax   sciencefiction   cleaning   cultura   literatura   networking   manhwa   informacion   girly   truth   rpgmaker   wedding   plural   tutorials   scary   hair   alterhuman   chill   f1   css3   brazil   ambient   women   foss   programa   genshinimpact   bands   tennis   server   soft   sculpture   estudio   library   jjba   christian   hardcore   anarchy   practice   knowledge   visualnovel   glitch   water   ghosts   analog   erotica   cryptids   aviation   friendship   sociology   conlang   society   mods   onepiece   google   trinkets   company   guns   university   noticias   programacao   twitter   retrogames   kdrama   cycling   live   class   gacha   eating   review   creation   ux   filmes   sustainability   graffiti   bot   sites   quotes   batman   shitpost   neocities   anthropology   instagram   lostmedia   colors   schoolproject   programs   frontend   archives   cs   kids   crime   character   revival   rhythmgames   sketching   advertising   purple   blood   theory   writer   vampire   startrek   dating   camping   garden   prompts   bikes   esoteric   ultrakill   synthesizers   church   artes   medieval   theology   webseries   superheroes   idols   interactivefiction   training   cards   3dart   datascience   house   evangelion   apple   future   articles   otaku   thrifting   performance   forsaken   meditation   whimsy   magazine   tattoo   jobs   play   building   industrial   tecnology   analoghorror   shrines   tareas   disney   livros   youtuber   rants   hack   liminal   harrypotter   chaos   writting   illustrations   mangas   wellness   spiderman   animal   spooky   entretenimiento   viajes   shoegaze   new   content   ceramics   designer   sims   tarea   silliness   finalfantasy   neopets   tic   animalcrossing   mylittlepony   notes   voiceacting   something   french   php   magick   communication   rainbow   talking   desing   paganism   doodles   desarrollo   os   party   rambling   nails   vrchat   disability   selfship   zelda   facts   satire   cult   overwatch   photoshop   musicproduction   anthro   decor   repair   originalcharacter   handmade   visualkei   download   halflife   crocheting   creatures   jokes   joke   exercise   developing   miscellaneous   embroidery   ar   tokipona   vinyl   yapping   cheese   folklore   geek   black   scp   unblockedgames   conlangs   commission   club   vtubing   trabajo   sweets   marxism   quiz   calculator   webring   index   kink   archival   private   happy   vegan   shifting   agriculture   spiritual   hotel   terror   lolitafashion   kin   yugioh   military   csgo   adhd   mtg   ranfren   map   mushrooms   tokusatsu   crk   tips   oldroblox   generator   pet   bass   self   4chan   projectsekai   concerts   creating   songwriting   vlogs   beginner   gender   beer   rave   arcane   musics   secret   time   motorcycles   underground   doctorwho   islam   words   beach   creativewriting   musician   stupid   mha   kdramas   digimon   animating   seals   mecha   tutorial   lofi   ui   casino   more   conlanging   collections   zombies   retrocomputing   proyecto   ciencia   streamer   drinks   minimalism   nct   oldinternet   riddle   products   cities   garfield   ios   chiptune   city   hosting   randomstuff   daily   pruebas   red   tamagotchi   sonicthehedgehog