welcome message in the columnist

bezego · Member · Jun 2, 2013 at 3:44 am
Copy link

Add topic to favorites
Is it at all possible to include a welcoming message on the main page of the columnist using CSS? If so – how do I go about it?

Thank you!

The blog I need help with is: (visible only to logged in users)
justpi · Member · Jun 2, 2013 at 6:52 am
Copy link
Yes, it’s possible, in at least two different ways.
Short or long message? Single paragraph or with line and paragraph breaks? Where exactly on the main page?
bezego · Member · Jun 2, 2013 at 8:58 am
Copy link
wow! thank you! longish – two paragraphs. I guess under the site title would be perfect :)
justpi · Member · Jun 2, 2013 at 1:15 pm
Copy link
Assuming you mean under the site title and tagline, or if you delete the tagline, add this in the CSS editor:
```
.home .site-title {
    margin-bottom: 3.2em;
}
.home #masthead {
    margin-bottom: 0.9em;
}
.home #masthead:after {
    content: "FIRST";
}
.home #left-col:after {
    content: "SECOND";
}
```
Then type the text of the first and second paragraphs where I’ve written FIRST and SECOND. You can change the 3.2, to adjust the space above the text.

This will produce plain text (exactly like the tagline text). Would you like to change its style (color, size etc)?
bezego · Member · Jun 2, 2013 at 1:39 pm
Copy link
wow! sure. if it is possible I would love to have control over its style!

But I have never done anything in CSS yet. So I just delete what is there and paste what you wrote above inserting the text…?

Thank you so much!

By a funny coincidence I followed your blog this morning. :) I am determined to learn it all.
justpi · Member · Jun 2, 2013 at 2:00 pm
Copy link
You’re welcome.

Yes, you delete the message (including the two “/*” that enclose it), paste the code, type the texts, Save.

To change the style you’ll need to add more code, so tell me exactly how you’d like the text to be.
bezego · Member · Jun 2, 2013 at 2:07 pm
Copy link
god it works! I am so excited! :D how do I make font smaller and in italics?

Thank you! You are a star! :D
justpi · Member · Jun 2, 2013 at 2:16 pm
Copy link
Add this:
```
.home #masthead:after, .home #left-col:after {
    font-size: 90%;
    font-style: italic;
}
```
Change the percentage to adjust the size.
bezego · Member · Jun 2, 2013 at 2:18 pm
Copy link
Great! Thank you!
bezego · Member · Jun 2, 2013 at 2:27 pm
Copy link
Now my blog looks exactly as I wanted it to look. The columnist is my favorite theme but my blog is quite specialist and I needed the welcoming message so much. I was on the verge of ditching the theme.

Thank you for helping me keep the columnist. Your help is really appreciated. :)
justpi · Member · Jun 2, 2013 at 2:53 pm
Copy link
You’re welcome, but I’m seeing a problem: the text looks ok in Firefox but in Safari there’s no space above each paragraph. So try a better version please:
1) Delete the .home .site-title and .home #masthead codes.
2) Add this to the .home #masthead:after code:
margin: 3.2em 0 0.9em 0;
3) Add this to my last suggestion:
display: block;

In other words, the whole thing should be like this:
```
.home #masthead:after {
content:"FIRST";
margin: 3.2em 0 0.9em 0;
}
.home #left-col:after {
content:"SECOND";
}
.home #masthead:after, .home #left-col:after {
font-size: 90%;
font-style: italic;
display: block;
}
```
bezego · Member · Jun 3, 2013 at 7:12 am
Copy link
THANK YOU! :)

No items found.