Centralising Title Text

Steve_T · #1 Jan 31, 2009, 03:49 AM

http://digitalvillage.org.uk/blog/

how can I centralise the blog title

I've chosen to overlay it over the image and I thought this would do it (in blog title styles)

align: center;

Flynn · #2 Jan 31, 2009, 03:59 AM

At Atahualpa Theme Options -> Header Image -> Overlayed Blog Title/Tagline Style, remove the existing styles and add this instead:

HTML Code:

float: none; 
margin-left: auto; 
margin-right: auto;              
margin-top: 30px; 
text-align:center;

The line

HTML Code:

margin-top: 30px;

is for the distance between the blog title and the top border of the header image. Increase or decrease that value to move the blog title up and down.

Steve_T · #3 Jan 31, 2009, 04:04 AM

thank you

this line

HTML Code:

margin-top: 30px;

also moves the image down so I've removed it

how can I just move the text down so that it sits more centrally over the image

Flynn · #4 Jan 31, 2009, 04:47 AM

You're right, margin-top only works for left or right floated titles but not for centered (non-floated). Use this instead:

HTML Code:

padding-top: 30px;

But if you're using a border around the overlayed blog title (which you are not, but others might), then the border would stay on top. To avoid that, the top padding would have to be applied to the parent container instead, via HTML/CSS Inserts -> CSS Inserts

HTML Code:

 div.header-image-container {
padding-top: 30px; 
height: XXXpx; }

with XXX being the [desired image height] - [padding-top value], so if image height is 150 px and padding-top 30px, this would be "height: 120px;"

I am updating the "centered" example in the Theme Options...