How can I....?

Everything related to the visual and coding aspects of websites.
User avatar
Camy
Administrator
Posts: 1511
Joined: Mon Jul 16, 2012 9:21 pm
Location: Texas
Contact:

Fri Mar 18, 2016 7:28 pm

Sometimes we wonder if we can code something in a way that's easier than what we're trying to do or just have a small question but don't want to flood the forums all the time.

This topic is the solution for those who get stuck [and believe me, we all do] and everyone else can come in with the solutions.
I accept your challenge, "high prince", but I am no general.

User avatar
dubiousdisc
Administrator
Posts: 2602
Joined: Thu Jun 21, 2012 5:49 pm
Contact:

Mon Mar 21, 2016 1:28 pm

Thank you for making this thread Camy :D

WELCOME TO THE DEN OF THE NICE CODE NINJAS. HOW CAN WE HELP YOU.

User avatar
Robin
Events Staffer
Posts: 3161
Joined: Thu Aug 07, 2014 3:15 pm
Location: North Carolina, USA
Contact:

Mon Mar 21, 2016 8:10 pm

*politely dings helpdesk bell*

I've been tinkering with my Bootstrapified layout archive, but I haven't uploaded any changes yet because of a few problems. Here's a screenshot of the newish design thus far:

Image
(apologies if it's too big for the forum /o\ )

1: I want to use a flyout info panel on the left side of the page (where the black bar is right now), a la Feedly and this tutorial, but I'm afraid it won't be mobile accessible anymore if I do that (i.e., "clicks" and "hovers" don't usually work on mobile quite like they do on regular computers, or the flyout panel might cover the whole site).

2: I want to make it easy to go between pages of the site without hard-coding in the URLs for "previous" and "next" at the bottom of each page. Is that possible with the non-CMS setup I have right now?

3: I want to have my site title, "Disguises," display in text that is turned 90 degrees to the left on the flyout panel before somebody clicks it. I've made this text into an image for the purposes of this mockup, but it's not an ideal solution. (Also, how to align said text so that it falls in the vertical middle of the window at any resolution? I tried doing margin-top: 50%, margin: auto, AND padding-top: 50% last night, to no avail.)

(also if anything doesn't make sense, I apologize for that too--I still don't know some of the terms for "freakin amazing thing this website over here does" xD)
~ a dream is a wish your heart makes ~
withinmyworld.org

User avatar
Camy
Administrator
Posts: 1511
Joined: Mon Jul 16, 2012 9:21 pm
Location: Texas
Contact:

Tue Mar 22, 2016 4:08 am

I accept your challenge, "high prince", but I am no general.

User avatar
Robin
Events Staffer
Posts: 3161
Joined: Thu Aug 07, 2014 3:15 pm
Location: North Carolina, USA
Contact:

Tue Mar 22, 2016 10:32 am

@Camy: OOOOOOO I hadn't seen the Slideout.js one before. I like that it has touch features--COOL! 8D And I will definitely read up on the CSS3 transform thingy and try to implement it :)
~ a dream is a wish your heart makes ~
withinmyworld.org

User avatar
dubiousdisc
Administrator
Posts: 2602
Joined: Thu Jun 21, 2012 5:49 pm
Contact:

Tue Mar 22, 2016 12:30 pm

Yeah I would have said the same things as Camy :D

Robin, could you explain point 2 again? I *might* know an answer but I'm not sure if I am understanding the question.

User avatar
Robin
Events Staffer
Posts: 3161
Joined: Thu Aug 07, 2014 3:15 pm
Location: North Carolina, USA
Contact:

Tue Mar 22, 2016 12:52 pm

@dubs: No problem! :D

I have a separate page for each layout version on my archive, like v1.php, v2.php, and so forth. I want to have navigation like "previous version | next version" at the bottom of each page, which would lead the user naturally from, say, version 12 forward to version 13, or back to version 11.

My question is, since I'm not currently running a CMS on my layout archive, would there be a way to automatically select the previous and next versions for this bottom-of-the-page navigation, instead of having to write this

Code: Select all

<a href="v11.php">previous version</a> | <a href="v13.php">next version</a>
then copypaste it to all my site pages, then go back in and manually change the URLs for every page that's not version 12?

(I don't know of a way to do this without a CMS installed, but if there is, I would LOVE to learn it, because intra-site navigation is love. :D)
~ a dream is a wish your heart makes ~
withinmyworld.org

User avatar
Mikari
Posts: 3249
Joined: Thu Jun 21, 2012 6:30 pm
Location: Coruscant
Contact:

Mon Mar 28, 2016 10:21 am

Background positioning is a topic that's come up with several people lately, so I decided to write a little tutorial about it. I hope these examples are useful. I have a lot of notes at AzureLight.net though they are very summarized, let me know if you want to see more little tutorials like this that focus on a particular CSS code.

User avatar
Larissa
Time Traveler
Posts: 606
Joined: Mon Jul 16, 2012 9:37 pm
Contact:

Mon Mar 28, 2016 10:27 am

Mikari wrote:Background positioning is a topic that's come up with several people lately, so I decided to write a little tutorial about it. I hope these examples are useful. I have a lot of notes at AzureLight.net though they are very summarized, let me know if you want to see more little tutorials like this that focus on a particular CSS code.
ARE YOU SERIOUS. THAT'S HOW THAT WORKS?

I've known how to use background-position for years (as in I abuse the hell out of it) but I NEVER KNEW you could use pixels in conjuction with top/left/right/bottom. Holy bleep Mikari you are the best.
tonight fate is the

User avatar
Laura
Posts: 518
Joined: Sun Apr 27, 2014 2:10 am
Location: Ontario, Canada
Contact:

Mon Mar 28, 2016 10:31 am

Awesome tutorial, Mikari!! I was actually having a problem with that on my Kyo shrine. :) I ended up using "center 8px" and then fixing the pattern in my image instead. xD I was getting close but just got frustrated and gave up. Your tutorial helped me understand the values a lot better, thank you!!

Post Reply
  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest