HOME | DD
CypherVisor β Profile Navigation Menu tutorial
by-nc-nd
Published: 2013-08-05 16:54:07 +0000 UTC; Views: 40516; Favourites: 1172; Downloads: 0
Redirect to original
Description
LAST UPDATED: 22-Feb-2014The long awaited super secret customization tutorial is here today!
Lot of deviants have asked me for this tutorial and so here you go. I have kept it a secret for a long time now and finally releasing it to public. Not to deny that some of them did figure this out on their own and successfully customized their own profile widgets. Kudos to those who did!
Critiques are welcome
LIVE VIEW: CypherVisor
Journal used in this tutorial: Link
Custom background code and tutorial: Link
Other tutorials:
Want to customize your profile more?
Check all my free resources + tutorials: cyphervisor.deviantart.com/galβ¦
Having any doubt with Custombox or Journal CSS? Please read this F.A.Q. + Tips n Tricks before writing a comment below.
I am a free resource provider for the deviantART community. If you like my free customization resources you can donate some points
to me as an appreciation or support.I take commissions to make custom journal CSS too. Check out my Journal CSS folder or send me a note for more details
Related content
Comments: 297
I cant seem to get mine to show up. It just shows a odd box thing.
π: 0 β©: 2
Seems like you have got this fixed.
π: 0 β©: 1
Actually, its still showing the odd box at the top.. not sure why. It should be just showing the CSS code/journal thing, but, not with the extra box on top saying "journal" any idea Β how to fix that?
π: 0 β©: 1
You have to code your journal CSS to hide everything apart from your content.
π: 0 β©: 1
Ok, I figured out how to hide it now. But, any idea how I can add a background behind all of this? Every time I try the background goes in front of everything.
π: 0 β©: 1
You need to position your skin as relative and use z-index like 1000. I have mentioned that in the tutorial. And use the custom box bg tutorial code to insert your background.
π: 0 β©: 1
I have done that, but keep getting this:Β gyazo.com/4866ff94ebe8c46f065cβ¦
π: 0 β©: 1
You need to position your journal as relative and use z-index say about 1000 to bring your journal in the front..
π: 0 β©: 0
Seems like I got it so up, but its showing a box thing around it, and I cant get a background on it, without it covering it up.
π: 0 β©: 0
Could you link me to good tutorials which explain the css coding process which is required to achieve the attained results? In this tutorial you just showed how to display a journal entry in a feature box but not how to actually create a navigation menu.
π: 0 β©: 1
Making a navigation menu is nothing but coding a journal skin. So, if you want to do that, then you gotta learn coding CSS and HTML. You'll find lot of tutorials to create journal skins and buttons in it. That will completely help you to make your own navigation menu. You can find this to he helpful: www.simplydevio.us/resources/pβ¦
I take commission to make customized profile navigation menu skins. If you are interested then perhaps I can make one for you.
π: 0 β©: 1
If I will make my own design, how much will you charge for just coding it? Thanks for the tutorial. I have already coded and the current journal skin that I have was also coded by myself however I used a template which was provided by one tutorial.
π: 0 β©: 1
For coding the cost starts from $5. And it's my pleasure!
And that's great to know that skin was coded by you.
π: 0 β©: 1
Alright seems like a good price. I might consider hiring you as a coder, I will have to see.Β
π: 0 β©: 1
Sure thing. Just note me if you need it.
π: 0 β©: 1
I was thinking about that for like a month or so.. but I would never got that idea o.o
I was wondering if making such menu's as a commissions for points would be alright? I mean the idea is all yours but you still submitted it as a tutorial for everyone, so...
π: 0 β©: 1
Yes, you can. You should link this tutorial for people to read and understand how to use it though I guess.
π: 0 β©: 2
I finally made a menu and linked this tutorial 
π: 0 β©: 1
Oh, ok
Happy Easter, by the way! Or happy Sunday if you don't celebrate
π: 0 β©: 1
Np.
I do not celebrate Easter. But how the hell does it matter to wish! 
π: 0 β©: 1
My z-index is 9999 and it still won't work :/
Any advice?
π: 0 β©: 1
Have you used position:relative; property? I hope you know that z-index only works with position:relative; or position:absolute; properties.
π: 0 β©: 1
I did. c: I accidentally left out a semi-colon. Oops!
Thank you!
π: 0 β©: 1
Haha.. See! There you go!
π: 0 β©: 1
Thank you for the wonderful tutorial <3
Stupid semi-colons messing everything up! It happens more than I care to admit lol.
π: 0 β©: 1
Haha.. It's alright!
Take care!
π: 0 β©: 0
I donΒ΄t know if you already know that, but due itΒ΄s actually possible to embed Soundcloud players on literature deviations, it can be added to the profile "inside" the featured deviation also!
π: 0 β©: 1
Oh yeah! that is there ofcourse!
π: 0 β©: 0
Hey, Cypher! This tut is absolutely awesome, and I've got mine all set to go! However, I'm trying to set it up on a group page, not a profile page, and the Featured Deviation widget isn't an option for groups... is there another widget I can use to display the Navigation bar instead?
π: 0 β©: 1
It won't work in any other widget other than the featured deviation widget. And unfortunately a group doesn't have the widget..
So,
π: 0 β©: 1
Thanks for the reply!
After asking you this, I actually went ahead and purchased SimplySilent 's Gallery Directory Creator, and I asked her about this... she figured it out!
To quote her:
"Ah, with Super Group you can actually display the directory just as a featured journal rather than as a separate widget.
The code should be pretty much the same. The only difference is that the background you intended to display as the custom box background must be added to the Journal Skin. Find the section in the CSS called .gr-box and place the following within the curly brackets:
background:url('IMAGE URL') no-repeat;
Replace IMAGE URL with the image url that you wanted to use."
The instructions she gave me worked perfectly! Just for your reference and if anybody else asks the same question.
Again, thank you so much for offering this tutorial! <3
π: 0 β©: 1
Well, that is in a way a WAY to do that! 
π: 0 β©: 0
I have been meaning to do this for a while now. Β 
Great tutorial, but not to nitpick, I just wanted to inform you I found a typo. Β I took a small screenshot of it so you can easily find the instance. Β You wrote 'journal kin' instead of 'journal skin':
π: 0 β©: 1
Awesome! I look forward to it! 
And to your satisfaction, I have made the changes..
π: 0 β©: 1
Thank you for updating this tutorial!
π: 0 β©: 1
I was wanting to update it for long now. Finally I got the time to do it today.
π: 0 β©: 1
I updated couple of more tuts.
π: 0 β©: 1
I have a question do you know what code this guy used to get the result he did on his page? cunning-infobroker.deviantart.β¦
π: 0 β©: 1
Link please 
I couldn't find it oAo
π: 0 β©: 1
Here: Custombox F.A.Q. + Tips and tricks
Mainly using floating images, customizing the font size, using dividers with
tag etc.
π: 0 β©: 1
<= Prev | | Next =>