Box styling for posts and pages

Solved
YAJones
New Member
7 0 0

I hope this is the correct place to request this sort of assistance. 

I'd like to bring attention to specific blocks of text in my blog posts and pages. Ideally, this would be done in a similar way to what's shown below on Shopify's own blog. It's a colored box and the text within that box can be styled appropriately.

Is there any way to do this in the Rich Text Editor? If not, is there another way to accomplish the same?

Thanks in advance for the help.

25-52-54026-99322.png

0 Likes

It can be easily done by CSS, please let me know your store url, I can take a look

Visit my Shopify Youtube channel to learn how to code your Shopify store and fix various coding issues on Shopify.(subscribe if you like it :)).
Glad to help out and wish your Shopify store great success.
0 Likes
YAJones
New Member
7 0 0

Hi DeepCode, thanks for replying.

The URL is: https://yajoneswallart.myshopify.com/.

0 Likes

This is an accepted solution.

click the "show html" button in the rich editor and put your text you would like to highlight in

<p style="border: 3px solid orange; padding: 20px; background-color: #eee;">
     put your highlighted text here
</p>
Visit my Shopify Youtube channel to learn how to code your Shopify store and fix various coding issues on Shopify.(subscribe if you like it :)).
Glad to help out and wish your Shopify store great success.
0 Likes
YAJones
New Member
7 0 0

This worked very well. I can now style the box and text as I see fit. Thank you.

I'm having a similar styling (CSS) issue with the 'subscribe' button for my MailChimp embedded forms. Should I open up a new thread?

0 Likes

Great, can you mark my solution as accepted, thanks.

Sure, you can ask the follow up question here.

Visit my Shopify Youtube channel to learn how to code your Shopify store and fix various coding issues on Shopify.(subscribe if you like it :)).
Glad to help out and wish your Shopify store great success.
0 Likes
YAJones
New Member
7 0 0

Thanks again DeepCode.

Here's the embed code I'm currently using:

<!-- Begin Mailchimp Signup Form -->
<style type="text/css"><!--
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
            #mc-embedded-subscribe { background-color: #B28642 !important; }
            #mc-embedded-subscribe:hover { background-color: #000000 !important; }
            #mc-embedded-subscribe { font-size: 20px !important; }
 #mc-embedded-subscribe { border: none; color: white; padding: 32px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer !important; }
	/* Add your own Mailchimp form style overrides in your site stylesheet or in this style block.
	   We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
--></style>
<div id="mc_embed_signup"><form action="https://yuriajones.us13.list-manage.com/subscribe/post?u=a76b01f0d8df3db1b72be87ee&amp;id=60c48786a6" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate="">
<div id="mc_embed_signup_scroll">
<div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
<div class="mc-field-group"><label for="mce-EMAIL">Email Address <span class="asterisk">*</span> </label> <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" /></div>
<div class="mc-field-group"><label for="mce-FNAME">First Name <span class="asterisk">*</span> </label> <input type="text" value="" name="FNAME" class="required" id="mce-FNAME" /></div>
<div class="mc-field-group size1of2"><label for="mce-BDAY-month">Birthday </label>
<div class="datefield"><span class="subfield monthfield"><input class="birthday " type="text" pattern="[0-9]*" value="" placeholder="MM" size="2" maxlength="2" name="BDAY[month]" id="mce-BDAY-month" /></span> / <span class="subfield dayfield"><input class="birthday " type="text" pattern="[0-9]*" value="" placeholder="DD" size="2" maxlength="2" name="BDAY[day]" id="mce-BDAY-day" /></span> <span class="small-meta nowrap">( mm / dd )</span></div>
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display: none;"></div>
<div class="response" id="mce-success-response" style="display: none;"></div>
</div>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_a76b01f0d8df3db1b72be87ee_60c48786a6" tabindex="-1" value="" /></div>
<div class="clear"><input type="submit" value="SIGN UP NOW!" name="subscribe" id="mc-embedded-subscribe" class="button" /></div>
</div>
</form></div>
<script type="text/javascript" src="//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script>
<script type="text/javascript">// <![CDATA[
(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';fnames[3]='BDAY';ftypes[3]='birthday';}(jQuery));var $mcj = jQuery.noConflict(true);
// ]]></script>
<!--End mc_embed_signup-->

 

However, the resulting form looks like this:

embedded form.png

Ideally, I'd like to style the button to look like the other buttons on my site. Or at the very least, increase padding around the text.

Also, I'd like to remove the field titles and add text placeholders within each field.

Let me know your thoughts. Thanks.

0 Likes