You may want to customize the navigation available on your Domain of One's Own homepage. This article will show you how to edit and customize your menus, and change the icon elements for different pages.
Customizing Menus
To add/edit/remove items from your Domain of One’s Own homepage menu, follow the steps below:
- Log in as an administrator to your DoOO WP instance. This will likely be at yourproject.edu/wp-login.php?wp.
- Navigate to the main WordPress dashboard, and click Appearance > Menus.
- Click create a new menu.
- Give your new menu a name. Click Create Menu.
- Check the boxes next to Dashboard and Homepage to pull these necessary items to your new menu. If you have a Request Form, you’ll want to check that box as well. Click Add to Menu.
- If you’re adding a page that you’ve created within your DoOO WP instance, click the View All tab under the Pages drop-down to see a list of all created pages. If you’re adding a custom link (i.e. a webpage outside your DoOO WP instance) click the drop-down next to Custom Links in the left-hand menu.
Here we have a separate WordPress install for State University Documentation, so we’ll link that as a custom link. Add the URL in the first field shown above, and the public-facing menu text in the second field. Click Add to Menu. - Drag and Drop menu items under the Menu Structure section to change the order in which they appear. Check Main Menu box under Display Location. When you’re ready, click Save.
Navigate back to the DoOO Homepage. You should now see your new menu:
Customizing Icon Element Boxes
This section will show you how to change the colors, texts and fonts of your homepage's icon element boxes, as well as how to add and remove them.
"Icon element boxes" refers to the outlined boxes below:
Editing Icons, Colors, Texts and Fonts
There are two ways to access the editor for this feature. You’re going to want to edit your Homepage. You can get there by going here:
…or by going here:
Once you’re in the editor, you’ll notice that as you begin to hover your mouse over certain areas, menu items will appear. You’ll want to hover over the icon box and click the innermost button on the right. It looks like a square with a pencil:
Here’s where the magic happens. Under the content tab you’ll be able to change the following:
- where/how the icon is displayed
- what icon you want to display (scroll for more icon options)
- the title of the icon box
- the text of the icon box
A preview of all the changes you make will appear in the top right-hand corner of the viewer. When you’re finished, either go to the colors tab or click save.
In the colors tab you can change the following:
- the colors for the title
- the colors for smaller text
- the colors for the icon, icon background, & icon border (these changes will be dependent on your icon box styling)
When you’re finished, navigate to the screen options tab or click save.
Under the screen options tab you’ll be able to change the following:
- element visibility depending on screen size (i.e. desktop vs. mobile)
- font size depending on screen size
When you’re finished making changes, click save.
From here you can save & update the page, and then head back to the homepage to see your changes reflected.
Removing Icon Boxes
Use your cursor to hover over the box you want to remove. Click the outermost X.
Once that's done, you'll need to fix the spacing. Previously, the boxes were spaced in thirds; now we have to set them to halves. This can be done by clicking the right arrow (outlined below) until the fraction changes to 1/2.
Repeat the above step for the second box:
When you’re finished making these changes, update to save your page changes.
Adding Icon Element Boxes
You may find it easier to use the clone feature instead of adding the element from scratch. That way your visual settings are duplicated and all you have to change is the text. The clone button is outlined below:
From there you can set your columns how you prefer. In the screenshot below, I’ve set mine to fourths. You can then edit your text/icon how you see fit, and then click update to save your changes:
Your homepage will now look something like this:
