Widget styling

[Dandelion222]

The widgets in the sidebar of this page don’t look quite as desired. The “donate” one had me reference how close we were to the goal. But that progress isn’t reflected and it’s just a grey area with “$20,000” floating in it.

The Email newsletter widget has the button touching the email address form.

[Bill Robbins]

Good Afternoon,

I took a look at your sidebar widgets. I’ve attached a screenshot of what I’m seeing with the donate widget. The burnt orange color represents the progress that’s specified in the widget. If you’re looking for something else there, let me know what you’re going for.

The newsletter button is bumping down due to the text inside the button itself. One thing that’s not so easy to do with CSS is have two items sit side by side when we don’t know what their width will be. Space is tight in the sidebar width wise and it looks like this fell just outside of what will fit on one line by default.

We can shorten the length of the email input so the button will fit beside it. Here’s how to do that:

1. In your WordPress dashboard click on the Appearance section and choose Theme Options.
2. From the tabs at the top, choose the Styling one.
3. Scroll down to the Custom CSS box and add this:

   
   #sidebar form#signup .email {
   	width: 160px;
   }
   

4. Save your changes.

Let me know how it goes,
Bill

Attachments:

1. 

   foundation-sidebar-widgets.png
   

[Dandelion222]

Here’s a screenshot of what I see…

Attachments:

1. 

   Screen-Shot-2016-08-30-at-3.57.41-PM.png
   

[Dandelion222]

I am using Chrome

[Dandelion222]

I don’t need the button to sit beside it, but I’ll give your code a try. It’s okay to be below, I just don’t want them to touch.

[Bill Robbins]

Take out the % symbol from the box. It’s in the code and causing the width of the bar to be set at 60%%. Some browsers are more forgiving of something like than others. See if that won’t cause the line to progress to display in Chrome for you.

[Dandelion222]

Okay…the Newsletter is looking good. That CSS worked. Thanks!

The donate is a bit of a mystery.

Speaking of styling – is there a way to style just one link different from the others? Like we have on the current page? http://3mariposasmontessori.com/about-us/staff/

[Dandelion222]

Re the Donate box – that was it. Thanks!

[Bill Robbins]

You can style any menu item separately from the others. Each menu item has a unique ID that can be used to change it only. You could add something like this to the Custom CSS in the theme options:

#navigation li#menu-item-60 a {
	background-color: #000;
	color: #aabf03;
}

That would change just the “contact” menu item on your site so it has a black background and green letters. The only way I know to find the ID is to look in the source code of the page when it’s being viewed. Most browsers will let you right click on the background of the page and select “View Source” to do that. You’ll need to look through the code just a bit until you see the menu item that goes with the one you want to change. Then just replace the 60 in the snippet above with that ID number. Then you can change the colors to fit your needs too 🙂

[Dandelion222]

Thanks so much! I will give that a try. I have no trouble seeing the source code.

[Author]

Posts