Previous | Next

Contact/Navigation: Ripples & Sailor



Hey guys, I've got some more image-based contact codes for you today! I'll probably do some horizontal and square ones soon, but for now enjoy two more portrait contact codes, this time with bold solid overlays and fun shapes to give them an editorial look! I'm so excited for this month's round of resources, so stay tuned and, as always, enjoy! ♥

Coding: Ripples

Coding: Sailor

Installation Guide

Paste into an entry and fill in the following!

BACKGROUNDIMG and USERPIC - Your images (userpic is on Sailor only)
NAME and HERE - Character or player name (name is on Ripples only)
SUBTITLE - Your subtitle line
URL1 through URL4 - Your nav link URLs
LINK1 through LINK4 - Your nav link titles

Editing Guide

Paste the coding into Notepad or similar and bring up Replace All (usually Ctrl+H) to replace values quickly and easily!

arial black - Name and subtitle
arial - Overall font

#fff - Inner content backgrounds
#bbb - Links top border
#777 - Links color
#666 - Font color

Terms of Use

♡ Do not remove credit.
♡ Do not redistribute my codes in part or in whole (posting a copy for players to use in your game is fine with a link to original post.)
♡ If you break something during editing, please feel free to drop me a comment and I'll help as best I can!
♡ I love seeing edits! This isn't a rule, but if you have a cool edit of one of my codes I'd love to see it!


Sep. 5th, 2017 05:26 pm (UTC)
Fun! I like them!
Sep. 5th, 2017 09:48 pm (UTC)
Thank you!! <3
Sep. 5th, 2017 09:00 pm (UTC)
These are really cute!
Sep. 5th, 2017 09:49 pm (UTC)
Aw, thanks! I can't wait to do another batch of nav contacts so I've got a good little collection on here haha.
Nov. 11th, 2017 01:22 am (UTC)
Suggestions on where to find editorial type images?
Nov. 15th, 2017 11:16 pm (UTC)
One day I'm gonna post a GIIIANT resource dump lmfao. I'd suggest Unsplash and Pixabay for photography! I got all demo images used in this from Pixabay, actually! (As I do most of my demo stock honestly, lmfao. I pay for a lot of resources as well to be able to provide the best content I can, but there are a ton of great free resources out there for design! ...I really need to make that resource dump.)
Dec. 1st, 2017 02:15 am (UTC)
i'm having an issue where it looks fine when i have the entry open, but on my layout the userpic circle is off center? (i'm using the sailor version.) is this because of the layout i'm using, or can i do something to fix it?
Dec. 14th, 2017 09:27 pm (UTC)
Oooh, that looks gorgeous! I've fixed this issue before for a friend, and what's going on is just a small fight with the layout's coding. You can cancel it out by putting box-sizing:content-box; into this div!

<div style="margin-top:-230px;margin-left:-5px;width:300px;height:300px;border:30px double #fff;-moz-transform:rotate(45deg);-webkit-transform:rotate(45deg);-o-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);"></div>
Dec. 29th, 2017 04:40 pm (UTC)
awesome, thanks! i can just pop that in anywhere in that code, or does it need to go somewhere specific?
Dec. 29th, 2017 07:27 pm (UTC)
No, you'll have to make sure it goes into the second div of your copy of Sailor and you should be all set! ♥
Mar. 17th, 2018 06:03 am (UTC)
SO I HEARD YOU LIKE TO SEE EDITS and I'm kinda proud of the thing I did. I wanted to use the Sailor one as a cute little entry code for my "in-character inbox" page for a game but I wanted it to look like an envelope, so I... ATTEMPTED THAT? (the colors and images used are in relation to the game, a lot of the game coding uses those things and I like to make my things for the game match ahaha)

ANYWAY IT'S over yonder. or if you'd prefer:

Mar. 17th, 2018 06:13 am (UTC)
YOOOOOO, that looks hella rad. I love this so much! The dual background images really make this pop, and I love how the colors in the upper background match Julian's uniform colors. This has such good coordination and thought put into it! ♥ (The way you did up the code for your main nav looks gorgeous too!)