Brainstorming: What do we "need" template-wise?

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

Post by Don Chambers »

Thanks YL... forgot those files were also in that folder.

Dave - I see you working on some fixed width graphics for s9y-bp.... I have been fiddling with that too. You getting unexpected behavior? I am not getting expected results with sidebar widths, positioning, etc. I cannot explain it more thoroughly yet, just thought I would ask if things are going smoothly for you, or if you likewise are encountering problems.
=Don=
d_cee
Regular
Posts: 603
Joined: Wed Jan 18, 2006 6:32 pm
Location: UK
Contact:

Post by d_cee »

Hi Don

it's been going quite smoothly really, no problems with sidbards, widths etc. - although I'm not happy with how it's looking now it's up. I only made the basics in Photoshop and then built the template online. Not an ideal way to work - cutting corners never really saves time - I usually build a complete template in Photoshop and then transfer it.

It's OK though so I'm going to leave it for a bit.

cheers

Dave
Don Chambers
Regular
Posts: 3652
Joined: Mon Feb 13, 2006 2:40 am
Location: Chicago, IL, USA
Contact:

Post by Don Chambers »

New template looks great Dave. I'm still plugging along on my little experiment, and it looks like I have some of my original problems figured out.

Do have a question for you guys though. I realize I originally did a lot of the color changing stuff for calendar arrows, feed icons, graph bars, etc. However, when I look in the BP img folder, I see both pngs & gifs for the purple and blue feed icons, but only a png for the green colorset.

So, 1st question is why both file formats in the img folder? The respective stylesheets specifically use the pngs, not gifs.

Also - regarding the calendar arrows. Those are only pngs, and the calendar tpl uses the colorset name to use the proper color here as well. However, this was hard coded to a png file.

So, the 2nd question would be are we sure we want to use png file formats? I realize with IE7+, png is no longer an issue. Even the s9y plug logo is png, and contains transparency (rounded corners make this obvious on dark backgrounds).

Anyway, just want to get this straightened out.

One final thought - the line in plugin_calendar.tpl is this:

Code: Select all

 <a title="{$CONST.BACK}" href="{$plugin_calendar_head.uri_previous}"><img alt="{$CONST.BACK}" src="{$serendipityHTTPPath}templates/{$template}/img/{$template_option.colorset}_back.png" width="12" height="12" style="border: 0px" /></a>
A similar code exists for the forward arrow. I suggest we lose the style attributes and place them in base.css.
=Don=
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Post by yellowled »

Don Chambers wrote:New template looks great Dave.
I second that, way to go, Dave.
Don Chambers wrote:However, when I look in the BP img folder, I see both pngs & gifs for the purple and blue feed icons, but only a png for the green colorset.
Are you sure the gifs are not remains of an older version? My current zipfile has png only, except for the xml.gif which as far as I know is hardcoded in s9y.
Don Chambers wrote:So, the 2nd question would be are we sure we want to use png file formats? I realize with IE7+, png is no longer an issue.
I am. http://www.w3.org/QA/Tips/png-gif
Don Chambers wrote:A similar code exists for the forward arrow. I suggest we lose the style attributes and place them in base.css.
Done. I also added a class to the spacer images, so those are now styled in style.css, too.

YL
Don Chambers
Regular
Posts: 3652
Joined: Mon Feb 13, 2006 2:40 am
Location: Chicago, IL, USA
Contact:

Post by Don Chambers »

OK - sounds like we will stick with png images. Those gifs are leftovers from earler zipfiles.

Time for another suggestion! :D I'm not a huge fan of navigation in the sidebars, but it clearly exists in BP so I cannot ignore it. I have been playing around with a colorset using images for the backgrounds. Dave is clearly doing the same thing with the latest s9y-bp site.

Our basic sidebar structure is as follows (not actual id's or classes):

Code: Select all

right/left sidebar
    sidebaritem
        plugincontainer
            sidebartitle
            sidebarcontent
                a
            sidebarfooter
However, when the navbar exists in the sidebar, it is currently something like this:

Code: Select all

right/left sidebar (fine)
    #sidebarnav & .sidebaritem (fine)
        ul (about the same in the hierarchy as sidebarcontent)
            li (about the same as a)
To fully emulate the other sidebar components, the sidebar navigation structure needs a few things, and here are my suggestions:

First (and second I guesss) is to add in a title and the footer. Ignoring my comment lines below, each of these requires only a single line (each) in index.tpl, at each instance of sidebar navigation (2 col, 3 col, etc):

Code: Select all

<!-- #sbsitenav: like #sitenav, but placed within the sidebar                    -->
   <div id="sbsitenav" class="serendipitySideBarItem">
      <a name="skipnav"></a>
<!-- TESTING SIDEBAR IDEA DC -->
      <h3 class="serendipitySideBarTitle">{$template_option.sitenav_sidebar_title}</h3>
      <ul>
        {foreach from=$navlinks item="navlink"}
        <li{if $currpage==$navlink.href} class="currentpage"{/if}><a href="{$navlink.href}" title="{$navlink.title}">{$navlink.title}</a></li>
        {/foreach}
      </ul>
<!-- TESTING SIDEBAR IDEA DC -->
      <div class="serendipitySideBarFooter"></div>
   </div><!-- closes #sitenav -->
{/if}
The <ul> COULD be wrapped within serendipitySideBarContent if we wanted the UL to automatically pickup the same styling as SideBarContent without the need to group the <ul> with serendipitySideBarContent in a stylesheet, but also adds a layer of structure that CAN be eliminated by this same grouping (I hope that makes sense!).

The 3rd requirement is an actual title for the navbar as a variable in the language files (would need German translation from YL):

Code: Select all

@define('SITENAV_TITLE','Navigation Menu Title');
@define('SITENAV_TITLE_DESC','Title for navigation menu when located at the top of a sidebar');
@define('SITENAV_TITLE_TEXT','Main Menu');
and finally, config.inc.php immediately following the sidebar position array:

Code: Select all

    array(
        'var'           => 'sitenav_sidebar_title',
        'name'          => SITENAV_TITLE,
        'description'   => SITENAV_TITLE_DESC,
        'type'          => 'string',
        'default'       => SITENAV_TITLE_TEXT,
    ),
All tested - it works. Thoughts?
=Don=
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Post by yellowled »

Don Chambers wrote:Time for another suggestion! :D
There goes my "feature freeze", huh? :wink:
Don Chambers wrote:All tested - it works. Thoughts?
Sounds reasonable, so I'll work it in later (I'm stuck at my girlfriend's, waiting for the stupid contractor to finish the bathroom). Although I have to say I really don't like the idea of having all those empty divs in the sidebars ... :? But I guess there's not much to do about that, right?

YL
d_cee
Regular
Posts: 603
Joined: Wed Jan 18, 2006 6:32 pm
Location: UK
Contact:

Post by d_cee »

Hi guys

Sounds fine to me. Another 'empty div' we could add would be a wrapper for the area below the header - something I''ve wished for when I've been styling. However, like YL, I'm wary of adding in too many as they can cause problems.

Dave
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Post by yellowled »

d_cee wrote:Another 'empty div' we could add would be a wrapper for the area below the header - something I''ve wished for when I've been styling.
Something like this?

Code: Select all

<div id="serendipity_banner">
    <h1><span class="{if $template_option.firbtitle == 'false'}in{/if}visible"><a class="homelink1" href="{$serendipityBaseURL}">{$head_title|@default:$blogTitle|truncate:80:" ..."}</a></span></h1>
    <h2><span class="{if $template_option.firbdescr == 'false'}in{/if}visible"><a class="homelink2" href="{$serendipityBaseURL}">{$head_subtitle|@default:$blogDescription}</a></span></h2>
</div><!-- closes #serendipity_banner -->
<div id="belowheader"></div><-- closes #belowheader -->
I have to admit I don't see what this would be useful for, so you'll have to convince me first :wink:

YL
d_cee
Regular
Posts: 603
Joined: Wed Jan 18, 2006 6:32 pm
Location: UK
Contact:

Post by d_cee »

Hi YL

This is one of my 'slicing and dicing images' divs. When I want to have a continuation of the header image into the body of the blog I always add this extra div if it doesn't exist. For the bp template I've been doing for the site, I had to put the image for the side dropshadow edges in the wrapper which then has the header image over the top of it - not ideal.

So, if you're making a 'graphic' style it can be a very useful extra div :-)

convinced??

cheers

Dave
Don Chambers
Regular
Posts: 3652
Joined: Mon Feb 13, 2006 2:40 am
Location: Chicago, IL, USA
Contact:

Post by Don Chambers »

@YL - my suggestion was not really that excessive from an "empty div" perspective. That portion of index.tpl code is not even processed unless the navbar is positioned in the sidebar. The title area is definitely not empty if my suggestion is fully implemented, and the footer area is a single item - the menu, and makes it consistent with the balance of the sidebar items. I admit, the footer of all sidebars as well as this menu is empty if a template or colorset author elects not to style it. Then again, think of the hundreds of ID's and classes that never get styled!!!

@D_CEE - I have done something nearly identical to what you are suggesting with a wrapper below the banner, and for the same reasons - slicing graphics. However, I can see that being a bit more of a challenge in BP as the navbar can be located above or below the banner, and the sidebars can be configured in so many different ways. I would personally build something like that into a template that might be based on BP, but evolves to include some very unique features, including (if the author desired) deactivating certain features (ie, navbar position or sidebar options) that now exist in BP.

Anyway, my original suggestions were merely to help construct an example of ONE POSSIBLE way to construct a template based on graphical elements. I'm tweeaking the stylesheet and posting a link to it right now would be meaningless as it will not work correctly without the changes I mentioned above. However, below is a link where you can see a small slice of the entire screen. What is shown is a menu constructed as described above, with a header, and a footer (footer contains no text - just graphic). The entire screen not shown because YL may be on dial-up, and I could be done with this shortly, in which case I will send everything to YL to add a colorset to BP if you guys want it.

http://chicagoloopcruise.com/library/me ... xample.png
=Don=
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Post by yellowled »

d_cee wrote:So, if you're making a 'graphic' style it can be a very useful extra div :-)

convinced??
Yup. I'll add it to the code tonight.

YL
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Post by yellowled »

Don Chambers wrote:@YL - my suggestion was not really that excessive from an "empty div" perspective. That portion of index.tpl code is not even processed unless the navbar is positioned in the sidebar.
Of couse you're right. I only wanted to sort of raise my finger since we do already have those extra sidebar divs, and although I've been thinking hard, I can't come up with anything useful to stuff into them. So all I'm saying is let's not fill this up with empty divs :)
Don Chambers wrote:The entire screen not shown because YL may be on dial-up, and I could be done with this shortly, in which case I will send everything to YL to add a colorset to BP if you guys want it.
Don't hold back on my account, there's always a stop button :wink:

It is definitely great (I'm a huge fan of those kind of boxes), but I'm not sure whether it fits the original bulletproof colorsets. Plus, I don't want to overload the bulletproof core distribution. But you should definitely pursue this and release it!

YL
Don Chambers
Regular
Posts: 3652
Joined: Mon Feb 13, 2006 2:40 am
Location: Chicago, IL, USA
Contact:

Post by Don Chambers »

Don't hold back on my account, there's always a stop button :wink:
Here is a full screenshot, this time showing the full navbar below the header, not as a sidebar menu as above: http://chicagoloopcruise.com/library/bp ... full-1.png
It is definitely great (I'm a huge fan of those kind of boxes),
The graphics are somewhat similar to something I was working on before BP but never completed. I decided NOT to use those graphics for BP as I might very well either complete that template (which provided a lot of my contributions to BP) or fully convert it to BP.

For now, I intended it as a simple example to demonstrate background graphic images as well as to utilize the sidebar footer. I started with Dave's purple.css stylesheet and have changed only a portion of it, mostly due to color changes, or my own personal preference for methods of accomplishing some desired result.
but I'm not sure whether it fits the original bulletproof colorsets. Plus, I don't want to overload the bulletproof core distribution.
If you guys think this is somehow inconsistent with the other colorsets, they by all means, we can exclude it from BP and I will simply stick it in a drawer along side that other thing I was working on!!! :lol: I really don't see it that way. Not sure if Dave ever revised the green and blue colorsets, but they were both very different from each other, and the purple set, which was never really included in its present form, was likewise different from the first 2. I nearly did this entire grey thing in various shades of blue, but elected not to so there was no confusion with the blue colorset which already exists.
=Don=
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Post by yellowled »

Don Chambers wrote:Here is a full screenshot, this time showing the full navbar below the header, not as a sidebar menu as above:
Hey, I may be on dial-up, but the connection is not that thin :wink:

Very nice!
Don Chambers wrote:If you guys think this is somehow inconsistent with the other colorsets, they by all means, we can exclude it from BP and I will simply stick it in a drawer along side that other thing I was working on!!!
Dude, you seem to have huge drawers :lol:

It's not about this being inconsistent or in any way inferior to Dave's colorsets. I assume the graphics you're using will blow up the bp zipfile a little, so I think it would be nicer to have it as a demonstration what bp can turn into in a seperate template. I'd really like to keep the core bp zipfile tidy.

However, I might be wrong about the size of the graphics, so how much are they altogether?

YL
Don Chambers
Regular
Posts: 3652
Joined: Mon Feb 13, 2006 2:40 am
Location: Chicago, IL, USA
Contact:

Post by Don Chambers »

yellowled wrote:Dude, you seem to have huge drawers :lol:
Ummm..... you realize that "drawers" is another term for pants/trousers, correct??!!! So, not really sure which portion of my anatomy you are referring to as "huge"... either I have a big @$$ or something else. Either way, I'll just let that one go. :lol: :lol: :lol:
yellowled wrote:However, I might be wrong about the size of the graphics, so how much are they altogether?
Total size of ALL graphics in use for this colorset are 4.32k, or approximately 1/3 the size of the purple banner/header graphic!!!! My intention was to include the photoshop files used to create the graphics too so new designers could begin to piece together the relationship between an original graphic image, and how - once "sliced" - that single image builds page components using repeat-x or repeat-y that dramatically reduces file sizes and hugely increases page load speeds. Total file size (at the moment) of all photoshop files, including the feed icon and calendar arrows, is approximately 120k - slightly larger than the full screen shot I posted above. The photoshop files COULD be something that I zip together for a d/l from s9y-bp rather than inclusion in the bp distribution.

In other words, these things are nowhere near as large as you might think. :wink:
=Don=
Post Reply