Support › Meta Box Builder › Style text in a custom field
- This topic has 10 replies, 3 voices, and was last updated 3 years, 6 months ago by
Long Nguyen.
-
AuthorPosts
-
June 5, 2021 at 9:22 AM #28717
Laurent
ParticipantHi Meta Box Team!
I have a CPT [Songs] and a custom field [Lyrics] that will store the song lyrics.
The song lyrics will actually mix lyrics and timecodes and it will be displayed as follows on the frontend:
Timecode
LyricsTimecode
LyricsTimecode
Lyrics...
As I would like to style it (text size, color, font weight and more), which type should I use for lyrics? Textarea with the clone feature (-> one clone per line)?
I tried the "Custom HTML" type but it looks like it is not dynamic but static HTML (similar for all instances of the CPT).
Looking forward to hearing from you.
June 5, 2021 at 3:30 PM #28726Long Nguyen
ModeratorHi,
On the backend, I think you do not need to style the text. On the frontend, when outputting the field value, you can wrap the field value in a
<div>with class.<div class="my-class"> <?php echo rwmb_meta( 'lyric_field' ) ?> </div>Then style this class with some CSS code
.my-class { font-size: 18px; color: red; }June 6, 2021 at 8:27 AM #28737ParticipantHi Long (your first name, right? :-),
Thanks for your prompt reply.
As I'm not a dev and, I have no idea how to use the code you gave me.
Is it too much to ask of you to make a one-minute video filming your screen on a demo site or something that would help me better understand where and what I'm supposed to do?
But first, I'd like to clarify what I mean by styling the content in the "Lyrics" custom field.
You'll see here an example of how I would like it to appear on the front end (I can't read Vietnamese, it is just a tribute to the great Meta Box team :-).Best,
Laurent
June 7, 2021 at 9:52 PM #28756ModeratorHi Laurent,
I've created a short video to show a demo case, show lyrics with time on the frontend by using Meta Box custom fields.
https://www.loom.com/share/d1943a8ebf324c1495beaf44ed86aa4eHere are steps to do:
- Create a cloneable group with two subfields Text
- Add the field value: time and lyrics to a song
- Add the code to the template file which displays the single song
- Style the text with some CSS code<?php $lyrics = rwmb_meta( 'lyrics' ); echo '<div class="lyric-wrapper">'; foreach ( $lyrics as $lyric ) { echo '<div class="lyric-time">' . $lyric['lyric_time'] . '</div>'; echo '<div class="lyric-content">' . $lyric['lyric_content'] . '</div>'; } echo '</div>'; ?> <style> .lyric-time { opacity: 0.5; } .lyric-content { font-style: italic; color: red; } </style>Get more details on the documentation https://docs.metabox.io/extensions/meta-box-group/.
You need to have a basic knowledge about coding to do more advanced cases and use all features/options of Meta Box.
June 8, 2021 at 11:14 AM #28759ParticipantHi Long!
First, thanks a lot for making this video!
I don't know if I'll be able to implement it yet, but I'll try.Here is a suggestion that would make life much easier for non-advanced users like me.
=> Add an advanced "Custom HTML" field (compatible with internal and/or inline CSS) that, unlike the current "Custom HTML" field, has content that is specific for each post of a CPT.In my case, the custom HTLM for each post would look like this:
<style>
p {
font-color: #333;
}
.lyrics {
font-color: black;
}
</style><p style="timecode">[Timecode]
<br /><span style="lyrics">[Lyrics]</span>
</p><p style="timecode">[Timecode]
<br /><span style="lyrics">[Lyrics]</span>
</p>...
What do you think?
June 10, 2021 at 7:27 PM #28829ParticipantIs it something you could implement easily, Long?
June 11, 2021 at 1:02 PM #28846ModeratorHi Laurent,
I do not have an easier way to do your case. Because the time and lyric is a pair and you will have more pairs for each song.
The field Custom HTML does not help you to save data. It just shows a notice or warning for the field. Even you use the custom HTML, this way will be back to my code and use the loop to show the pair.
June 12, 2021 at 12:16 AM #28854ParticipantI understand Long and this exactly why I suggested that you add a NEW advanced custom HTML field that will accept a different output for each post (this output being created by ourselves before, using Excel or Google Sheet in my case).
Also, it would a lot quicker to do than adding pairs manually.
May I ask you to talk about it with Anh by explaining my use case to make sure he understands the benefit of it?
Selling on AS brought a lot of non-developers like me.
June 12, 2021 at 8:27 AM #28860Anh Tran
KeymasterHi Laurent,
I think you and Long are going into 2 directions:
- Long was talking about how to store the date for your lyrics and timecode.
- You was talking about formating the text on the frontend.
What Meta Box is for is handling the data, which is what Long said. Outputting data on the frontend and formatting it belongs to the website owner/developer. We don't have any restriction on doing that.
In your case, you can output the lyrics and timecode as Long proposed and add some CSS in the Customizer or your theme.
It's not a good option to store the format and style in a field and then output it. Because you have to enter that styling data for all posts and then you still need to output it on the frontend.
June 13, 2021 at 1:10 PM #28868ParticipantThank you Anh and Long, I have a better understanding of the situation now.
If I follow your suggestion for storing the lyrics, it is going to take me a lot of time to do it manually, so it got me thinking.
I bought WP All Import a year ago but haven't put it to use yet.
When I contacted the support of the plugin to know if I could use WP All Import to import the content of all my custom fields/posts, they said:If you're using regular custom post types and regular custom fields (i.e. the postmeta WordPress table), you should be able to import into the majority of Meta Box fields using these instructions: https://www.wpallimport.com/documentation/custom-fields/theme-plugin-fields/.
For more complex fields, or if you're using the custom tables option to store meta fields in a custom table, you'd have to write custom code that uses our API to import the data: https://www.wpallimport.com/documentation/advanced/action-reference/.
This leads me to the following questions:
1- does Meta Box use the postmeta WordPress table by default?
2- if so, does that mean that I can use WP All Import to import any type of custom field for my CPT (including the lyrics even if they have different sizes / numbers of timecode/lyrics pairs)?
3- as for styling the lyrics, I guess I need to add two classes (one for the timecode, another for the lyrics). Would you show me a screenshot of how to do it wfor a cloneable group with two subfield texts?Best,
Laurent
June 14, 2021 at 11:30 AM #28881ModeratorHi Laurent,
1, 2. Yes, the custom fields created by Meta Box are saved in the default table
postmeta. But for some complex fields like cloning field, group, the value of the field is more complicated. And it might not work with WP All Import.- You can see the sample case I explain in this reply https://support.metabox.io/topic/style-text-in-a-custom-field/#post-28756
-
AuthorPosts
- You must be logged in to reply to this topic.