Defacto theme style.css

Skinning and designing Serendipity (CSS, HTML, Smarty)
User avatar
Don Chambers
Regular
Posts: 3638
Joined: Mon Feb 13, 2006 2:40 am
Location: Chicago, IL, USA
Contact:

Post by Don Chambers » Fri Feb 17, 2006 6:27 pm

I did find this http://www.carlgalloway.com/archives/76 ... r-s9y.html
article by Carl on the calendar plugin, but admit I have no idea how people are using the listed styles to achieve things like shortened weekday names (ie, "mo" instead of "mon", "tu" instead of "tue", etc.

Also curious how some people are getting a column to be shaded within the calendar, or have the entire calendar appear as a grid.

Is there an addition to this article that goes into detail for each of the style properties? Perhaps this is all basic css, and as I first mentioned, this is all completely new to me. A month ago, I didn't even have a site, had never drawn these kinds of graphics, and certainly never dug into something like Serendipity!

User avatar
Don Chambers
Regular
Posts: 3638
Joined: Mon Feb 13, 2006 2:40 am
Location: Chicago, IL, USA
Contact:

Post by Don Chambers » Fri Feb 17, 2006 9:39 pm

I eliminated a lot of my problems, but am still having issues:

I seem to have a border around the mainpane. Or maybe it is the sidebar, or content. Whatever it is, I have yet to find the cause.

My background images were getting tiled because the sidebar (left) was being pushed wider than specified. At least part of the reason was padding. So, how can I have padding, but not have it force an increase in the width of the column?

Still looking for more input on the calendar.

User avatar
Don Chambers
Regular
Posts: 3638
Joined: Mon Feb 13, 2006 2:40 am
Location: Chicago, IL, USA
Contact:

Post by Don Chambers » Sat Feb 18, 2006 12:24 am

Still have the border problem I mentioned, still no footer either.

Have figured out a lot of the calendar settings, but cannot seem to find a way to make each column of the calendar more narrow. Also want to show either just S,M,T,W,T,F,S or Su, Mo, Tu, etc...

I also wanted to use my own arrows (forward, back, etc), but the one I am using is distorted. I placed the same image in an entry right next to the calendar for comparison - it is not distorted.

http://www.chicagoloopcruise.com/serendipity

I think you guys are not answering to see just how many of these things I can figure out, aren't you?!! :P Well, I really need help with these remaining issues.

User avatar
Don Chambers
Regular
Posts: 3638
Joined: Mon Feb 13, 2006 2:40 am
Location: Chicago, IL, USA
Contact:

Post by Don Chambers » Sat Feb 18, 2006 4:39 am

I found this for truncating the weekday name: "{$dow.date|@formatTime:"%A":false|@truncate:2:'':true}" , so that one is off the table. Still have the other open questions.

Also, do you think my XML image is annoying?

User avatar
garvinhicking
Core Developer
Posts: 30020
Joined: Tue Sep 16, 2003 9:45 pm
Location: Cologne, Germany
Contact:

Post by garvinhicking » Sat Feb 18, 2006 5:31 pm

What you actually need is just to edit/change the CSS code.

You can look at the CSS of every page by opening the raw HTML and looking for the CSS links, then call that link via your browser and inspect the CSS.

Or, as I have suggested, please get yourself familiar with the tools I told you. Those will help you a lot in exactly the problems youre facing with basic CSS. :-)

Best regards,
Garvin
# Garvin Hicking (s9y Developer)
# Did I help you? Consider making me happy: http://wishes.garv.in/
# or use my PayPal account "paypal {at} supergarv (dot) de"
# My "other" hobby: http://flickr.garv.in/

User avatar
Don Chambers
Regular
Posts: 3638
Joined: Mon Feb 13, 2006 2:40 am
Location: Chicago, IL, USA
Contact:

Post by Don Chambers » Sat Feb 18, 2006 5:37 pm

Thanks Garvin - I've learned quite a lot in the past 48 hours or so.

The one thing I just cannot seem to get rid of is what appears to be a border around what I think is the mainpage.

Look here to see what I mean: http://www.chicagoloopcruise.com/serendipity/

User avatar
garvinhicking
Core Developer
Posts: 30020
Joined: Tue Sep 16, 2003 9:45 pm
Location: Cologne, Germany
Contact:

Post by garvinhicking » Sat Feb 18, 2006 5:48 pm

Try and edit your index.tpl template.

Change

Code: Select all

<table id="mainpane">


into

Code: Select all

<table id="mainpane" cellpadding="0" cellspacing="0">


HTH,
Garvin
# Garvin Hicking (s9y Developer)
# Did I help you? Consider making me happy: http://wishes.garv.in/
# or use my PayPal account "paypal {at} supergarv (dot) de"
# My "other" hobby: http://flickr.garv.in/

User avatar
Don Chambers
Regular
Posts: 3638
Joined: Mon Feb 13, 2006 2:40 am
Location: Chicago, IL, USA
Contact:

Post by Don Chambers » Sat Feb 18, 2006 6:06 pm

Thanks Garvin - that eliminated the border. :D

However, it also resulted in either the left sidebar being reduced in width a few pixels, or the content pane being increased in width. You can see what I mean graphically on the page - you can also see the content background image beginning to tile on the right side.

User avatar
Don Chambers
Regular
Posts: 3638
Joined: Mon Feb 13, 2006 2:40 am
Location: Chicago, IL, USA
Contact:

Post by Don Chambers » Sat Feb 18, 2006 7:40 pm

Garvin - thanks for the tip on editCSS - very helpful tool!! Sure wish I would have installed that when you first recommended it! I thought it was just a CSS editor, but it is certainly much more than that!

I solved my problem, but do not know why this works. Perhaps someone could explain it to me. To preface all this, a month ago, I had never created artwork of any kind, understood only basic html tags, like bold and italics for posting on forums, created only 2 prior websites, which were predecessors to my current site and laughable, and had no idea what CSS stood for. 2 weeks ago I learned about blogging, and sometime after that, tripped across this fantastic tool!

My header is 760 px wide. My mainpane is 760 px wide. My content is 610 px wide and my leftside bar was originally 150. So, the content width plus the side bar width equalled the mainpane width.

However, those dimensions resulted in my content pane overlapping the right edge of left side bar pane by 2 px. When I increase the width of the left side bar to 152, that overlap goes away. It also does not add up mathmatically - now I have 152 sidebar +610 content = 762, which is 2 px. wider than the width of the mainpane, but it looks fine.

So, can someone explain why this is?

I discovered my footer problem. Looks like the default index.tpl file does not reference it. I added the code from another example.

User avatar
Don Chambers
Regular
Posts: 3638
Joined: Mon Feb 13, 2006 2:40 am
Location: Chicago, IL, USA
Contact:

Post by Don Chambers » Sat Feb 18, 2006 9:07 pm

I would still like an explanation to my post above, however, I have a few new questions:

1) I had not paid attention to what was happening on the comment page. A problem exists similar to what was happening above, in that the content pane is getting stretched. That would suggest to me that some element is wider than the stated size. I cannot find a fix. I changed the width to 90% within the commentform.tpl, but there has to be something else there (or elsewhere) I am missing.

2) Can I edit the text below the comment form? "Enclosing asterisks marks text as bold (*word*), underscore are made via _word_."

User avatar
garvinhicking
Core Developer
Posts: 30020
Joined: Tue Sep 16, 2003 9:45 pm
Location: Cologne, Germany
Contact:

Post by garvinhicking » Sat Feb 18, 2006 9:30 pm

I can'T really help you with your previous question. You are right that the math should be alright. Note that if you add a "border: 1px solid red" around your #serendipityLeftSideBar, it's all proper again. I'm sorry, I wasn't able to find an explanation.

But I can help you with your other problems. :-)

About #1: This block is responsible for it:

Code: Select all

td.serendipity_commentsValue input,
td.serendipity_commentsValue select,
td.serendipity_commentsValue textarea {
    font-size: 12px;
    padding: 2px;
    width: 400px;
}


Set the width to a lower value. :)

About #2: You can only edit the text by editing the lang_XX.inc.php file of the plugins/serendipity_event_s9ymarkup/ directory, where this text is stored as a PHP constant.

You can also use CSS to hide the specific markup, but that is only possible since Serendipity 1.0-alpha1, and you're still using 0.9.1. You could then do it with this CSS:

Code: Select all

.serendipity_comment_s9ymarkup {
  display: none;
}


And then you could add your own custom text within the commentform.tpl template file, wherever you like.

Regards,
Garvin
# Garvin Hicking (s9y Developer)
# Did I help you? Consider making me happy: http://wishes.garv.in/
# or use my PayPal account "paypal {at} supergarv (dot) de"
# My "other" hobby: http://flickr.garv.in/

User avatar
Don Chambers
Regular
Posts: 3638
Joined: Mon Feb 13, 2006 2:40 am
Location: Chicago, IL, USA
Contact:

Post by Don Chambers » Sat Feb 18, 2006 10:01 pm

Something still isn't right Garvin - that value is 400, and my content pane is 610 px wide. With the minimal text preceeding the form (name, email, homepage, etc), I wouldn't think it would be a problem.

Anyway, I have to drop that value down to 100 before it stops affecting the width, and that is entirely too small.

Ideas?

User avatar
garvinhicking
Core Developer
Posts: 30020
Joined: Tue Sep 16, 2003 9:45 pm
Location: Cologne, Germany
Contact:

Post by garvinhicking » Sat Feb 18, 2006 10:06 pm

You might need to play with all "width" values you are using in your stylesheet. I'm quite sure that it some some of those affecting it.

I'm too short on time to do that debugging for you, i'm sorry. But I'm sure you'll learn a lot from it just by going through the CSS and adjusting the widths to see where they take effect.

Another thing I frequently use is just to assign "border: 1px solid red" to CSS elements, until I found the element group that enlarges the area. :)

Regards,
Garvin
# Garvin Hicking (s9y Developer)
# Did I help you? Consider making me happy: http://wishes.garv.in/
# or use my PayPal account "paypal {at} supergarv (dot) de"
# My "other" hobby: http://flickr.garv.in/

User avatar
Don Chambers
Regular
Posts: 3638
Joined: Mon Feb 13, 2006 2:40 am
Location: Chicago, IL, USA
Contact:

Post by Don Chambers » Sun Feb 19, 2006 12:16 am

I got it Garvin. After what seemed like an eternity - I tried something I probably should have tried a long time ago. I changed the width from 400px to 80%. Looks like the form behaves itself much better with this relative value rather than an absolute. Since I am only days into my html/php/css education, I cannot tell you why. I'm trying to figure all this out based on very moderate programming skills I have not used in over 15 years!

Hopefully, I will stop screwing around with the administrative side, and use it for the purpose for which it was intended! :lol:

User avatar
judebert
Regular
Posts: 2478
Joined: Sat Oct 15, 2005 6:57 am
Location: Orlando, FL
Contact:

Post by judebert » Sun Feb 19, 2006 5:46 am

Hah! You think you're finished, then you load it up in IE...

The left sidebar strangeness. You may have read about the CSS "box model". Border and padding are supposed to be added to the width of the content, so a 150px box with 1px border all around would actually be 150px + 1px left border + 1px right border = 152px. That works as expected in compliant browsers, but IE decided it was too confusing. IE reduces the content size instead, so the box would be exactly 150px wide, but the contents would only get 148px of space.

This makes things very difficult for the designers of pixel-perfect layouts.

Since you use border: none, this shouldn't affect you.

The other part of the problem is tables. Styling tables can be difficult. Of course, styling divs involves a lot of learning and a change in your thought patterns, so it can be more difficult. Often it's easier to just leave it in tables and style it until it works.

That may be the best result I can provide: sometimes stuff is weird. This is weirder than I expected. Usually you have to remove padding, because some container has made your stuff bigger than expected. Yours is smaller, and it's expecially weird because the images are exactly 150px and 610px (I downloaded and measured to be certain). I don't see any negative margins in your CSS.

That's definitely unexpected.
Judebert
---
Website | Wishlist | PayPal

Post Reply