[Support request] announcement area at top of home page

[Mark]

I am trying to find the best way for a non-technical person to add an announcement at the top of my homepage. Ideally I would like it above the top bar and easy to use (like a widget).

Currently I have used the dead link with the secondary menu to accomplish this goal, but I couldn’t figure out how to get it ABOVE the top bar, and it seems like a forced way to do this. I have also tried adding a hook, but it is not easy for a non-tech person to edit, and I used “before_header” but didn’t seem an option to place it before top bar.

Can you tell me your suggestion on the best way to accomplish this: add another widget on homepage?

Thanks

[David]

Hi there,

you could simply add another widget to the Top Bar and we can use some CSS to style it so it occupies the full width above the current widgets. To make that process easier use this plugin to give the widget a CSS Class:

https://en-gb.wordpress.org/plugins/widget-css-classes/

[Mark]

Thanks David, I will download that widget, try it out and get back to you.

Mark

[David]

You’re welcome – keep us posted 🙂

[Mark]

David,

I think I almost have it. To test this out I am using a clone of my website, so the URL to look at is new1.nimblethimble.com

Some fine points that I haven’t figured out:
1. I want this “announcement” at the top of the top bar to be ONLY present on the homepage.
2. When I put in a background, it seems to not quite reach full width, as the left margin or padding seems off.
3. When I add this extra widget, on mobile, the Store Hours piece is not completely left justified as it is on Desktop
4. I have used width:100% in the CSS. Do I also need max-width:100%? (I never know when to use that last one.)
5. To make this easy to use for a non-tech person, can I put this “Announcement” item into the left hand menu, so they can easily get to it and change it?
6. I am using the Black Studio Tiny MCE widget, but since I can control the color, font-size, and background from CSS, is there any advantage of using this widget instead of the standard wordpress Custom HTML widget?

Thanks,

Mark

[Mark]

David,

I figured out how to make it happen just on the homepage (at least I think I did).
I just referenced the CSS with .page-ID-6633.

Mark

[Mark]

David,

I take back what I said in my last email! For some reason, the extra widget is now appearing on all pages again, and the yellow background that I specified in Simple CSS is missing. I don’t know what happened.

Mark

[Leo]

Hi there,

Which is the extra widget you are referring to?

Let me know 🙂

[Mark]

Leo,

The “extra widget” is the third Top Bar widget that David suggested adding.

Mark

[Leo]

So you only want it on home page?

If so this CSS should help:

body:not(.home) #black-studio-tinymce-3 {
    display: none;
}

[Mark]

Hi Leo,

Yes, that solves one of the problems I was having – In my response to David’s last message, I had 5 or 6 things I asked about. I would appreciate it if someone could address those other issues as well.

Thanks

[Leo]

2. Try this:

#black-studio-tinymce-3 {
    text-align: center;
}

3. Top bar widgets are centered by default as there is usually not enough room on mobile to have 2 widgets in one row. If you just want it on the left, try this CSS:

@media (max-width: 768px) {
    #custom_html-11 {
        text-align: left;
    }
}

4. Where is this?

5. Like left of the WordPress dashboard? Not without some custom coding.

6. I don’t think so but feel free to give it a shot and see if the normal widget works for you.

[Author]

Posts