Site Title CSS

#1. Change a part of site title size
Suppose we need to change text “x5” to bigger

You can use this code to Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("a#site-title").each(function() {
    $(this).html($(this).html().replace(/x5/g, "<span>x5</span>"));
});
});
</script>
<style>
  a#site-title span {
    font-size: 30px;
}
</style>

Result

#2. Change a part of site title color
If you need to change “x5” color

Result

You can use this code to Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("a#site-title").each(function() {
    $(this).html($(this).html().replace(/x5/g, "<span>x5</span>"));
});
});
</script>
<style>
  a#site-title span {
    color: #f1f;
}
</style>

#3. Hover Site Title – Rotate it 360 degree
You can use this code to Custom CSS box

a#site-title {
    transition: transform 0.5s ease-in-out;
    display: inline-block;
}
a#site-title:hover {
    transform: rotate(360deg);
}

#4. Site Title – Different color on each character
You can use this code to Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    var colors = ["red", "blue", "green", "orange", "purple", "yellow", "pink", "cyan"];
    var text = $("#site-title").text();
    var coloredText = "";

    for (var i = 0; i < text.length; i++) {
        var color = colors[i % colors.length];
        coloredText += '<span style="color:' + color + ';">' + text[i] + '</span>';
    }

    $("#site-title").html(coloredText);
});
</script>

Result

You can change color here

#5. Site Title in middle of screen on scroll
You can use this code to Custom CSS box.

a#site-title {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    text-align: center;
    width: 150px !important;
    white-space: nowrap;
}