CSS Greenshift FSE

CSS for the Greenshift theme

The CSS on this page is especially for the WordPress Greenshift FSE theme. Because some elements are universal, such as CSS for the navigation menu, there is a good chance that you can apply it without any problems in another FSE theme.

Keep in mind that the way to integrate the CSS code or classes for each website builder differs slightly. It is also true that you can integrate regular CSS code everywhere, but not every website builder allows you to work with CSS classes. Site (page) Builders such as Kadence Pro, Generateblocks pro, Elementor Pro all have options to use CSS.

Make the Greenshift FSE submenu wider

This CSS code allows you to adjust the width of the navigation submenu. Because Greenshift uses universal elements (Blocks) during navigation, it also works on most other FSE themes. Motivation: the standard submenu is quite narrow. That means that even a simple page title already has a text hyphenation. That doesn’t look good… There are settings for the main menu for most FSE themes, but no width settings for the submenu (the dropdown). Just use this CSS code! Place the code in a code plug-in. You can, of course, adjust the 200px value. See the images (under the code) to see the effects of the CSS.

/* Greenshift FSE width submenu */
.wp-block-navigation-item__label {
    width: 200px;
}

Without the CSS

With the CSS

Adjust the Greenshift Post Progress Bar color

Greenshift theme has a nice option to provide the posts with a Progress bar. It gives the visitor an indication of the reading progress. This Progress bar default is a civilized blue. So civilized that it actually fades too much. With this CSS code, you can adjust the color. The color in our code is red, but you can, of course, adjust this.

/*  Adjust the Greenshift Post Progress Bar color - do not forget the # */
#gs-progress-bar{background:red !important;}

Note: unlike a normal class, this code does not start with a dot . but with a #

Change Greenshift ‘Back to Top’ color

The Greenshift theme has the option to show a ‘back to top’ icon. You can change the color of this icon with this CSS code.

/* Change Greenshift 'Back to Top' color - do not forget the # */
#greenshifttotop{background:red !important; color:white !important}

Note: unlike a normal class, this code does not start with a dot . but with a #

Integrate CSS on a website

Do you want to know how your CSS code integrates on your WordPress website? The way you integrate the code is important for a predictable and good result. Look here.

WP●insight