Website showing different colours to html code

Web Development
1

Hi there. Can anyone help me? I have some html code that was generated by a website but when it’s uploaded to the web using the MINT theme it changes colours. Is there some code I can add to it to revert it to the right colour? The attached screen shot is what the colours should look like and this is the page on the website - OrangeBox Theatre Group | Premium Quality Tribute Act Promoters | Artists

Thanks
Simon

Screenshot 2022-11-21 at 13.16.52
Screenshot 2022-11-21 at 13.16.522374×1432 184 KB

2

Try this custom CSS code. Place it in the page’s CSS area on the HTML inspector page.

/* Change Set Reminder Button Text Color */
div.bit-details.bit-event-buttons .bit-rsvp-text {
    color: rgba(245,166,35,1) !important;
}
/* Change Buy Tickets Button Text Color */
div.bit-details.bit-event-buttons span {
    color: white !important;
}
1 Like
3

Perfect, thank you so much

4

Is there a way of keeping the site logo on mobile devices as I can’t see any option anywhere?

Also, is it possible to widen the drop down “Artist” navigation menu as it looks untidy when the page names go over two lines - https://www.orangeboxgroup.co.uk

5

Foundry and it’s add-on packs include a number of navigation stacks. It helps to know which one you are using. If you are using “Nav. Bar” then there is a setting in the Branding Area under Logo to select at which breaks the logo is hidden.

Try this CSS to widen the submenu. It can go into the site-wide CSS setting, as it applies to the entire website.

/* Widen Nav. Bar Submenu */
#navigation-bar .menu ul li ul {
        min-width: 250px !important;
}
6

Sorry, it’s the Mint theme I’m using, and not Foundry

7

Ah, sorry about that. I forgot you were using the Mint theme from the initial post. I don’t have that theme, but my guess is that it doesn’t have an option to show the brand logo at the mobile breakpoint.

8

No it doesn’t, seems strange as it seems like a simple option to include. Im guessing there’s no simple CSS code to make it work?

9

I’m sure there is always a balance between ease of use and complexity when deciding which options to include. More options cal also slow things down a bit.

The CSS is usually not too complex, it’s figuring out the correct CSS that will do what you want without breaking anything else that can be complicated and time consuming. I’ve been playing with this since you mentioned it was the Mint theme.

Try this. Make sure you check the rest of your site to make sure the CSS doesn’t cause issues with anything.

/* Mint Theme - Always Show Brand Logo */
@media (max-width: 47.9em) {
    #navigation-bar #logo {
        display: inline-block  !important;
    }
}
1 Like
10

Amazing, thank you so much for all your help