Forum Replies Created
-
Posts
-
Actually, I have not heard such great things about w3schools from the folks whose podcasts I listen to and whose books I read. Apparently they have taught some inaccurate things from time to time.
I LOVE LOVE LOVE CSS-Tricks from Chris Coyier, and I learned a lot from the book CSS: The Missing Manual.
And when I'm alone in the car, I'm listening to the Shoptalk Show, from Chris Coyier and Dave Rupert. It's a little advanced, but back last summer when I had reason to be driving through the countryside, it was a way better alternative for me than whatever would have been on the radio in rural Illinois. 😉
If you own the Adobe Creative Suite, I was actually forced to learn by using Dreamweaver, back in 2007, when they threw Adobe GoLive out and put Dreamweaver in. I write in it to this day.
Chantal, I, too, am not crazy about Firebug - takes too long to get to the element I'm trying to style. I much prefer the built-in inspectors in Chrome and Firefox - accessible when you hit Cmd (Ctrl) - Opt(Alt) - I. These days, the Chrome inspector actually shows faint gridlines radiating from the element I've selected to a ruler that runs down the top and left of the browser window, so I can be sure I'm inspecting the right thing.
One thing is critical, though, as you Google around for learning tools: Check the dates. There's a lot of old information out there. I think you don't want to look at much of anything older than 2011, or you'll get the wrong idea about type, particularly. Webfonts are not new and experimental; they're mainstream, and anything you see that tells you you have to stick to the five type families that come on every Windows machines is, at this point, just plain wrong.
I don't believe you have to use browser prefixes on box shadows and corner radii unless your target audiences are people you know to have old machines and old browsers - federal agencies, the very rich (I am NOT kidding ... ), much of Corporate America (One midsize company I know of actually has ALL WP sites blocked as social media!) ... you get the idea.
Hope this all helps.
Mary Baum
Sharing the good news about the wonders of modern CSS and the split-step. Either one should get you moving fast. 😀
There is also a CSS-only way to do it if you're willing to ignore Internet Explorer or go to great lengths to offer workarounds like Modernizr and some others. I'm more interested in learning php at the moment, so I started with the geeky stuff first.
That would be to set up your list items as nth-child block elements, give them background images and set the text to indent way outside the borders:
ul ul li:nth-child(1) {
background: url(http://yoursite.com/images/cat.png) top center no-repeat;
display: inline-block;
text-indent:-999px;
}ul ul li:nth-child(2) {
background: url(http://yoursite.com/images/dog.png) top center no-repeat;
display: inline-block;
text-indent:-999px;
}ul ul li:nth-child(3) {
background: url(http://yoursite.com/images/bunny.png) top center no-repeat;
display: inline-block;
text-indent:-999px;
}
Not that your images are cute, fuzzy animals, but you get the idea. Also, your theme may designate the subnav list items differently, and no doubt you have other properties listed.
Sharing the good news about the wonders of modern CSS and the split-step. Either one should get you moving fast. 😀
There is also a CSS-only way to do it if you're willing to ignore Internet Explorer or go to great lengths to offer workarounds like Modernizr and some others. I'm more interested in learning php at the moment, so I started with the geeky stuff first.That would be to set up your list items as nth-child block elements, give them background images and set the text to indent way outside the borders:li
Sharing the good news about the wonders of modern CSS and the split-step. Either one should get you moving fast. 😀
There is also a CSS-only way to do it if you're willing to ignore Internet Explorer or go to great lengths to offer workarounds like Modernizr and some others. I'm more interested in learning php at the moment, so I started with the geeky stuff first.
That would be to set up your list items as nth-child block elements, give them background images and set the text to indent way outside the borders:
li
Sharing the good news about the wonders of modern CSS and the split-step. Either one should get you moving fast. 😀
I haven't used images as navigation in a long time - like, since I learned CSS in 2007. But I would think one way to do it would be to create some plain ol' html markup for the secondary nav that looks like this:
<ul>
<li><a href="http://yoursite.com/link1.html"><img src="http://yoursite.com/image1" title="title" blah blah="gobbledygook attributes"/></a></li>
<li><a href="http://yoursite.com/link2.html"><img src="http://yoursite.com/image2" title="title" blah blah="gobbledygook attributes"/></a></li>
<li><a href="http://yoursite.com/link3.html"><img src="http://yoursite.com/image3" title="title" blah blah="gobbledygook attributes"/></a></li>
</ul>
Where blah blah="gobbledygook attributes" are whatever dimensions, alt text and other attributes you want to stick in there. I've found that stripping the dimensions out of there makes an image shrink down to the size of its containing div if I need to make the div smaller - as in, when I want to make a column class smaller, or in a responsive design.
What I'm less sure of is what to do with this markup.
I can imagine three ways to handle it:
1. as a hook with the Genesis Simple Hooks plugin;
2. as a text widget - since we can add html markup in the text-widget box - after creating a php file (subnav.php maybe)that creates a widget area in the nav div:
<?php
/**Creates a widget area in the subnav div.
?><div id="subnav" class="wrap" class="widget-area">
<?php
genesis_structural_wrap( 'subnav_wrap' );
do_action( 'genesis_subnav_wrap_widget_area' );
genesis_structural_wrap( 'subnav_wrap', 'close');?>
</div>
And registering the widget area in functions.php:
genesis_register_sidebar( array(
'id' => 'subnav',
'name' => __( 'subnav, 'yourtheme' ),
'description' => __( 'This is your new subnav.', 'yourtheme' ),
) );Or 3. Copying the subnav chunk of the original menu.php -- the action 'genesis_do_subnav' to a new file in your theme and naming that new file subnav.php, then editing that to take out almost all the php and leaving just the html markup with the images as links.
In the end, that might be the simplest thing.
Mary Baum
Sharing the good news about the wonders of modern CSS and the split-step. Either one should get you moving fast. 😀
As I suspected, now that I'm no longer riding in a moving car:
The original Algerian from 20 years ago is available as a hosted webfont at fonts.com: http://www.fonts.com/search/web-fonts?searchtext=Algerian&SearchIn=web-fonts#product_top
Don't know of you can access in the free account or need to upgrade to the $10/month account.
An updated version is is for sale for $35 at Fontspring: https://www.fontspring.com/fonts/fontmesa/algerian-mesa
Mary Baum
Sharing the good news about the wonders of modern CSS and the split-step. Either one should get you moving fast. 😀
Algerian is not. You'll need to find a way to use it with @ font-face; I would be fairly confident you can use it with the free account at fonts.com, which is a great source for moderately old typefaces. If you want to own a desktop copy and upload a webfont-formatted package to your own server, you might find it on Fontspring.com or fontsite.com. If you use fontsite, you'll just be downloading the .otf but you'll have the right to make a font-face kit at fontsquirrel.com or with a desktop converter.
Whatever you do, please don't just make your kit with a downloaded font from some site like Dafont. The files from sites like those are not necessarily free; a lot are pirated and uploaded. In the case of Algerian, your maximum exposure to buy the font for your site is under $20, so it's well worth it to go legit.
Hope that helps.
Mary Baum
http://wpstl-video.org
Sharing the good news about the wonders of modern CSS and the split-step. Either one should get you moving fast. 😀
In Theme Settings, under the Genesis menu on the Dashboard, there's a checkbox for Content Archives that lets you choose between full content and excerpts. Choose excerpts. I've taken a screenshot, but I need to go look up how to attach it to my reply.
Mary Baum
http://marginhancers.com
Sharing the good news about the wonders of modern CSS and the split-step. Either one should get you moving fast. 😀
If I were you I'd think twice about that. When I'm in user mode, nothing drives me away from a site faster than any kind of sound that starts playing as soon as a page loads. Chances are good that I'm either already listening to something else - and now I have two sources of sound going, and I'm madly looking for the pause button on the sound that I didn't start myself (often well hidden) or I don't want to disturb the people around me with surprise sounds coming from my computer.
So again, I beg you, please don't add sound that plays automatically on load ...
Mary Baum
Sharing the good news about the wonders of modern CSS and the split-step. Either one should get you moving fast. 😀
