Shortcode customization

@banan_44

By ‘customise’ I presume you mean apply some different styling to it? Just wrap the shortcode in some HTML div tags with a class name in the content of your page (or define the class name in he widget settings in the WordPress admin area). Then add your custom CSS styling to the page at load time – usually by adding it to your themes style.css file.

mattyrob, by customize I meant what I wrote above, moving the buttons next to the email field – see screenshot. The shortcode is already in div tags, but I have no idea how to force those buttons to move. The email field is in paragraph tag, the buttons are in separate paragraph tag, so the source code pretty much looks like this:

<p>input for email address</p><p>input for the buttons</p>

I’ve tried customizing <p> tag by adding following line in css:

.subs p {
display:inline;
}

The div class name for my shortcode is “subs”, but the following code not work. I have no idea how force those paragraphs to show next to each other without messing with plugin’s source code. I could do that, but when a new update will be released, it removes my modification.

@banan_44

My apologies. It would seem that I didn’t read your full post.

The shortcode takes some parameters as documented here:
https://subscribe2.wordpress.com/support/shortcode-usage-and-parameters/

You need to use ‘wrap=false’ inside the shortcode.

mattyrob, no problem.

I’ve tried changing the shortcode as suggested, but it did not work either. I’ve tried with shortcode in a post, inside and outside the div in PHP file on 2 sites. Maybe I do something wrong. My current PHP code for the shortcode looks like this and I placed it in theme file:

<div class=”subs”><?php echo do_shortcode (‘[subscribe2 wrap=”false”]’); ?></div>

Originally, the email field is wider (it looks like width: 100%), but I’ve made it short via this css code:

.subs input#s2email {
width: 300px;
}

@banan_44
Try adding:

.subs p {
display: inline;
}

And make sure you refresh the browser and also any server cache you might be using.

mattyrob, I did that already. See my second post.

@banan_44

Since it was missing from the CSS snippet you posted I presumed you’d removed it again. Have you tried adding the ‘!important’ parameter also?

Perhaps if you can post a link to the site I can take a look myself.

mattyrob, I’ve just tried ‘!important’ parameter. It didn’t wokr either. Sorry, I forgot to post my website: https://www.bowshrine.com

@banan_44

Okay, I can see the form in the left sidebar but there doesn’t seem to be room to put the buttons (red and green) to the right of the text box for the email address. Am I missing something (again)?

mattyrob, I’m customizing shortcode in posts, not sidebar widget form. I’m sorry, I haven’t spiecified that in my first post. Check out any post and scroll down to bottom.

@banan_44

Okay, your CSS is being minified so it’s hard to direct you precisely but you have a CSS file that defines input elements as block display, look for this and you’ll find display: block.

So, try adding into this:

.subs input[type=”text”], .subs input[type=”submit”] {
display: block;
}

mattyrob, now it looks like that: https://i.imgur.com/30wtKJH.png

EDIT: I moved subscribe shortcode under the comments section for now.

@banan_44

Sorry, the CSS should be display: inline;, not display: block;.

mattyrob, thank you very much ?? Now the buttons are in the same line with email field.