Need Suggestions, Advice and possible Guidance...

[MrLiveMusic]

I hope this is the right thread for this post.

Okay, I’m feeling frustrated right now, so I’ll do my best to keep this brief and to the point while minimizing the journey leading here.
I'm a musician by trade and a novice when it comes to working on websites.
I had an old website (see links below) that functioned adequately, though it was very outdated and built with old HTML.

Originally I used CoffeeCup HTML Editor to create it.

I needed help with my email form (which was not secure and didn’t have a functioning Captcha), I turned to the CoffeeCup Forums.

In the forums, I posted; needing assistance with my email form, as well as wanting to change the layout of my audio samples from one column in my old site to three columns. In the meantime, I decided to use WIX to create a temporary audio site until I could resolve those issues (see link below; it has a three-column layout).

A programmer from CoffeeCup offered to help but, as it turned out, he didn't have much experience with HTML5. He used CoffeeCup’s “Site Designer” software, which is a WYSIWYG HTML5 editor, not horrible but it's somewhat limited in its capabilities. When it came to fixing or tweaking “specialty” items (the audio page and email form), the programmer encountered challenges. Ultimately, he persuaded me to convert the entire site to “Site Designer.”

(One other thing to mention, He did not tell me that due to his age, he had site and hearing issues. This caused him to make most text very large. UPDATE: This issue was made better now)

I know this may be a bit confusing, but now I just need to tackle the issues using HTML5 to get everything functioning properly.

The site has been redone with the “Site Designer” software, and most elements work, but the two issues I originally sought help for still remain unresolved. I plan to fix these myself using my HTML5 editor, but it’s been years since I worked on a website. I’m a bit slow because technology has advanced significantly, and my knowledge is outdated.

If anyone can guide me on how to address these issues, I would greatly appreciate it.

For your information, I’ve considered NOT having an email form; a contact email link could suffice in a pinch.
However, the audio section is crucial and needs to operate professionally. Right now, I have it working, but the appearance is too “cartoonish” for my taste and the operation “feels” a bit wonky. I would prefer to revert it to how my old site functioned or, if possible, to achieve the look and functionality of the WIX temporary site.
I’m willing to tackle this myself if I can get some assistance, advice and how to guidance.

Note: I still have the original backup files from my old site, which include the elements that made the audio work. I mention this because it may be possible to take the elements from the old site, change it from a single column to 3 columns, and add my mp3’s. Unfortunately, I'm unsure where to find these items within the backup file folders.

There you have my lengthy story. I apologize for the length of this post. I thought it was important to share my journey.

Thank you for any advice or help on where to start with this project!

Old Site with original Audio player:
https://web.archive.org/web/20250208031049/https://www.jumpcity.rocks/

What Audio player should operate and look like:
https://as5609.wixsite.com/jumpcity/music

What it looks like now on my server:
https://jumpcity.rocks/audio.html

 

[bretbernhoft]

Let's start off my getting clear on what you are seeking to accomplish.

It sounds like you want to change the layout of your audio samples page from one column to three columns, is this correct? And you would like to upgrade from an insecure contact form, to a secure one; is this also correct?

 

[MrLiveMusic]

Thank you for asking.
Yes, I would like to make the audio page 3 columns. In addition, I would like it to look "straight" looking ( for lack of a better term), like the one on my old site or the "WIX" site.

Yes, if I go with the Email Form, I would like it first, to work again. (After it was worked on, it no longer sends.) And yes, I would like it to be secure to limit the amount of spam.

So, if I knew where to look in all the files, I could change it. I have not found anything related to it in the CSS or the HTML files.

UPDATE: I just found that the old site archive no longer appears in full. However, FYI, I have the full backup from that site, which has the HTML, CSS, and player only in a single column. The font and style are closer to what I would like. So, that part is good.

Again, I just need to know where I am looking for these items, especially on the new site on the server.

 

[bretbernhoft]

My apologies for any confusion on my end. But I have a few clarifying questions to ask, so I can better understand where you are at with your original request.

Three Columns For Audio Samples​

Of the three links you shared in your original message/post, which URL is the website/domain where you would like the final website changes to be displayed at? Or have you already accomplished what you set out to do?

The reason why I ask is because I can see on this URL, you already have the three columns. Is the jumpcity.rocks URL where you want the three-column changes to be displayed at?

Or are the three columns intended to be displayed on another website?

Secure Contact Form​

Are you open to using/embedding a third-party service for your secure contact form? This route would likely be the most direct and the easiest way to enable website visitors to contact you.

Or do you want to keep everything in-house and do it all yourself?

If you are wanting to do the contact/submission form yourself, I can point you in the correct direction for getting it done. But there is a bit more involved in making sure everything is correct and secure.

Summary​

With a little more information, I will clearly understand what your needs are and where you are at with your website changes. We can move forward with the correct solutions based on your response.

 

[MrLiveMusic]

Three Columns For Audio Samples​

Of the three links you shared in your original message/post, which URL is the website/domain where you would like the final website changes to be displayed at?
www.JumpCity.Rocks (This is the final site, the others were attempts to make it. )

Or have you already accomplished what you set out to do?
No, not at all.

The reason why I ask is because I can see on this URL, you already have the three columns. Is the jumpcity.rocks URL where you want the three-column changes to be displayed at?
Yes! The three columns you see are on a temp site (WIX.com) which is a site where you pick and choose what you want and it automatically makes the site. No knowledge necessary for this. My site is made from scratch. (again, the bad thing is that I did not create my site for jumpcity.rocks.
Now, that site (WIX) with the 3 columns is what I want for my site (JumpCity.Rocks)


Or are the three columns intended to be displayed on another website?
Yes, my JumpCity.Rocks Site

Are you open to using/embedding a third-party service for your secure contact form? This route would likely be the most direct and the easiest way to enable website visitors to contact you.
Yes, I am open to whatever works.

Or do you want to keep everything in-house and do it all yourself?
No, not really. Using a 3rd party to embed would be fine.
I am trying to do some changes myself. This way I can reintroduce programming to myself.

If you are wanting to do the contact/submission form yourself, I can point you in the correct direction for getting it done. But there is a bit more involved in making sure everything is correct and secure.
No, at least not at this point. I have much to learn as it is already.

Thank you for taking the time to ask. I truly appreciate it.

 

[MrLiveMusic]

UPDATE:
I have my audio samples page at ( JumpCity.Rocks ) working correctly.
2 things...
First, the order of the song and artist is backwards. It should have the song listed first, then the artist. Instead, it is the opposite.
I took the song text and moved it above the artist text. When I did, the music wouldn't play. So, I moved it back for now.
How can I change the order of the artist and tune name, without messing up the player?

Secondly, I would like the text to look like it is on the "WIX" site ( https://as5609.wixsite.com/jumpcity/music ).
Is this possible?
I tried to make it happen myself, but evidently, I couldn't make it happen.

Thanks

 

[bretbernhoft]

My apologies for the delay in replying to you. I have been ill and trying to get back on my feet. I will respond as soon as I am able to.

 

[MrLiveMusic]

Hey Bret, I hope you get better...

In the meantime, when you get better, I want to fix something I just messed up.

the "Audio" page.

I fixed the issue with the title of the song and artist being backwards. Easy fix. ( I changed the title and artist name in the HTML page by simply exchanging them. However, now that the title is first and the artist is second, the text above the .mp3's is being cut off. ( I am talking about the text at the top of the page that introduces the mp3 section. This seems to be happening in all browsers. ( I check with Chrome, Firefox, Opera, DuckDuckGo, LibreWolf, and Brave)

Both the top of the text (the title) and the bottom of the "Message from Ash"... text is cut off.

Any ideas why this would happen and how to fix it?

Thanks and feel better.

 

[bretbernhoft]

Thank you for your well-wishes and patience with me. I am feeling much better now. I had a long weekend filled with great people. So I am back on track.

I took a look at both this link and this link. After doing so, I am seeing you likely fixed the styling issue described in your previous message. Is that the case?

The image below is a screenshot of what I am seeing at the moment on your "jumpcity.rocks" website:



If the issue with text being cutoff has been solved, how else can I assist you with your website?

 

[MrLiveMusic]

Glad to hear your better.

No, the site is not fixed.
When I look at the page on my phone, it seems correct, similar to what you posted.

When I look at it on my laptop, here is what it looks like: "see attached"

This is in most browsers I use.
Chrome, DuckDuckGo, Opera, FireFox, LibreWolf, Brave. All cut off the text the same.

What ya think?
PS: I am starting to learn CSS. This site is mostly controlled by CSS, if not all of it. But still have not found where to change the style or a possible container.

 

[MrLiveMusic]

 

[bretbernhoft]

I think I have found the source of the spacing/styling issue being described.

What follows is not me "telling you what to do", because I don't have access to your original website files and therefore cannot guarantee anything. With that said, you might consider the following observations:

In your main.css website file, you have a particular CSS rule responsible for styling the "Message From Ash" text section. The specific code I am referring to are lines 4075 through 4077. More specifically on line 4076 you have a CSS rule for determining the height of the "Message From Ash" text section when a visitor's browser is (roughly) at least 1025 pixels wide. The line of code looks like this:



On line 4076, when I change the number 80 to 100 and shrink the width of my browser, the audio samples are no longer covering the "Message From Ash" text element above it. In other words, you might consider changing line 4076 in your main.css website file to the following: height:100vh;

However, it is important for to mention, your monitor most likely has a different resolution than mine. Meaning your browser is a different width than my browser by default. So I cannot be entirely certain if the height:100vh; code change will work. You might need to change the CSS rule on line 4076 to height:110vh or height:120vh; in order to get the desired result on your screen.

As a word of caution, by changing this line of code, you might break the viewing experience for other visitors to your website. The safest route is to have a professional web developer resolve this styling issue. But if you were going to do it yourself, the observations described above may take care of the problem.

Let's say you do decide to change line 4076 in your main.css file, but the problem hasn't been resolved. Please feel free to share the results and any screenshots you think would help me understand what is going on. I am always happy to take a look and offer my opinion.

I hope this helps!

 

[MrLiveMusic]

Thank you for being worried about telling me what to do. I came here for that, so no worries ever.
And you were right. I knew it was something like that, I just didn't know what it was called. Still learning.
It worked, I changed main.css line 4076 from 80 to 100. And now it looks like your example does. Perfect in all browsers on my laptop.

Can you take a look at the page again, and tell me if it is ok from your point of view?

http://www.jumpcity.rocks/audio.html

BTW, my laptop is an HP Envy 17"
I use the recommended display resolution 3840 x 2160

PS: Thank you again. Due to what you said about the name of the "Ash" text, I learned something. I think it is that in the HTML, the style designation is the name that is in the CSS? Is that correct?

I am going to see what the designation is for the image I have on my "SHOWS" page. I will use it as an exercise to see if I can get that image to fit better. I am not asking here and now, just letting you know you helped me undertand something I couldn't wrap my head around before.
My quest, try to fix the image to fit so that I can see the whole image, particularly side to side. But more on that later.

 

[bretbernhoft]

I am glad the suggestion worked out for you. It is my pleasure to assist.

Regarding whether the website looks correct on my screen, here is a screenshot from when I change/reduce the size of my browser to be about 1000 pixels wide:



The "Thank You for listening." text is visible, but just barely. You might consider changing line 4076 in main.css from 100 to 110 (or 120), just to be sure all of your website visitors have a little extra room between the text and the audio samples. But that is up to you and your preferences.

Regarding this question:

I think it is that in the HTML, the style designation is the name that is in the CSS? Is that correct?

The style designation in the CSS (which in this case is referred to as a "class") is indeed a name for the HTML element being styled.

Here is the CSS you adjusted:



Notice the ".container.hero-overlay-video" text. These are the two "class names" given to the HTML element you made a change to. Here are those class names in the corresponding HTML element:



See how the text (in the HTML tag/element) says 'class="container hero-overlay-video"'? Those are the class names assigned to this particular HTML element. When you use those names in the CSS file, you gain access to the styles for the related HTML element(s). Does this make sense?

It is also important to point out, in addition to class names, there are also "id" names. Classes can be used on multiple HTML elements. Whereas the ids are only supposed to be used on individual HTML elements. Classes and ids can be combined for varying degrees of specificity and control over your web pages.

I am happy to share a few learning resources to help clarify the relationships between HTML elements, class names, ids and CSS styling.

Learning how to code is an excellent skill to have, and will enable you to make more elaborate changes or even build entirely new websites. That is definitely something I recommend pursuing.

 

[MrLiveMusic]

It is beginning to make sense.
I come from a background of building websites. But many years ago, back when the internet was new. It was HTML (no 5) and basic CSS programing.

Today, it has evolved tremendously. Your knowledge is impressive. I truly appreciate, more than I can express here, your help and suggestions.

I know you must be busy, but I will continue to ask certain questions regarding my website and how to make it better.
I need this site to promote my band. Right now at this time, it will be the only way I can not only make an income, but lead to a dream I have.
That dream is to open my own performance venue for my band and others like it. Music business today has changed. Not like it used to be, so very difficult for musicians to survive.

Anyway, It all starts with this website. Eventually, once life gets better, I will need a professional site built for the Dinner/Concert Theater I am going to open.

But first, this site. I need to get it to the point where it is professional looking and working properly.
Right now, lots of small issues. I have also fixed a whole lot of stuff, like crazy stuff the original programmer did.

Anyway, I digress... lol

I am going to start trying to work on one item at a time.
Right now, I am going to work on the suggestion you made regarding the spacing of the text and audio player container.
I agree with you suggestion that I need to put more space just to make sure other viewers see the full text.
So, let me do that and lets see how it turns out.

Is it ok that for each item I am working on, that I start a new thread?
That way we don't have to keep scrolling through what could be a really long thread.

 

[bretbernhoft]

Thank you for your kind words. I am happy to offer suggestions and points to consider, especially for a creative endeavor such as your band's website. Those are the kinds of projects which make the internet worth visiting in my opinion.

Please feel welcome to post further questions as needed. I will help you as best I can. And there are a number of other folks on HTML Forums who can assist as well. Which is quite a nice thing.

Starting new threads for each item is perfectly reasonable in my opinion. I can understand not wanting to scroll through dozens of posts in one thread for specific answers.

I look forward to seeing how your website develops.

 

[MrLiveMusic]

Ok, I have worked on my site. Fixed some items, caused new ones... lol

I fixed the extra space at the bottom of my footer.
I fixed my audio list of tunes. I got the name of the tune listed first followed by the artist. When I did this the player stopped working.


Got the Player working now... MOSTLY

2 new issues have developed in the process.

1. The main player tool at the top of each of the 3 columns of tunes: Does not have a "forward" (next tune) function.

2. More importantly, when you clicked on a tune, and then clicked on another tune, it would only play one tune at a time.
Now, for a reason I can not figure out, a second tune can play simultaneously. Which is very bad.

http://www.jumpcity.rocks/audio.html

Any help on how to correct both of these items. I have going over what I did to the lists, but can not seem to figure it out.

Any help would be appreciated.