Forum Replies Created
-
Posts
-
Intuitively, I think you might want to start by connecting each month to its corresponding number. (Maybe in the slug?)
Then, if you're building this feature (the search-by-whatever list in the sidebar) in code, it's fairly easy to get WP and Genesis to make that number more important than the name of the month.
If you're not building in code but doing it in the Admin, it would be good if you told us how, so we can help you figure out how to get that numerical ordering in the mix. That's because there are several ways you might be doing that - with a plugin; with a custom menu; with the Genesis Featured Posts widget or even the Recent Posts widget. I bet folks can think of several more, and there's no way for us to tell from the front end which one you're actually using.
So, if you'd be willing to tell us how you're building that list, we can tell you how to arrange your months in their chronological order.
Cheers!
I hope it's as lovely in Sydney when you see this as it is now in California.
Sharing the good news about the wonders of modern CSS and the split-step. Either one should get you moving fast. 😀
That is bizarre.
I'd be curious to see how you filled out the form on the widgets page in the admin:
Are there at least three posts in that category?
What order did you choose to have it show your posts? Did you choose to offset any?
I ask because very often, when I think something isn't working as advertised, I find out it was something I missed - generally, something pretty simple.
If it's the widget, it might be that another plugin is interfering with it.
If you disable all your plugins, does the Featured Posts widget work?
If so, your next step is figuring out which one is the problem. The fastest way to do that is something I call The Dance:
Activate half of your plugins - say, the ones that start with the letters A-M.
Still have the problem? One of those plugins is to blame. Disable the ones that start with G-M.
STILL have the problem? Disable half again - D-F, maybe.
Repeat until you're down to one and still only showing the same post three times.
Now, what if the problem disappeared at any point?
Then you know the problem is NOT in that group of plugins.
Activate your plugins that start with N - Z.
Repeat the process.
Hope that helps!
Sharing the good news about the wonders of modern CSS and the split-step. Either one should get you moving fast. 😀
Actually, I think the iframe is fine. I suspect the map wants wider dimensions.
Sorry for the outburst.
Sharing the good news about the wonders of modern CSS and the split-step. Either one should get you moving fast. 😀
I think I have the same problem.
M
ine is showing - kind of - in the footer.As far as I can tell, this is a Google Maps problem. The iframe code is a whole lot longer than it used to be, and the readable code it spits out is a lot longer, too.
Here's the iframe:
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1563.6118527690373!2d-90.30544505256425!3d38.468248461054635!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x87d8c7f15ef5cdeb%3A0x1e1b3ba35d46aa4!2s5647+MO-231%2C+St+Louis%2C+MO+63129!5e0!3m2!1sen!2sus!4v1438983853999" width="300" height="600" frameborder="0" style="border:0" allowfullscreen=""></iframe>And you should see the mess it makes.
It basically barfs an entire html document - including a doctype, a head with STYLE SHEETS for flowers' sake, SCRIPTS (Why do I need scripts in the middle of my post, I mean listing?) a lot of absolutely-positioned divs and cat knows what else - into a space that I specified on the Google Maps site is 300 x 600.
I am annoyed to say the least.
I think for the moment I'm done embedding map code, unless that plugin will strip this ish out. It's insane. Screen grabs may have to do.
If my screen grab doesn't show, btw, it's a whole window of my 27" display, with dev tools open. The iframe code in the DOM tree goes the height of my screen.
smdh ...
Well, tennis was good this morning.
Sharing the good news about the wonders of modern CSS and the split-step. Either one should get you moving fast. 😀
The header is a horizontal graphic, and you have the background size set to contain:
@media only screen and (max-width: 767px) { .five-sixths, .four-sixths, .one-fourth, .one-half, .one-sixth, .one-third, .three-fourths, .three-sixths, .two-fourths, .two-sixths, .two-thirds { margin: 0; width: 100%; } .entry-meta { display: none; } .entry-footer .entry-meta { display: block; } .header-image .site-header .site-title a { background-size: contain !important; }With an !important no less.
You're probably aware that background-size: contain; is going to fit the whole graphic into the space one way or the other, proportionality be dumped.
Background-size: cover; would cover the entire area with a fraction of the graphic, which is no good either.
What I would do in your shoes is make a different version of that graphic that is vertical - show more of Rosie's torso, make the purple band behind her taller, stack both the purple type and the white type - until you've accommodated that basic shape.
If you use Chrome's dev tools (command-option-I or Windows-alt-I depending on your operating system) you can check your proportions in your desktop browser against a variety of devices, both iOS and Android, as you see fit.
FWIW, you can also add custom sizes. For instance, I keep a size for my 27" Thunderbolt so I can check the big view on my laptop when I travel. And if either of us worked with a sports team and needed to develop for a Jumbotron ... well, there we go!
Sharing the good news about the wonders of modern CSS and the split-step. Either one should get you moving fast. 😀
You can change anything and everything you want - as long as you're willing to learn how to use Cascading Style Sheets, or CSS. CSS is a coding language that lets you make one change, one time, to an element like entry titles, and have that change take hold on that element throughout your whole site.
There are ways to specify only some entry titles and not others, but that's beyond the scope of your question.
Just now I pulled up your site in Google Chrome and right-clicked on the post title. At the bottom of the popup menu is the choice Inspect Element.
That pulled up some extra panels, where I could see that the style information for your post types start at line 692 in your style.css file.
That section of the file reads like this now:
.entry-title { font-size: 36px; line-height: 1; } .entry-title a { border: none; color: #000; font-weight: 400; } .entry-title a:hover { color: #dd3333; }At the moment, your entry titles don't specify a particular font, which means they're using the same one that was declared earlier in the code for a particular level (h2, if you know some HTML) of headline.
To use a different one, add your choice to the block that starts on Line 692.
When you're done, you should have a block that looks like this:
.entry-title { font-family: 'MyNewFont', serif; font-size: 36px; line-height: 1; }where MyNewFont is the new font you've chosen.
A couple of caveats:
If you're happy with the style of type - the actual typeface family - but just want to change the weight, instead of font-family, use font-weight. We declare weights in multiples of 100:
100 - thin or extrathin or some cute name for omg you can barely see it
200-thin or hairline or extralight (these are rare)
300-light (I almost always use this at BIG sizes for entry titles and usually at medium sizes for body text.)
400-regular
600-semibold or demi
700-bold
900-extrabold or blackMany type families will diverge from this to fit the weights they actually have, and italics are the same number as their straight partners. To use bold-italic, you'd write:
font-weight: 700;
font-style: italic;If you want to change the size or the line height, you can make those changes in the existing values (36px and 1.0, respectively.) Line heights work best when you specify them as decimal multiples of one, with no units (0.1, 0.2 and so on).
If you come from a design background, you should be able to pick up CSS fairly fast and find it kinda fun. Three invaluable resources: CSS-Tricks, run by Chris Coyier, is in my toolbar for whenever I have a question about something. Chris and his friend Dave run a podcast called The ShopTalk Show, which is my car jam. And I've just started to play a bit on a site called CodePen.io , a project of Chris and two kids he went to high school with.
Yes, I'm a fan - I've learned a ton from him and his pals over the years. You will, too!
Mary Baum
Sharing the good news about the wonders of modern CSS and the split-step. Either one should get you moving fast. 😀
I'll second Moody's suggestion and elaborate a bit - you definitely want one of the themes with Pro in the name, since those are the ones that use html5. I would also recommend one of the most recent ones, or even two, that have features that crop up a lot in your day-to-day.
Wanna see how we handle parallax and sticky headers? Grab Parallax Pro or Altitude Pro.
Wanna see how we do a centered logo with main nav menus on either side? Modern Studio Pro came out just as I was launching a site with that very feature. (Thanks, Sridhar Katakam!)
Then, when you've built a site with those themes and dug through their code, you'll be ready to mess with the several starter child themes that are around. StudioPress has Genesis Sample, and I believe there are some that have Bootstrap and various other things baked in. I have one with Foundation 5 that I use to start client work - dunno how ready it is for prime time, but I do have it up on Github (/marybaum if you feel like kicking the tires).
Welcome and have fun!
Mary Baum
Sharing the good news about the wonders of modern CSS and the split-step. Either one should get you moving fast. 😀
Link please?
Sharing the good news about the wonders of modern CSS and the split-step. Either one should get you moving fast. 😀
Hi!
You need to change the dimensions in the CSS as well as the php.
In style.css on line 1217, change the height to 195px from what it says now:
.header-image .site-title > a { background: url(images/logo.png) no-repeat left; float: left; min-height: 60px; width: 100%; }to this:
.header-image .site-title > a { background: url(images/logo.png) no-repeat left; float: left; height: 195px; width: 100%; }Cheers!
MB
Sharing the good news about the wonders of modern CSS and the split-step. Either one should get you moving fast. 😀
Love the photography!
Don't worry about hover states on a mobile device.
They don't exist, and it's too bad we're all so addicted to them on the desktop.
People can kind of do a single-tap/double-tap thing on an iPad that has defined hover states, but I wouldn't count on that for anything. Android devices don't even do that.
Earlier today I was looking through some CSS in an old mobile-first framework and found some rules for touch events that I'd never noticed before, but they looked to be webkit-only, and they're three years old. In Genesis years, that's like taking advice from one of those old Japanese soldiers they used to find in the jungle in the 60s and 70s, who didn't know WWII was over.
But if you want to Google, the terms I'd use are mobile touch CSS.
Mary
Sharing the good news about the wonders of modern CSS and the split-step. Either one should get you moving fast. 😀
I have no experience with the Genesis Extender.
Copying and pasting snippets can be a crapshoot. So many devs have put snippets out there over the years, for whatever versions of Genesis and WordPress were current at the time, that it really pays to look at the date when a given snippet was posted.
(And, just now, I went looking for a snippet in the Snippets section here and found the links gone ... I wonder if I just didn't let them load long enough, or if they're being updated, or ... or ...)
But there is an alternative I highly recommend: start knowing what you're doing. Sign up for Lynda.com or Codecademy or both, or any other resource you like, and start really learning PHP.
It can be a slog, but what many devs won't tell you is that writing code is hard for everyone, especially at first, and then occasionally afterward.
I certainly am no ninja. I've been at this coding thing about five years, since I turned 50, and as a designer/marketer by training I'm much more at home in CSS.
But I do think the first step is to shift your mindset just a little, from I-don't-know to I'm-learning-how.
And.
Until you feel ready to work with snippets you understand, whatever my experience is with a tool you like is irrelevant.
Use it if it works for you! If in two months or two years you see that it's bloating your code, you'll know how to fix it. And, until then, who's going to be looking at your sites' code? Your family or your staff? The owner of some shoe store who got your name from her cousin?
Nah. Until you land a university's computer-science department as a client, I wouldn't worry.
Enjoy the spring. Genesis is a great tool and a great community for ladies over 21 who want to build great stuff.
Mary
Sharing the good news about the wonders of modern CSS and the split-step. Either one should get you moving fast. 😀
Link, please?
Sharing the good news about the wonders of modern CSS and the split-step. Either one should get you moving fast. 😀
Try this:
//* Force full-width-content layout setting
add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );You might also want to look at other options on that same page of snippets:
http://my.studiopress.com/snippets/admin-management/#force-layout-settings
Hope that helps!
Sharing the good news about the wonders of modern CSS and the split-step. Either one should get you moving fast. 😀
The Mailchimp widget has started doing something I really like: it sticks a cheat sheet of all the CSS we need to style the form right in the widget template.
Have you ever edited CSS - Cascading Style Sheets - before?
Sharing the good news about the wonders of modern CSS and the split-step. Either one should get you moving fast. 😀
I believe you have a plugin conflict.
I cannot urge you strongly enough to take Julia's advice about editing code on your local machine and then uploading it with FTP - she or I can help you set up a local environment for that, or you can just use a text editor (TextEdit or NotePad, depending) and an FTP client (there are lots of perfectly good free ones.)
To find your problem, we do what I call The Dance. Other folks call in a binary something-something, but I've been calling it The Dance for nigh-on 30 years -- we used to use it to fix problems with Macs, back in the day.
But first, you need that FTP client - and the FTP credentials to log in to your site. Those are probably in the email you got when you bought your hosting, assuming you did. If you had a developer or a relative do it, ask that person for that info.
(Keep it in a safe place. My veterinarian didn't have his, then his developer died. The hosting co is not exactly helping.)
This is important, because the only way to fix your problem is to reproduce it on purpose.
The basic process, then, is this - you'll log in to your site via FTP and see a list of folders - in the one called wp-content, there will be a folder called plugins.
You will create a new folder called Old Plugins, then move half the plugins from the Plugins folder into the Old Plugins folder.
Now log in to your back end as usual and try to edit something in your editor window. If everything is wonderful, you know the offending plugin is in the bunch you just removed. If the site crashes, you know the problem is in the half that are still active.
Now take half the plugins in whichever folder has the problem and add it to the folder that probably doesn't - repeat the process.
Eventually you should get down to a single plugin that you know is the bad one. Nuke it and find a replacement if you need whatever it does.
Hope that helps!
Sharing the good news about the wonders of modern CSS and the split-step. Either one should get you moving fast. 😀
That would work, but it puts content in a template file.
And that's kinda one of my pet peeves.
Here's why: Imagine that someone besides you needs to make a change down the road - maybe the pic needs updating, maybe the terminology changes because of a change in the industry. Meanwhile, you're on the vacation of a lifetime with the love of your life.
You really don't want somebody who doesn't know your code well to get all up in your files. And if they don't know html or php well, their simple change could bring down a white screen of death. Wanna guess who's gonna take the fall for that?
Also, there's no need to put text in a picture if it's just for typography. There's probably a web font available for your typeface - or a close version - and it's been five years since we had to stick to web-safe type.
So what I'd rather see you do is set up a category called something like 'front-posts' and set up two posts - maybe one with a big beauty photo as your background, and then each with your button and a little descriptive copy.
Then you'd edit your front-page.php (aka the home-page template file) to make two widgets - one to hold the photo and one button and the other to hold the other button.
Now, when someone wants to make a change, and you're on vacation, they edit the posts instead of the files. No broken site - and everyone's happy.
It's more work upfront, but imho it's totally worth it.
M
Sharing the good news about the wonders of modern CSS and the split-step. Either one should get you moving fast. 😀
BTW - based on your home page, you write very well.
Lotta folks on the web need decent writing.
MB
Sharing the good news about the wonders of modern CSS and the split-step. Either one should get you moving fast. 😀
You sure about that 800px? That's only slightly wider than a tablet in the portrait/vertical orientation. For wide screens, I usually use 1140 or 1280 - but that's not what you asked.
The simplest way to get all your content to line up is with the wrap class.
In style.css, there's a rule called .wrap:
.site-inner, .wrap { margin: 0 auto; max-width: 1140px; }It's the first rule under Site Containers, line 462 or thereabouts, depending what other edits you've made already.
Change that max-width to whatever you like, and you'll be good to go.
I also recommend adding this:
width: 100%;to the end of the rule.
That should help your content not get cropped off if someone visits from a mobile device before you've had a chance to work with your other device widths.
Cheers!
Oh. Almost forgot: to get the header narrower than the content, add this rule to the section of style.css that deals with headers - just to keep things organized -
.site-header .wrap { width: 80%; }The max-width will still be whatever value you set in the global .wrap class, but the header wrap will be 20% narrower. It will also still be centered, because the margin of 0 auto still applies. Those inherited values are what we mean by cascading style sheets.
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. 😀
Travis Mills is using the Agency Pro theme. Probably easier to switch to that than to mess with Parallax Pro to accomplish the same thing.
MB
Sharing the good news about the wonders of modern CSS and the split-step. Either one should get you moving fast. 😀
I just looked at your page in Chrome Dev Tools, which has a device emulator. Looks fine to me - it's centered on all the device sizes I looked at.
Also your CSS looks okay - as if it would produce the result you're going for. The two things I was looking for were:
You used a percentage to define the width.
You defined the margin as 0 auto.I think you're good to go.
MB
Sharing the good news about the wonders of modern CSS and the split-step. Either one should get you moving fast. 😀