Download & Extend

Change Header Position

Project:Colourise
Version:6.x-2.1
Component:Code
Category:support request
Priority:normal
Assigned:marciasa1
Status:active

Issue Summary

Hello Gibbo,
first of all congratulations on your work, I love the beach & colourise theme, and I have also discovered apture thanks to your site.
I am trying to edit your theme in the way that the site name , a three letter word, could be in the middle of the header; I will probably use in the future an image as title.

SO I was wondering how to do that,
I have tried editing the layout.css and colourise.css but no luck.

Kind regards

Alessandro

Comments

#1

Hi Alessandro,

It's actually in layout.css

#site-name a {
position:absolute;
top:90px;
left:0;
color:#fff;
}

You can edit that file to

#site-name a {
position:absolute;
top:90px;
left:0;
color:#fff;
display:block;
width:100%;
text-align:center;
}

Or add this below to custom.css that a secure place from updating in the future

#site-name a {
display:block;
width:100%;
text-align:center;
}

Thanks to remind me that this theme is too much complicated, yes really, there're too much CSS files. And theme's header elements use position:absolute; for layouting so we should assign their width and position as block element for custom alignment (oh god, is that unnecessary complicated?)

#2

Hi there,

first of all thanks for your quick reply,

I have done what you suggested and it hasn't change the position of the Site Name,
in fact it is still on the left hand side of the Picture,

One interesting thing is that I have edit the image bg.jpg adding some text in the middle , and after upload it in the server it will still show the old one, I don't understand why. I mean the old one doesn't even exist anymore.
If I check what image I have in the server under the name bg.jpg I can see my edited picture, but in the site I still see the old (with no text)
Do you have any idea why this is happening?

Regards
Alessandro

#3

Clear Drupal cached files and Refresh your browser. Hope this help ;)

#4

Hi Gibbo,

just wanted to thank you for your help and support,

still no luck with the theming, but thanks a lot for your help

ALessandro

#5

Did you enable custom.css in theme settings yet? (admin/build/themes/settings/colourise see screenshot 1)

If so, I wondered why it doesn't work for you cos I've test my custom CSS and It works for me (see screenshot 2)

#site-name a,
#slogan {
display:block;
width:100%;
text-align:center;
}

(In case you want to align #slogan to center too.)

AttachmentSize
screenshot1.png 23.07 KB
screenshot2.png 201.57 KB

#6

How can I move the primary links below the header bg picture?

#7

Best is to check this with the invaluable Firebug plugin enabled in FireFox.

Look at the CSS code for #primary-menu in "layout.css". It features CSS positioning information such as "position: absolute; top: 0". As a result, the primary links will always appear at the top of the 'page' container.

Set the value of top to the desired value, but make sure to add the suffix "px" to the units. Example: "top: 150px".

Hope this helps!

#8

It did. Thanks.

nobody click here