Discuss Scratch

dertermenter
Scratcher
1000+ posts

derter-menter.github.io

my website so far

I’ve learnt classes and how to make a button, how can I make it so the buttons go to a link when you press it?

Last edited by dertermenter (Jan. 16, 2022 22:16:27)




Thanks to @Prime689 for the banner!

Super_Scratch_Bros20 wrote:

Dertermenter the detrimental destroyer! Dertermenter the foruming enjoyer! Dertermenter, destroyeth all the spam! Dertermenter, with speed like shazam! Dertermenter, trolls as his rival! Dertermenter, fit for foruming survival! Dertermenter, active as an eagle! Dertermenter, loyal as a beagle! Dertermenter, detailed as a thesaurus! Dertermenter, mighty as a tyrannosaurus! Dertementer, combatant of supporters! Dertermenter, suggestions directory sorter! Dertermenter, true neutral of them all!
Chiroyce
Scratcher
1000+ posts

derter-menter.github.io

dertermenter wrote:

I’ve learnt classes and how to make a button, how can I make it so the buttons go to a link when you press it?
I'll make a PR!







April Fools' topics:
New Buildings in Scratch's headquarters
Give every Scratcher an M1 MacBook Air
Scratch should let users edit other Scratchers' projects
Make a statue for Jeffalo
Scratch Tech Tips™
Make a Chiroyce statue emoji


<img src=“x” onerror=“alert('XSS vulnerability discovered')”>

this is a test sentence
Socialix
Scratcher
1000+ posts

derter-menter.github.io

dertermenter wrote:

my website so far

I’ve learnt classes and how to make a button, how can I make it so the buttons go to a link when you press it?
From what I did, you can put the button inside a link and it will redirect you to a site if you press it:
<a href="https://scratch.mit.edu/projects/editor"><button>Scratch Online Editor</button></a>

socialix - wwdc - why is there a penguin breaking my window? - i use inconsistent operating system version 10 btw - signatures are overrated
Chiroyce
Scratcher
1000+ posts

derter-menter.github.io

Socialix wrote:

From what I did, you can put the button inside a link and it will redirect you to a site if you press it:
I did the opposite, link inside the button
https://github.com/derter-menter/derter-menter.github.io/pull/4







April Fools' topics:
New Buildings in Scratch's headquarters
Give every Scratcher an M1 MacBook Air
Scratch should let users edit other Scratchers' projects
Make a statue for Jeffalo
Scratch Tech Tips™
Make a Chiroyce statue emoji


<img src=“x” onerror=“alert('XSS vulnerability discovered')”>

this is a test sentence
dertermenter
Scratcher
1000+ posts

derter-menter.github.io

Chiroyce wrote:

Socialix wrote:

From what I did, you can put the button inside a link and it will redirect you to a site if you press it:
I did the opposite, link inside the button
https://github.com/derter-menter/derter-menter.github.io/pull/4
I was working on this when you did the pull, so the pull has conflicts. You seemed to have added a class that makes all buttons text colour white - this is perfect, but my code doing it doesn’t work. Please may you (or anyone) do another PR making the text colour on buttons white?



Thanks to @Prime689 for the banner!

Super_Scratch_Bros20 wrote:

Dertermenter the detrimental destroyer! Dertermenter the foruming enjoyer! Dertermenter, destroyeth all the spam! Dertermenter, with speed like shazam! Dertermenter, trolls as his rival! Dertermenter, fit for foruming survival! Dertermenter, active as an eagle! Dertermenter, loyal as a beagle! Dertermenter, detailed as a thesaurus! Dertermenter, mighty as a tyrannosaurus! Dertementer, combatant of supporters! Dertermenter, suggestions directory sorter! Dertermenter, true neutral of them all!
BarelySmooth
Scratcher
1000+ posts

derter-menter.github.io

dertermenter wrote:

Chiroyce wrote:

Socialix wrote:

From what I did, you can put the button inside a link and it will redirect you to a site if you press it:
I did the opposite, link inside the button
https://github.com/derter-menter/derter-menter.github.io/pull/4
I was working on this when you did the pull, so the pull has conflicts. You seemed to have added a class that makes all buttons text colour white - this is perfect, but my code doing it doesn’t work. Please may you (or anyone) do another PR making the text colour on buttons white?
When you use the .a CSS selector, you are selecting any element that has a class with the name “a”.

But it looks like you are trying to select all anchor (link) tags, which is why you shouldn't prefix the selector with a dot.


/* This makes all elements having the class name "a" become white in colour. This isn't what you want. */
.a {
   color: white;
}
/* On the other hand, this line of CSS will make sure that all links (anchor tags) are white in colour */
a {
   color: white;
}
/* The above code works fine, but now all links on the page are white in colour. To fix this, you can modify the selector so that only links inside buttons are white in color */
button a {
   color: white;
}

You can read more about Type selectors and Class selectors on MDN.

Last edited by BarelySmooth (Jan. 15, 2022 19:58:48)







(This text below is my forum signature)

Scratch Team never wrote:

Good suggestion. Let’s add that.
no offense to ST btw – Credit to @Fun_Cupcake_i81 for the above portion of the signature

Also, Nobody supports the support convention



404. That's an error.

The requested signature was not found under this post.
That's all we want you to know.
Chiroyce
Scratcher
1000+ posts

derter-menter.github.io

dertermenter wrote:

Please may you (or anyone) do another PR making the text colour on buttons white?
Seems fixed… did you fix it? If you did, good job!








April Fools' topics:
New Buildings in Scratch's headquarters
Give every Scratcher an M1 MacBook Air
Scratch should let users edit other Scratchers' projects
Make a statue for Jeffalo
Scratch Tech Tips™
Make a Chiroyce statue emoji


<img src=“x” onerror=“alert('XSS vulnerability discovered')”>

this is a test sentence
helloworldbyeworld
Scratcher
1000+ posts

derter-menter.github.io

I have a suggestion. Maybe you could make the info text in a sans-serif font? You can also use Google Fonts for more fonts that you can use on the website.

Helloworldbyeworld | 1150+ posts | New 3D pen digit animation project out:




I'm part of The Forum Helpers!


dertermenter
Scratcher
1000+ posts

derter-menter.github.io

helloworldbyeworld wrote:

I have a suggestion. Maybe you could make the info text in a sans-serif font? You can also use Google Fonts for more fonts that you can use on the website.
Nah I like the default font



Thanks to @Prime689 for the banner!

Super_Scratch_Bros20 wrote:

Dertermenter the detrimental destroyer! Dertermenter the foruming enjoyer! Dertermenter, destroyeth all the spam! Dertermenter, with speed like shazam! Dertermenter, trolls as his rival! Dertermenter, fit for foruming survival! Dertermenter, active as an eagle! Dertermenter, loyal as a beagle! Dertermenter, detailed as a thesaurus! Dertermenter, mighty as a tyrannosaurus! Dertementer, combatant of supporters! Dertermenter, suggestions directory sorter! Dertermenter, true neutral of them all!
MagicCrayon9342
Scratcher
1000+ posts

derter-menter.github.io

To make the text a bit nicer looking you could add a fixed width and height div and put the text in it and either put it on the left center or middle. It'll look great i promise.

signature
helloworldbyeworld
Scratcher
1000+ posts

derter-menter.github.io

I also have some other suggestions.

1. Maybe wrap the link buttons and the welcome text in a div to make a top bar?
2. Maybe make the link buttons have some border-radius so they are rounded and add a ~2-5px border for them so they look nicer?
3. Maybe add some more space between the welcome and the text?

Last edited by helloworldbyeworld (Jan. 17, 2022 19:19:14)


Helloworldbyeworld | 1150+ posts | New 3D pen digit animation project out:




I'm part of The Forum Helpers!


MagicCrayon9342
Scratcher
1000+ posts

derter-menter.github.io

helloworldbyeworld wrote:

(#31)
I also have some other suggestions.

1. Maybe wrap the link buttons and the welcome text in a div to make a top bar?
2. Maybe make the link buttons have some border-radius so they are rounded and add a ~2-5px border for them so they look nicer?
3. Maybe add some more space between the welcome and the text?
It's generally not that easy to make a navbar that actually touches the corners. And getting a good color. For that Tailwind would be good

signature
dertermenter
Scratcher
1000+ posts

derter-menter.github.io

MagicCrayon9342 wrote:

To make the text a bit nicer looking you could add a fixed width and height div and put the text in it and either put it on the left center or middle. It'll look great i promise.
I have no clue do to what you said

helloworldbyeworld wrote:

I also have some other suggestions.

1. Maybe wrap the link buttons and the welcome text in a div to make a top bar?
2. Maybe make the link buttons have some border-radius so they are rounded and add a ~2-5px border for them so they look nicer?
3. Maybe add some more space between the welcome and the text?
I could do 3, don’t know how to do the first two



Thanks to @Prime689 for the banner!

Super_Scratch_Bros20 wrote:

Dertermenter the detrimental destroyer! Dertermenter the foruming enjoyer! Dertermenter, destroyeth all the spam! Dertermenter, with speed like shazam! Dertermenter, trolls as his rival! Dertermenter, fit for foruming survival! Dertermenter, active as an eagle! Dertermenter, loyal as a beagle! Dertermenter, detailed as a thesaurus! Dertermenter, mighty as a tyrannosaurus! Dertementer, combatant of supporters! Dertermenter, suggestions directory sorter! Dertermenter, true neutral of them all!
god286
Scratcher
1000+ posts

derter-menter.github.io

MagicCrayon9342 wrote:

It's generally not that easy to make a navbar that actually touches the corners. And getting a good color. For that Tailwind would be good

It's easy to do that. Just put it at the top of your HTML and make width and height fit the screen.

Last edited by god286 (Jan. 17, 2022 21:12:05)


meowclient
Typescript and ESM support
Kind-of good documentation
Easy to use
meowclient


                 _ ____  ___   __   
__ _ ___ __| |___ \( _ ) / /_
/ _` |/ _ \ / _` | __) / _ \| '_ \
| (_| | (_) | (_| |/ __/ (_) | (_) |
\__, |\___/ \__,_|_____\___/ \___/
|___/
^ inspired by @Chiroyce, made with figlet
Chiroyce
Scratcher
1000+ posts

derter-menter.github.io

MagicCrayon9342 wrote:

It's generally not that easy to make a navbar that actually touches the corners
It's easy, set margin and padding on the root to 0; then stretch the navbar's div to 100vw; and preferred amount of vh;

dertermenter wrote:

I could do 3, don’t know how to do the first two
I can make a PR #2 for now…

edit: MagicCrayon made a PR, so i'll add it to their fork

Last edited by Chiroyce (Jan. 18, 2022 02:49:40)








April Fools' topics:
New Buildings in Scratch's headquarters
Give every Scratcher an M1 MacBook Air
Scratch should let users edit other Scratchers' projects
Make a statue for Jeffalo
Scratch Tech Tips™
Make a Chiroyce statue emoji


<img src=“x” onerror=“alert('XSS vulnerability discovered')”>

this is a test sentence
MagicCrayon9342
Scratcher
1000+ posts

derter-menter.github.io

Chiroyce wrote:

(#35)

MagicCrayon9342 wrote:

It's generally not that easy to make a navbar that actually touches the corners
It's easy, set margin and padding on the root to 0; then stretch the navbar's div to 100vw; and preferred amount of vh;

dertermenter wrote:

I could do 3, don’t know how to do the first two
I can make a PR #2 for now…
root? huh? i don't know of a root tag.

signature
Chiroyce
Scratcher
1000+ posts

derter-menter.github.io

MagicCrayon9342 wrote:

root? huh? i don't know of a root tag.
Asterisk (*) means all elements, so if you add this to the to the CSS file, then the browser-set margins will be reset. Not root, sorry, I meant the asterisk (*).

* {
    margin: 0;
    padding: 0;
}







April Fools' topics:
New Buildings in Scratch's headquarters
Give every Scratcher an M1 MacBook Air
Scratch should let users edit other Scratchers' projects
Make a statue for Jeffalo
Scratch Tech Tips™
Make a Chiroyce statue emoji


<img src=“x” onerror=“alert('XSS vulnerability discovered')”>

this is a test sentence
god286
Scratcher
1000+ posts

derter-menter.github.io

Chiroyce wrote:

MagicCrayon9342 wrote:

root? huh? i don't know of a root tag.
Asterisk (*) means all elements, so if you add this to the to the CSS file, then the browser-set margins will be reset. Not root, sorry, I meant the asterisk (*).

* {
    margin: 0;
    padding: 0;
}
Wouldn't
body {
    margin: 0;
    padding: 0;
}
be better?


meowclient
Typescript and ESM support
Kind-of good documentation
Easy to use
meowclient


                 _ ____  ___   __   
__ _ ___ __| |___ \( _ ) / /_
/ _` |/ _ \ / _` | __) / _ \| '_ \
| (_| | (_) | (_| |/ __/ (_) | (_) |
\__, |\___/ \__,_|_____\___/ \___/
|___/
^ inspired by @Chiroyce, made with figlet
dertermenter
Scratcher
1000+ posts

derter-menter.github.io

https://derter-menter.github.io/dark

Trying to make a dark mode, then a button to switch between the two. How can I change the text colour in just 1 CSS file?



Thanks to @Prime689 for the banner!

Super_Scratch_Bros20 wrote:

Dertermenter the detrimental destroyer! Dertermenter the foruming enjoyer! Dertermenter, destroyeth all the spam! Dertermenter, with speed like shazam! Dertermenter, trolls as his rival! Dertermenter, fit for foruming survival! Dertermenter, active as an eagle! Dertermenter, loyal as a beagle! Dertermenter, detailed as a thesaurus! Dertermenter, mighty as a tyrannosaurus! Dertementer, combatant of supporters! Dertermenter, suggestions directory sorter! Dertermenter, true neutral of them all!
Chiroyce
Scratcher
1000+ posts

derter-menter.github.io

dertermenter wrote:

Trying to make a dark mode, then a button to switch between the two. How can I change the text colour in just 1 CSS file?
CSS variables?

Last edited by Chiroyce (Jan. 23, 2022 14:57:08)








April Fools' topics:
New Buildings in Scratch's headquarters
Give every Scratcher an M1 MacBook Air
Scratch should let users edit other Scratchers' projects
Make a statue for Jeffalo
Scratch Tech Tips™
Make a Chiroyce statue emoji


<img src=“x” onerror=“alert('XSS vulnerability discovered')”>

this is a test sentence

Powered by DjangoBB

Standard | Mobile