Hi there! Welcome to OSU Drupal 7 Droplets!
This is Joe Fenn with Oregon State University's Web and Mobile Services. Today
we are going to continue our exploration of the
Paragraphs module by taking a look at our custom Menu paragraph bundle.
So, this is a pretty cool little tool that we've developed that will allow a user to put up to four links,
along with icons, on a colorable bar.
We've had some questions in the past regarding why we only allow four.
It's simply because as we're shifting from fullscreen to mobile
stuff can get really messy if we don't put some kind of limit on there now.
You can create a couple of these menu paragraph bundles if you need to but each one can only have four on there.
So no delay here. Let's actually jump into our paragraph sample page and take a look at how to do this.
So I'll click our Edit tab
and once our
Edit form pops up, let's scroll down to our paragraph section and
find the Menu Bar paragraph type and click it.
Then click the Add Another Paragraph button.
Now you will end up with a field set that has a Menu label here.
Just go ahead and click that Menu label item and you'll see a collection of
different fields here. So we'll start by adding a Title.
This is what the link will connect to. This is the text that the user will see.
Then we'll type in the full path. We need to use the HTTP colon slash slash
otherwise the system will think that you're trying to create a relative link versus an absolute one.
So, once we have that in there,
then we come down to our Menu Icon field and let's select an icon. So, this is pretty cool icon picker...
we have a couple sets of icons to choose from there is the custom OSU icon collection
and there's also the Font Awesome icon selection.
We do recommend that throughout your entire site
pick one of these sets that you like and stick with it. Otherwise things start looking a little messy and unprofessional.
So, we're going to just go with the Font Awesome icons right now.
Let's find
an icon that suits us...so there's a lot of icons here...
you might find yourself browsing for a little bit.
Let's go ahead and use the Graduation Cap for the OSU Homepage.
And now, remember, we can do up to four here. So let's do
another item...notice I've done this before...
and let's grab the URL
and come on in and paste it.
Yeah, we will select another icon and this time, let's see we saw a basketball down here so let's choose a
basketball.
And then let's put in a third item
Rebounder Club
And let's find our final icon
and what seems good here...?
All right, so once we have the items in that we want let's go down and click the Save button.
Let's take a look at where we're at to date. So, notice, we've got a confirmation up at the top.
If we come down we'll see that the default colors for the menu are an orange background white
text and a black icon.
Okay, and you'll see of course that the menu is
down at the bottom now.
Here's a couple things...you might not want those colors and you might not want that menu at the bottom of the screen.
We can actually adjust all this stuff. So let's go up
and click Edit again...
And the first thing we'll do...let's
Bounce on in there and it change some color.
Notice we've got this Menu Styles field set here.
Let's,
just for the heck of it, let's go with black.
And
to move
this paragraph item, or to move any
paragraph for that matter,
it's easiest if you close it up and then just grab the little handle here. So
let's drag it up
and
we'll put it underneath
our topmost item
and scroll down and hit Save.
And now if we look under our first paragraph bundle
we have ourselves a nice looking menu here and
that's all it takes?
So this is how to create a
Menu paragraph bundle.
This has been Joe Fenn with Oregon State University's Web and Mobile Services and I hope to see you for future tutorials.
