Shop Mobile More Submit  Join Login
×




Details

Submitted on
September 25, 2013
File Size
1.0 KB
Link
Thumb
Embed

Stats

Views
11,229 (8 today)
Favourites
835 (who?)
Comments
74
Installs
2,210 (8 today)
×
Code Snippet - 2 Column Menu by Gasara Code Snippet - 2 Column Menu by Gasara
09.10.2013 - Updated to remove dA's new default external link styles.

Here we have a template for a simple 2 column navigation menu. The menu has been designed to work on profile pages but can be added to full journal css too. Please see below for help with using this code snippet.

I N F O
--------------------------------------------------

Width: Liquid
Customizable: Yes
Tested in IE, Chrome & Firefox

Custom journal skins can only be used by premium members.

H E L P
--------------------------------------------------

Click the Install button in the sidebar to add the skin to your gallery. The links below will provide further help with adding the skin to a widget on your profile page and changing the style of the menu.

FAQ12 - How do I add a custom menu?
FAQ22 - How do I install a journal skin?
FAQ23 - How do I change my journal skin?
FAQ24 - How do I edit my journal skin?

Basic HTML Formatting Guide
Basic CSS Style Guide


U S A G E
--------------------------------------------------

- This skin is free to use
- You can completely edit this skin for personal use
- You can use this skin on your profile
- You can add this code to existing or new journal CSS

- You may not redistribute this skin, edited or otherwise
- You may not sell this skin, edited or otherwise
Add a Comment:
 
:iconp-i-c-k-l-e:
p-i-c-k-l-e Featured By Owner Jan 11, 2015  Hobbyist Digital Artist
Hello! I was wondering, how would i go about putting a background behind this? Like theirs: sonyasim55.deviantart.com/
just where the transparency is, making it a background?
Reply
:iconredrose8510:
Redrose8510 Featured By Owner Jan 13, 2015  Hobbyist General Artist
paste this into your featured deviation thingie:


<img width="100%" height="100%" src="CUSTOM BOX BACKGROUND URL HERE">
Reply
:iconaoi-kanou:
Aoi-Kanou Featured By Owner Jan 15, 2015  Student Digital Artist
Never mind, I got it. Thanks for this tutorial! <3
Reply
:iconredrose8510:
Redrose8510 Featured By Owner Jan 15, 2015  Hobbyist General Artist
ah c: ok : D
Reply
:iconaoi-kanou:
Aoi-Kanou Featured By Owner Jan 15, 2015  Student Digital Artist
Hello, I tried pasting to description of featured deviation, but it doesn't work >.<
Reply
:iconredrose8510:
Redrose8510 Featured By Owner Jan 15, 2015  Hobbyist General Artist
You're gonna have to add one of the content holders like this one: Shadow Content-holder box (Default Bright) by CypherVisor
Reply
:iconp-i-c-k-l-e:
p-i-c-k-l-e Featured By Owner Jan 14, 2015  Hobbyist Digital Artist
thank you!!
Reply
:iconredrose8510:
Redrose8510 Featured By Owner Jan 14, 2015  Hobbyist General Artist
no prob >u<
Reply
:iconsickenedd:
Sickenedd Featured By Owner Jan 8, 2015  Hobbyist Digital Artist
how do i add this to my custom box?
Reply
:iconp-i-c-k-l-e:
p-i-c-k-l-e Featured By Owner Jan 11, 2015  Hobbyist Digital Artist
you do not! you use as a journal skin, and then put the journal on your profile page using the "Featured Deviation" widget c:
Reply
:iconsickenedd:
Sickenedd Featured By Owner Jan 13, 2015  Hobbyist Digital Artist
ohhhhhh ok, thanks !
Reply
:iconpascua-tanya:
Pascua-Tanya Featured By Owner Jan 4, 2015  Hobbyist Digital Artist
Thank you very much =D. I find the menu created by CypherVisor but I could not use it because I have to buy :(. But luckily I found yours that is free and now I can use a menu on my profile ^^
Reply
:iconmiracat:
Miracat Featured By Owner Dec 23, 2014  Hobbyist Digital Artist
thanks so much! used :D Directions I had added some cool hover effects, but they wouldn´t display on the profile page... :shrug:
Reply
:iconxgalaxial:
xGalaxial Featured By Owner Nov 25, 2014  Hobbyist Digital Artist
How do I change the colours?
Reply
:iconmiracat:
Miracat Featured By Owner Dec 23, 2014  Hobbyist Digital Artist
you have to edit the skin and then change the colour codes... that are the ones with the #.
#ffffff would be white for exsample.
Reply
:iconmelmuff:
MelMuff Featured By Owner Edited Nov 10, 2014  Hobbyist General Artist
Using it on my profile here. Thanks for providing this. For so long I had wondered how to get such a menu on my profile and now I know it's simply CSS. :D
Reply
:iconzbanonymous:
ZBAnonymous Featured By Owner Nov 2, 2014  Student Traditional Artist
I don't understand how I put this on my page
Reply
:iconp-i-c-k-l-e:
p-i-c-k-l-e Featured By Owner Jan 11, 2015  Hobbyist Digital Artist
there are tutorials there for a reason!! you use it as a journal skin, and then put iit on your page using the "Featured Deviation" Widget.
Reply
:iconzbanonymous:
ZBAnonymous Featured By Owner Jan 15, 2015  Student Traditional Artist
im trying im trying
Reply
:icongloomy-butt:
Gloomy-Butt Featured By Owner Oct 26, 2014  Student Digital Artist
How do I put this on a custom box.
I'm able to put the HTML code on a custom box, the CSS code is lost and I have no idea how to integrate the two to make it look like the one above. Is there any way to do this in a much simpler way, or can it only be put on the featured deviation slot?
Reply
:icongloomy-butt:
Gloomy-Butt Featured By Owner Oct 26, 2014  Student Digital Artist
Nevermind. I got it.
Reply
:iconp-i-c-k-l-e:
p-i-c-k-l-e Featured By Owner Jan 11, 2015  Hobbyist Digital Artist
guys, there are tutorials there for a reason!! you use it as a journal skin, and then put iit on your page using the "Featured Deviation" Widget.
Reply
:iconrani-ki:
Rani-ki Featured By Owner Oct 30, 2014  Hobbyist Digital Artist
Oh, could you tell me how you did it? ; /// ;
Reply
:icongloomy-butt:
Gloomy-Butt Featured By Owner Oct 30, 2014  Student Digital Artist
I... just gave up on trying to. No tutorials existed and nothing I tried worked, so I gave up. I'm sorry. ;^;
Reply
:iconrani-ki:
Rani-ki Featured By Owner Oct 30, 2014  Hobbyist Digital Artist
Aaahhh--- that's sad ; A ; But thank you anyway!! c:
Reply
:iconp-i-c-k-l-e:
p-i-c-k-l-e Featured By Owner Aug 29, 2014  Hobbyist Digital Artist
How do I get them to act as buttons, to lead where I would like them to go?
Reply
:icongasara:
Gasara Featured By Owner Aug 29, 2014
Once you've installed the skin to your journal, go into the editing section. You need to add the URL of the page you want to link to as well as change the link text. Look for the following section of code:

<a class="menu" href="">Link</a>

Add the URL inbetween the quote marks after href= and replace Link with the text you want to become clickable. For example:

<a class="menu" href="http//www.mylink.com">My Button Name</a>

The following should help you out.

FAQ22 - How do I install a journal skin?
FAQ23 - How do I change my journal skin?
FAQ24 - How do I edit my journal skin?
FAQ16 - How do I create a text link?
FAQ21 - How do I find a page URL?
Reply
:iconp-i-c-k-l-e:
p-i-c-k-l-e Featured By Owner Aug 23, 2014  Hobbyist Digital Artist
Hi, so I was wondering, I changed the number of buttons to 3, but what would I do to get them to go side by side?
Reply
:icongasara:
Gasara Featured By Owner Sep 7, 2014
Do you mean so it looks something like this?

| link | link | link |
Reply
:iconp-i-c-k-l-e:
p-i-c-k-l-e Featured By Owner Sep 7, 2014  Hobbyist Digital Artist
yeah that's what i mean
i changed it so I only have 3 buttons but I'm not sure how to get them side by side...?
Reply
:icongasara:
Gasara Featured By Owner Sep 7, 2014
Okey-dokey. In the Skin CSS section change the width size of the columns by setting the width to 33% instead of 50%. Your code for this should look as follows.

.col {
display: table-cell;  
width: 33%;
}

Then delete everything from the Skin Header section and copy/paste in the following. This will give you three buttons in a row.

<div class="menu"><div class="table"><div class="col"><a class="menu" href="">Link</a></div><div class="col"><a class="menu" href="">Link</a></div><div class="col"><a class="menu" href="">Link</a></div></div></div>

Add in your link URLs and text and save!

If there's anything else you need, just let me know.
Reply
:iconhoiiister:
hoIIister Featured By Owner Jul 25, 2014  Hobbyist Digital Artist
where can I find buttons like these that go into the custom box?
Reply
:icongasara:
Gasara Featured By Owner Jul 25, 2014
You can't find buttons exactly like these but there are similar ones you can use. CypherVisor has some great tutorials in his gallery that should help you out.
Reply
:iconhoiiister:
hoIIister Featured By Owner Jul 25, 2014  Hobbyist Digital Artist
yes you can ? He just sent me the link to them
Reply
:iconpixiepot:
pixiepot Featured By Owner Jul 27, 2014  Student General Artist
Could you send me the link to them, please?
Reply
:iconhoiiister:
hoIIister Featured By Owner Jul 28, 2014  Hobbyist Digital Artist
Reply
:icongasara:
Gasara Featured By Owner Jul 25, 2014
Oh? Which ones?
Reply
:iconhoiiister:
hoIIister Featured By Owner Jul 28, 2014  Hobbyist Digital Artist
Reply
:icongasara:
Gasara Featured By Owner Jul 28, 2014
Oh, that's what these ones are. I thought you meant ones that can go in a Custom box, not the Featured Deviation box. :D
Reply
:iconhoiiister:
hoIIister Featured By Owner Jul 28, 2014  Hobbyist Digital Artist
:,0 omg I'm so sorry I thought this comment was on something else

im really sorry
Reply
:icongasara:
Gasara Featured By Owner Jul 29, 2014
Oh? Haha. No problem!
Reply
:iconcrownedqhosts:
crownedqhosts Featured By Owner Jul 16, 2014
The link for the custom coded widget tutorial doesnt work ;;;
Reply
:icongasara:
Gasara Featured By Owner Jul 17, 2014
Oops! The tutorial needs updating so I took it down temporarily. I forgot there was a link to it here. Sorry!

This tutorial should help you out: fav.me/d6gr0ps
Reply
:iconcrownedqhosts:
crownedqhosts Featured By Owner Jul 17, 2014
Thank you so much!
Reply
:icongasara:
Gasara Featured By Owner Jul 17, 2014
No problem! :D
Reply
:iconnyrrus:
nyrrus Featured By Owner Jul 13, 2014  Hobbyist Digital Artist
Is there a white one with black text? 
Reply
:icongasara:
Gasara Featured By Owner Jul 13, 2014
Hi.
There's only this version to install. You can change the colours by installing the skin and then clicking on the Edit Skin link on the right hand side of the Sta.sh Writer. You'll need to change the following code:

background-color: #1f1f1f;
color:#fff;

to:

background-color: #ffffff;
color:#000000;
Reply
:iconnyrrus:
nyrrus Featured By Owner Jul 13, 2014  Hobbyist Digital Artist
i edited it just fine and it's all done, but how do i get it to show up on my page? 
I searched through tutorials but I found none. 
Reply
:icongasara:
Gasara Featured By Owner Jul 13, 2014
You have to post it as a literature deviation and display it as a Featured Deviation. This tutorial here explains how to do it: fav.me/d6gr0ps
Reply
Add a Comment: