Drop cap on Site Tite?

BB Theme
1

Hi there!
I’ve been trying to apply a Drop Cap Effect on the Site Title using the Beaver Builder Child theme - but can’t seem to isolate the first letter via css.

Do you have any recommendations?

2

Hi Michael,

To do this you’re going to need to wrap the first letter in a spans like so:

<p><span class="drop-cap">D</span>anny!</p>

Then add your own styling to the class you assign to the span.

Thanks,
Danny

3

Hey Michael,

I’d just like to chime in here. The link below shows a different method aside from the one Danny mentioned above, just in case you’re interested. But it’s still via CSS. :slight_smile:
https://css-tricks.com/snippets/css/drop-caps/

Ben

4

Thanks for the feedback guys - but how do I get this to apply to the Site Title?
Does the header_content(); function need to be altered?

My html output right now is:

<a id="yui_3_5_1_1_1453276304184_272" href="http://example" itemprop="url"><span class="fl-logo-text" itemprop="name">Example Title</span></a>

I tried .fl-logo-text:first-letter with no luck.

Please let me know - thanks!

5

Hey Michael,

So it seems the first-letter selector can only be used on block level elements. Adding this CSS snippet should fix you right up! :slight_smile:

.fl-logo-text {
  display: inline-block;
}

Ben

6

Perfect - Thanks very much - you guys are awesome!

7

Hi Michael,

Thank you for informing us the issue has been resolved. We appreciate it.

Thanks,
Danny