search

amasson99 / JEA-website

Code for the jea website
0 stars 1 forks source link

Solution for in-page navigation menus #11

Open KateJEA opened 6 years ago

KateJEA commented 6 years ago

Instead of using hand-coded markup inserted into the content areas on each individual page to display in-page navigation, we need to agree on a method that displays the Wordpress menus we already have.

We can't use widgets, like we used to, but we can use shortcodes. I've tested and installed a plugin that will display a wordpress menu using just a shortcode we insert into the content area of a page, but more work is needed to improve the styling of the menus.

We probably should do this before we add any more in-page menus on the site, or those would have to be redone.

amasson99 commented 6 years ago

@KateJEA Can you send me a link to a page with an example of the shortcode, and I'll see what i can do styling wise? Thanks

KateJEA commented 6 years ago

The middle school contest pages have this setup, in fact you’re adding another page to that section in another issue ticket. You’ll get to see it in action when you do that job.

http://jea.org/wp/home/awards-honors/junior-highmiddle-school-national-media-contest/ http://jea.org/wp/home/awards-honors/junior-highmiddle-school-national-media-contest/

~kld

On Jul 16, 2018, at 7:50 PM, Alex Masson notifications@github.com wrote:

@KateJEA https://github.com/KateJEA Can you send me a link to a page with an example of the shortcode, and I'll see what i can do styling wise? Thanks

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/amasson99/JEA-website/issues/11#issuecomment-405424540, or mute the thread https://github.com/notifications/unsubscribe-auth/Aj2l5lneJ4vSArwg9VO3MDNsGVGApm7Yks5uHTTXgaJpZM4VNfAN.

amasson99 commented 6 years ago

capture

div#in-page-menu { border: 1px solid #8E9DAE; padding: 15px; border-radius: 10px; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); }

amasson99 commented 6 years ago

^What do we think about that? @klgdigital26 @KateJEA

KateJEA commented 6 years ago

That's better. I think I would try to put a little more space between each line, and use a heavier font weight. Also debating about whether or not we need those bullets, or whether some other graphic would be better.

amasson99 commented 6 years ago

capture

div#in-page-menu { border: 1px solid #8E9DAE; padding: 15px; border-radius: 10px; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); line-height: 2.5; color: white; }

amasson99 commented 6 years ago

@KateJEA Okay, got rid of the graphics and made the line height bigger.

amasson99 commented 6 years ago

@KateJEA what do you think about this?

KateJEA commented 6 years ago

I would say, for now, let's add some more padding on the right so there's about an equal amount of white space on either side of the list of hyperlinks. We can do some more playing with it later on, but this will be fine for now.

The main thing is, we need to replace all the hand-coded in-page navigation blocks throughout the site with these generated ones.