{"id":375,"date":"2023-04-01T04:00:06","date_gmt":"2023-04-01T04:00:06","guid":{"rendered":"https:\/\/josephvo.com\/websites\/minibean\/?p=375"},"modified":"2023-04-09T13:17:57","modified_gmt":"2023-04-09T13:17:57","slug":"coffee-lessons-custom-callout","status":"publish","type":"post","link":"https:\/\/josephvo.com\/websites\/minibean\/coffee-lessons-custom-callout\/","title":{"rendered":"Coffee Lessons: Custom Callout"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Welcome to Mini Bean’s Second Lesson!<\/p>

For this lesson, we will cover how we can design a custom callout using HTML and CSS. If you’re still interested, take a look at the rest of the lesson! If not, that’s great too. Come hang out at the Mini Bean and grab a coffee!<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t

\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Coffee Lessons: Custom Callout<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t\t
\n\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

To create a custom callout, we will be using a HTML block. Usually in web builders, you can select a block with the code symbol like in figure 1.<\/p>

Once we have a custom HTML block down, we can input something like:<\/p>

<h2 class=”custom-callout”>Callout<\/h2><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t

\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
\n\t\t\t<\/i>\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Figure 1<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t

\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

The <h2><\/h2> tags will create a header 2 element like seen below:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t

\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

H2 Header<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

From here, we can edit the CSS for the h2 header. It may differ depending on what web builder or process you are creating your h2 header, but you can edit the CSS through “Custom CSS” in the menu. Once you have found it, you can select your h2 header by selecting the “custom-callout” class:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t

\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

.custom-callout {<\/p>

\u00a0 \u00a0 \u00a0\/* Input Code Here *\/<\/p>

}<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t

\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Next, you can input the CSS code to edit your h2 header to create a custom callout! We won’t go more in-depth into the CSS, but you can try out the code below to use our custom callout yourself!<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t

\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

.custom-callout {
\u00a0 \u00a0 \u00a0border: 5px dotted #F0DDC6;
\u00a0 \u00a0 \u00a0text-align: center;
\u00a0 \u00a0 \u00a0padding: 15px 0 15px 0;
}<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t

\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Result<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Custom Callout<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"

Welcome to Mini Bean’s Second Lesson! For this lesson, we will cover how we can design a custom callout using HTML and CSS. If you’re still interested, take a look at the rest of the lesson! If not, that’s great too. Come hang out at the Mini Bean and grab a coffee! Coffee Lessons: Custom Callout To create a custom callout, we will be using a HTML block. Usually in web builders, you can select a block with the code symbol like in figure 1. Once we have a custom HTML block down, we can input something like: <h2>Callout<\/h2> Figure 1 The <h2><\/h2> tags will create a header 2 element like seen below: H2 Header From here, we can edit the CSS for the h2 header. It may differ depending on what web builder or process you are creating your h2 header, but you can edit the CSS through “Custom CSS” in the menu. Once you have found it, you can select your h2 header by selecting the “custom-callout” class: .custom-callout { \u00a0 \u00a0 \u00a0\/* Input Code Here *\/ } Next, you can input the CSS code to edit your h2 header to create a custom callout! We won’t go more in-depth into the CSS, but you can try out the code below to use our custom callout yourself! .custom-callout {\u00a0 \u00a0 \u00a0border: 5px dotted #F0DDC6;\u00a0 \u00a0 \u00a0text-align: center;\u00a0 \u00a0 \u00a0padding: 15px 0 15px 0;} Result Custom Callout<\/p>\n","protected":false},"author":1,"featured_media":377,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"default","ast-global-header-display":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","footnotes":""},"categories":[8],"tags":[],"class_list":["post-375","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-coffee-lessons"],"_links":{"self":[{"href":"https:\/\/josephvo.com\/websites\/minibean\/wp-json\/wp\/v2\/posts\/375","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/josephvo.com\/websites\/minibean\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/josephvo.com\/websites\/minibean\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/josephvo.com\/websites\/minibean\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/josephvo.com\/websites\/minibean\/wp-json\/wp\/v2\/comments?post=375"}],"version-history":[{"count":7,"href":"https:\/\/josephvo.com\/websites\/minibean\/wp-json\/wp\/v2\/posts\/375\/revisions"}],"predecessor-version":[{"id":384,"href":"https:\/\/josephvo.com\/websites\/minibean\/wp-json\/wp\/v2\/posts\/375\/revisions\/384"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/josephvo.com\/websites\/minibean\/wp-json\/wp\/v2\/media\/377"}],"wp:attachment":[{"href":"https:\/\/josephvo.com\/websites\/minibean\/wp-json\/wp\/v2\/media?parent=375"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/josephvo.com\/websites\/minibean\/wp-json\/wp\/v2\/categories?post=375"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/josephvo.com\/websites\/minibean\/wp-json\/wp\/v2\/tags?post=375"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}