[Tom]

OK. What if you were to go back to basics and remove the Woo CSS from the theme style.css? I'm not sure what benefit comes from combining the two and it can lead to complications. In a quick test setup with Agency Pro, Woocommerce plugin and the Genesis Connect for WooCommerce plugin, the problem from your DropBox screencaps does not arise.

For those situations where you need to restyle a Woo element the 'Trump' plugin should work well - you should only need to add to the theme style.css those specific Woo elements (and "!important" should not be required).

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[Tom]

I think you can fix this with some help from Carrie Dils:

WooCommerce & Genesis: An !Important Style Tip For You

Genesis Style Trump plugin

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[Tom]

I had a look at this @ 3am - back for another look as this is an interesting problem.

I can see what you mean about the smaller text and menu non-wrap when using both the default browser and Chrome on a Samsung TAB at 1024px x 600px. Chrome's device emulation and other tools such as screenqueri.es, breakpointtester.com and the StudioPress emulation test page also fail to show the same problem as on a real device. It's tough to suss out as the browser dev tools aren't available on the tablet, so others can't make adjustments and see them happen on their handheld devices.

At 1023px you've got a lot happening in your media query. I'd start by paring that down and seeing what changes when you reload on your tablet or phone. For instance, your search container goes 100% but overlays the top of the nav menu.

Your CSS does throw a lot of errors (37) and warnings (75) at the W3.org CSS validator. These aren't always killers, but 2 errors seem to be in your Genesis style.css (i.e. not in your theme style.css).

If that all pans out, I'd be tempted to disable your respond.js plugin just in case it's fiddling with the smaller device browsers somehow - I know that's a long shot but.... (Also interested to know if you've had good results with that on other projects.)

Please do let us know how this turns out.

(PS. Your "MEMO 376 December 9th 2013" sidebar link is 404.)
(PPS. Your CSS is nicely commented. 🙂 )

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[Tom]

Hi Scott,

It's not clear what your problem is - kind of sounds like things work until you use Twenty Thirteen. <?>

Have you asked over at Appfinite about using SimplePress with Adapt?

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[Tom]

Judith, can you share a link to your site page with the button/image problem?

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[Tom]

@jrod

That site is using the My Life theme from Justin Tadlock, not a Genesis theme of any type.

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[Tom]

@coralseait ... It looks like you may have been replying to me in #69170 ...

"would custom post types with category and tags help? Or is the need for physical folders on the file system as well?"

Physical folder support can be a big plus for organization and also updates with FTP; it's one of the first things that attracted me to NGG

You have good point that images can be managed and referenced as just 'data', where the repository is just the image collection. I guess that would be an element of a strong contender to replace NGG. How would you use CPT and tags/tax to manage images and galleries? (seems like it could be alot of work!)

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[Tom]

@mealtog ... Your confidence in Jetpack is admirable, but they are not without fault. Please see this article from yoast.com: Jetpack and WordPress SEO. Joost deValk may also not be infallible, but he showed remarkable restraint when Jetpack walked all over courtesy and convention (and his plugin) a little less than a year ago.

Carousel IMHO is just another display tool of dozens available. (NextGen alone supports ~18.) I'm looking for something that reduces labour and adds management on the WP backend: image organization/access and author ease of selection and reference in the post editor. NextGen seems to have thrown these away with 2.0+.

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[Tom]

Lisa -- yes, a logged-in connection is required for some of the Jetpack services. I gave up on Jetpack when I found their Photon CDN couldn't handle .gif's (for the few that I had reason to use), their publicize tool failed to maintain connections and it all seemed like too much work when there are other good alternatives.

I'm not averse to exploring it again, but a priority would be finding a gallery manger that can deftly handle thousands of images in many small collections.

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[Tom]

There are so many lightboxes and display tools ... What I'm in search of is something to replace the folder and organization capabilities of NextGen and allow for detailed image tagging to build multiple display galleries from the organized collections using those tags.

NextGen Gallery plus "Nextgen Gallery Powertags" was doing it until NGG 2.0 broke NGP.

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[Tom]

Hi Lisa,

Like @Summer, I am firmly planted with version 1.9.13, the last before the 2.0 mess. One of my sites breaks because it also uses a companion plugin for NGG and now longer works. The author of the companion is fed up with Photocrati and doesn't intend to 'upgrade' his plugin to be compatible. Plus, NGG 2.0 has introduced blocks to a smooth workflow - what once took 1 step can now take 3 and shortcodes are now an abomination.

There is an alternative of sorts: "NextCellent Gallery - NextGEN Legacy", a fork of NGG from 1.9.13.
http://wordpress.org/plugins/nextcellent-gallery-nextgen-legacy/

It is not a guaranteed replacement, but it is encouraging:

Users wishing avoid NextGEN 2.x.x and beyond for the moment. Even though, I strongly suggest to analyze your schedule and formulate a migration. That is should be the way to go in the future.

I am going to have to do some testing with 3.7 and the latest 2.33 from NGG. Also Gmedia Gallery (thanks, @Summer).

Do be careful with any migration path as you can toast your image galleries fairly easily.

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[Tom]

This didn't quite work for me (on a long search for a solution) but I did find one from Bill Erickson in his article: Customizing the WordPress Query [Change Posts Per Page].

Just replace '18' with '-1' to display all posts and adjust to apply to your page(s).

Additional reference here: http://codex.wordpress.org/Class_Reference/WP_Query#Pagination_Parameters

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[Tom]

@RobG : Exactly. I learn something worthwhile on every visit here, largely because of the members of these forums. (The slightly lesser reason is that Genesis and SP is pretty cool stuff.) Also the queries from here often spin off into interesting blog posts from various authors.

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[Tom]

I'm not sure if you're still trying to duplicate a 'split menu' effect, but I can tell you this: it's not two menus but only one.

Without having the time to go into detail, the centered, circular logo is actually the header image ('though not displayed as a usual header image). The Id of the middle menu item is used as a CSS hook to display the header.png as a background image for that element. Additional CSS is used to add mild hover styling.

The author of your reference site has taken some pretty extensive steps to control the browser and obfuscate her HTML and CSS so that you cannot (easily) look behind the scenes. It can actually be easily and clearly found and reviewed if you wish to learn about the structure and styling of the page. I was able to do the following using Chrome:

To review the HTML, load the page, then select: Menu > Tools > View Source.

To review the CSS of the page: From the HTML source, find in the HTML header the link to the Modern Portfolio style sheet (/modern-portfolio/style.css)

You can also review the interaction of CSS to each of the pages in Chrome:
Open a new tab in Chrome; activate the element inspector (F12); load the page you wish to review. Inspect the CSS.

If you still need help (I realize you might be rather 'busy' just now if you're Miss Brittany!) ask again in this thread and someone will drop in to lend a hand.

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[Tom]

It's a bit of an unusual request as the menu icon or "hamburger" cleans up the space and has become widely recognized as the menu to have on mobile devices. No lecture from me, though I do wonder who "Genesis" is.

In your style.css look for the section "@media only screen and (max-width: 768px)".

To maintain the original menu, comment out or delete the following

	.responsive-menu {
		display: none;
	}

To remove the 'hamburger' menu (icon), modify the following to read as "display: none;":

	#responsive-menu-icon {
		display: block;
	}

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[Tom]

Hi Cathy,

Prose is a great way to get started with Genesis.

Q1. Notice boxes are a CSS class applied to any content you might add in a post. Try the following:

<p class='notice'>This is a styled notice box.</p>

Q2. Prose comes with two default menu locations, Primary is above the header area, Secondary is below. Try Secondary to start with.

Q3. Try the "Genesis Simple Hooks" plugin. A good companion plugin is the "Genesis Visual Hook Guide". For additional Prose customization, the "Genesis Prose Extras" plugin may help. The "Custom Code" area serves as your replacement for adding PHP and CSS mods in Prose.

The right place? The "Design Tips and Tricks" community forum might be a little more on-topic, but you'll find helpful feedback in all the community forums.

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[Tom]

There is a very good review of options on this page: Pure CSS: Remove Link Properties for Linked Images with Borders ... however, they're not working for me tonight.

Anyone else want to have a look at some of these potential methods?

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[Tom]

Re: your menus - they look just like in the plain Associate theme: rounded at the left of the first and right of the last, plain square blocks in between.

To add a string of social icons at the top of the page like your reference page, we will use a small bit of PHP to add a new menu area and a Genesis plugin from David Decker designed just for this purpose.

The PHP is adapted from a menu gists by Travis Smith, aka WPsmith. This is reasonably current but, of course, there may be other and better ways to achieve the same result.

First, code: add the following to the bottom of your functions.php file. This will add a new menu area called "Top Navigation Menu".

add_action( 'genesis_header', 'do_top_nav', 5 );
/**
 * Output Top Navigation
 */
function do_top_nav() {
  /** Do nothing if menu not supported */
	if ( ! genesis_nav_menu_supported( 'top' ) )
		return;
 
	/** If menu is assigned to theme location, output */
	if ( has_nav_menu( 'top' ) ) {
		$args = array(
			'theme_location' => 'top',
			'container'      => '',
			'menu_class'     => genesis_get_option( 'nav_superfish' ) ? 'menu genesis-nav-menu menu-top superfish' : 'menu genesis-nav-menu menu-top',
			'echo'           => 0,
		);
 
		$nav = wp_nav_menu( $args );
 
		/** Wrap nav menu with div and .wrap div if applied to #nav */
		$nav_output = sprintf( '<div id="top-nav">%2$s%1$s%3$s</div>', $nav, genesis_structural_wrap( 'nav', 'open', 0 ), genesis_structural_wrap( 'nav', 'close', 0 ) );
 
		echo $nav_output;
	}

This new Top Navigation Menu is used to maintain the links for your social networks and RSS feed.

Second, install and activate the Genesis Social Profiles Menu plugin.

The plugin delivers 13 icons for popular social networks, mail and RSS, otherwise they would be text-only menu items. The detailed plugin instructions page shows how to add and size the social network icons. For instance, "twitter-prl-s16" gives you a 16x16 pixel Twitter icon.

We also need to add a small bit of code to the bottom of your style.css file to clean up theme integration:`.menu-top {
background: none !important;
}`

Your menu options now look like this:

That should do it.
(You're going to have to change your handle, as you're no longer a complete novice.)

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[Tom]

It looks like you are trying to place a 1px gray solid border to the right side of the sidebar. (I think.)

Your width is 960px, but you have padding of 2x8=16px and the lines of 2x1=2px totalling 978px. This pushes your right border and some of that padding out of the main #wrap.

You need to shrink your content and/or sidebar by a total of 15-20px, and adjust padding to make room for your border and space things out more.

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[Tom]

In the 800px media query:

body.custom-background {
background-image: none !important;
background-color: red !important;
}

( Sorry, but red ?? 🙂 )

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[Author]

Posts