Genesis User Profile Widget

[Anthony Galli]

How can I get the text of my User Profile Widget on anthonygalli.com to be the same format as the widget's header?

---

I blog about great adventures, good habits, and quantified success! Join me on the open road @ http://www.AnthonyGalli.com

http://anthonygalli.com

[Lauren @ OnceCoupled]

What do you mean by the same format?

Your widget title is styled:

.widget-area h4 {
     background: url(/wp-content/themes/streamline/images/headline.png?bad562) left no-repeat;
     color: #645f5b;
     margin: 0 0 20px;
     padding: 0 0 0 22px;
     text-decoration: none;
     text-transform: uppercase;
}

Just apply the features you want to ".user-profile p".

Hopefully I haven't misunderstood this. 🙂

Best,
Lauren

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[Anthony Galli]

Yea all my widgets have the same header format (with the exception of popular posts). I want that header to match the format (font size, color, boldness) of the text inside the User Profile Widget .

What you posted, I think only shows font color. And how would I apply those features to ".user-profile p." Where is ".user-profile p" located? That might be an obvious question I'm not very tech savvy.

Thanks for the help!!!

---

I blog about great adventures, good habits, and quantified success! Join me on the open road @ http://www.AnthonyGalli.com

[Lauren @ OnceCoupled]

Anthony, I can't quite understand if you want your widget text to look like your header, or your header text to look like your widget text.

Either way, you will need to change the CSS styles in your theme editor.

The difference between the two texts seems to only be the font color and the automatic transformation to uppercase.

If you want your widget text to look like your header text, then add this block to the stylesheet:

.user-profile p {
     color: #645f5b;
     text-transform: uppercase;
}

If you want your header text to look like your widget text, then find the block of code in your stylesheet that starts with ".widget-area h4" and replace these two lines:

     color: #000;
     text-transform: none;

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[Anthony Galli]

I want the widget text to look like the header text.

I added:

.user-profile p {
color: #645f5b;
text-transform: uppercase;
}

to the bottom of the theme css file, but it didn't do anything. The difference between the two texts are font color, boldness, and size. If you look at my website do you see what I'm talking about? I think it would look neater if the header and widget text matched each other completely.

Thanks so much for your help!!

---

I blog about great adventures, good habits, and quantified success! Join me on the open road @ http://www.AnthonyGalli.com

[Lauren @ OnceCoupled]

Have you cleared your cache? I am not seeing the change in your CSS file.

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[Anthony Galli]

I didn't see any changes so I took it back out of the css. I put it back in again and cleared the cache so you can see. Do you have a solution?

Thank you for your patience!

---

I blog about great adventures, good habits, and quantified success! Join me on the open road @ http://www.AnthonyGalli.com

[Lauren @ OnceCoupled]

It's after an invalid block, which is probably restricting it from being read. Remove this:

//* Remove the post meta function
remove_action( 'genesis_after_post_content', 'genesis_post_meta' );

That should be in your functions.php file, not your CSS.

The same goes for a little above that:

add_filter( 'genesis_get_image_default_args', 'prefix_stop_auto_featured_image' );function prefix_stop_auto_featured_image( $args ){if ( ! isset( $args['context'] ) || 'archive' !== $args['context'] )
return $args;$args['fallback'] = false;return $args}

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[Anthony Galli]

Thank you for clarifying that for me! I added those to the PHP instead. With those changes the color of the widget text changed, but I want it to match the header completely, which means I think it needs boldness & a smaller font.

THANK YOU 🙂

---

I blog about great adventures, good habits, and quantified success! Join me on the open road @ http://www.AnthonyGalli.com

[Lauren @ OnceCoupled]

You can add the appropriate CSS properties for those changes into that same block and they'll take effect. Glad we got a couple problems sorted out for ya!

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[Anthony Galli]

Thanks so much!

I have a last question if you could help.

How can I change the layout of the wording? I would like each point to have its own line as I showed below:

Go from this:

ADVENTURE, GOOD
HABITS, AND
QUANTIFIED SUCCESS
#RALLYWITHGALLI

to this:

ADVENTURE,
GOOD HABITS, AND
QUANTIFIED SUCCESS
#RALLYWITHGALLI

Is there also a way I could also center align the text with the picture left of it (instead of having the text start where the picture starts)? If this question is too complicated it's not important. Thanks again!

---

I blog about great adventures, good habits, and quantified success! Join me on the open road @ http://www.AnthonyGalli.com

[Lauren @ OnceCoupled]

To specify the line breaks, use the break tag: http://www.w3schools.com/tags/tag_br.asp

To center align your text, use the text-align property: http://www.w3schools.com/cssref/pr_text_text-align.asp

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[Anthony Galli]

Thank you very much! The changes look perfect now 🙂

Enjoy your day!

---

I blog about great adventures, good habits, and quantified success! Join me on the open road @ http://www.AnthonyGalli.com

[Author]

Posts