Support Forum

My page about australia

zentoolsIf you use Zentools please post a review at the Joomla! Extensions Directory.

11 years 6 months ago
If I understand correctly, you need to do this in template.css;

#container {
background:url("../images/content_bg.png") repeat-y scroll center 146px transparent;
margin:150px auto 20px;
padding:0;
width:876px;
  • Seth's Avatar
  • Seth
  • Moderator
  • 8358 posts
  • 225 Thanks
  • Karma: 202
The administrator has disabled public write access.
11 years 6 months ago
Hey Seth,

if i change this, than the page isn't working anymore:

www.australien-fuer-anfaenger.de

I would like to have transparent corners (header_bg.png) (or other parts, like as the bottom image) so the content_bg.png have to start a little bit under the header_bg, 146px as you wrote.

I think you understand right, but it didn't work.

Edit: Found the reason, I forgot the "}"

But after correcting that, there are no transparent corners of the header_bg shown. The content_bg is still the background of the header_bg. :(
  • basti_online's Avatar
  • basti_online
  • Previous Member
  • 88 posts
  • Karma: 0
Last Edit: 11 years 6 months ago by basti_online.
The administrator has disabled public write access.
11 years 6 months ago
Maybe i have to isolate (?) the header_bg.png from the #container or content.png? So that the header_bg.png is not a part of the container?

To illustrate you what i want to have:


Old:




New: (only just for example)
  • basti_online's Avatar
  • basti_online
  • Previous Member
  • 88 posts
  • Karma: 0
Last Edit: 11 years 6 months ago by basti_online.
The administrator has disabled public write access.
11 years 6 months ago
Looks like you got this sorted Sebastien :)

Anthony
  • Anthony Olsen's Avatar
  • Anthony Olsen
  • LIfetime Developer - Big Bamboo
  • 23925 posts
  • 788 Thanks
  • Karma: 433
The administrator has disabled public write access.
11 years 6 months ago
Anthony Olsen wrote:
Looks like you got this sorted Sebastien :)

Oh, no I don't. Its just only a photomontage....to get a impression what I want.

It should look like the second picture, but it doesn't.
  • basti_online's Avatar
  • basti_online
  • Previous Member
  • 88 posts
  • Karma: 0
The administrator has disabled public write access.
11 years 6 months ago
Ah ok I think you will need to do the following and this will increase the load time on your site:

1. Keep the bush photo as the body bg image and specify a background-position of left 20px to get the image to site 20px from the top and at the left of the browser window..

2. Add the airmail sticker and envelope image as a separate png with a transparent bg to the #header rule as the bg image.

That should fix it with possibly a few minor tweaks needed.
  • Anthony Olsen's Avatar
  • Anthony Olsen
  • LIfetime Developer - Big Bamboo
  • 23925 posts
  • 788 Thanks
  • Karma: 433
The administrator has disabled public write access.
11 years 6 months ago
it isn't possible to place the content_bg.png a little bit down after the header_bg.png?
  • basti_online's Avatar
  • basti_online
  • Previous Member
  • 88 posts
  • Karma: 0
The administrator has disabled public write access.
11 years 6 months ago
The issue is that the header bg is repeated vertically so you cant position it vertically.

You need to hack the index.php file to change around the divs there so as to allow for a transparent bg up at the top with the header but still keep the bottom colour. Iyts a little fiddly and beyond the scope of the forum to help you out any further with that.

Cheers Anthony
  • Anthony Olsen's Avatar
  • Anthony Olsen
  • LIfetime Developer - Big Bamboo
  • 23925 posts
  • 788 Thanks
  • Karma: 433
The administrator has disabled public write access.
11 years 6 months ago
It seems that this would be a little bit tricky
  • basti_online's Avatar
  • basti_online
  • Previous Member
  • 88 posts
  • Karma: 0
The administrator has disabled public write access.
11 years 6 months ago
Anthony Olsen wrote:
The issue is that the header bg is repeated vertically so you cant position it vertically.

Yes, of course. Sorry Sebastian, I should have noticed the repeat-y. My bad! :blush:
  • Seth's Avatar
  • Seth
  • Moderator
  • 8358 posts
  • 225 Thanks
  • Karma: 202
The administrator has disabled public write access.
11 years 6 months ago
So, in my understanding, i have to dissasemble the code to get what i want? Looks difficult.
  • basti_online's Avatar
  • basti_online
  • Previous Member
  • 88 posts
  • Karma: 0
Last Edit: 11 years 6 months ago by basti_online.
The administrator has disabled public write access.
11 years 6 months ago
Exactly. You have to re-arrange the basic 'building blocks' of the template.
  • Seth's Avatar
  • Seth
  • Moderator
  • 8358 posts
  • 225 Thanks
  • Karma: 202
The administrator has disabled public write access.
11 years 6 months ago
Something new!

I redesigned now the header_bg.png and i like this very much, i hope you too!

Problem solved :)

The idea behind this is, that i would like to have a blog wich has the design of a notepad, and this is done now.
  • basti_online's Avatar
  • basti_online
  • Previous Member
  • 88 posts
  • Karma: 0
Last Edit: 11 years 6 months ago by basti_online.
The administrator has disabled public write access.
11 years 6 months ago
Cool - nice work!
  • Anthony Olsen's Avatar
  • Anthony Olsen
  • LIfetime Developer - Big Bamboo
  • 23925 posts
  • 788 Thanks
  • Karma: 433
The administrator has disabled public write access.
11 years 6 months ago
I realized a self changing background (when you refresh my page, F5) for the template, did I made it right?

I changed the *.css where the background code is (for example water.css)

body {background: #000 url(backg.php) no-repeat left top;}

And i copied a *.php file in the css folder named backg.php with this code:

<?php
header("Content-type: image/jpeg");
header("location:".../images/water'.rand(1,2).'.jpg');
?>

Its working, but is that okay or do you have a better solution?
  • basti_online's Avatar
  • basti_online
  • Previous Member
  • 88 posts
  • Karma: 0
The administrator has disabled public write access.
11 years 6 months ago
Thats an ok solution to me. I don't see any reason why you should change it since it works! :)

Regards,
Jeremy
  • Jeremy's Avatar
  • Jeremy
  • 12 Month Developer
  • 407 posts
  • Karma: 15
The administrator has disabled public write access.
11 years 6 months ago
Thanks jeremy! :)

I changed now the typography of the template, do you like that? its maybe a matter of taste.
  • basti_online's Avatar
  • basti_online
  • Previous Member
  • 88 posts
  • Karma: 0
The administrator has disabled public write access.
11 years 6 months ago
If i would like to have 2 backgrounds, what do i have to do? I want just one in the background (like a wood texture with repeat-y or repeat-x wich is no problem), but i want a second one in the foreground like on the top left (not just a logo, but similar).

I know that i have to place a new "div id" in the HTML and i have to add a code in the template css or in the background.css of the sketch template, but i don't know what to do exactly.

Ah, I think i got working it:

<div class="postcard">
</div>

Between <body> and </body>

And for example in the *.css

div.postcard {
background-image: url(../images/postcard.png);
background-repeat: no-repeat;
background-position: top left;
}


It works.

EDIT: Just one question, I would like to have the postcard at the top left position. It is already at the top left, but within the body. I would like to have to postcard in the left corner, more on top.

testseite.australien-fuer-anfaenger.de/index.php?option=com_content&view=frontpage&Itemid=1

Second EDIT: I'm learning, as i can see, it seem to be working with padding and margin.
  • basti_online's Avatar
  • basti_online
  • Previous Member
  • 88 posts
  • Karma: 0
Last Edit: 11 years 6 months ago by basti_online.
The administrator has disabled public write access.
11 years 6 months ago
Wow, this page has come along quite a bit since the last time I saw it. Nice work Sebastien!
  • Jason D's Avatar
  • Jason D
  • 6 Month Developer
  • 2957 posts
  • 12 Thanks
  • Karma: 75
The administrator has disabled public write access.
11 years 6 months ago
I never like things when they are not working as I wish.

So I was going late to bed yesterday and until I fall into sleep I got an idea to fix the "I would like to have the header with a transparent background and without the content_bg.png" problem.

Today, after a few coffee it's done. Here you can see the result at my testserver:

testseite.australien-fuer-anfaenger.de/

I rewrote the *.css and *.php index file, cut of the header from the container and everything works as i want.

Now I have the modified sketch template with a transparent background (header_bg.png).

I hope joomlabamboo likes it.

Edit: Did the same now with the bottom
  • basti_online's Avatar
  • basti_online
  • Previous Member
  • 88 posts
  • Karma: 0
Last Edit: 11 years 6 months ago by basti_online.
The administrator has disabled public write access.

zentoolsIf you use Zentools please post a review at the Joomla! Extensions Directory.

Happy Campers

Close