Creating a custom color for main menu w/included PSD files and child theme

[canuck]

I need some advice.

I am graphically challenged in that modifying colours without the original PSD file is not possible.

What I would like to do is for the site http://frackleton.com/nepeanringette.ca/ , you will notice a dark blue in the logo. I would like this dark blue to be in place of the black menu bar. How difficult is this in terms of files which need to be changed? Has anyone attempted this, and if so, which updates did you have to do?

Topic

[Jason Bobich]

Hi there,

This will be a customization you’ll need to to make to the theme that’s going to require child theme knowledge, CSS knowledge, and Photoshop knowledge.

Video on Child themes: https://vimeo.com/70832266

I am graphically challenged in that modifying colours without the original PSD file is not possible.

Well then you’re in luck because the original PSD file included to create the menus is included in your download package. 🙂

In your package from ThemeForest look in the PSD folder and see the file menu-flip_2x.psd and menu-flip_1x.psd. Use this to to design your menu color.

Then copy the folder for your edited menu into the cooresponding menu-flip-sprites_2x.psd and menu-flip-sprites_1x.psd files. Rasterize the menu folder, and chop it up to fit in the sprited image.

You’ll want to end up with two final images like this:

http://demoblvd.com/themes/alyeska/wp-content/themes/alyeska/assets/images/layout/menu/menu-flip-dark_2x.png

http://demoblvd.com/themes/alyeska/wp-content/themes/alyeska/assets/images/layout/menu/menu-flip-dark.png

Make sure you have a child theme installed for your customization, and organize these images somewhere in there. If it were me, I’d create a folder called “images” in the child theme and put them in there like:

/images/my-menu-flip_2x.png

/images/my-menu-flip.png

Next you’ve got your CSS customizations. — You need to point your own overriding CSS in your child theme’s style.css to your new images. The easiest thing here would be probably just to look at /assets/css/menus.css and copy the chunk that corresponds to the dark flip menu to your child theme’s style.css as a starting point to customize:

/* FLIP OVER DARK */
.flip-dark .menu-left,
.flip-dark .menu-right,
.flip-dark .menu-middle,
.flip-dark .sf-menu > li > a:hover {
	background-image: url(../images/layout/menu/menu-flip-dark.png);
}
.flip-dark #search-trigger {
	background-image: url(../images/layout/menu/search-popup-trigger-dark.png);
}
@media 	only screen and (-webkit-min-device-pixel-ratio: 1.5),
		only screen and (-moz-min-device-pixel-ratio: 1.5),
		only screen and (-o-min-device-pixel-ratio: 1.5),
		only screen and (min-device-pixel-ratio: 1.5),
		only screen and (min-resolution: 1.5dppx) {
	.flip-dark .menu-left,
	.flip-dark .menu-right,
	.flip-dark .menu-middle,
	.flip-dark .sf-menu > li > a:hover {
		background-image: url(../images/layout/menu/menu-flip-dark_2x.png);
		background-size: 17px 228px;
	}
	.flip-dark #search-trigger {
		background-image: url(../images/layout/menu/search-popup-trigger-dark_2x.png);
		background-size: 30px 60px;
	}
}
.flip-dark .sf-menu > li > a,
.flip-dark span.responsive-nav-text {
	color: #eaeaea;
	text-shadow: #000000 1px 1px 1px;
}
.flip-dark .sf-menu ul {
	background-color: #282828;
	border-color: #000000;
}
.flip-dark .sf-menu li li a {
	color: #ffffff;
}
.flip-dark .sf-menu li li a:hover {
	background-color: #313131;
}

Then go through that and make whatever changes you want. Remember that image paths in CSS are relative to the CSS file itself. So, if your images are located in a subfolder called “images” then your image paths will look like this for example:

.flip-dark .menu-left,
.flip-dark .menu-right,
.flip-dark .menu-middle,
.flip-dark .sf-menu > li > a:hover {
	background-image: url(images/my-menu-flip.png);
}

[canuck]

Thank you for the very detailed response. Appreciated.

[Author]

Replies