Home > Mobile >  How to capitalize the first letter of the day outline to the left
How to capitalize the first letter of the day outline to the left

Time:02-26

At the moment I'm using the Opening Hours plugin on Wordpress (https://wordpress.org/plugins/wp-opening-hours/ ) and I have a question about the shortcode. FYI: I'm using Wordpress and Elementor.

At the moment the following can be seen on my website (text is in Dutch): https://imgur.com/a/95pauul

The following code has been used:

[op-overview set_id=".."  show_closed_days="true" show_description="false" highlight="day" compress="true" include_io="true" include_holidays="true" template="list" caption_closed="Gesloten" style="color:#ffffff;"]

I would like to capitalize the first letter of the day and outline the opening hours (the numbers) to the left, so this is in line with the days. However, I have no idea how to code this eventhough it seems to be a quite easy task. Is anyone able to help me out? Thank you in advance.

CodePudding user response:

EDIT: Here is the HTML from his site that was output by the plugin:

<dl >
    <dt >maandag – vrijdag</dt>
    <dd ><span >08:00 – 17:30</span></dd>
    <dt >zaterdag</dt>
    <dd ><span >08:30 – 12:00</span></dd>
    <dt >zondag</dt>
    <dd ><span >Gesloten</span></dd>
</dl>

And here is the custom css to accomplish the changes:

.op-list-overview .op-cell.op-cell-heading {
    text-transform: capitalize; /*Capitalizes the first letter of every word in the heading cell with the days in it.*/
}
.op-list-overview .op-cell.op-cell-periods {
    margin-left:  0; /*Clears the left margin on the hours*/
    margin-bottom: 5px; /*for space beneath the hours*/
}

Not seeing your site I wouldn't be able to tell if those work.

To add custom CSS to WordPress, log into the dashboard and, in the left menu, click "Appearance" then "Customize." In the customizer, the bottom option on the left should be "Additional CSS." That will give you a text box where you can add code like the CSS I provided above. Just be careful adding code you don't understand from someone you don't know (like me). If you need to, google some of the things in my code to make sure you know what it is and what it's doing.

  • Related