Menu Close

Advanced Twenty Seventeen Plugin

Although currently this plugin have some drawbacks, it has a value for usage at your site for some reasons. Before you start, make sure the color scheme is Light. Not all the changes will work with the Dark color scheme.

All the options are listed below, the Twenty Seventeen ones in 4 menus:

Advanced: Global
Advanced: Header
Advanced: Footer
Advanced: Miscellaneous

  • Note 1 : that hidden away at the top of each menu is a Reset button (normally light grey, red on hover) which you can use to change your mind if you want to restore all the settings in that menu to their defaults.
  • Note 2 : This plugin & you could make a child theme at your twentyseventeen theme. However In my case, I did not make a child theme for site’s performance issue. Also whatever you make that or not, this plugin does not work perfect well at detail configuration.

Even though above situation, this plugin have a worthy for using considering at 80 KB style CSS file.

Advanced: Global menu
The controls are in a submenu, Here you can change:

Layout
Stick with Full Width or choose Boxed.

If you go for Boxed, you can choose a background colour or a background image, and control some other aspects of the background image display. You won’t be able to use full width video with this option.

Colors
The colors you can change are:

Background colour (only if boxed layout is enabled)
Text colour
Heading colour
Link colour
Link colour on hover
Change all the colours and you can end up with something quite hideous like this:

Note that the link hover color chosen (yellow) doesn’t actually work – this style is overridden by a default theme style. Also, the heading color will change for headings within a post, but not for post/page titles, as they’re controlled by a different style rule.

Tip: When you find a color you like, make a note of its hex code e.g.#385893. It can be hard to find the same color with the color picker later on. Also you can use google color picker (https://www.google.co.kr/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=color+picker&*)

Advanced: Header menu
This is split into 3 submenus:

General
Site Branding
Menu
Advanced: Header > General
Here you can set a background image or colour.

If setting an image, follow the advice given by the plugin:

To use this option properly please go to Customizer > Header Media > click on Hide Image of Header Image.

Otherwise you’ll end up with something like this, with one header image superimposed on another:

Advanced: Header > Site Branding
Here is a very useful feature – align the site title and description to the left, centre or right.

You can also change:

The font of each to one of a range of Google Fonts. (Changes are instant, so you can see what the new font looks like right away.)
The font size and letter spacing
The text display e.g. Capitalize or Uppercase.
The font colour
Advanced: Header > Menu
Neatly, the menu is customizable, too!

You have similar options as before to use background images or background colours and change the fonts.

You can also align the menu left, right or centre.

There’s also a default border above and below the menu. If you don’t like this, set the border values to none.

Warning: Submenu items retain the default font (Libre Franklin) and style.

Warning: If you change the colour of menu items to white, like I did, they won’t show up on the mobile menu!

Advanced: Footer menu
You have 4 choices here:

General
Widget
Custom Copyright
Social Icons
Advanced: Footer > General
Again, you can set a background image or colour here.

Advanced: Footer > Widget
Want more footer widget areas? Slide the slider and you can add more.

Plus you can control the width of each widget area. If you want unequal columns, you can make it so!

New widget areas won’t have any content until you add it. I found I had to save the Customizer, exit and go back in to add widgets (in the Widgets menu).

Again, you can control the font display for the footer widgets.

Warning: Not all Google fonts have all font styles. The one I chose, Flamenco, only comes in Light and Regular, so I couldn’t have bold widget titles. This is something you’ll have to experiment with.

This is what my footer widget area ended up like:

Note the borders and underlining on the widget area links – this didn’t look good with the background image I chose.

Advanced: Footer > Custom Copyright
Hooray – you can change the “Powered by WordPress” here by typing whatever you like in the box.

And of course you can change the font and style too.

I also accidentally discovered that you can set a transparent background which overlays on a footer background image. Nice!

Advanced: Footer > Social Icons
Here you can alter the colour and hover colour of your social icons to match your branding (you weren’t crazy about that grey, were you?)

Advanced: Miscellaneous menu
This is intended for adding HTML code to the footer of your page e.g. a Google Analytics tracking code.

Issue
Wordpress Twenty Seventeen theme Plugin
Wordpress Twenty Seventeen theme CSS modification
How can, How to change WordPress Twenty Seventeen theme

Reference for Issue

  • https://wordpress.org/support/theme/twentyseventeen