css problem in Heads Up bar

Resolved NetMonkey
(@headmonkey)

11 years, 2 months ago

Using your Heads Up bar is my third attempt to have a sticky footer bar. The last plugin I tried was almost what I needed, but had to be opened to display content.

I’m hoping your bar can give me what’s needed. I’ve created a table using Tablepress to display some text and images. I dropped a Tablepress shortcode into the bar and it is displaying now, but the css is killing me to align the content correctly in your bar.

The last bar I tried, (Announcement Bar) from the guys at Themify, didn’t require this much css work. I’d like my five rows evenly spaced.

Could you please give me a few css pointers to complete the alignment of the content? Your bar can be seen at test.netmonkeys.net. Any help here is greatly appreciated.

https://wordpress.org/plugins/easy-heads-up-bar/

Viewing 9 replies - 1 through 9 (of 9 total)

Plugin Author Greenweb
(@greenweb)

11 years, 2 months ago

Hi HeadMonkey, this is a bit out of the plugin support scope but I had a look at the table press CSS – it’s working as it’s written.

What look are you going for?

Plugin Author Greenweb
(@greenweb)

11 years, 2 months ago

if you’re looking for an even spread it’s not working because the first table TD cell is set to a width of a 100%; More info in TDs here https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td

If you can locate where the following tag is called in your css .tablepress-id-1 tbody td

Try setting the width to auto; width: auto;

Thread Starter NetMonkey
(@headmonkey)

11 years, 2 months ago

PERFECT!!! Thank you! I think the last styling I need is to adjust the bar height and set it’s opacity and I’m done.

Thanks for your help

Thread Starter NetMonkey
(@headmonkey)

11 years, 2 months ago

I’ve been at this for hours and it’s almost there. There’s only one last bit of css that’s confusing me and I can’t tell if it’s the css for the bar, or tablepress.

I have a small gap on the left of a few pixels that I can’t seem to align left. If you could tell me which css I need to edit, that would be awesome!

BTW, your plugin has been the best one yet, to do what I need with a sticky footer.

Plugin Author Greenweb
(@greenweb)

11 years, 2 months ago

On my iPad I see a gap left and right. I out of the office for the day so I’ll take another look tomorrow
Plugin Author Greenweb
(@greenweb)

11 years, 2 months ago
The background would work if you put your custom background on the bar and not the table in the bar:
```
#ehu-bar{
  background: rgba(0,0,0,0.5);
}
```
Thread Starter NetMonkey
(@headmonkey)

11 years, 2 months ago

Thanks for your last css tip that seemed to have fixed things a few days ago. But yesterday, the theme developers pushed an update that I installed, (even though I’m using a child theme), it somehow screwed up my css for the EHU bar.

I have the css in there as you suggested, but it doesn’t seem to have any effect now at test.netmonkeys.net. My bar’s background is 100% black instead of the rbga setting that (was) working.

Any suggestions how I can fix this?
Plugin Author Greenweb
(@greenweb)

11 years, 2 months ago
Try this :
```
div#ehu-bar {
  background: rgba(0,0,0,0.5);
}
```
if it does not work the add the !important
```
div#ehu-bar {
  background: rgba(0,0,0,0.5) !important;
}
```
Plugin Author Greenweb
(@greenweb)

11 years, 2 months ago

If there are any quirks that pup up I would post the question in the https://wordpress.org/support/forum/themes-and-templates forum that’s where all the hardcore CSS whizzes hang out 😉

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘css problem in Heads Up bar’ is closed to new replies.

Tags