Metro theme: adding "Welcome Text" widget per B Gardner's code – help?

[kay9]

Hi, I'm trying to follow B Gardner's tutorial here as to how to add a "Welcome Text" widget to a Genesis child theme (Metro, in this case).

The code is easy enough, cut and pasted in as he said to do in the tutorial.

BUT ... the text of the welcome area widget is NOT responding to the CSS I have -- it is defaulting to the "default" text (in both style AND in size). I want it to be in a larger size and font (Oswald, perhaps; which is the font for the theme's headlines, yes?).

Can someone tell me why the CSS isn't working? I have looked at it with Firebug and still can't figure out what change to the CSS I need to make to change the font for that widget area AND the size of the font for that widget area. Perhaps the tutorial will not work for the Metro theme?

Thanks in advance for clues!

The site is here. You can see the default font and font-size in the "welcome" widget area at the top of the front page.

[Brad Dalton]

Try this:

.welcome-text p {
    font-size: 24px;
    font-family: Georgia;
    line-height: 1.0;
    margin: 0;
}

What happens if you change this part of the code and add a font-family?

font-size: inherit;
font-family: Georgia;

---

Tutorials for StudioPress Themes & WooCommerce.

[kay9]

Thanks for the reply! Hmm, NOTHING happened. I just tried every combo I could think of!

There must be something else going on here, and it's too far above my pay grade to understand. 🙁

[Brad Dalton]

Sometimes the changes can take time to show up especially if you have server side caching.

---

Tutorials for StudioPress Themes & WooCommerce.

[kay9]

Hm, no, nothing like that, I don't think. I may try posting this on the thread at Brian's website where he originally posted this tutorial, and see if he responds. Thank you though, for trying to help me! I do appreciate it very much. 🙂

[Anita]

Brian included this CSS on that post. Did you add it to your style sheet? Maybe you overlooked this part, but it works just fine for me.

/* Welcome Text
------------------------------------------------------------ */

.welcome-text {
    border-bottom: double #ddd;
    border-top: double #ddd;
    font-family: 'Lora', serif;
    font-size: 30px;
    line-height: 1.0;
    overflow: hidden;
    padding: 25px 0;
    text-align: center;
}

.welcome-text p {
    font-size: inherit;
    line-height: 1.0;
    margin: 0;
}

---

Love coffee, chocolate and my Bella!

[kay9]

Nope, as I said above, I cut and pasted all, following his tutorial.

[Anita]

Just looked at your code -

You are missing the closing */ on the end here -

/* Welcome Text
------------------------------------------------------------ */

---

Love coffee, chocolate and my Bella!

[kay9]

Ohh no, I have his code commented out just below my version of it! Above 🙂

Just removed his version so it doesn't confuse. Anything else going on that explains why it isn't working?

Thank you for trying! 🙂

[Anita]

I think you have another conflict going on there. I am using this as a Demo site here and it's working fine. I even tried to add my code to your site via Firebug and it's not working. I would check your code in the function.php file character by character.

---

Love coffee, chocolate and my Bella!

[Anita]

Are you using any other plugins... maybe the Featured Widget Amplified?

---

Love coffee, chocolate and my Bella!

[kay9]

I am using plugins, yep, but not that one. I'll try checking the function.php code but I'm not much of a php person. Gah!

[kay9]

This is at the end of my functions.php file:

`/** Add the welcome text section */
add_action( 'genesis_before_content_sidebar_wrap', 'custom_welcome_text' );
function custom_welcome_text() {
genesis_widget_area( 'welcome-text', array(
'before' => '',
) );
}`

[Brad Dalton]

The code is wrong. It should be:

/** Add the welcome text section */
add_action( 'genesis_before_content_sidebar_wrap', 'custom_welcome_text' );
function custom_welcome_text() {
   genesis_widget_area( 'welcome-text', array(
       'before' => '<div class="welcome-text widget-area">',
   ) );
}

And make sure you also have the PHP to register the widget.

/** Register widget areas */
genesis_register_sidebar( array(
    'id'    => 'welcome-text',
    'name'    => __( 'Welcome Text', 'genesis' ),
    'description'    => __( 'This is the welcome text widget.', 'themename' ),
) );

Source http://www.briangardner.com/welcome-text-widget/

---

Tutorials for StudioPress Themes & WooCommerce.

[Anita]

I think the code they provided is right. They didn't use the PHP code like you did.

---

Love coffee, chocolate and my Bella!

[Anita]

I see the widget there, it's just not formatting correctly. Send me an email on my website and I will try to help you offline.

---

Love coffee, chocolate and my Bella!

[kay9]

Wow I'm really confused now. I just cut and pasted and saved the code from braddalton and it's still not working. 🙁

This is what's in there now:

`/** Register widget areas */
genesis_register_sidebar( array(
'id' => 'welcome-text',
'name' => __( 'Welcome Text', 'genesis' ),
'description' => __( 'This is the welcome text widget.', 'metro' ),
) );

/** Add the welcome text section */
add_action( 'genesis_before_content_sidebar_wrap', 'custom_welcome_text' );
function custom_welcome_text() {
genesis_widget_area( 'welcome-text', array(
'before' => '',
) );
}`

And here is the CSS in there now:

`/* Welcome Text WIDGET MY CODE THAT I CANNOT GET TO WORK
------------------------------------------------------------ */

.welcome-text {
border-bottom: double #ddd;
border-top: double #ddd;
font-family: 'museo-slab', sans-serif;
font-size: 30px;
line-height: 1.0;
overflow: hidden;
padding: 25px 0;
text-align: center;
}

.welcome-text p {
font-size: inherit;
line-height: 1.0;
font-family: 'museo-slab', sans-serif;
margin: 0;
}

`

[Brad Dalton]

The class for the widget is missing meaning the CSS code Brian also provided will not work as it uses that class

welcome-text 

Here's the CSS using the above class which is generated by the PHP code but missing in Kay's code. This is the reason the CSS isn't working.

 .welcome-text {
    border-bottom: double #ddd;
    border-top: double #ddd;
    font-family: 'Lora', serif;
    font-size: 30px;
    line-height: 1.0;
    overflow: hidden;
    padding: 25px 0;
    text-align: center;
}

.welcome-text p {
    font-size: inherit;
    line-height: 1.0;
    margin: 0;
}

---

Tutorials for StudioPress Themes & WooCommerce.

[Anita]

Send me an email on my website and I will look at your code from here.

---

Love coffee, chocolate and my Bella!

[Brad Dalton]

@Kay9

You are still missing part of the code.

That is not the code I pasted as it is missing the new class which the PHP code generates.

You are missing this:

<div class="welcome-text widget-area">

---

Tutorials for StudioPress Themes & WooCommerce.

[Author]

Posts