prospitian: (5)
Courtney ([personal profile] prospitian) wrote in [community profile] photosynthesis2017-03-26 12:34 pm

Navigation: maybe i'm meant for the sea

Title Subtitle an optional blurb; it can be as long as you want because the box will scroll if you take up too much space, or you can remove it entirely
Title Subtitle eeee


























ugh
Title Subtitle nnnn
look, ma, no title!




















~~~
Title Subtitle Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed elementum elit, et elementum nunc. Maecenas vehicula lectus nisi, nec aliquam erat aliquet ac. Mauris vehicula nisi ac est imperdiet varius. Sed faucibus quam vel elementum fringilla. Morbi egestas lobortis tempor. Aenean felis mauris, scelerisque et nisl in, vehicula fringilla tortor. Praesent feugiat ornare dui ac consequat. Nulla sed pellentesque odio. Vestibulum convallis malesuada ex, id aliquam mi ultricies nec. Nam id tincidunt mauris. Phasellus tempor quam quis augue accumsan, ut mollis leo molestie. Etiam sed mollis mi, ut dapibus ligula.
here's what it looks like without a title! those roses are by ~sayonararolling on tumblr.
A Significantly Longer Title and also a subtitle that goes on for basically ever too here's what it looks like if the first one scrolls! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed elementum elit, et elementum nunc. Maecenas vehicula lectus nisi, nec aliquam erat aliquet ac. Mauris vehicula nisi ac est imperdiet varius. Sed faucibus quam vel elementum fringilla. Morbi egestas lobortis tempor. Aenean felis mauris, scelerisque et nisl in, vehicula fringilla tortor. Praesent feugiat ornare dui ac consequat. Nulla sed pellentesque odio. Vestibulum convallis malesuada ex, id aliquam mi ultricies nec. Nam id tincidunt mauris. Phasellus tempor quam quis augue accumsan, ut mollis leo molestie. Etiam sed mollis mi, ut dapibus ligula. Phasellus sodales, nunc vitae posuere mollis, dui erat convallis turpis, id vestibulum elit eros sit amet sem. Integer vitae ornare erat. Aenean aliquet nisl at diam commodo, sit amet mattis libero consectetur. Pellentesque at tortor vitae turpis condimentum scelerisque. Phasellus sed laoreet elit. In pulvinar, risus quis volutpat aliquam, velit nunc hendrerit quam, vestibulum aliquam eros nisi sed ligula. Donec bibendum semper nulla, eget pretium nisi tristique non. Quisque at orci a ligula aliquam viverra. Aenean et massa dui.
code by photosynthesis

A set of navigational/info tables with the option for "pages" within each box; it makes more sense if you click the links in the first one. Each box will autoscroll if enough content is put in it.



This code has a lot of pieces to it, but there's very little you have to actually mess with unless you want to; it's very clearly labeled within the code where each piece goes, so don't be scared!

Start Here


For Each Box


for a box of links as seen in the sample, start here



Links Codes
Regular URLs Extra Pages


Extra Pages Within Boxes


After using the codes above to construct one box, you just want to start from the top and add the new one directly below the previous one!

This code is spacing-friendly, meaning you can add as many line breaks between things as you need to keep yourself organized. That said, if you want line breaks within your text, you'll have to use <br /> tags.

Replacements

TITLE - Appears on each page. If you choose to remove the title on a separate page, whether or not you remove the subtitle too, you have to make the following replacement:

find this replace with this

SUBTITLE - Appears on each page.
BLURB - Appears on each page.
LINK URL - Appears if you use the links codes provided.
LINK TEXT - Appears if you use the links codes provided.
SIDE IMAGE URL - Should be 150x250px.

PAGE NAME - The "name" of each page. Appears in the page code itself, and in the link to the page. Doesn't actually appear anywhere; this is for your organizational reference and the code's. Please note that every single page name has to be completely unique. Two boxes can't share the same page name. These are case sensitive and you can have spaces in them.
PAGE TEXT - What you want the link to the page to actually say.
INDEX PAGE NAME - This is the page name for that box's "index", i.e. the page it's on when you first go to the post, and what the back button will bring you to. If you intend to use pages, please change this to something unique for each box.

#FFFFFF - Background color.
#E0E0E0 - Border color.
#000000 - All text, links, and titles.


This code has a lot of room to be customized and prettied up, so go ahead and make any alterations you'd like, so long as my credit stays intact! As always, if you need help with anything at all, please go ahead and ask.
kunizuka: (Default)

[personal profile] kunizuka 2017-03-27 04:22 pm (UTC)(link)
Wow, this is exactly what I needed. Thanks so much for sharing!
hasitsthorns: ғᴏʀ ʜᴇʀ ɢᴏᴇs ᴏɴ (Default)

[personal profile] hasitsthorns 2017-08-14 12:02 pm (UTC)(link)
Hello! I really love this code and want to use it for an info guide of sorts, but I did have one question.

Is there a way to change the side image with the different pages? So, if I clicked from the index to 'page one' the side image would change? To explain maybe I want mean better, I want to do a navigation of sorts for different characters and would like each page to have an image of the different characters on the side for their page. Thanks!
presomnia: (Default)

[personal profile] presomnia 2017-08-14 11:45 pm (UTC)(link)
this isn't the right account but it's the one i'm logged into so here i am, it's me, i swear

i'm glad you like the code!! unfortunately setting it up to have different side images for each page would require some pretty significant overhauling of the code. it's not impossible and i could do it for you on commission if you really wanted to but it would be enough of a pain that i probably am not going to do it myself otherwise... sorry about that! if you wanted to give it a go yourself and run into any roadblocks i'd be happy to help try to explain how some of it works and how to get around that at least
hasitsthorns: ғᴏʀ ʜᴇʀ ɢᴏᴇs ᴏɴ (Default)

[personal profile] hasitsthorns 2017-08-15 12:10 am (UTC)(link)
Hello!! I figured that might be the case, but that it couldn't hurt to ask.

As it is, I had a friend help me get something like this started (using your base code, which I will credit when it's all done!) but now we're having the issue of when I got to the 'Fear' page, if I click Hope after it still displays Fear's despite showing the right page url in my browser. It's very strange.