Labels
Labels:

neocities update_10012024

Hello! 

I updated my site a little yesterday. I'll also write down the codes I learned under this label to not forget them. Sorry if I use the wrong terms, I'm just writing things down in a way that helps me understand !

I added pictures  on the side and I'll try to make buttons out of them later that would link them to other pages. I edited the about me section but I'd like to make it look a bit cuter later. I also figured out how to change the background color of the main section (the one in the middle) to a background image! Took me a while to get there tho lol. I want to do the same to the background of the about me box but I still need to figure that out...

How to add pictures:

<img src="url of your image or gif" width="pixel size you want" height="auto">

I also figured out how to size the pictures without having to change both 'width' and 'height' separately by just writing "auto" next to height (it's so simple but I didn't think of it before).
 
Site structure:

Any change in the look of your site happens inbetween the <style> </style> section (which itself is inside the <body> </body> section.
So basically (how I understand it for now) your site is structured this way:
 
<!DOCTYPE html>
<html>
    <head>
        stuff for your favicon and page name
    </head>
    <body>
        <div>
            text, structure of your site etc (I don't completely understand how this part works yet)
        </div>
        <style>
            stuff for the look of your page (so kind of everything)
        </style>
    </body> 
</html> 
 
Most of the things I understand for now happen in the style section, but that section is kind of dependent on the 'div' section thingie which I don't really understand yet. I only get that what happens in the 'div' is linked to the style section and vice versa. For example, if I want to change the font of a specific text, I need to do that in the style section. The div thing is kind of how things function and where they're placed I guess while the style is just for the look and size of things.. I hope my explanation isn't too confusing haha

Text

fonts: in the style section, you can change the look for your font and name the different types of font styles you want (f.ex if you want a font for your header, one for subheaders and one for normal texts).
Then when you type your text in the div thingie, you just write it between these
 <h1> </h1>
For regular text, I think you just use
 <p> <p>
The <p></p> also makes it that the text written in that section appears on a different line (I think it's a paragraph tool).
To add a break or a bigger spacing between text or images, you can add
<br>

Then there's this thing that I don't really understand but you can change the font by pasting your url in this code.
 @font-face {
                font-family: Nunito;
                src: url('url of your font');
                font-style: italic;
            }
 
This is the thing I mentioned earlier, with the names of your fonts and where you can change them separately:

            h1,
            h2,
            h3 {
                color: #455a17;
            }

            h1 {
                font-size: 40px;
                text-align: center;
            }
 
Text align tool
 
You can also see here the text-align: tool that you can change in the section showed above or under any section with font (I think) inside the style section. You can add these things at the end of that code:
 
text-align: justify / left / right / center ;
 
Make lists
 
There are different types of lists so I'll show the code and then add what it would look like on the site!
 
Unordered list:
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
 </ul>
  • Coffee
  • Tea
  • Milk 
Ordered list:
<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
 </ol>
  1. Coffee
  2. Tea
  3. Milk 
Description list:
<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
 </dl>
Coffee
- black hot drink
Milk
- white cold drink
Change Backgrounds

You first need to modify the url in the :root section (first thing from the <style> section!). You can add other things by naming them in the same way (--something-bg-image). 
After that, when you work on a part of your site that has a bg, you add the name of your bg image like so:
background-image: var(--something-bg-image) ; 
 
example:
 
<style>
    :root {
                
                --body-bg-image: url('url of image');
                --main-bg-image: url('url of image');

                /* colors */
                --content:  #89a447 ;
            } 
 
    main {
                background-color: #89a447;
                flex: 3;
                padding: 30px;
                order: 2;
                width: 100%;
                height: 1800px;
                padding: 60px;
                background-image: var(--main-bg-image);
                background-size: 100%; 
</style>  
 
Gotta watch the heigth and width when changing this! The background size as well.

So yeah, for now I just used those tings to modify the journal page and the whale page. I'm not completely satisfied with the look of the journal for now, especially the header... I'm gonna find something else that works better. I think I want it to look more like a book? If I could figure out how to make a page flip effect ...that would be really cool. Or at least have two pages next toe each other or something? idk idk


I'm going to organize the whale page into different sections for each type of whale or dolphin (not sure if I'll acutally talk about the dolphins tho bc they annoy me). I also want to do something with the miffy sticker, make it into a button that bring s you back to the home page or something? I'm not sure yet.

 

I also changed my favicons for each page.  I found a little gif of a fish in a bowl on this site: https://pixelsea.neocities.org/#fish

It's made by the same person who made one of my favorite websites. It's such a cute idea and it's so handy to find gifs to decorate my website!

 

Change the favicon:

<head>
    <meta charset="UTF-8">
    <title>Your page's Title</title>
    <link href="/style.css" rel="stylesheet" type="text/css" media="all">
    <link rel="icon" type="image/png" href="url of your image">
 </head> 

 

That's all for now! I'll try not to work on it today because I have actual homework to do. It's not much but I have to get to it asap. I think my blogspot site will also be used as a draft template for my neocities one or just as a place where I'll post updates of the making of.


Take care and until next time.

Kisses, Popi

 

Comments

Post a Comment

Popular Posts