Prevent Opening Times Table showing alternate row colors

  • Resolved mnryan11

    (@mnryan11)


    1 year, 4 months ago

    Hello We’re Open team,

    We are currenly buidling a website on a localhost and using the We’re Open plugin. In a shortcode we are calling the table class=”hours-right closed-italic past-fade”. (the same problem occurs for any of the table classes which have rows). When it displays on the page the table is showing every even row in a light beige color while the odd rows are matching the page background colour of green. We need to retain the green background colour as it is used on all pages throughout the website. We have tried to switch off the alternating colours in the Custom CSS with various attempts as below, but none are successful. (We know that the backgound colour is being changed on the Opening Hours table because we are calling it in the footer of the website and there it does switch the colour to green on the even rows. But just does not seem to work when called within a shortcode in a page.) Is there a way to stop the alternating colours when used with a shortcode? Thank you.

    .opening-hours .hours-right .closed-italic .past-fade .update .open-now day thursday past weekday {
    background: #caebeb !important;
    }

    .opening-hours .hours-right .closed-italic .past-fade .update .open-now tr:nth-child(even) td {
    background: #caebeb !important;
    }

    .opening-hours .hours-right .closed-italic .past-fade .update .open-now tbody tr:nth-child(even) td {
    background: #caebeb !important;
    }

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author Design Extreme

    (@designextreme)

    @mnryan11 The plugin does not set alternative row background colours. This will be from your theme or another plugin.

    You can provide a URL (in your original post, as a restricted URL submission) and I will confirm this and offer a small CSS suggestion.

    Thread Starter mnryan11

    (@mnryan11)

    @Design Extreme?thanks alot for your reply. Unfortunately the website is only on a localhost at the moment, we will be putting it on a hosted web provider in the next few weeks. I was trying to look at the page code via the Inspect function, although I could see the table there i couldn’t see any where that alternate colors were being set, or how to target the table rows to switch it off. Based on what you say, it doesn’t look like targetting the Opening Times table itself will anyway help. If you had any other recommendation to try, we would appreciate any suggestions. (PS: The theme we are using is the Restaurant & Cafe theme, which is the free version). Thank you

    Plugin Author Design Extreme

    (@designextreme)

    @mnryan11 You can add some custom CSS as follows to override the theme’s alternating table styling:

    .opening-hours .day,
.opening-hours .day-name,
.opening-hours .hours {
	background-color: transparent;
}

    If you’re more specific with the rules, it is likely to counteract the theme’s styling. I recommend avoiding !important in web design wherever possible.

    Thread Starter mnryan11

    (@mnryan11)

    Thanks again for the suggestion. No luck unfortunately, but will keep digging. If we can’t resolve we will go with the alternating rows but it hides the clarity around days in the past being faded (same with the Current Line table). Thank you.

    Plugin Author Design Extreme

    (@designextreme)

    @mnryan11 I’ve checked the theme and it’s really specific about its rows – far from a light-touch approach.

    This will do the trick for you:

    #primary .post .entry-content table.opening-hours tbody tr:nth-child(2n),
#primary .page .entry-content table.opening-hours tbody tr:nth-child(2n) {
	background: transparent;
}

    I believe themes and plugins should allow web designers to implement their own styling easily; this one does not make it easy.

    Thread Starter mnryan11

    (@mnryan11)

    @Design Extreme actually your suggestion did work when I amended it to have the background color the same as the general background:

    .opening-hours .day,
    .opening-hours .day-name,
    .opening-hours .hours {
    background-color: #caebeb !important;}

    The only issue is that it then also puts green color on the Opening Times table we also have in the footer. Do you think there is any way to target the table that is in the webpage body but leave the table in the Footer untouched? Thank you

    • This reply was modified 1 year, 4 months ago by mnryan11.
    Thread Starter mnryan11

    (@mnryan11)

    @Design Extreme?sorry missed your latest reply as i was replying last time. I tried that code and indeed it does the trick perfectly. Amazing. Thanks very much!

    #primary .post .entry-content table.opening-hours tbody tr:nth-child(2n), #primary .page .entry-content table.opening-hours tbody tr:nth-child(2n) { background: transparent; }

    Plugin Author Design Extreme

    (@designextreme)

    @mnryan11 You can add a prefix to these styles that identify the content or the footer. It appears the class: entry-content is used in this theme for the content section (and not the footer). The more recent example contains this class in the rule declaration.

    I will need to leave it there as this does fall outside of the plugin’s support.

    And thanks for letting me know that you’ve sorted it!

    • This reply was modified 1 year, 4 months ago by Design Extreme. Reason: Last line
Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Prevent Opening Times Table showing alternate row colors’ is closed to new replies.