Fun with Perch

Thanks Todd. I appreciate you taking the time to walk me through that. Had you just given me the answer I wouldn’t have learned a darn thing.

Is this all covered in the “Bulletproof Web Design” book or do I need something else?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

You’re welcome.

Remember that there are a few ways to target your list:

  1. Create a ul tag-only style which will target every unordered list on the site. Depending on your goal this may be too general.
  2. Target the parent element: #archive-wrapper ul so only an unordered list that’s a child of the parent ‘archive-wrapper’ will pick up the styling.
  3. Add a class or id to the
      element and target that. Example,
        would be ul.myList.

They are all valid, it just depends on what you’re doing and how you work.

If I remember the book correctly such things are touched on in the context of CSS. As you can see you can’t be proficient with CSS unless you’re able to determine what you need to target.

Todd

Thanks Todd. I appreciate you taking the time to walk me through that. Had you just given me the answer I wouldn’t have learned a darn thing.

Is this all covered in the “Bulletproof Web Design” book or do I need something else?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Nor can I be proficient if I don’t have a better understanding of CSS, which I’m committed to learning when time permits.

How would I setup option 2 in FWP?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Just as I put it, #archive-wrapper ul

Create a new style and in the Tag field enter the above then Tab out and also Tab out of the Name field (which must be blank/empty). Then just add your style attributes like you normally would.

Todd

How would I setup option 2 in FWP?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Gotcha. Thanks Todd.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Very, very cool.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Okay, here’s another challenge. I want to style the radio button text on this page. In looking at the code it looks like the radio buttons are wrapped in div.foo. How would I target this?

http://rcb.idealynx.com/contact-form.php


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

You can target the parent,

.foo input. That will style any form input radio and text field that’s a child of the parent element with a class of ‘foo’. Might be too general.

If you want to specify only radio buttons with the parent of .foo use: .foo input[type=‘radio’]

You could also target the type directly (no parent): input[type=‘radio’] which would apply to all radio buttons everywhere (even the ones on Ernie’s site. Just kidding).

Or again, if the tag had a class (you would need to add it) you could also target that for added specificity. For example: would be: input.myRadio.

Are you starting to see how to chain a series of elements, classes and ids together to form a CSS selector?

Options, options, everywhere options.

Todd

Okay, here’s another challenge. I want to style the radio button text on this page. In looking at the code it looks like the radio buttons are wrapped in div.foo. How would I target this?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I think so. So, would I target it the same way as we did the #archive-wrapper style, but with .foo input?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Yes, that’s one way. But as I said, using just ‘.foo input’ will affect text fields as well as radio buttons, so you may want to use .foo input[type=‘radio’]. Or just add a class to the radio buttons and target that instead.

Remember it’s not always necessary to include the parent element in the selector, though it will depend on the situation. As a general rule you don’t want to get overly specific with your selectors if you don’t need to.

Todd

I think so. So, would I target it the same way as we did the #archive-wrapper style, but with .foo input?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Okay, I was able to modify the radio buttons with the “.foo input” style, but it didn’t fix the type following the buttons.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

It wasn’t supposed to, that’s a different tag. Look at the code, what is it?

Todd

Okay, I was able to modify the radio buttons with the “.foo input” style, but it didn’t fix the type following the buttons.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

On 9 May 2013, 7:09 am, Todd wrote:

It wasn’t supposed to, that’s a different tag. Look at the code, what is it?

Todd
http://xiiro.com

It’s form-wrapper. But, how do I target just the text after the bullets?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

No. You’re looking too far up the structure. Find the “Option 1” text in the source. See it? What tag is wrapped around it?

Todd

On 9 May 2013, 7:09 am, Todd wrote:

It wasn’t supposed to, that’s a different tag. Look at the code, what is it?

Todd
http://xiiro.com

It’s form-wrapper. But, how do I target just the text after the bullets?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

form1_need1?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Nope, I was wrong. It’s foo.

ONe point of confusion. How do I know when to precede a style with a # symbol or a period?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Almost. Label .

A form is a semantic powerhouse. A properly constructed one has a very deliberate and repeatable structure made up of a few sub-structures, one of those being the tag. It’s worth learning how that structure is formatted because it will make targeting elements much easier.

Todd

form1_need1?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

If it’s an id: #

If it’s a class: .

In other words,

An id in HTML looks like this:

<p id="myID"></p>

in CSS it looks like:

p#myID

A class in HTML looks like:

<p class="myClass"></p>

in CSS it looks like:

p.myClass

Todd

How do I know when to precede a style with a # symbol or a period?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

So is label a class?

Option 1

If so, I can’t seem to style it with a .label style.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

No, is a tag. If it were a class it would be preceded with a period.

Todd

So is label a class?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options