[Resolved] Button styling

[paddyd]

https://camphurontario.com/new/

So, I have the distinct impression that I’m digging myself a deeper and deeper hole here… 😀

In order to get my gb-buttons working ok after styling my links, I had to add some extra CSS. All was well until I checked the custom footer block to discover…I now had buttons appearing on hover etc. there, which I definitely don’t want. However, attempts to globally change those buttons in that block have failed and I certainly don’t want to have to list all 8 links separately to get them to behave. The CSS below works to restore the behaviour I want on the first (telephone) link. How can I apply it to all links in that block without messing things up again? I have given the block a class of “photofooter” but attempts to apply the CSS to everything within have failed. 🙁

.gb-button-wrapper a.gb-button-39839252:hover, .gb-button-wrapper a.gb-button-39839252:active, .gb-button-wrapper a.gb-button-39839252:focus {
    color: #ffaa00;
    background: none;
    border: none;
    padding: inherit;
}

[Ying]

Hi Paddy,

I would recommend to use GB to style the buttons instead of CSS, since these unnecessary CSS increases loading time.

Here’s a tip for you in case you run into the same situation, create the first button with the style you’re happy with, then use duplicate function, it’ll save you some time than styling each one of them. And there’s a new feature called Copy style in GB Pro version in case you are interested.

If you still want to persist the CSS method, here’s the CSS:

.gb-container-00dc0495 a.gb-button:hover, .gb-container-00dc0495 a.gb-button:active, .gb-container-00dc0495 a.gb-button:focus {
    color: #ffaa00;
    background: none;
    border: none;
    padding: inherit;
}

Let me know 🙂

[paddyd]

Ying, I think you’ve misunderstood the problem.

1. All GB buttons are already styled in GB Blocks – the styling in the custom CSS is only there to override the text link CSS. (I even tried adding in padding 0 etc. in the GB blocks menu links in the footer – in case that would override the custom CSS, but it didn’t).

2. The Footer is one of the new footer templates from GB Blocks Pro. The links in the footer are buttons – and they are styled. (no background etc.).

3. Everything is working fine UNTIL…I add the CSS for the TEXT LINKS. This CSS does stuff not available in the customizer – I have used it or variations on it in several other sites. The point of it is to make links more accessible and readable. It adds a bottom border (which is sufficiently spaced below the text that it doesn’t interrupt descenders; underlining does not do that). The padding and border itself are now interfering with the button styling. Hence the extra CSS. There is no way to style the buttons in GB Blocks to stop the interference from the text link CSS as it is written now, unless I add this CSS, because there are no separate options for hover/active/focus in the GB Block settings – so nothing I can set there to stop the additional CSS affecting things.

4. Your CSS didn’t fix it – I’ve added it (and commented out the previous individual button fixes) so you can see. I had tried a more global solution as well, and hadn’t been able to get it to work.

5. The CSS below fixes the GB Block buttons everywhere else, but then of course, applies to the buttons in the footer, messing things up again. I took out the colour specs, as those weren’t necessary – but the border and padding are – they’re set in GB Blocks, but being overwritten by the text link CSS.

.gb-button-wrapper a.gb-button:hover, .gb-button-wrapper a.gb-button:active, .gb-button-wrapper a.gb-button:focus {
    padding: 15px 20px;
	border: none;
}

Essentially, all I require here is CSS that targets the links in the footer to set the padding on hover/active/focus to 0. And probably border too – but I can’t see it. 😉

[David]

Hi there,

if you want to use CSS to style specific buttons then you should select a button, and in Advanced > Additional CSS Class(es) give your button a CSS Class eg. footer-button

Then you can style them specifically eg.

.gb-button-wrapper a.gb-button.footer-button {
    /* footer-button styles */
}

Just a side note: GB Pro is now available, it has Global Styles and Effects built in, which removes the need for custom CSS

[paddyd]

Hi David,

Sigh. I DO have GB Pro (although I’ll freely admit I haven’t explored all the options quite yet!!) But that’s where that footer came from. 😉

But it now appears that I have bigger problems. I’ve been noticing a few times that when I clicked on something that should give me a new “thing” (ie: element etc.) it was giving me a new POST. That’s what GB Blocks is doing when I click on Global Styles->Add

Never mind…figured the Global Styles out. The documentation led me to expect to see something different the first time around…

I’ve tried turning off all the plugins other than GP Blocks and GBP and that had no effect, so it doesn’t appear to be a plugin conflict. I’m sending you login deets so you can have a look.

[paddyd]

I discovered that I had more than one copy of the footer block in the list of reusable blocks. So trashed all but the latest one, and now I have no footer at all – it’s THERE in the list, but doesn’t show as it should, and every time I go to edit it, it opens as “Untitled Reusable Block” – saving the title doesn’t do a thing – it’s the same problem next time I look at it. And as I’ve also been noticing – I can save until the cows come home, but I still get the warning notice when I attempt to leave the page. This has been happening a lot with this site.

Something is very wrong. 🙁

[paddyd]

So…I finally gave up on the previous footer. There was something wrong somewhere – despite trying everything I could think of, it refused to show (even if I put it somewhere else on the page).

I just created another one using the wireframe footer template. The links all work and don’t jump around (the footer-button class IS working on this one!).

So I think we can mark this resolved – other than we never did fix whatever it was that went off the rails with the original footer. 😉 (I did see you back there, David – did you manage to figure out anything about what was going wrong?)

For simplicity’s sake I’ve also replaced the entire footer and not tried to use the copyright one overlaid – sometimes one needs to just get on with the important stuff. Won’t kill me to update the year once a year. 😉

[David]

What was the original issue?

Sometimes its best to start over 🙂

[paddyd]

Haha…yeah, the original issue is that the styling I added to the text links throughout the site (border + padding) to better meet accessibility* standards was affecting buttons in the GBP template I was using as a footer. Attempts to fix the issue eventually resulted in the non-appearance of the footer block entirely, which was very odd. I tossed it and started over, using the wireframe footer template this time.

And happily, the addition of the CSS class and bit of custom CSS DID fix the problem in the wireframe version of the footer.

*BTW – one of the issues with accessibility is that so many sites have moved away from underlined links and are using colours that in no way meet the very difficult-to-meet standards for links without underline or any other visual signal in WCAG 2.1. I do my best to meet the standards these days; it just seems like good practice in general, the right thing to be doing, and protects my clients (some of whom definitely operate businesses covered by the ADA). The lack of clear regulation in the US and Canada hasn’t stopped an increasing number of site owners being taken to court – and in some cases, suffering large penalties. I still see many sites (some new!) that are very attractive to look at, but complete horror-shows from the point of view of anyone with any visual impairment – let alone any other physical issues. Something to think about…

[Ying]

So has the original issue been solved?
I’m a bit lost here…

Let me know 🙂

[paddyd]

Yes – but not with the original footer (which may have been messed up somehow, though I have no idea HOW).

1. I added custom CSS to customizer to add border and padding to text links throughout site (underline that doesn’t block descenders, meets WCAG 2.1 AA standards).
2. That CSS affected buttons – as it has on other sites where I’ve used it. Most instances were dealt with quickly – with a bit more custom CSS.
3. The buttons in the Generate Blocks Pro (template) footer were messed up by the text link custom CSS, but refused to respond to anything you or David suggested – and nothing I tried worked.
4. During this attempt, I realized I had several copies of the footer saved and deleted the older ones. The one that was left (which was the one I’d been working on) refused to load, despite all settings being correct etc. Trashed it.
5. Started again – this time the minor bit of custom css for footer button correction worked as it should. 🙂 Footer is now working as it should.

[Ying]

Great! Glad you figured it out after going through all this!

The CSS for text link normally shouldn’t affect the button links if you set button’s style in GB. If you leave the style empty, then they intend to follow the customizer style.

Hope your site goes smooth from now on 🙂

[paddyd]

Yeah – I should have realized something wasn’t right earlier, but so it goes. 🙂 Onward ho. Only 20 some-odd more sites to convert to GP. 😉

[Ying]

Good luck with that 🙂
And we’re always here to support!

[Author]

Posts