Shortcode Note

[smbgoncalvess]

Hello I create a shortcode NOTE  in an unit sction. So far, so good. But how can I align to center the  created note? Not the text inside the note. I want to align center the all note included the background. Thanks

[[email protected]]

There's a number of different reasons why it isn't centered and its difficulty to determine which without having access to the actual page. The most visually appealing solution would be adding 100% width to its container: .your-note-wrapper-class {width: 100%;} If you want it to be full width you could try adding margin auto to the container. .your-note-wrapper-class {margin-left: auto; margin-right: auto;} Hope it helps

[H.K. Latiyan]

Thanks @urdeke for sharing the fix. @smbgoncalvess: This can be adjusted by custom css, so try the custom css shared by urdeke and let us know if this helps. You can add the custom css in your appearance->customize->custom css OR in the style.css file of your child theme.  

[smbgoncalvess]

Ok, thanks :) But you need to be patient with me. I don't know where to fix it. My note shortcode is this: [note style="other" bg="#f85208" border="#f85208" bordercolor="{{bordercolor}}" color="#ffffff"] MY CONTENT [/note] Where do I put this: .your-note-wrapper-class {width: 100%;}

[[email protected]]

So I'm guessing you didn't created the shortcode yourself, you just added it to the page, right? Your shortcode has a function 'attached' to it, if you have access to it and can post it here I'd be able to tell you which selector you have to give 100% width, if not the only way would be posting the url to your page. If you don't want to share your url publicly just check 'Set as private reply' and someone from Vibe Team will be able to help you. Ps: I'm not part of Vibe Team Good luck

[H.K. Latiyan]

@smbgoncalvess: As already mentioned in my previous reply you need to add the custom css in your appearance->customize->custom css OR if you are using child theme, then add the css in your style.css file. So try adding this css in your wp-admin->appearance->customize->custom css: .page-template-start .notification {text-align:center;margin-right:0;}

[smbgoncalvess]

@urdeke: thanks for all you help and patience. I don't have a problem to post here my url page. But this in a private course and without login you can't see... Yes, you are right. I only insert a Vibe Shortcode in the Unit Editor. The vibe shorcode is the "Note". I just want this note to be centered in the page.   @Latiyan: I don't understand anything about coding, HTM or something similar. But I can follow instructions. I had alredy insert the code in appearance >customize >custom css, but it don't work. That's why I ask again. As I said, I don't understand much about this things and I could have mada a mistake. I tried this new code, but it don't work too... If you want, I could give you the credentials of my site. Thank you.  

[[email protected]]

Follow Latiyan's instructions but use this code instead: .single-unit .notification {text-align:center;margin-right:0;} Let me know if it works

[H.K. Latiyan]

@smbgoncalvess: I assumed it to be the course status page but I guess I was wrong it is the single unit page, so urdeke  css will work fine on single unit page. If you still face issues and not able to do it, you can share the site url and the admin credentials with us we will help you out. PS: Please mark your reply as private while sharing the admin credentials, refer:  The private replies can be read only by the vibethemes support staff, therefore your information will be safe.

[smbgoncalvess]

Hello @urdeke: Thank you very much. Works fine! Let me know if you need something that I could help! :) @Latiyan: It is now fine. Thanks both of you!

[H.K. Latiyan]

Thanks for confirming that the issue is resolved, so marking the topic as resolved and closing the topic.

[Author]

Posts