Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
I wish to add an elongated header picture near the top
#1
I have been using Get Simple for some time now and I am very excited with the features, simplicity and many other features such as the editor and other minor and major things.
I do have one issue which I have been trying to find a solution for some time now.
I am using Get simple in three of my Websites:
1. http://www.helcan.com/ is now my homepage and includes also many articles plus links to other sites
2. http://www.zk.ellada-mas.com/ has many articles from my Drupal based political content site (only in Greek) http://www.zhteitai-komma.com/
3. http://www.helcan.com/waa-Greeks/ follows the new slogan (of the last few weeks) that "We are All Greeks NOW"

I have my hands full as you can see.

I wish to find a way to add a top picture header that will cover the full width and the dark blue to lighter blues area in the Default_Simple theme. I love the theme, simply wish to create something similar to http://greece-mylove.com/wp/ which is based in Wordpress and is using the latest Atahualpa wordpress theme.

I can produce a header gif animated picture and I will be happy if a way is found to place this picture as a background in all pages.

I am prepared to experiment, but I will appreciate some guidance.

One again congratulation for one of the best CMS available today and many thanks to the whole team

Costas Lazarou
Reply
#2
Hello Costa,

Look at the CSS file of your theme.

Assuming that your animated gif is in "images/animated_background.gif" a quick "fix" is to change the body to:

body {
text-align:center;
font-family:arial, "lucida Grande", verdana, helvetica, sans-serif;
font-size: 14px;
background: #FFFFFF url(images/animated_background.gif) top center no-repeat;
color:#222;
}

That will just place the background at the top of the page.

If you want to replicate the "lighter" bits, as in the link you provided, you will have to do something slightly different.

The basic idea is to layer three "columns" on top of the background and play with the transparency of each column... look at: http://www.w3schools.com/css/css_image_transparency.asp

Good luck,
Georgios
Reply
#3
Thank you very much Giorgos, I will try the method you suggested tomorrow morning. Most probably you are Greek too (from your name). I will report again here for any success. Talk to you soon.

Efxaristo (Ευχαριστώ)

Κώστας Costas


GeorgiosG Wrote:Hello Costa,

Look at the CSS file of your theme.

Assuming that your animated gif is in "images/animated_background.gif" a quick "fix" is to change the body to:

body {
text-align:center;
font-family:arial, "lucida Grande", verdana, helvetica, sans-serif;
font-size: 14px;
background: #FFFFFF url(images/animated_background.gif) top center no-repeat;
color:#222;
}

That will just place the background at the top of the page.

If you want to replicate the "lighter" bits, as in the link you provided, you will have to do something slightly different.

The basic idea is to layer three "columns" on top of the background and play with the transparency of each column... look at: http://www.w3schools.com/css/css_image_transparency.asp

Good luck,
Georgios
Reply
#4
Just wish to report success, once again thank you very much GeorgiosG I applied it for now only in one of the 3 get simple websites http://www.helcan.com/waa-Greeks/ and I will probably add the corner shading later, as well as find a collection of different pictures for the other 2. Please send me a note if you can, either here or using the contact form from the above link.

Take care and all the best to you

Costas

costas100 Wrote:Thank you very much Giorgos, I will try the method you suggested tomorrow morning. Most probably you are Greek too (from your name). I will report again here for any success. Talk to you soon.

Efxaristo (Ευχαριστώ)

Κώστας Costas


GeorgiosG Wrote:Hello Costa,

Look at the CSS file of your theme.

Assuming that your animated gif is in "images/animated_background.gif" a quick "fix" is to change the body to:

body {
text-align:center;
font-family:arial, "lucida Grande", verdana, helvetica, sans-serif;
font-size: 14px;
background: #FFFFFF url(images/animated_background.gif) top center no-repeat;
color:#222;
}

That will just place the background at the top of the page.

If you want to replicate the "lighter" bits, as in the link you provided, you will have to do something slightly different.

The basic idea is to layer three "columns" on top of the background and play with the transparency of each column... look at: http://www.w3schools.com/css/css_image_transparency.asp

Good luck,
Georgios
Reply
#5
One more success in http://zk.ellada-mas.com/ now one is left, I may leave it as it is, or change it too.
With my best regards and many many thank you to the whole team at Get simple

Costas
PS: I am not sure if I am allowed to delete all the repetitive text below. I hate taking space when all can be shown in a much shorter topic. By the way both headers were done in Ubuntu using GIMP an amazing and FREE image manipulation software. It is also available for windows.

costas100 Wrote:Just wish to report success, once again thank you very much GeorgiosG I applied it for now only in one of the 3 get simple websites http://www.helcan.com/waa-Greeks/ and I will probably add the corner shading later, as well as find a collection of different pictures for the other 2. Please send me a note if you can, either here or using the contact form from the above link.

Take care and all the best to you

Costas

costas100 Wrote:Thank you very much Giorgos, I will try the method you suggested tomorrow morning. Most probably you are Greek too (from your name). I will report again here for any success. Talk to you soon.

Efxaristo (Ευχαριστώ)

Κώστας Costas


GeorgiosG Wrote:Hello Costa,

Look at the CSS file of your theme.

Assuming that your animated gif is in "images/animated_background.gif" a quick "fix" is to change the body to:

body {
text-align:center;
font-family:arial, "lucida Grande", verdana, helvetica, sans-serif;
font-size: 14px;
background: #FFFFFF url(images/animated_background.gif) top center no-repeat;
color:#222;
}

That will just place the background at the top of the page.

If you want to replicate the "lighter" bits, as in the link you provided, you will have to do something slightly different.

The basic idea is to layer three "columns" on top of the background and play with the transparency of each column... look at: http://www.w3schools.com/css/css_image_transparency.asp

Good luck,
Georgios
Reply
#6
Hello Costa,

You can use the Quick Reply option... just scroll all the way down.

Your attempts with the elongated image look fine.

have fun

Georgios

p.s.: Yes, I'm Greek btw Smile
Reply
#7
To GiorgosG
Thank you Giorgo, I hope one day we will meet, I now live in Canada, but we visit Greece almost every year. So We are All Greeks NOW
Take care

Costas
Reply




Users browsing this thread: 1 Guest(s)