Hi~!

[Kyttias]

I'm new here, so here's a quick introduction to me:

I'm not shy when it comes to working with code. In fact, coming into this, I don't even have a single adoptable pet design in mind. I'm an artist, too, and probably better at art than coding, but I have a deep love of coding. I'll be turning 24 early this summer, and then shortly after, I'll be moving in with the love of my life.

As far as coding goes, I have some experience with php. I've been tinkering for two years and I've got a book and all of Google on my side. Basic comprehension? Yes. Trial and error modifying? Totally. I'm optimistic. But my strong points lie more towards jQuery. If I can bring anything worthwhile to the table, I'll consider sharing it!

The first thing I'm doing with my code is implementing Bootstrap. It's a css framework, so a lot of the basic styling work is done. Bootswatch provides lots of basic themes for Bootstrap, but there are sites like this one that allow you to quickly make your own color schemes all ready for Bootstrap. There's a huge community following for Bootstrap, so that's why I'm choosing to implement it into my first template.

So far? So good. Here's a screenshot.

But because of the way links are populated with Mysidia, I've had to get creative with hacking in the navbar. In the end, it'll be a blend between the drop down menus that come with Mysidia, but with as much of the look of Bootstrap as I can manage. I'm afraid to muck with Mysidia's code too much because I really do want to manage my links through the admin panel instead of by hand.

My major question is? How can I add a caret (down arrow) after the links in the navigation bar that have a drop down (which is most of them, and for that matter, I feel I can safely remove 'Home')?

Basically I want to add in:

<b class="caret"></b>

After each link. Can that be done by modifying class_menu.php somehow?

Hmm~hmm~ this and many more mysteries to come, I think.

[squiggler]

Welcome! I'm not sure how to answer your question- maybe adding an image to the end of the line?- but one thing I think you might want to do is make the top links buttons instead of links; they all link to the homepage anyway, and hover-over drop down menus are unfriendly to touch-screen users.

Anyway, welcome, welcome! Hopefully you like it here.

[Kyttias]

Originally Posted by squiggler

Welcome! I'm not sure how to answer your question- maybe adding an image to the end of the line?- but one thing I think you might want to do is make the top links buttons instead of links; they all link to the homepage anyway, and hover-over drop down menus are unfriendly to touch-screen users.

Anyway, welcome, welcome! Hopefully you like it here.

Oh yes, I'm quite aware of the touch-screen issues! That's part of the reason I'm using Bootstrap. Once the page gets too small, it figures it's probably on a mobile device, and the layout automatically changes. I definitely want to try and make a mobile-first site, even though there's not a huge market for adoptables like that (there should be, why not!).

The links are currently 50px tall and as wide as the words are long. It makes for a pretty big pressing surface. But the drop downs are going to be hard to make like that, so each top link will probably have it's own page, so all parts of the site can be found, even if the drop down menu can't be used on small devices. It's always good to have more than one way to get to things.

Ah, and I found a way to answer my own question, using css:

▼ This was the symbol I wanted to use. It's an html entity of ▼ but I had to convert it to something else to use it in css with the :after code. (I used this site to find out it's css equivalent.)

.ddmenu ul li a:after {content:'\25BC';}
.ddmenu ul li ul a:after {content:'';}

Produces the desired effect (the second line above makes it so the caret doesn't appear in the drop downs as well):


They're a little bigger than I wanted, so I'll probably scale down their size with css as well, ahaha?

[squiggler]

That's awesome! You're really good at this. You should have no trouble with making and running your own site!

[Hall of Famer]

Welcome to Mysidia Adoptables Kyttias, looks like you are quite good at CSS and templating, which is a good thing. You have some very interesting ideas, good luck building your adoptables site.

[Kyttias]

Thanks! I've been working with the basics what feels like my whole life. (My first website was a Pokemon site in 3rd grade, ehehehe. I remember my mother hated the idea of me having it because the internet was, and always has been, an unsafe place for children at large.)

But, to be honest, the deep code in the Mysidia script is really, really making me scratch my head. I'm not used to Smarty templating and working with such strict functions. It looks really secure, but I'm at a loss with how to work with it in most places. Trying to figure out how things are directly rendered to html is making me all .

For example, I'd love to mess around with the registration script, and add in ajax verification to directly check if a username has been taken or not (before the form has even been submitted), etc. I know how, and I've built frameworks myself and gotten that to work. (As well as other 'live' verifications during the registration process, such as going 'hey that doesn't look like a real email address' or 'your password requires a number'.) I can totally implement it......... but I'm afraid I might have to build an entirely new form, if I can't figure out how the html is currently being rendered so I can add in necessary classes and blank labels to be dynamically filled here and there.

A smaller example would be a creating a more stylized login form. It's just... again, a matter of finding where that html is being created and how I can add custom classes for my css. And sometimes its not classes I want to add, for example, on form inputs, placeholder attributes? Basically what fills an otherwise empty input field by default, and disappears when the field is brought to focus to type in. I could put 'username' in the input field itself instead of having the text label sit above it.

So yeah, that's basically my largest setback so far, lack of comprehending the functions that compile the forms and render the html. All that GUI stuff, basically.

[IntoRain]

I have encountered some issues with that recently when I finally had the courage to try out some Javascript xD I still don't get how the html is created, however there's one that is the same for every page, which you noticed already, and then in the php page I've gained the habit of echo'ing whatever new html I want to add. For example:

When I had to use jQuery on the registration page, I had to add in a new div to the HTML of the page specifically (I wanted a div to disappear and appear depending on what radio button I clicked). So like $document->add(new Comment("<div class='whatever'>")); (random form stuff I wanted to make appear or disappear here) $document->add(new Comment("</div>"));.
For input names and stuff, I checked what they were by viewing the html of the registration page and went with that

So I think you are really going to need to add in your own html and for each page specifically (echo'ing in the php file xD ) I did it through the Comment objects since that works like echos but for the inside page you are working on.

If you find another way, please share because I'm sure there are more people needing it badly xD

Also, welcome to mysidia!

[Hall of Famer]

Well I guess the problem right now is that the GUI API is not designed to handle javascript or AJAX in an effective way. At this stage pretty much none of Mysidia's pages have javascript interaction, and this will remain at least till Mys v1.5.0. I do have a plan by Mys v1.4.0 to enable users to add javascript events such as onclick, onsubmit easily through the GUI event methods. Past Mys v1.5.0 however, the GUI API will be full-fledged and should be able to handle complex AJAX requests.

[Kyttias]

I see~

Yes, I figured I could probably change the rendering of the page with jQuery right before the DOM finishes loading.

(I did try modifying the GUI but not every class liked the idea of echos or prints and I really don't want to try and make my own functions in something I don't understand, unless I can be handed some precise documentation. I modified it a tiny bit to get my navbar working, but that was just to quickly add classes to the existing ul elements. I couldn't find a way to add classes to the li inside the lists, since that wasn't part of the code, and they're likely automatically generated.)

So, jQuery it is. I'll send in the verdict~ I'm so glad I bought a pocket manual for myself for Christmas.

And I finally got around to making my first test adoptable (actual size may be smaller ahaha):


It'll be a while before I have a live site to show off. Many free hosts threaten to delete inactive sites within 30 days or so, and many others forbid 'game scripts' in their terms of service - even some of the ones being highly recommended elsewhere on this forum. So, free hosting at your own risk, and you get what you pay for. I might put up something as a proof of concept.

This summer I can host the site from my laptop directly using WAMP, since I'm building locally... but my current living situation has me unable to send it live to the web that way. Between the mess of two routers, and the fact they refuse to give me the password to configure it properly, my poor baby can't port forward its way out of a paper bag. I'll be moving later, and then I can host stuff myself. If I get serious, I may even buy a legit server, rather than hosting it from my laptop. But I think my laptop can handle a dozen or two beta testers.