Minima Black for Serendipity

[stephenv2]

I just moved my blog from Blogger where I used Minima Black http://www.blogger.com/templates/minima ... ample.htmlwith some minor changes.

I have the code from Blogger which I just brought into Dreamweaver and changed.

I can't find a Serendipity that looks like and support sidebars left and right. How hard and how do you do this in Serendipity?

[carl_galloway]

Do you want to keep using minima black on your serendipity blog?

If you do, then you are going to need to create a new template to do this. Unfortunately minima black hasn't been ported to serendipity. A close comparison might be one of the MT templates that ships with Serendipity, and then just make changes to the stylesheet so that you get most of the look and feel from minima. Hope that helps, Carl

[stephenv2]

Do you want to keep using minima black on your serendipity blog?

I would prefer to but not sure I want to build a template from scratch. I can work with HTML and CSS okay, but I don't know PHP.

[carl_galloway]

That's ok, you don't need to know any php to work on templates for Serendipity. And BTW welcome to Serendipity.

If one of the MT templates will do the job, then start by editing the style.css for bits that are recognisable, easiest way is to identify the page elements and copy the styles over from minima, so for example if you want to change the sidebar titles, copy the style from minima to the equivalent serendipity style, which from memory is .serendipitySideBarTitle{}, then keep doing this until your template starts to resemble minima. Feel free to keep asking questions here if you need more help.

If you feel the need to change any of the .tpl files, just make sure you leave the smarty code (smarty code is enclosed within {} brackets) the way its written at present. You can always learn to change this later on if its needed.

[stephenv2]

Carl:

Thanks for this info - that's good to know. I will look that and that does not sound too hard.

And thanks for the welcome - I've been pretty impressed with Serendipity thus far - it's nice to use something that does not require fighting with code and/or obscure documentation/UI's anytime you want to change something.

[carl_galloway]

Yeah, the learning curve can be quite sharp, but these forums are filled with people who want to help you succeed with your blog and that makes all the difference.

[steven]

Yeah, the learning curve can be quite sharp, but these forums are filled with people who want to help you succeed with your blog and that makes all the difference.

Carl is being modest. He has a number of good tutorials on his site that will help. Start with this. http://www.carlgalloway.com/archives/78 ... art-1.html

This outlines WP -> Serendipity, but if you understand html and css, you can do it for any conversion. He has other tutorials to take care of details.

I took a quick look at the example you posted. There are a number of themes that can be adapted to that with a little css. Look at templates that place the entry meta data in the location you want. I found that to be the trickiest part.

Good luck.

[stephenv2]

thanks for all the help. i decided to customize the Idea template - liked it's features. I'm not a design or CSS wiz but at least I have something that sort of matches my site:

http://blog.outsideinfilms.org/

However, I can't figure out how to make the sidebars wider. This has to be the style CSS entry but setting width/padding has no effect:

#serendipityLeftSideBar,
#serendipityRightSideBar {
display: block;
padding: 10px;
width: 11em;
vertical-align: top;
}

Any ideas? I don't see any other code for width in the style sheet.

[steven]

You will also have to make some room for them.
#leftside {width:190px;}
#rightside {width:250px;}
#contentA {margin: 0px 250px 0px 190px; padding: 0px 10px 20px 10px;}

Can you post a link to your CSS?

[stephenv2]

http://www.outsideinfilms.org/serendipi ... /style.css

[steven]

Replace this:

#serendipityLeftSideBar,
#serendipityRightSideBar {
padding: 10px;
width: 11em;
vertical-align: top;
}

with this:

Code: Select all

#serendipityRightSideBar {
  padding: 10px;
  width: 11em;
  vertical-align: top;
  float:right;
}

#serendipityLeftSideBar {
  padding: 10px;
  width: 11em;
  vertical-align: top;
  float:left;
}

They just need a little direction.

[stephenv2]

thanks, but i still have the same problem. any changes to the width and/or padding here has no effect on sidebar width/padding

[steven]

When I place your style.css into the Idea template for my site, it works as it should. I am not enough of a programmer to go thru the rest of your code.

If you are quick enough, look here:
http://stevenmuncy.com

[stephenv2]

thanks - what value did you adjust to change the sidebar spacing?

[steven]

I have been playing with it for a bit but the current settings are:

Code: Select all

/* Sidebars */

#serendipityRightSideBar { 
  padding: 5px; 
  width: 400px; 
  vertical-align: top; 
  float:right; 
} 

#serendipityLeftSideBar { 
  padding: 5px; 
  width: 200px; 
  vertical-align: top; 
  float:left; 
} 

I changed them a few times to make sure the changes were picked up.