Styling "sitewide header site title"
Permalink
I'm sticking with the default template (for now) and while I am hoping there is a way to style the "sitewide header site title" ... so far I've had no luck.
I'm having three problems.
First, there does not seem to be a way to have two lines with two different text sizes. I'd like to have MY NAME (BIG!) then my title underneath (smaller!). Can't seem to do that with the editor. And yes, I acknowledge I don't know what I'm doing and that the answer is probably obvious (seriously).
Second, I have added an image that works just fine in desktop, but it does not scale or otherwise accommodate mobile. I'd like to be able to hide the image or scale it, or something. So far, that has not been possible.
Third, the text referenced in "first" (above) does not seem to scale in mobile, so that "sitewide header site title" ends up taking up 3/4 of the screen on a mobile phone ...
Any suggestions? (And I really want to apologize for stupid questions because I don't know what's stupid yet.)
Thanks!
I'm having three problems.
First, there does not seem to be a way to have two lines with two different text sizes. I'd like to have MY NAME (BIG!) then my title underneath (smaller!). Can't seem to do that with the editor. And yes, I acknowledge I don't know what I'm doing and that the answer is probably obvious (seriously).
Second, I have added an image that works just fine in desktop, but it does not scale or otherwise accommodate mobile. I'd like to be able to hide the image or scale it, or something. So far, that has not been possible.
Third, the text referenced in "first" (above) does not seem to scale in mobile, so that "sitewide header site title" ends up taking up 3/4 of the screen on a mobile phone ...
Any suggestions? (And I really want to apologize for stupid questions because I don't know what's stupid yet.)
Thanks!
I think it would be a great service to humanity to explain how to add custom classes. ;-)
Thank you!
Thank you!
@doccarter
Click on a block and choose Design & Custom Template from the popup menu. A new menu bar will appear, choose the gear icon "Custom CSS Classes, Block Name, Custom Templates and Reset Styles" on the right side. In the Custom Class textbox, type in the name of the class without the leading dot (.), and then hit enter or click on the highlighted blue text.
To target the first line, you can use :first-line. To target the second line, you can use :nth-child().
https://css-tricks.com/almanac/selectors/f/first-line/...
https://css-tricks.com/almanac/selectors/n/nth-child/...
Click on a block and choose Design & Custom Template from the popup menu. A new menu bar will appear, choose the gear icon "Custom CSS Classes, Block Name, Custom Templates and Reset Styles" on the right side. In the Custom Class textbox, type in the name of the class without the leading dot (.), and then hit enter or click on the highlighted blue text.
To target the first line, you can use :first-line. To target the second line, you can use :nth-child().
https://css-tricks.com/almanac/selectors/f/first-line/...
https://css-tricks.com/almanac/selectors/n/nth-child/...
Thank you !!!!! for your directions on the rich text editor settings. That allowed me to make the second line different from the first line.
In the default rich text editor, Redactor, there is a formatting drop-down for changing text element tags. There is also an additional Redactor plugin that can be enabled, Font Size.
Dashboard > System & Settings > Basics > Rich Text Editor > check Font Size
"Second, I have added an image that works just fine in desktop, but it does not scale or otherwise accommodate mobile. I'd like to be able to hide the image or scale it, or something. So far, that has not been possible."
What is the address of the site where you are having issues with the image?
"Third, the text referenced in "first" (above) does not seem to scale in mobile, so that "sitewide header site title" ends up taking up 3/4 of the screen on a mobile phone ..."
Changing the size of text based on screen size can be done using CSS media queries. To target the text, a custom class can be added to the Content block. This class can then be used in media queries to set the size. The CSS can be saved in the site Custom CSS or in the theme CSS.