Custom Navigation image buttons?

[ArudanIsMe]

Hey so im new to proboards and was wondering what I would need to do to change my navigation text buttons to image buttons by chance? If CSS is involved would anyone be okay on lending me the CSS code for it? Much apreciation!

[Chris]

Oct 24, 2022 16:23:00 GMT -8 ArudanIsMe said:

Hey so im new to proboards and was wondering what I would need to do to change my navigation text buttons to image buttons by chance? If CSS is involved would anyone be okay on lending me the CSS code for it? Much apreciation!

Nov 6, 2012 16:15:12 GMT -8 Brian said:

Download - Version 2.0.6

Now with support for individual settings across all themes!

The two primary functions of this plugin are:
1) Replace any of your menu items with images.
2) Change the size and spacing of your menu items, whether or not the welcome message and notifications show, and the alignment of your menu buttons.

Read More

---

...
A Pure CSS Solution

for the cascading aficionados

<style>

#navigation-menu {
/* DEFINE YOUR MENU IMAGES */
--nav-home-img: url(https://storage.proboards.com/1/avatar/yDjt0XvUQPDnyxwmDoSZ.png);
--nav-search-img: url(https://storage.proboards.com/forum/images/icon-search.png);
--nav-forum-img: url(https://storage.proboards.com/1/avatar/yDjt0XvUQPDnyxwmDoSZ.png);
--nav-help-img: url(https://storage.proboards.com/forum/images/defaultavatar.png);
--nav-members-img: url(storage.proboards.com/forum/images/info/members.png);
--nav-admin-img: url(https://storage.proboards.com/forum/images/defaultavatar.png);
--nav-profile-img: url(https://storage.proboards.com/forum/images/defaultavatar.png);
--nav-bookmarks-img: url(https://storage.proboards.com/forum/images/icons/bookmark.png);
--nav-messages-img: url(https://storage.proboards.com/forum/images/icons/message.png);

}

/* SELECT AN IMAGE FOR THE HOME MENU */
#navigation-menu a[href="/"]{
    --nav-menu-img: var(--nav-home-img)
}

/* SELECT AN IMAGE FOR THE SEARCH MENU */
#navigation-menu a[href="/search"]{
    --nav-menu-img: var(--nav-search-img)
}

/* SELECT AN IMAGE FOR THE MESSAGES MENU */
#navigation-menu a[href="/conversations"]{
    --nav-menu-img: var(--nav-messages-img)
}

/* HIDE RELEVANT TEXT MENUS (CHANGING ONLY HOME AND SEARCH IN THIS EXAMPLE; ADD/REMOVE ATTRIBUTE SELECTORS AS NEEDED)  */
/* NOTE:THIS RULE EMPLOYS A REPEATED ID IN ORDER TO INCREASE RULE WEIGHT AND WIN CASCADE MATCHUPS */
#navigation-menu#navigation-menu a:is([href="/"],[href="/search"],[href="/conversations"]) {
   font-size: 0;
}

/* PRESERVE NOTIFICATION BUBBLE (CHANGING ONLY HOME AND SEARCH IN THIS EXAMPLE; ADD/REMOVE ATTRIBUTE SELECTORS AS NEEDED) */
#navigation-menu#navigation-menu a:is([href="/"],[href="/search"],[href="/conversations"]) .tip-number {
font-size: .8rem;
}

/* SETUP PSEUDO-ELEMENTS TO HOLD IMAGES (CHANGING ONLY HOME AND SEARCH IN THIS EXAMPLE; ADD/REMOVE ATTRIBUTE SELECTORS AS NEEDED) */
/* NOTE: USING :WHERE() TO KEEP WEIGHT LIGHT SO IMAGES CAN BE OVERRIDDEN ON A PER MENU BASIS */
#navigation-menu :where([href="/"],[href="/search"],[href="/conversations"])::after {
   content: "";  
   background-size:  cover;
   width: 25px;
   height:25px;
   display:inline-block;
   margin-right:0.5rem;
background-image: var(--nav-menu-img);
}
/* SPACING BETWEEN MENUS */
#navigation-menu#navigation-menu li:nth-child(n+2):nth-last-child(n+2){
/* margin-left: 1.5rem; */
}

</style>