[Support request] Different Colours in Site Title

Home Forums Support [Support request] Different Colours in Site Title

Home Forums Support Different Colours in Site Title

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1828915
    Carsten

    Hi there,

    when using the site title as a “logo” (2 words, no logo image) is it possible to use different colours per word?

    Like f.e. first word in black and second word in red.

    Sticky navigation and Mobile Header are enabled.

    I searched the forum but did not find something related to the site title.

    Thanks in advance.
    Carsten

    #1828929
    Ying
    Staff
    Customer Support

    Hi Carsten,

    That can’t be done within the customizer options.

    Can you link me to the site? It might be able to achieve by using a Hook element.

    Let me know πŸ™‚

    #1828944
    Carsten

    Hi Ying,
    thanks for your fast reply.
    Please look at https://feller.systems instead.
    I’m about to build a new site with the “Dev” Site template from the site library (same as used for the feller.systems site), there’s not really a live url to look at yet, only staging an some test environment.
    Instead of the .svg logo file the site title should be visible.
    It will contain two or three words which should be displayed in different colours per word. Sticky navigation and mobile header are enabled.
    There’s no way to use custom css in the customizer for that purpose, right?

    #1829044
    Elvin
    Staff
    Customer Support

    Hi Carsten,

    There’s no way to do this within the customizer or custom CSS because the site title, regardless of how many words, is wrapped within one CSS selector.

    But you can filter the site title using generate_site_title_output.

    Example:

    add_filter('generate_site_title_output',function($output){
        $first_word = '<div class="st-first-word">First</div>';
        $second_word = '<div class="st-second-word">Word</div>';
        $new_site_title = $first_word.$second_word;
        $output = sprintf(
    				'<%1$s class="main-title"%4$s>
    					<a href="%2$s" rel="home">
                            %3$s
    					</a>
    				</%1$s>',
    				( is_front_page() && is_home() ) ? 'h1' : 'p',
    				esc_url( apply_filters( 'generate_site_title_href', home_url( '/' ) ) ),
    				$new_site_title,
    				'microdata' === generate_get_schema_type() ? ' itemprop="headline"' : ''
    			);
    
        return $output;
    });

    We basically split the first and second word with their own selectors – .st-first-word and .st-second-word.

    We can then change their color individually. πŸ˜€

    #1829327
    Carsten

    Hi Elvin,

    I got the filter working, thanks for your support.

    Now I have to dig into CSS, only thing I can change atm is the font size, like when I’m using

    .st-first-word {
    font-family: oxygen;
    font-size: 42px;
    color: #4183F4;
    }

    .st-second-word {
    font-family: oxygen;
    font-size: 42px;
    color: #94c221;
    }

    in Customizer –> Custom CSS, font-family and color is ignored, second word appears below first one, not in one line on desktop …

    https://www.dropbox.com/s/5tjxysouzdocov4/21-06-_2021_11-57-26.png?dl=0

    If I will fail with it, I will set up a proper staging site to provide a url to look at.

    Have a great day.

    Carsten

    #1829434
    David
    Staff
    Customer Support

    Hi there,

    To keep them inline you need to change the following two lines of code Elvin provided:

    $first_word = '<div class="st-first-word">First</div>';
    $second_word = '<div class="st-second-word">Word</div>';

    to:

    $first_word = '<span class="st-first-word">First</span>';
    $second_word = '<span class="st-second-word">Word</span>';

    Regarding the styles.

    1. For the Font and Font Size you should apply them in the Customizer > Typography > Header -> Site Title
    2. And for the colors i would set the Customizer > Colors > Header –> Site Title for the first word and then this CSS for the second:

    .main-title a .st-second-word {
        color: #94c221;
    }
    #1829444
    Carsten

    Hi David, thank you very much.
    I have the strong feeling, you saved me some hours of google search and doing some serious trial and error stuff… πŸ˜‰
    Have a great day.
    Carsten

    #1829471
    David
    Staff
    Customer Support

    Glad we could be of help – no one needs that much google searching in their lives πŸ™‚

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.