Site Title Style – Adjust first-letter size

  • I have been trying to customise the Astra theme of WordPress to adjust the site title (just 2 words) via additional CSS.

    I am trying to capitalise both words and display them as small caps at the same time (it refers to a brand logo so would need to look aesthetic – with an insert of the png file, it doesn’t turn out as sharp as with the site title method). This works great with the below.

    However, I am now trying to make the initial / first letters a little bit smaller as they show up quite big. In my research I found that this could be achieved with first-letter / initial-letter properties or p-elements (since it affects two words in one element). I have tried various versions and got nowhere with it.

    Maybe someone on here has more experience with it and could help me out?

    Thank you!

    Specifically, I have added this code –>

    li.menu-item a {
font-family: fuesco;
font-size: 15px;
padding-top: 0px !important;
}

.site-title a {
  color: #9b8600 !important;
	font-size: 60px;
	font-variant: small-caps;
	text-transform: capitalize;
}

.site-content {
	padding-top: 0px;
}

.ast-site-identity {
    padding-bottom: 0em;
}

.site-title {
	transform: scale(1.3, 1.4);
}

.main-header-bar {
    position: fixed;
    top: 0;
    width: 100%;
}

.site-header .main-header-bar {
    background: rgba(255,255,255, 0.9);
}

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    There does not seem to be a way to override the size of the first character of a word for small-caps or petite-caps. Maybe someone else will jump in with a solution.

    May be a possibility using jQuery and CSS. A little bit complex but I could not find a simpler way

    jQuery (from here):

    $=jQuery;
$(function(){         
    $('h1.site-title a').html(function(){         
        var text= $(this).text().split(' ');        
        var last = text.pop();       
        return text.join(" ") + (text.length > 0 ? ' <span class="last">'+last+'</span>' : last);   
    });
});

    And CSS:

    h1.site-title a, .last{display:inline-block;}
h1.site-title a {width:600px;}
h1.site-title a::first-letter{font-size:50px;}
h1.site-title .last::first-letter{font-size:50px;}

    Maybe it helps

    Thread Starter fursttedesco

    (@fursttedesco)

    You’re a star! This does indeed do the trick – thank you.

    Just one more question: The shrinking applies to the first-letter only (for apparent reasons), can I somehow partition the two words into to elements, so that it also applies to the first letter of the second word? How would I do so?

    …partition the two words into to elements

    This is precisely what the jQuery is doing (otherwise CSS would suffice). If you inspect the title, you will see that the whole “fürst Tedesco” has an “a” attribute whereas the last word is wrapped in a span (.last). Thus the CSS can apply to both words.
    In your case the “T” in Tedesco has a height of 100px not 50 (I don’t know why. Did you add some custom CSS?). Anyway you can revert this either by removing those 100px from wherever they are or by adding !important in the last CSS line.

    h1.site-title .last::first-letter{font-size:50px!important;}

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Site Title Style – Adjust first-letter size’ is closed to new replies.