Shop Mobile More Submit  Join Login
×




Details

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

Stats

Views
12,520 (10 today)
Favourites
926 (who?)
Comments
84
Installs
2,516 (2 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:
 
:iconjazzyviper:
JazzyViper Featured By Owner Edited 2 days ago  Hobbyist Digital Artist
how do i change the links and link names? help please ;; 

//EDIT nevermind, i got it figured out! ^^;
Reply
:icona-p-p-l-e-j-u-i-c-e:
A-p-p-l-e-j-u-i-c-e Featured By Owner 4 days ago  Hobbyist Traditional Artist
I only want the first 6 tab thingies, not the last two. If I take the last to codes off it has 4 on the left and 2 on the right. How can I get 3 on the left and the right?
Reply
:iconbunni-mi:
bunni-mi Featured By Owner Feb 9, 2015  Hobbyist Digital Artist
Helloo, how do I add links to the bars? 
Reply
:iconidoodlechibis:
IdoodleChibis Featured By Owner Jan 28, 2015  Hobbyist General Artist
Thank you for these! However i had the hardest time trying to get the journal to show in my gallery, im not sure if this did it but i changed it to feature literature and then it seemed to work c:
Thanks again! ♥
Reply
:iconhawiibo:
hawiibo Featured By Owner Feb 8, 2015  Student Digital Artist
how did you do it mine keeps saying literature xc
Reply
:iconidoodlechibis:
IdoodleChibis Featured By Owner Feb 9, 2015  Hobbyist General Artist
Uhh, honestly i was having that problem as well. But im not exactly sure what i did to fix it. Im so sorry ; A ;
Reply
:iconhawiibo:
hawiibo Featured By Owner Feb 9, 2015  Student Digital Artist
;v; Its okay <3
Reply
: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
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
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
:iconbunni-mi:
bunni-mi Featured By Owner Feb 6, 2015  Hobbyist Digital Artist
May I ask where you add the URLs in? 
Reply
:iconiackner:
Iackner 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
:iconiackner:
Iackner 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
:iconiackner:
Iackner Featured By Owner Jul 28, 2014  Hobbyist Digital Artist
Reply
:icongasara:
Gasara Featured By Owner Jul 25, 2014
Oh? Which ones?
Reply
:iconiackner:
Iackner 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
Add a Comment: