HOME | DD

Gasara — [04] Code Snippet - Multi Column Menu

#css #resources #journalcss #journalskin #f2u #profilecss
Published: 2018-06-30 19:12:33 +0000 UTC; Views: 9741; Favourites: 286; Downloads: 442
Redirect to original
Description ABOUT

A simple multi column 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.
** You can add/remove as many column sections as you like. Simply copy/paste the relevant code in the tags. Works best with 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: 23

SydneyitsSydneyYo [2020-04-23 20:41:26 +0000 UTC]

can this work in custom boxes?

👍: 0 ⏩: 0

SPH-Works [2019-12-05 04:05:11 +0000 UTC]

This is amazing! Thanks for this code!

👍: 0 ⏩: 0

Neiropun [2019-07-02 21:26:56 +0000 UTC]

Hidden by Admin

👍: 0 ⏩: 1

Gasara In reply to Neiropun [2019-07-03 12:04:48 +0000 UTC]

Only those with core membership can use this on their profiles but anyone should be able to download the code. I've tried it both on mobile and desktop using the old version of the site and Eclipse and it's downloaded every time. Are you still unable to download it?

👍: 0 ⏩: 1

Neiropun In reply to Gasara [2019-07-04 02:18:04 +0000 UTC]

Hidden by Admin

👍: 0 ⏩: 1

Gasara In reply to Neiropun [2019-07-04 06:31:35 +0000 UTC]

No problem x

👍: 0 ⏩: 0

guilhermecomputacaod [2019-01-12 02:41:20 +0000 UTC]

Hidden by Admin

👍: 0 ⏩: 0

lyilu [2018-12-27 17:43:28 +0000 UTC]

Hidden by Admin

👍: 0 ⏩: 1

Enivlens In reply to lyilu [2019-02-18 18:15:18 +0000 UTC]

Yep!

👍: 0 ⏩: 0

atmosqheriic [2018-11-06 09:51:43 +0000 UTC]

aa thankyou so much for making these! nwn

👍: 0 ⏩: 0

Hiratsumi [2018-10-01 20:12:37 +0000 UTC]

How I put a color or image on the background? 
If its a literature one?

👍: 0 ⏩: 0

StarsDEN [2018-09-16 20:00:12 +0000 UTC]

Hi! I'm very sorry to bother you for this but I can't figure out how to make it work...
The problem is that once I'm done with the sta.sh file and I go to submit it, it submits it as a journal entry and not as a deviation: this way I can't add it to the featured deviation widget... I have no idea how to solve it Q.Q

👍: 0 ⏩: 0

nanokanyx [2018-07-30 21:46:41 +0000 UTC]

Hidden by Admin

👍: 0 ⏩: 1

Gasara In reply to nanokanyx [2018-07-30 21:55:52 +0000 UTC]

Hiya. Content in the Featured Deviation widget has a maximum height of 350px. I think I added a margin to the .content section of the code. Try setting that to 0px to see if that helps. If not, you might have to reduce how much text you have.

I can't tell what's causing the other issue without seeing the code. If you could take a screenshot of the background issue and both the CSS and the code in your widget I'll take a look for you.

👍: 0 ⏩: 1

nanokanyx In reply to Gasara [2018-07-30 22:21:15 +0000 UTC]

Hidden by Admin

👍: 0 ⏩: 0

kyuneh [2018-07-28 04:37:33 +0000 UTC]

Hidden by Admin

👍: 0 ⏩: 1

Gasara In reply to kyuneh [2018-07-29 10:38:58 +0000 UTC]

Hiya!

Download and install the skin, then find and change the following sections:

a.menu {
   background:#1e2530;  <-- This changes the background colour of the links.
   color:#ffffff; <-- This changes the text colour

a.menu:hover {
   background: #54bac8;  <-- This changes the background colour of the links on hover.

Replace the hex colour code (shown in bold) and this will change the colours of your menu. You can find the hex colour code for any colour here .

Hope that helps!

👍: 0 ⏩: 1

PeekyChew In reply to Gasara [2018-07-29 17:30:32 +0000 UTC]

Can you change the colours for individual buttons, or is it just all of them at once? Also, great work on this! I'll definitely be making use of it  

👍: 0 ⏩: 0

Xyuenna [2018-07-09 06:16:56 +0000 UTC]

Hidden by Admin

👍: 0 ⏩: 1

Gasara In reply to Xyuenna [2018-07-11 06:11:38 +0000 UTC]

Ah, thank you lovely! I'm very happy to know you enjoy them.

👍: 0 ⏩: 1

Xyuenna In reply to Gasara [2018-07-11 06:19:11 +0000 UTC]

Hidden by Admin

👍: 0 ⏩: 0

reincarnationz [2018-06-30 19:23:28 +0000 UTC]

BLESS YOU FOR THESE !! <333

👍: 0 ⏩: 1

Gasara In reply to reincarnationz [2018-06-30 19:51:36 +0000 UTC]

👍: 0 ⏩: 0