You bet :-)

Chris

DOH! I feel like such an idiot. Thank you very much, Chris. My apologies to have bothered you with something I should have seen earlier. Moral of the story: no more website coding in the wee hours of the morning :-)

Thanks very much--that fixed it right up, of course.

Hi there,

There's an error in your markup...

#dropmenu li a:hover {
	text-decoration: none;
	background: rgb(88,88,88);
	color: #ffffff #important;
}

...should be this...

#dropmenu li a:hover {
	text-decoration: none;
	background: rgb(88,88,88);
	color: #ffffff !important;
}

You had #important instead of !important

Let me know if that works better.

Best,

Chris

Good evening,

I've customized the menus on my B+M based site to make the text a little larger, adjust the colors, and change around the font face (I'm using separate Google Fonts for normal text versus headers). The site is here: http://dantrimble.com.

The colors are almost entirely what I'm looking for now. The dropdown for menu items on the nav bar that have submenus now uses the same color as the triangle area that opens the sidebar on the page. For my menus, I currently have only one that has submenu items--Topics. So it uses that tealish color as the background, and white text for the individual menu items. As the hover changes from item to item, I'm using a dark gray background and white text to highlight the currently hovered menu item. And for the current page only, a light gray background color.

All perfect, except for ONE thing... Notice that on my dropdown under Topics, the highlight works as I move from one item to the next. White text, dark gray highlight color. I want that SAME effect when I hover over the menu items on the main level -- Home, About, Topics, Contact, etc. Currently, my CSS is giving me the background color in that scenario, but no matter what I do, it won't make the text color white when hovering. Just leaves it as the default text color for those items (which is the same dark gray I'm using for the highlight color).

My code is below. Note that I'm doing all customizations in a child theme, including the CSS--it's in the child's style.css. I have, however, tried doing these CSS tweaks in the theme options CSS editor within wp-admin. I have the same problem either way.

What am I doing wrong with this CSS--how do I get the text color to switch to white during a hover event for the 1st/top menu level?

#navigation {width: 620px; float: left;}
#dropmenu {list-style:none; position:relative; width:100%; z-index: 400;}

#dropmenu li {list-style:none; position:relative; float: left; line-height: 20px; width: 160x; margin-left: 30px;}

#dropmenu li a {
	display: block;
	line-height: 22.5px !important;
	font-size: 16px !important;
	text-transform: uppercase;
	color: #585858 !important;
	font-weight: 400 !important;
}
#dropmenu li a:hover {
	text-decoration: none;
	background: rgb(88,88,88);
	color: #ffffff #important;
}

#dropmenu li ul {
	list-style:none;
	display:none;
	position:absolute;
	width:220px; z-index:300; top:20px; left: 0;
	background: #748494 !important;
	padding: 5px 0;
	/* border-style: dotted; border-width:1px; border-color: lightGrey;
	-moz-border-radius: 6px; */
}
#dropmenu li ul li {position:relative; margin: 0; width:220px;}
#dropmenu li ul li a {line-height: 30px; padding: 0 15px; color: #ffffff !important;}
#dropmenu li ul li ul {}

#dropmenu li:hover ul ul,
#dropmenu li:hover ul ul ul,
#dropmenu li:hover ul ul ul ul {display:none;}
#dropmenu li:hover ul,
#dropmenu li li:hover ul,
#dropmenu li li li:hover ul,
#dropmenu li li li li:hover ul {display:block;}
#dropmenu li.current-menu-item > a,
#dropmenu li.current-menu-ancestor > a {background: lightGrey !important; -moz-border-radius: 6px;}

#plusSign {position: absolute; width: 31px; height: 30px; right: 30px; top: 30px; z-index: 1000; background: url(images/plus.png) no-repeat left top; cursor: pointer;}
#plusSign.closeMe {background-position: bottom left}

Hi there,

1. Yeah, Jetpack is a major headache.

2. Since the theme color options are applied in the theme settings, the styling is dynamically added in the header.php template file. Using the custom CSS section, the CSS is inserted under that color styling. If you don't want to use that, my best suggestion is to use !important.

Hope that helps!

Best,

Chris

Chris,

Thank you kindly for the fast reply.

#1 Argh! I don't know what to tell you. I went through all the plugins one by one over the weekend and persistently had the same problem. Now, it's working fine. I disabled all the plugins and it started working fine. I re-enabled all of them one by one, and it is still working. It did fail again one more time after turning Jetpack back on--turned it back on, it worked, then it didn't work, and then it continued working again. As of right now, all the plugins are back on including Jetpack and it seems to be working consistently. But that one off with Jetpack makes me wonder how consistent it will be...

#2 I do not like using the custom CSS section of the theme options panel because I want all of my CSS contained in their actual CSS files, rather than in the CSS files and buried in WordPress settings. I know this question is not related to support for your product, but if you happen to know off hand, can you tell me what I need to do inside my child theme's styles.css file to ensure that a style I'm applying will override the others?

Thanks,
Dan

Thanks for following up!

Best,

Chris

Hi there,

1. It looks like you're images are getting the proper rel="PrettyPhoto" added to the link. Try deactivating your plugins again so that I can take a look without those active (especially Jetpack, which is a notorious conflict creator). Let me know and I'll check it out.

2. Try adding your CSS edits to the custom CSS section of your theme options panel. This will help make sure your edits override other styling applied.

Thanks!

Chris

Whatever the problem was is fixed. I suspect my CDN server (hosted through CloudFlare) was probably just running very slowly and hadn't yet cached the new image.

Either way, it seems to be working fine.

I wanted to change the + sign so it is a question mark rather than a +, and keep the x for closing it. Seemed easy enough--I created my own version of plus.png, and stored it in my child theme's folder, in an images subfolder. Actually, to be specific, I copied the entire images folder from B+M and uploaded it to my child theme folder, and then changed the copied plus.png to my own version. (It is exactly the same dimensions and transparency).

In my child theme's CSS, I have the following:

/*
Theme Name: PolicyGeek R3
Theme URI: http://dantrimble.com
Description: PolicyGeek is a custom WordPress template, this particular release built off Brick + Mortar from Chris Molitor.
Author: Dan Trimble
Author URI: http://dantrimble.com
Template: wpbm
Version: 3.0
*/

@import url(../wpbm/style.css);

{snip}

#plusSign {position: absolute; width: 31px; height: 30px; right: 30px; top: 30px; z-index: 1000; background: url(images/plus.png) no-repeat left top; cursor: pointer;}
#plusSign.closeMe {background-position: bottom left}

Which of course is exactly the same as the original CSS file, but in this case, I would think images/plus.png should be pointing to child/images/plus.png, not the B+M theme's folder location. But it doesn't seem to be working.

What might I be doing wrong?

dt

Good morning,

First off, thank you for such a marvelously well designed theme. I jumped at it because the design was, almost exactly, what I had in mind for my site. I'm very happy with it thus far.

Being new to B+M, I'm having two problems with it I'm hoping you can shed some light on. After scouring all 12 pages of this forum plus the help documentation, I'm not sure what I'm doing wrong.

First... None of my images are showing up in a lightbox. If I click any of them, they simply open the image file directly. I saw the reference in the documentation to adding rel=”prettyPhoto” to image links to make them open up in the PrettyPhoto lightbox. However, it's my understanding from the documentation that an image gallery will do this automatically, and I only need to add rel=”prettyPhoto” to manually force a standalone image to open in the lightbox.

Second... I'm not an expert at CSS, but I'm reasonably familiar with it. And for the life of me, I cannot seem to change any element of the navigation menu colors. I'd like to slightly bump up the font size, and I'd like the background color of the dropdown menu to be the same color as the background of the triangle in the top right (#738594), with white link text.

All of my edits are in a child theme, so I have not modified ANY core/original files. This is my child theme's current CSS file; I've tried using the background=#738594 on a number of these elements, but it doesn't change.

/*
Theme Name: PolicyGeek R3
Theme URI: http://dantrimble.com
Description: PolicyGeek is a custom WordPress template, this particular release built off Brick + Mortar from Chris Molitor.
Author: Dan Trimble
Author URI: http://dantrimble.com
Template: wpbm
Version: 3.0
*/

@import url(../wpbm/style.css);

/*-------MAIN NAVIGATION STUFF--------*/
#navigation {width: 620px; float: left;}
#dropmenu {list-style:none; position:relative; width:100%; z-index: 400;}
#dropmenu li {list-style:none; position:relative; float: left; line-height: 20px; width: 160px; margin-left: 30px;}
#dropmenu li a { display: block; line-height: 20px; font-size: 10px; text-transform: uppercase; color: #666;}
#dropmenu li a:hover {text-decoration: none; color: #000;}
#dropmenu li ul {list-style:none; display:none; position:absolute; width:200px; z-index:300; top:20px; left: 0; background: #738594; padding: 5px 0;}
#dropmenu li ul li {position:relative; margin: 0;}
#dropmenu li ul li a {line-height: 30px; padding: 0 15px;}
#dropmenu li ul li ul {}
#dropmenu li:hover ul ul,
#dropmenu li:hover ul ul ul,
#dropmenu li:hover ul ul ul ul {display:none;}
#dropmenu li:hover ul,
#dropmenu li li:hover ul,
#dropmenu li li li:hover ul,
#dropmenu li li li li:hover ul {display:block;}
#dropmenu li.current-menu-item > a,
#dropmenu li.current-menu-ancestor > a {color: #000;}

Example URL:
http://dantrimble.com/ice-caves-under-mendenhall-glacier-ctd/

For both problems, I've tried all kinds of different options, including disabling plugins. Incidentally, these are the plugins I have installed: CloudFlare 1.3.9; Google XML Sitemaps 3.2.9; Jetpack 2.3.1; Mint Bird Feeder 0.8; N-Media MailChimp List subscriber form 3.2.4; Regenerate Thumbnails 2.2.4; Reveal IDs 1.4.1; and Travelmap 1.5.