Category: CSS

Here is a sample post that has text with an image with a caption that is centered below it.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer viverra, orci sit amet mollis cursus, eros mi iaculis neque, non consectetur risus leo at dui. Mauris sit amet scelerisque leo. Donec nunc urna, dictum at massa in, aliquam cursus lectus. Maecenas rhoncus vulputate justo, eget venenatis metus fringilla ac. Suspendisse euismod, tortor quis imperdiet finibus, lectus felis hendrerit erat, ac dignissim

Boy Scouts

tortor tellus nec lectus. Aenean ultrices imperdiet arcu eleifend molestie. Aenean aliquet non urna at rhoncus. Nunc ut aliquet nisl, sit amet pulvinar nisi. Vivamus facilisis urna magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. In et metus sed dolor ornare vehicula vel quis ante. Etiam at malesuada libero, eu scelerisque leo. Mauris tempor sed dui at porttitor. Sed augue odio, luctus at nibh at, aliquam mollis felis. Cras dui urna, aliquet vitae aliquam ut, imperdiet vitae sapien. Maecenas ut congue tellus.

The code that I used came from the https://codex.wordpress.org/Wrapping_Text_Around_Images site.

Here is the code I used:

<div class="wp-caption alignright" style="text-align: center; vertical-align: middle; width: 149px;"><img class="" title="Boy Scouts Logo" src="http://www.polysyncronism.com/wordpress/wp-content/uploads/2017/08/scouts.jpg" alt="leaf graphic" width="225" height="224" />Boy Scouts</div>

Nice and dark graph for printing graph paper. May need to adjust the 4th parameter of the rgba function to make the lines lighter.

body {
    background:
        linear-gradient(-90deg, rgba(0, 0, 0, 1.03) 1px, transparent 1px),
        linear-gradient(rgba(0, 0, 0, 1.03) 1px, transparent 1px),
        linear-gradient(-90deg, rgba(0, 0, 0, 1.03) 1px, transparent 1px),
        linear-gradient(rgba(0, 0, 0, 1.03) 1px, transparent 1px),
        linear-gradient(transparent 3px, transparent 3px, transparent 78px, transparent 78px),
        linear-gradient(-90deg, transparent 1px, transparent 1px),
        linear-gradient(-90deg, transparent 3px, transparent 3px, transparent 78px, transparent 78px),
        linear-gradient(transparent 1px, transparent 1px), transparent;
    background-size:
        10px 10px,
        10px 10px,
        10px 10px,
        10px 10px,
        10px 10px,
        10px 10px,
        10px 10px,
        10px 10px;
}