Split site title to two lines with different size and color

surferjoescb · Member · Dec 17, 2014 at 3:14 pm
Copy link

Add topic to favorites
I’ve been trying to research the answer on this for a couple of days now and hoping someone can help out with the site I’m working on, http://www.surferjoescb.com.

Because the site tile is so long, it’s broken on to two lines, but not in the way I want it to. I would like to have “Surfer Joe’s” on one line just the way it is with regards to font size and color, and then on the second line have “Pub & Grill” reduced in size to about 72px and the font color changed to #96f7e5. Both lines centered

I’m hoping someone much smarter than I can figure this out for me. I sure would appreciate the assistance.

Thanks

The blog I need help with is: (visible only to logged in users)
surferjoescb · Member · Dec 18, 2014 at 12:50 am
Copy link
Still looking for help on this.

The only other option I can think of is to replace the site title with my logo that contains the name. The only problem with that is I would need to make the logo larger than what’s currently allowed by the theme in order to clearly see the text.
thesacredpath · Member · Dec 20, 2014 at 9:01 pm
Copy link
Hi, we can use the :after attribute and a content declaration to add text below the site title. The display: block makes sure it appears below the title.
```
.site-title:after {
    content: "Pub & Grill";
    font-size: 72px;
    display: block;
    margin-top: 45px;
    color: #96f7e5;
}
```

No items found.