HTML style shortcode repeated

1

Hi there,

​I have low knowledge in HTML, but i want to add a shortcode html style to write my articles in my blog.

Thats the code I’m using :

function TAB_shortcode( $atts, $content = null ) {
    $styled_content = '<p style="background-color: #434343; padding: 8px; color: white; border-radius: 10px; font-weight: bold; text-align: center; margin-left: 10%; margin-right: 10%"</p>';
    return $styled_content;}
add_shortcode( 'TAB', 'TAB_shortcode' );

It works perfectly but it is repeated right below as you can see on these images

Capture d’écran 2023-04-20 à 09.57.05
Capture d’écran 2023-04-20 à 09.57.05752×492 68.3 KB

Anyone know where my problem comes from?

2

Its seems you are using wordpress if I am not wrong…
I think you targeted

html tags through functions… So every “p” has this style effect.

Thanks
David

3

You’re right it’s on wordpress. It doesn’t affect every “p” though but it get repeated in an empty block, then all the text block are normal

It appears like on the picture

Capture d’écran 2023-04-20 à 09.56.56
Capture d’écran 2023-04-20 à 09.56.561104×304 18.7 KB

4

In the code you posted the starting <p> tag is not closed >

5

Thanks for the answers. Isn’t it close after the text?

6

No it isn’t.

<p style="
  background-color: #434343;
  padding: 8px;
  color: white;
  border-radius: 10px;
  font-weight: bold;
  text-align: center;
  margin-left: 10%;
  margin-right: 10%" <!-- > is missing here -->
</p>
7

I closed it using your advice, but same thing happened. I attached you the code as I wrote it in my functions.php and how it results

Thanks for your answer

Capture d’écran 2023-04-27 à 20.28.42

8

Capture d’écran 2023-04-27 à 20.28.50 (2)
Capture d’écran 2023-04-27 à 20.28.50 (2)1444×292 79.9 KB

9

It still isn’t closed in the image you posted.

I didn’t close it for you in the code I posted, I showed you where it should be closed.

<p style="color: red;">Some text</p>

Validate your HTML.

https://validator.w3.org/nu/#textarea

10

But I’m looking to create a shortcode, so when I write article, and I add [TAB] at the beginning of the paragraphe and [TAB/] at its end the style apply between those tags

11

The HTML still needs to be valid.

I don’t know anything about WP shortcodes other than what I can google for but the element needs to be closed properly and I would assume you need to use the $content parameter if you are passing it content.

function content_with_style($atts, $content = null) {
   return '<p style="color: red;">'.$content.'</p>';
}