Setting up theme

[albert dashevsky]

So I install the theme…..and then what?

Where are the instructions?

How do I make my site look like your advertised theme?

Very frustrating!

[Bill Robbins]

Hi Albert,

The link to each theme’s instructions is in the right hand side of the site here. The direct link to Umami’s instructions is https://support.organizedthemes.com/umami/

You can also use the sample content from the demo to get started if you’d like. The page where you can download it is at https://support.organizedthemes.com/sample-data/. Since WordPress separates content (pages and posts) from presentation, installing a new theme won’t instantly make the site exactly like the demo. That’s ultimately a good thing because you can update the look of an existing site without having to redo all your content.

That’s also why we make the demo content available. So if you have a new site and you’d like to use the demo as a starting point, you can.

If you have questions as you get set up, let me know.

Take care,
Bill

[albert dashevsky]

How do I set it up that the home page just shows the backround image and the sidebar?

[Bill Robbins]

In your WordPress dashboard, go to pages and select the add new page link. Give the page a name, but don’t enter any content into the content box. Then publish your page.

Next go to the settings section of your WordPress dashboard and click on Settings and then choose Reading. At the top of this screen you can select what your front page displays. Choose the static page option and use the drop down menu there to select the page you just created as your front page. Then update your settings.

That’ll set your front page and have it only be a sidebar.

[albert dashevsky]

Thanks! I’m slowly getting the hang of this. Why is my background image getting cut off?

[Bill Robbins]

Great question,

The background image will always fill the background of the browser window. In order to do that without skewing the image, some of it may get cropped. How much is cropped will depend on how similar the aspect ratio of the image is to the aspect ratio of the browser window.

It generally works best to have the main focus of the image be close to the center with a bit of buffer before th edge. That way if anything is cropped, it won’t be anything important.

Bill

[albert dashevsky]

How do I create a submenu to appear when the mouse hovers over a menu title?

[albert dashevsky]

Also, in the contact widget, how do I make my email a link so it can be clicked on and taken to the email app?

[Bill Robbins]

Good Morning Albert,

I hope you had a nice Sunday. You’re welcome to have a “hover” based menu instead of one that opens by clicking. There’s a support topic at https://support.organizedthemes.com/forums/topic/open-navigation-menu-by-default/ that can show you how to set that up. It’ll replace the default menu with one that is similar, but opens up via hover.

To make an item a sub-menu item in the navigation builder, place it just below the item you’d like to have as the parent. Then drag it slightly to the right and it’ll indent just a bit. That will indicate that the item is now a sub-menu item.

---

In the contact widget, just below the address options, you’ll see ones for phone and email. The first phone one is what will display on the front of your site. The second one is just for numbers and will be used by mobile devices for calling. The email address one will be active link on the front end of your site.

If you run into trouble or questions, let me know.

Thanks,
Bill

[albert dashevsky]

Great, thanks for the help thus far!

I really don’t like the navigation menu. And being that most users today are on mobile, unfortunately they will not be able to see the hover menu. Is it possible that the mobile users can see a regular sidebar menu and that users above 1024 px will see the hover menu?

[Bill Robbins]

On Mobile (smaller than 1024px), the click menu will be what users see instead of the hover one. If you would rather, we could set it so the custom nav widget is what’s visible on smaller screens. If you’ll add that widget back to your sidebar and let me know, I can send you over instructions on how to do that.

[albert dashevsky]

yes thats exactly what I would like!

[Bill Robbins]

Fantastic. Just let me know when you have that widget added back to the sidebar. Keep the current menu where it is too. Then I can send back the instructions on making them show up at the appropriate sizes.

[albert dashevsky]

Done.

[Bill Robbins]

Thanks. See how this works for you:

1. Go to your theme options page and choose the Advanced tab.
2. Scroll down to the Custom CSS box and add this:

   
   @media only screen and (min-width: 1024px) {
   
   	#sidebar .widget_nav_menu {
   		display: none;
   	}
   
   }
   
   @media only screen and (max-width: 1023px) {
   
   	#sidebar .widget_nav_menu {
   		display: block;
   	}
   	
   	#sidebar nav#side-menu,
   	nav#header-menu {
   		display: none !important;
   	}
   
   }
   

3. Update your settings.

Let me know if you run into trouble there.

Bill

[albert dashevsky]

Looks like it works. Thanks!

When I look at the site from my phone, the menu names are so close together, one right on top of another, how do I make it so it looks like it does on a desktop, a little more spaced out?

[Bill Robbins]

Try adding this to the Custom CSS too to adjust the spacing there:

#sidebar .widget_nav_menu li {
	margin-top: 7px;
}

See how that works for you now.

[albert dashevsky]

Great, that works!

So I changed the sidebar font size to “20”. Everything looks nice and even on mobile phone. However on my laptop, the hover menu seems like it’s still smaller. How can I adjust this? thanks.

[Bill Robbins]

With the default menu replaced, the built in control for size may not make a change here. You can use this to adjust the menu size on larger screens:

ul#primary-menu li {
	font-size: 20px;
}

Just change the 20px to the size you’d like to have there and that should do it. If you need to change the smaller screen menus you can use this:

ul#menu-main-menu li {
	font-size: 20px;
}

Have a great day,
Bill

[Author]

Posts