Visible table and no styling. help?

  • Resolved oaimwp

    (@oaimwp)


    3 years, 4 months ago

    Hello,

    First of all, thank you for making this plugin that integrates with the Places API!

    I’ve been struggling to get styling to work with the shortcodes.

    Something is breaking shortcodes like ‘no-border’. Its probably related to why styling that is otherwise applying everywhere else on a given page, isn’t applying to Opening Hours shortcodes.

    Screenshot of problem

    The top of that screenshot was created with Opening Hours:
    [open class="dark hours-right outside-flush no-border closed-italic past-fade" closed_show="true" days="Samedi,Lundi,Mardi,Mercredi,Jeudi,Vendredi,Dimanche"]

    The bottom half of the screenshot which Im trying to emulate was created with this code:

    
<ul><li id="Wednesday"><span>Wednesday</span><span>5 PM - 10 PM</span></li>
<li id="Thursday"><span>Thursday</span><span>10 AM - 10 PM</span></li>
<li id="Friday"><span>Friday</span><span>10 AM - 11 PM</span></li>
<li id="Saturday"><span>Saturday</span><span>10 AM - 11 PM</span></li>
<li id="Sunday"><span>Sunday</span><span>10 AM - 9 PM</span></li></ul>
<script type="text/javascript">
	weekday();

function weekday() {
    var d = new Date();

    if (d.getDay() == 0)     {
                        document.getElementById("Sunday").classList.add('active');
                        }

    if (d.getDay() == 1)     {
                        document.getElementById("Monday").classList.add('active');
                        }

    if (d.getDay() == 2)     {
                        document.getElementById("Tuesday").classList.add('active');
                        }

    if (d.getDay() == 3)     {
                        document.getElementById("Wednesday").classList.add('active');
                        }

    if (d.getDay() == 4)     {
                        document.getElementById("Thursday").classList.add('active');
                        }

    if (d.getDay() == 5)     {
                        document.getElementById("Friday").classList.add('active');
                        }

    if (d.getDay() == 6)     {
                        document.getElementById("Saturday").classList.add('active');
                        }                   
                    }
</script>

    Could someone point me in the right direction? After several hours of trying many different things and searching online, I am at at a loss.

    Thank you,
    D

    • This topic was modified 3 years, 4 months ago by oaimwp.
    • This topic was modified 3 years, 4 months ago by oaimwp. Reason: clarity
Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author Design Extreme

    (@designextreme)

    @oaimwp Thanks for sending this through.

    Within a list or table, classes are provided for then past days, current day and future days so the JavaScript here is not required.

    Also, the days of the week follow your local language, so set this in the main WordPress Settings under Language. This will inform the localised date.

    For the design, perhaps have a look at the Demo Website for some ideas? If you are looking for an unordered list, please apply the first parameter like this:

    [open ul]

    Something basic to check: is your stylesheet loading? Check the source code for /opening-hours/wp/css/css.css. Your screenshot looks like this is not present.

    • This reply was modified 3 years, 4 months ago by Design Extreme. Reason: Last paragraph
    Thread Starter oaimwp

    (@oaimwp)

    [open ul] is all it took to fix the styling! Using this resulted in the “We’re Open” section to be a visually verbatim copy of the previous code. Thank you!

    We have a bilingual french/english website. The ‘days’ modification you see is me testing how I will manage the two different pages.

    Is there currently a way to translate ‘months’ and ‘short_months’? I tried the following but the logic doesn’t seem to exist yet.

    months=”Janvier,Février,Mars,Avril,Mai,Juin,Juillet,Ao?t,Septembre,Octobre,Novembre,Décembre”
    short_month=”janv.,févr.,mars,avril,mai,juin,juil.,ao?t,sept.,oct.,nov.,déc.”

    The short_months are based on recommended norms found here:
    https://web.library.yale.edu/cataloging/months

    Plugin Author Design Extreme

    (@designextreme)

    @oaimwp Thanks for the clarification.

    I have looked at switching between languages with the native wp_date() function, but I cannot find anything relevant to this that can perform language switching (other than once prior to loading the page). If it were to be introduced, it will need to be handled carefully so it doesn’t affect other plugins (i.e. restored to the main language once cycled through all others).

    The parameter can only handle days of the week as replacements in its current state. I would need to add a new parameter for months (and potentially other date elements) to cover this properly.

    One way to add this now would be a JavaScript text replacement from English to French (or vice-versa).

    I’ll look into this soon – perhaps with a more holistic approach to date formatting, languages and custom words for date elements.

    Thread Starter oaimwp

    (@oaimwp)

    Good news! Your approach is working flawlessly. Im just a little new to all this ??

    We are using WPML to manage multi-lingual versions of pages. This plug-in allows for the pages language to be defined as a global variable.

    I can confirm that by default, all automatic translation based on the detected language of the by Opening Hours is working.

    This includes:
    Days: Monday = Lundi
    Shortened days: Mon = Lun
    Months: December = Décembre
    Shortened months: Dec = Déc

    The only text replacement that was required on our french page so far is:
    closed=”fermé”
    open=”ouvert”

    Plugin Author Design Extreme

    (@designextreme)

    @oaimwp Thanks for the update. This is how the wp_date() function works.

    You’re right about the text for closed days, this doesn’t support multiple languages in the overall settings, but you can set the override in the parameter instead – if you have different Shortcodes.

    If using the conditional Shortcode, you could have a different body class for each language, you can create CSS that can show/hide each conditional text for open/closed.

    Thread Starter oaimwp

    (@oaimwp)

    Thanks for those details. I’ll continue to experiment with it, but this overall looks like its going to be a major upgrade for us.

    Manually updating our special hours across platforms has been such a headache this past year.

    Also, you were right that I wasn’t loading the CSS. Forgot to check the box in the We’re Open settings.

    Theres one remaining challenge that very much falls outside the scope of your plugins functionality. Not at all expecting it but if you’re able to nudge me in the right direction it would be a huge help.

    I’m trying to replicate our previous visual style of highlighting the background of the current day. This has turned out to be more challenging than expected because I need to look up classes instead of ID’s, and cant seem to specify a wildcard like (‘*today*’)

    You seemed to indicate theres already a class for calling ‘present day’ but I haven’t figure out how to use this.

    The screenshot shows the styling I’m trying to replicate on the right
    https://ibb.co/ncRqWDT

    Plugin Author Design Extreme

    (@designextreme)

    @oaimwp I recommend checking the styles already present in the plugin and then apply your own versions for the past and today classes. I’m not sure what else to suggest…

    Here’s a quick example:

    .opening-hours .past {
	color: #444;
}
.opening-hours .today {
	background-color: #3BD;
}
    • This reply was modified 3 years, 4 months ago by Design Extreme. Reason: CSS Example
Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Visible table and no styling. help?’ is closed to new replies.