Backgroundcolors and margins

[hackerart]

I started my own style with carl_green as base. My css-file is at hackerart.at/templates/hackerart/style.css

At the moment I do not find out, how to change the white background-color of the comments to another color. See http://www.hackerart.at/

Could you please tell me what do I have to change or add in the style.css

The 2nd thing is, that a want a margin within the current white comment area. Also above the topbanner should be a margin.

[yellowled]

At the moment I do not find out, how to change the white background-color of the comments to another color.

If I understand this correctly, you want to change the color of the fields in the comment form and there should be more margin between them, right?

In your stylesheet, find this and add the last two lines:

Code: Select all

td.serendipity_commentsValue input, td.serendipity_commentsValue select, td.serendipity_commentsValue textarea {
	width: 400px;
	border: 1px solid #333;
	padding: 2px;
        color: #ffc;
        margin-bottom: 5px;
}

'#ffc' and '5px' are just examples, you'll probably want to pick your own color and margin

The 2nd thing is, that a want a margin within the current white comment area. Also above the topbanner should be a margin.

For the banner, change the margin in #serendipity banner to for example:

Code: Select all

margin: 20px auto 0;

'auto' and '0' make sure that the rest of the style remains like it was, 20px is the top margin, i.e. the margin between the header and the top of the page. I chose 20 pixels, but of course you can change this.

YL

[hackerart]

If I understand this correctly, you want to change the color of the fields in the comment form and there should be more margin between them, right?
YL

I am unsure if it is padding or margin. You explained it in the German forum and I think it is padding.

I changed the color in the meantime before you answered at:

.serendipity_entry {
background-color: #ddd;

So the color part is solved.

This is also ok for me now:
margin: 1px auto 0; I also prefer to margin: auto;
It is a little difference of course. Maybe it depends on the browser, if you notice the difference a lot.

But the space to the border of the comment field is unsolved.

I think I am right at this part of the stylesheet, you mentioned:

Code: Select all

td.serendipity_commentsValue input, td.serendipity_commentsValue select, td.serendipity_commentsValue textarea {
	width: 400px;
	border: 1px solid #333;
	padding: 20px;
}

Top and Bottom are ok. So I didn't use your suggestion. The problem is left and right.

Let's talk about
http://hackerart.at/archives/3-S9y-ist-cool!.html

You see S9y ist cool! in green, that's ok.

Below there is the problem part:
Geschrieben von Reinhold Erich Hacker in
Montag, 4. Dezember 2006
Schön langsam

I would like to have this moved a little bit to the right _and_ "Tags für diesen Artikel: s9y, serendipity" should be moved a little bit to the left. So IMHO I should increase the padding value, but it doesn't change anything, when I try e.g. 20 instead of 2.

I think it is ugly if the text starts exactly at the border of the comment-area or ends there. I hope I could make it clear. Thanks a lot!

I also think, there is a translation bug:
Geschrieben von Reinhold Erich Hacker in
should be probably:
Geschrieben von Reinhold Erich Hacker am

[yellowled]

I am unsure if it is padding or margin. You explained it in the German forum and I think it is padding.

Depends on what you want. Do you want to have more space between two fields of the comment form? Then it's margin. Do you want to have more space between the border of a field of the comment form and the text someone enters in that particular field? Then it's padding.

See http://de.selfhtml.org/css/formate/anze ... modell.png.

It is a little difference of course. Maybe it depends on the browser, if you notice the difference a lot.

I don't see it at all, to be quite honest.

Top and Bottom are ok. So I didn't use your suggestion. The problem is left and right.

I'm sorry, but I still don't understand what part you want to change

I would like to have this moved a little bit to the right _and_ "Tags für diesen Artikel: s9y, serendipity" should be moved a little bit to the left. So IMHO I should increase the padding value, but it doesn't change anything, when I try e.g. 20 instead of 2.

For the first one, decide how much 'a little bit' is and then use it as a margin-left for .posttime (don't forget the period at the beginning!) like this:

Code: Select all

.posttime {
   font-size: x-small;
   line-height:120%;
   margin-left: 10px;
}

10px is, of course, just an example.

For the second one, edit the margin-right for .serendipity_freeTag. Maybe you want to use the same value there? That would be 'margin-right: 10px;' for .serendipity_freeTag.

I think it is ugly if the text starts exactly at the border of the comment-area or ends there. I hope I could make it clear. Thanks a lot!

Actually, I don't see what the part above has to do with the comment area ..?

I also think, there is a translation bug:
Geschrieben von Reinhold Erich Hacker in
should be probably:
Geschrieben von Reinhold Erich Hacker am

Nope, no bug.

Usually, there's a list of categories for that entry right after the 'in', but you don't seem to use categories.

YL

[hackerart]

First, thank you for your patience.

I tried your suggestions, but couldn't get it work as I want, maybe I use the wrong terms.

I made a screenshot and try describe it again.

If you look at http://hackerart.at/padding.gif you see red arrows. Within these red arrows there is a grey area and in this grey area you see a written text of a comment. I hope comment is the correct term.

The red arrows are next to a text which I would like to move a little bit, maybe 5px to the inside. A not perfect example you see at the bottom of my image. There is a darkgrey area which should mark the space, when the text is moved to the inside.

If you think we should go on at http://www.s9y.org/forums/viewtopic.php?t=8002 let me know, maybe it is easier to discuss in German.

Again, thanks a lot for your help!

[yellowled]

First, thank you for your patience.

You're welcome

If you look at http://hackerart.at/padding.gif you see red arrows. Within these red arrows there is a grey area and in this grey area you see a written text of a comment. I hope comment is the correct term.

Well, first of all I see an entry called 's9y ist cool' (basically true ), then there's another entry called 'Wie die Zeit vergeht'. A comment is what I left in your blog just now for the entry 's9y ist cool' ('Kommentar' in German).

The red arrows are next to a text which I would like to move a little bit, maybe 5px to the inside. A not perfect example you see at the bottom of my image. There is a darkgrey area which should mark the space, when the text is moved to the inside.

I'm still trying to figure out what you want, but I think we're getting there, so hold on

I might be completely wrong, but I think what you want is (add that to your stylesheet):

Code: Select all

.serendipity_entry {
   padding: 10px 5px;
}

A little explanation: If you set padding like this, the first value (10px) is for top and bottom, the second is for left and right. Now, if you want all sides to have the same padding, you can use:

Code: Select all

.serendipity_entry {
   padding: 10px;
}

If you think we should go on at http://www.s9y.org/forums/viewtopic.php?t=8002 let me know, maybe it is easier to discuss in German.

It would be, but I still hope for some of the other template guys to chime in on this, and most of them don't read the German forum.

YL

[hackerart]

We came a lot closer! While I found out to change the color at ".serendipity_entry", I didn't realize to add padding here. It is really simple, but unfortunately it was so hard to describe what I want.

Now I use

Code: Select all

padding: 2px 5px;

and 3 sides now look fine, but the bottom side doesn't. If you compare with http://hackerart.at/padding.gif there was no "space" at the bottom of the "entry-field" (I hope I use the right term now) and now it is so large. when you look at "Tags für diesen Artikel" at http://hackerart.at/ That is more than 2px at the bottom which changed.

I also did something which influenced the entry-fields in my guestbook. See hackerart.at/pages/guestbook.html The padding is too large and this occured not because I changed ".serendipity_entry". If I did not something unintentional there must be a relation to the changes we discussed in this thread. But don't think a lot about this, I can find it out with trial and error.

[yellowled]

Now I use

Code: Select all

padding: 2px 5px;

and 3 sides now look fine, but the bottom side doesn't. If you compare with http://hackerart.at/padding.gif there was no "space" at the bottom of the "entry-field" (I hope I use the right term now) and now it is so large. when you look at "Tags für diesen Artikel" at http://hackerart.at/ That is more than 2px at the bottom which changed.

That's because that's not the padding, it's the margin. Remember that box model image I mentioned earlier on? And, I'm sorry, but this margin has not changed at all - at least not in my browser (You do know that all this 'changing it so you like it' does not mean that this is going to look just the same in everybody else's browser, right?)

However, the margin we're looking for (I guess) is:

Code: Select all

div.serendipity_entryFooter {
   [...]
   margin-bottom: 40px;
   [...]
}

This is responsible for the space between two entries, which is what I think you mean. Set this to a suitable value.

I also did something which influenced the entry-fields in my guestbook. See hackerart.at/pages/guestbook.html The padding is too large and this occured not because I changed ".serendipity_entry".

I guess you found that one already since I don't see it.

YL

[hackerart]

Strange, I solved the padding of the guestbook, but a few minutes ago. Unfortunately I don't know why, because I started again with carl_green.

[yellowled]

Strange, I solved the padding of the guestbook, but a few minutes ago. Unfortunately I don't know why, because I started again with carl_green.

Well, if 'started again' means you uploaded a new copy of the template to your blog, this of course means all your changes are overwritten.

YL

[carl_galloway]

Sorry its taken me a while to find this thread, YL just emailed me to get me involved. Hackerart, your last message says you've started again, and I've looked at your site and it all seems to be working in my browser, are you still wanting to make changes?

Carl

[hackerart]

@YellowLed:
I wrote "strange" because I changed _after_ your posting and the change was done within seconds, because I tried it with another style first. Thank you for contacting Carl.

@carl_galloway
Carl, thank you for joining this thread. At first sight, it looks ok, at 2nd sight there are errors when you check the blog, but I don't care at the moment.

What I would like to know if there can be problems when I change your "margin-bottom: 40px;" in carl_green:

Code: Select all

div.serendipity_entryFooter {
	color: #999999;
	font-size: xx-small;
	text-align: center;
	margin-bottom: 40px;
	line-height: normal;
	clear:both;
}

I reduced it to 2px. Are the 40px "design only" or is the margin needed for something else?

Carl, since my style is based on yours, do I have to make a copyright notice re your style?

[carl_galloway]

Hi hackerart,

Changing the 40px margin is ok, it doesn't do anything except add a big space.

'Designed By', the link to my site is the only payment I get, but you could take it out of the footer and just make a blog entry telling your site visitors how your site is created with Serendipity and a template you customised from me and then just link to me from that entry. That would be cool.

Let me know when your site is finished so I can also link to you.

[hackerart]

Carl, I included you in my footer at http://www.hackerart.at/ and thanked you in a comment at http://www.hackerart.at/archives/9-Dank ... ipity.html Of course I want to thank the s9y-developers and all the others in the forum too. Especially I want to thank YellowLed and Garvin Hicking for their advice.

I don't know, when _I_ think, that my homepage is ready, especially http://album.hackerart.eu/ will be a lot of work, since I have to take photos of my paintings (the ones you see are the only ones, I have digitally) and after setting up this blog, I have to spend more time for my handicapped daughter again. She needs a very expensive therapy and maybe my website helps a little bit, but as always nobody is buying pictures from a living artist

Carl, if you would like to put a link on your site, you can do it at every time. Thank you!