HOME | DD
Gasara — [07] Code Snippet - Diamond Button Menu
#css #resources #journalcss #journalskin #f2u #profilecss
Published: 2018-07-01 16:04:23 +0000 UTC; Views: 40919; Favourites: 448; Downloads: 613
Redirect to original
Description
ABOUTA fancy diamond button menu for use in journal skins or as a profile page menu.
LIVE PREVIEW
------------------------------------
FEATURES
Width: Fixed*
Customizable: Yes**
Tested in IE, Chrome & Firefox
* The width of this code has been set to ensure the best compatibility with mobile devices when used on profile pages. It can, course, be altered if you prefer.
** Works best with either 3 or 5 links / one line of link text
------------------------------------
NOTES
i. Custom journal skins can only be used by core members
ii. This snippet is completely free to use
iii. You may edit this snippet as much as you like
------------------------------------
INSTALLATION
- Download the zip file from the download link on the right of this page.
- Extract the contents of the file.
- Follow the instructions inside.
- More information can be found via the help links below.
------------------------------------
SUPPORT
If you like my work, please consider supporting me on Ko-fi
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
Related content
Comments: 20
👍: 0 ⏩: 0
is there any way to have an image in those squares? imsorry if it sounds dumb but im just,, r e a ll y new to page coding,,
👍: 0 ⏩: 1
👍: 1 ⏩: 0
Any chance you could help me? My menu looks like this but I want it to look like yours, here's the image and code
Image:
Code:
Devious Journal Draft//HEADER
Gallery
My OCs
Commissions
To-Do List
Instagram
//CSS BODY
/*
[07] Code Snippet - Diamond Button Menu by Gasara / 2018
https://www.deviantart.com/gasara
*/
/* ------------- Clean Up ------------- */
* { background:transparent; border:none; margin:0px; padding:0px; }
body { margin: 60px auto 0px auto; text-align:center; width: 380px; }
.content { position:relative; top:20px; z-index:99; }
.journaltop img, .list, .journalbottom, .journaltop, a.external:after { display:none; }
/* ---------- Diamond Buttons ---------- */
.diamond-button {
background:#transparent;
color:#ffffff;
display:inlin
👍: 0 ⏩: 0
Hi Gasara , Thank you for creating these ^^ They are awesome
I've tried using them and I've followed your instructions, at least I'm pretty sure I have, but I've had a few problems
👍: 0 ⏩: 1
Hey! I'm not Gasara, but I'm hoping I can help!
I'm guessing the problem is that the link doesn't fit in the diamond? It's because you put the link in the wrong spot.
Basically, where it says "Link#1", "Link#2" etc, is where you put the name of your link. Call it 'Commissions', or something similar. Right next to it, where you see < a href="" > is where you paste the actual link. Put it in between the quotation marks.
Hope that helped!
👍: 0 ⏩: 2
Hi... it's me again lol
Sorry to bother you but I'm not sure if you can help but where it said LINK#1 etc for example I put the name of the link there like you said and where it has "" I put the link inside there and it works, it definitely works but if you click on it it takes me to another page... I'm not sure if the diamond button menu is broken or I'm just and idiot but... yeah. Like I said not sure if you can help but I uploaded the coding to show you that from what I can interpret everthing seems to be in order. But if you click on my profile page and click one the link your self it takes you do a different link
👍: 0 ⏩: 1
Sorry about the delayed response! This is my secondary account, and I just sometimes... forget to check it!
I see what you mean about the code. You seem to have the right links with the right titles in the screenshot, but on your page, the Comm Info link is empty, while all the other links seem jumbled.
It took me a second, but it's because the link goes first, and THEN the title. If you notice, you have an empty < a href = "" > before 'Comm Info' in the screenshot. That's where the link for your commissions would go, instead of after the title. Similarly for the others. The spot where your commissions link is posted is the spot for the second button's link, which is why TOC leads to that page instead.
👍: 0 ⏩: 0
omgosh now I feel silly thank you so much YES that did help. A lot. I was extremely tired when I did that. When I read your comment I realised immediately what I did without even looking at it again. Total facepalm moment haha 
Thank you so much for taking the time to explain that to a computer illiterate pudding like myself haha
👍: 0 ⏩: 0
Is there a way to make the diamonds smaller without the text going buggy? I've been researching and editing quite a lot but I can't seem to figure it out :'D
👍: 0 ⏩: 0
omg its quite similar to my profile design <3 I love it!
👍: 0 ⏩: 1
Diamond menus are a popular choice nowadays.
👍: 0 ⏩: 1
Do you think it's possible to replace the buttons with images instead? I've been trying to figure that out for a very long time
👍: 0 ⏩: 1
With this code the diamonds are made from two separate sections using the border property. I would imagine it's possible to add images to each section but it's not something I've really looked into. I'm afraid I can't help you with that one.
👍: 0 ⏩: 1
I really appreciate your custom designs and allowing everyone to use them for free. That's very generous of you and your tutorials are always so easy to follow
👍: 0 ⏩: 1
Ah, thanks lovely! It's always a pleasure sharing these things.
👍: 0 ⏩: 1