Home>Support>Using ‘First-Letter’ in SiteOrigin CSS Plugin

Using ‘First-Letter’ in SiteOrigin CSS Plugin

Hi, I just switched to using SiteOrigin’s Custom CSS plugin for my WordPress website as I figured it should be more compatible with the PageBuilder. So far all the styles seems to work EXCEPT for this:

h3::first-letter {
font-family: Times New Roman;
font-size:200%;
font-weight:bold;
}

I tried using the First-Letter selector too for my paragraphs but there is also no effect.
Can anyone give me some idea please?

This is a free community support forum. Replies are not guaranteed. If you need professional email support, please purchase a SiteOrigin Premium license.

  1. 8 days, 17 hours ago Alex S Hi, I Work Here

    Hi Sparkster,

    Do you have a public URL where we can take a look at what’s going on?

  2. 8 days, 14 hours ago sparkster

    Hi Alex, thanks for coming back. My website that is still in development is at:
    http://videoshoot.com.my

  3. 8 days, 14 hours ago Alex S Hi, I Work Here

    Hi Sparkster,

    There’s an issue with your CSS. Please navigate to WP AdminAppearanceCustom CSS and find:

    
    @keyframes animateBorderOne {
      to {
        outline-color: white;
        box-shadow: 0 0 0 3px green;
        

    Please add two right braces } to the very next line the mentioned CSS will now work. Please note that the only h3 on your home page is hidden by default so you may need to set it to show or add a new h3 to verify.

    For reference, the CSS should look like this:
    @keyframes animateBorderOne {
    to {
    outline-color: white;
    box-shadow: 0 0 0 3px green;
    }
    }

    [/code]

  4. 7 days, 22 hours ago sparkster

    Thank you, Alex for pointing out my error. I don’t understand what you meant by a default hidden h3 but don’t worry about it. It looks like it is an issue with my coding and nothing to do with the plugin, so I will do more read-up about CSS3 on my own. I am actually very new to WordPress and coding.

    SO PageBuilder and its Custom CSS are certainly good plugins and I will certainly consider signing-up for premium once I get my business going for real.

    Thanks again for the prompt support.

  5. 7 days, 22 hours ago sparkster

    Just thought I should publicize an update to my last post after doing some quick googling based on your hint about the h3 that is hidden by default. I changed those sections that I wanted a ‘first-letter’ selector to h4 as the h3 affected the first letter of the title in the SO image widget too. Now I got exactly the style that I want =)

    h4 {
    display: block;
    visibility: inherit;
    line-height: 1.6em;
    font-size: 16px;
    }

    Thanks, Alex.

  6. 7 days, 14 hours ago Alex S Hi, I Work Here

    Hi Sparkster,

    To clarify, by hidden I mean the only h3 on the linked page is hidden by the widget its in – by default. Does that make sense?

  7. 5 days, 12 hours ago sparkster

    Yup, got it. Thanks, Alex.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More