What are good plugins or theme components for a forum emphasizing pictures?

Community
9

if by top bar you mean this

This is an image of a computer monitor displaying the home page for a website called "Welcome to SkyOddities!". The page features a black background with white text and three icons representing the website's services. (Captioned by AI)
This is an image of a computer monitor displaying the home page for a website called "Welcome to SkyOddities!". The page features a black background with white text and three icons representing the website's services. (Captioned by AI)1482×267 66.3 KB

it’s the Welcome link banner theme component

i have a customized version of it running on my forum

Above main container mode:

The image displays a dark purple background with white and light blue elements, and includes a menu with icons and text. (Captioned by AI)
The image displays a dark purple background with white and light blue elements, and includes a menu with icons and text. (Captioned by AI)1065×257 83.7 KB

Below site header mode:

The image displays a colorful user interface with a list of tabs, including options for notes, updates, dev, meta, gits, shipped, mail, and settings. (Captioned by AI)
The image displays a colorful user interface with a list of tabs, including options for notes, updates, dev, meta, gits, shipped, mail, and settings. (Captioned by AI)1069×219 80 KB

CSS code for the above result (not including the banner background image and icons, which are set in the component) 
// banner links

.above-main-container-outlet.welcome-link-banner-connectors .welcome-wrapper .welcome-content, 
.below-site-header-outlet.welcome-link-banner-connector .welcome-wrapper .welcome-content {
    display: none;
}

.above-main-container-outlet.welcome-link-banner-connectors .welcome-wrapper .featured-banner-link, 
.below-site-header-outlet.welcome-link-banner-connector .welcome-wrapper .featured-banner-link {
    padding: 0em;
}

.above-main-container-outlet.welcome-link-banner-connectors .welcome-wrapper, 
.below-site-header-outlet.welcome-link-banner-connector .welcome-wrapper {
    width: 95%;
    margin: 1.5em auto;
    background: rgba(black, .8);
}

.above-main-container-outlet.welcome-link-banner-connectors .welcome-wrapper .featured-banner-link>div a .d-icon, 
.below-site-header-outlet.welcome-link-banner-connector .welcome-wrapper .featured-banner-link>div a .d-icon {
    margin-bottom: .2em;
}
4 Likes