[oik] plugins.com

WordPress plugins and themes

  • Home
  • About
    • lazy shortcodes
    • smart shortcodes
    • oik base plugin
      • oik – donate
      • oik PayPal buttons
      • oik installation
      • oik Button Shortcode button
      • oik changelog
      • oik FAQ
      • oik plugins on SVN
      • oik plugins on GitHub
  • Plugins
    • oik base plugin
    • FREE oik plugins
    • WordPress plugins
    • Premium oik plugins
    • Bespoke oik plugins
  • Shortcodes
    • Shortcode examples
  • Blocks
    • Block examples
  • APIs
    • ALL action and filter hooks
  • Blog

Styling drop caps with div shortcodes

If you want to style a paragraph with a drop cap then you can use the div and ediv shortcodes with a CSS class name.
With a bit of luck the first ‘w’ will be styled as a drop cap. It’ll be a purplish colour with a certain amount of padding. This second paragraph won’t be styled in the same way.
[div class=dropcap]With a bit of luck etcetera...

This second paragraph won't be styled in the same way.
[ediv]
Write the CSS to style the drop cap either as custom CSS or use the [bw_css] shortcode. This example was copied from https://css-tricks.com/snippets/css/drop-caps

div.dropcap:first-letter {
        float: left;
        color: #903;
        font-size: 75px;
        line-height: 60px;
        padding-top: 4px;
        padding-right: 8px;
        padding-left: 3px;
        font-family: Georgia;
 }
 

Published: December 8, 2016 | Last updated: December 8, 2016

Information

Shortcode: div – start a <div> tag
Letters:

Syntax

Syntax

[div
class="| class names - CSS class names"
id="| id - unique identifier"]

Other examples

  • div and ediv examples using oik-rwd dynamic class definitions

Plugins

  • All Plugins
  • oik base plugin
  • FREE oik plugins
  • WordPress plugins
  • Premium oik plugins

Themes

  • FREE themes
  • Bespoke themes
  • Premium themes

Blocks

  • All Blocks
  • Block examples
  • About Blocks

Shortcodes

  • All Shortcodes
  • Shortcode examples
  • About Shortcodes

Reference

  • About APIs
  • All APIs
  • All Classes
  • All Files
  • All Hooks

Support

  • Contact
  • Cookies policy
  • Get API key
  • Privacy
  • Request support
  • Sitemap
  • Stay informed
  • Terms and Conditions
oik-plugins
Email: oikplug@oik-plugins.com

Weight shipping plugins

Find out which cart weight shipping plugin you need for your WooCommerce site.
Which cart weight based plugin do I need?

Site:  www.oik-plugins.com
© Copyright oik-plugins 2011-2023. All rights reserved.


Website designed and developed by Herb Miller of Bobbing Wide
Proudly powered by WordPress and oik-plugins
WordPress 6.2.2. PHP: 7.4.33. Memory limit: 768M