Tagline placement with CSS

ilarikaila · Member · May 22, 2016 at 2:31 am
Copy link

Add topic to favorites
Hi,
I’m using the Escutcheon theme in my blog, and in place of a header text, I have the name of the blog as a graphic file. I’d like to to change the placement of the tagline. Right now, the tagline is aligned way to the left of the blog title. I’d like to try various ways of changing its placement (aligned together on the left, or on the right, or centered). Any CSS I can use? The blog is here:
https://limitedhangoutblog.com/

The blog I need help with is: (visible only to logged in users)
dianakcury · Member · May 22, 2016 at 4:44 am
Copy link
Hi there!

Just add this CSS into your stylesheet:
```
h2.site-description {
    text-align: center;
}
```
…then you can change “center” to “left” or “right”.

Also you can play with the style :)
```
h2.site-description {
    background: #111;
    text-align: center;
    color: #fff;
    padding: 5px 20px;
    display: table;
    margin: 0 auto;
}
```
Hope it helps :)
kathrynwp · Staff · May 25, 2016 at 9:43 pm
Copy link
ilarikaila – let us know if you’re all set.

dianakcury – thanks for helping out!
ilarikaila · Member · May 26, 2016 at 1:37 am
Copy link
Sorry for the late response. Yes, this worked and it looks much better centered–many thanks!

I’m assuming these are the options, right? Are there, by chance, any more minute ways of adjusting the placement of the tagline? Suppose I’d like it to have the same margin on the left as the header picture (i.e., start from the same place). Or if I’d like the last letter of the tagline to end at where the header ends on the right.
siobhyb · Member · May 26, 2016 at 10:44 am
Copy link
Hi Ilari,

You can definitely adjust the placement in more minute ways, if you wish. You can use margin-left or margin-right to define how far left or right your tagline is.

For example, the following would push the tagline 25px to the left:
```
h2.site-description {
    margin-left: 25px;
}
```
You can then increase or decrease the value of 25 to your liking.

Let me know if that’s useful. :)
ilarikaila · Member · May 27, 2016 at 7:13 am
Copy link
Yes, extremely useful. Many thanks!
siobhyb · Member · May 27, 2016 at 7:26 am
Copy link
Glad to hear that! You know where to find us if anything else comes up.
imparart · Member · May 28, 2016 at 9:29 pm
Copy link
Hi,

Is there a way to customize the tagline using the Sela Theme to make my tagline on two lines and two different colors? The site is artworksemily.com

I would like it to be something like this:

Site Title: ArtWorks! with Emily
Tagline: CHILDREN’S CREATIVITY WORKSHOPS
Tagline 2nd line: learn ~ create ~ play ~ english

Besides putting two taglines, how do I code that to two different colors?

Thanks!
siobhyb · Member · May 29, 2016 at 2:12 pm
Copy link
Hi @artworksemily,

You can change the colour of your first line of your tagline using the following CSS:
```
.site-description {
    color: #663399;
}
```
Change the value of #663399 to any HEX code of your choice. If you’d like to experiment with different colours, try a few Google searches to get a list of HEX codes and their corresponding values.

Here’s an example of a site that I’ve used before:

http://www.color-hex.com/

Next, you can add the second line of your tagline and define its colour using the following:
```
.site-description:after {
    display: block;
    content: "learn ~ create ~ play ~ english";
    color: #663399;
}
```
As before, change the value of #663399 to any of your choice. You can also edit learn ~ create ~ play ~ english as you wish.

As an extra note: If you have any further questions, please create your own separate posts on these forums. It’s easier for us to triage and help with questions when they’re kept to separate threads.

Thanks!
imparart · Member · May 30, 2016 at 10:30 pm
Copy link
Thank you so much! What would the coding look like if I wanted each of the four words in the 2nd line to be a different color but still on the same line?I would like the following: learn (color: #33cbdd) ~ (color: #663399) create (color: #dbb84f) ~ (color: #663399) play (color: #673d89) ~ (color: #663399) english (color #f56d6c)

What about the coding to change the site title color (Artworks! with Emily)

Many thanks,
Emily
siobhyb · Member · May 31, 2016 at 6:56 am
Copy link
As the original poster’s question here has already been answered, I’m going to mark this thread as closed.

@artworksemily: Please can you create your own separate thread if you have any further questions? It is easier for us to triage and read through the forums if separate questions are kept to separate threads. This also guards the original poster from receiving further notifications when their question has been answered.

In answer to your follow up questions: There isn’t a way to make each of the separate words a different colour using only CSS, I’m afraid. Achieving that would require access to edit your theme’s HTML, which you don’t have here at WordPress.com. It’s only possible to change the colour of that whole line.

You can change the colour of the site’s title using the following snippet:
```
.site-title a {
    color: #663399;
}
```
Please do start another thread if you have extra questions on that.

No items found.