[marybaum]

Good news! It's simpler than you think.

(And having been involved in kitchen remodeling, mostly peripherally, from ages 8 to 52, I'm more of a sister to you than a lot of people. Might have carried on with it, if it hadn't meant using 20/20 regularly. What an exorbitantly price pile of ... ! )

1. Go to Appearance - Menus in the admin and change the menu position so your menu doesn't live in primary nav - or anywhere else.
2. Now go to Widgets and stick a custom menu into the Header Right widget area. I generally throw the search widget in there too, a la http://tallyone.com, a redesign I did for a fighter pilot referred by an airline pilot.
3. Your site-header class already has {position: fixed;} declared, so once you get the menu and search up in there, everything should work fine.
4. I'm thinking you'll want to change up your menu CSS to give you a white background and dark links, since they'll be up inside your site header, next to your logo. If not, I suppose you can use a linear gradient to ease the transition from light background to dark.

Hope that helps!

Mary

---

Sharing the good news about the wonders of modern CSS and the split-step. Either one should get you moving fast. 😀

[marybaum]

Not in the same way.

But you can add them as custom links in your secondary nav, in Appearance - Menus from the Dashboard.

If you add your secondary nav as a custom menu to a widget area (instead of the Secondary Nav area), you can also add the Search widget. Further, you can add the markup for rss and other links to a text widget.

Both methods will work especially well if you use an icon font for the RSS and other links that lend themselves to that treatment.

MB

---

Sharing the good news about the wonders of modern CSS and the split-step. Either one should get you moving fast. 😀

[marybaum]

I don't think that would be a short snippet at all - that's why there are slider plugins. The Genesis Responsive Slider would be your best bet, and you can set it to whatever size and content parameters you need in that widget area in a couple of clicks.

The alternative would be either to write yourself a custom jQuery file - which I would find intimidating; don't know how you feel about that - or CSS animations, which I guess would work. Another, very simple way to sort of achieve that would be to take advantage of hover states - where you show content1 as default and content2 on hover.

But to have the fine control to have the content change every 5 seconds? I would use the slider. Between the settings in the dashboard and the slider's own CSS file, you can make that thing do backflips, and the JavaScript it needs is all there, written for you.

In fact, I've thought of playing with it in smaller divs just to see what would happen ... 😉

K. It's after 11 here, so I think it's bedtime for Momma. Got a shoot in the AM.

Hope this helped!

Mary

---

Sharing the good news about the wonders of modern CSS and the split-step. Either one should get you moving fast. 😀

[marybaum]

float: left and margin:left don't contradict each other. But generally when you float left, you want to add margin to the right, because you're floating your element to the left, and the content is filling the space to the right. Adding margin to the left will push the floated element out from the left side of whatever div it's sitting in.

A resource I absolutely love is Chris Coyier's CSS-Tricks. There's also a podcast called the ShopTalk Show, where Chris and Dave Rupert, another talented dev, and usually a guest, answer questions people have submitted about all sorts of things in the front-end world. As a result, I haven't heard a car-dealer's radio commercial in two years. 😉

If you look at the CSS in the Genesis theme itself, or in the Genesis Sample theme, you'll see the basic structure for a layout with columns is already there, in pixels. Often the first thing I do is change the horizontal units in the Sample theme (not EVAR the framework itself) to percentages.

So in the case of your three footer widgets, instead of thinking of them as 300px wide, each, think of them as 30% wide, with margin-right of 2%, except for the one on the absolute right, which won't have any margin at all. When you're dealing with multiple elements in a horizontal row, give yourself a little wiggle room by making sure the sum of the widths, margins, borders and padding don't quite add up to 100%. That way you won't have the element on the right fall down out of the row - which will definitely happen if everything adds up to more than 100%.

I've found that using percentages alone, instead of using pixels, will get you a lot of the way towards the fluid layout you want as the basis of a responsive design. Then the rest is just tweaking, which is fun (to me, anyway.)

Hope this helps!

MB

---

Sharing the good news about the wonders of modern CSS and the split-step. Either one should get you moving fast. 😀

[marybaum]

All in all, not bad!

On thing you might want to do is see if you can compress your big header image more. If you use Photoshop, try jpg Medium instead of High in the Save for Web & Devices dialogue box. And, personally, I only use .png if I have areas in an image I want to be transparent.

If you don't, there are image-optimization services online, and Google can guide you to them.

MB

---

Sharing the good news about the wonders of modern CSS and the split-step. Either one should get you moving fast. 😀

[marybaum]

The very top setting - Global Styles - is where you change the basic font for the whole site. Farther down, you can use others for navigation and headers, as you've discovered.

And I think I get why you put the word 'client' in quotes! 😉

---

Sharing the good news about the wonders of modern CSS and the split-step. Either one should get you moving fast. 😀

[marybaum]

Could you do a Boolean there?

'category_name' => 'blog' || 'quote' || 'video',

I'm asking as much as suggesting. I don't know if a Boolean counts as a string.

Another thing might be to declare a variable:

$catname = 'blog' || 'quote' || 'video';

then do

'category_name' => $catname,

I have no idea, without trying them myself, if those would work.

Guess I oughta Google argument syntax. 😉

---

Sharing the good news about the wonders of modern CSS and the split-step. Either one should get you moving fast. 😀

[marybaum]

There's actually a faster way to find your misbehaving plugin. My husband and other degreed engineers call it the binary something-or-other - binary extraction, maybe?

I call it The Dance.

1. Start by deactivating all your plugins at once. To keep track of where you are, disable them by moving them into a different folder. Call that folder something like Disabled Plugins. <br />Problem fixed? Good. it really is a bad plugin.
2. Put half of them back into the real plugins folder and activate. Problem back? Your bad plugin is one of these. Deactivate half. <br />Problem still fixed? Deactivate this half and put them into another folder, called maybe disabled-clean. Now activate the other half.
3. Repeat with ever-shrinking halves until you've isolated the offending plugin.

If, for example, you have ten total plugins, you should have your answer in four moves at most. That's why it's a dance instead of a slog . . .

Hope it helps!

MB

---

Sharing the good news about the wonders of modern CSS and the split-step. Either one should get you moving fast. 😀

[marybaum]

Oh yeah.

I would bet it's easier to start with the Genesis Simple Social Icons plugin, but I've yet to do it that way. No - I've done it the way you're proposing to do it - by performing code surgery on the Jetpack sharing module.

So.

You're gonna need a local development environment: MAMP, WAMP, XAMPP for the Mac, Windows or Linux/anything, respectively, and a code editor. I like Aptana Studio a whole lot. It's free, and it has versions for the Mac and Windows. It also has a built-in FTP client.

With me so far?

In an ideal world, you already

a. know what I'm talking about
b. have this set up for your style changes.

Once you've got this environment set up, get the FTP login from your web host if you don't have them already, and download your current theme and plugin files. This should look like dragging the files from one window - your host server - to another - your hard drive.

Make sure you've downloaded the Jetpack plugin.

Now find the sharing module, and inside that folder you should see sharing.css and at least one php file.
You'll edit the text in the php file - it will probably either be in some html, or else it will be in red, in quotes, if it's part of a section of php code.

Edit the css as you see fit, and if all you want to do is blow away the words 'Share this:' you can just do that. Leave the set of empty single quotes there.

Hope that gets you pointed in the right direction!

MB

---

Sharing the good news about the wonders of modern CSS and the split-step. Either one should get you moving fast. 😀

[marybaum]

Link please?

Also, there are a few ways you can add places for widgets, shortcode or no shortcode.

One is to use the plugin Genesis Simple Sidebars.

Another is to code them in yourself - the way I do it, and the way I teach it, it's really a very straightforward process of editing three files: a new template file you create, called page_events.php; functions.php and of course your stylesheet.

I need to run some errands, but I'll check in when I get back - I'm also waiting for something from a client - in a couple of hours. If you can't wait, you can also watch this video. 😉 http://wordpress.tv/2014/03/01/mary-baum-three-files-infinite-layouts-the-designers-guide-to-total-creativefreedom/

MB

---

Sharing the good news about the wonders of modern CSS and the split-step. Either one should get you moving fast. 😀

[marybaum]

A followup: At a loss for what else to do, I added my type rules manually to each breakpoint. That worked, but I would love to know why I had to do that.

I had tried:

Dumping my functions.php file and starting with a new one.
Filtering the viewport meta tag to start with a minimum scale of 2 instead of 1.
Rewriting shorthand font: rules as long-form, and making sure every declaration had rems and percentages.

It's as if my type rules didn't cascade, when usually, everyone's does.

MB

---

Sharing the good news about the wonders of modern CSS and the split-step. Either one should get you moving fast. 😀

[marybaum]

Duplicate those rules and then add the .home body class in front of them:

.home nav.nav-primary {
background-color: #BADA55;
float: left;
margin: 0 1.2rem;
}

And so on.

Two ways to handle the home-page image:

.home .title-area {
background-image: url(http://yoursite.com/images/homepic) 0 0 no-repeat;
}

Or set the header image in either the Genesis Theme settings or the Customizer, and specify a different image for the home page.

If you want a completely custom home-page layout, write the markup in a separate file called front-page.php and use it to lay out the header, footer and widgeted areas.

In general, if you don't find CSS selectors in your style sheet, but you see them in Firebug or Chrome dev tools, you can just add them to your stylesheet and have your way with them.

Especially if you're developing a custom theme based on Genesis Sample.

Hope this helps!

Mary Baum

---

Sharing the good news about the wonders of modern CSS and the split-step. Either one should get you moving fast. 😀

[marybaum]

Or you could probably also set up two mini-widget areas, or a single, 2-column area - make it a class and call it 2colmenu, perhaps - inside the footer widget ...

Registering the area(s) in functions.php, then create a template file. Name it 2colfootermenu.php maybe - and write your markup in there.

That would be much easier - then, in the Widgets panel, dump your menu items where you want them.

MB

---

Sharing the good news about the wonders of modern CSS and the split-step. Either one should get you moving fast. 😀

[marybaum]

There is, if you're willing to find the php file it's buried in, make your changes and save a copy somewhere else on your hard drive, so that when you update your theme or WP Core, you can replace the file instead of having to find and recode it again.

I do that with WooCommerce, because I don't like their dialogue copy (insert 20-minute riff here). It's a pain, but worth it imho.

I'm just guessing the code you're looking for is in footer.php - or you could possibly add your html to the footer-customization code that goes in functions.php.

Now I'm curious and off to take a look . . .

Hope this helps a little!

MB

---

Sharing the good news about the wonders of modern CSS and the split-step. Either one should get you moving fast. 😀

[marybaum]

Oh - to change the order, I manipulate the publication dates of the posts. I suppose you could use Reveal ID or something else to manipulate the post IDs, or you could mess with the titles so the alphabetical order of those matches the sequence you want to show them in.

But the cleanest thing would probably be to manipulate the post IDs.

---

Sharing the good news about the wonders of modern CSS and the split-step. Either one should get you moving fast. 😀

[marybaum]

Depends how neat you want it to be.

Do you want the total space your portfolio pieces occupy (aka the containing div) to line up? Then the pix can be different sizes and proportions inside that space.

Do you want neat rows of pictures, or of the containing divs, but you don't care about columns lining up? Then you'll want to make the containing divs the same height - and I would think you'd want the images the same height inside those divs.

Or would you like neat columns? Then the outer divs could be different heights, but all the same width. And, again, you'll probably like the columns better if the images and text inside those divs are also the same width.

If you want to lock the divs in a grid, but the images can be different sizes, that's an option too.

Finally, yes. If you want everything locked down in a grid that lines up both horizontally and vertically, and you want the images to line up too, they'll have to be the same size.

Darn geometry.

Actually don't darn geometry - darn socks (or just buy new ones.)

Clearly I need lunch - that joke was terrible. But I hope the advice helped. 😉

MB

---

Sharing the good news about the wonders of modern CSS and the split-step. Either one should get you moving fast. 😀

[marybaum]

Dorian,

I generally @import the typeface's stylesheet.

I drop the font files and the style sheet - renamed something other than stylesheet.css, so I don't have four sheets with that name - in a folder for the type family, and the family folders in a folder called type.

Then I do this:

@import url(type/familyfolder/familyname.css);

And I make permanent copies of those folders on my hard drive. Some of these families, with multiple weights, are a real pain to set up like this - I only want to do it once. 😉

Mary

---

Sharing the good news about the wonders of modern CSS and the split-step. Either one should get you moving fast. 😀

[marybaum]

Search bar: There's a checkbox/dropdown in Genesis Theme Settings that will put the search bar at the right of your nav menu - right in your admin.

Social icons: You;ll need to move them from the header widget area to a new one you create that's on the same line with the nav bar.

Right now your nav bar is 100% of the width of your container - you'll want to give it less than that and float it left. Then you'll need to add a brand-new widgeted area that floats right.

Here's a tutorial to get you started on that: http://my.studiopress.com/tutorials/register-widget-area/ - note the part where you'll need to use a hook to show the widgeted area to the right of your nav.

MB

---

Sharing the good news about the wonders of modern CSS and the split-step. Either one should get you moving fast. 😀

[marybaum]

You're welcome!

---

Sharing the good news about the wonders of modern CSS and the split-step. Either one should get you moving fast. 😀

[marybaum]

You haven't lost it - you just haven't finished it. Certain things, like the title and widget areas in your header, and the content and sidebar areas in your site-inner div, need restyling inside your narrower media queries - or, preferably, need you to define them as percentages from the top of your sheet.

So not 500px and 300px, but 60% and 30%, or whatever, of the total width. Then, at a certain width - by which I really mean narrowness, you'll want to remove those floats and make each thing take up the whole width (100%) of the space.

Finally, your video needs to respond to your changing screen size, too. Here are some instructions I've used - and actually need to apply to some places in a few other sites (but don't tell anyone. It's a secret ...) -http://webdesignerwall.com/tutorials/css-elastic-videos

Hope this helps.

MB

---

Sharing the good news about the wonders of modern CSS and the split-step. Either one should get you moving fast. 😀

[Author]

Posts