- This topic has 7 replies, 4 voices, and was last updated 3 years, 8 months ago by
David.
-
AuthorPosts
-
June 20, 2021 at 2:17 pm #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.
CarstenJune 20, 2021 at 2:54 pm #1828929Ying
StaffCustomer SupportHi 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 π
June 20, 2021 at 3:31 pm #1828944Carsten
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?June 20, 2021 at 8:12 pm #1829044Elvin
StaffCustomer SupportHi 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. π
June 21, 2021 at 3:34 am #1829327Carsten
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
June 21, 2021 at 5:14 am #1829434David
StaffCustomer SupportHi 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; }
June 21, 2021 at 5:26 am #1829444Carsten
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.
CarstenJune 21, 2021 at 5:45 am #1829471David
StaffCustomer SupportGlad we could be of help – no one needs that much google searching in their lives π
-
AuthorPosts
- You must be logged in to reply to this topic.