forum.coppermine-gallery.net
Support => cpg1.5.x Support => cpg1.5 themes (visuals) => Topic started by: trevorpenfold on August 07, 2012, 01:18:00 am
-
Hi,
I'm re-designing my website and decided to use wordpress to power it, using the twentyeleven theme. I also want to integrate coppermine as a stand alone stock library within the site, so want it to have the same look and feel/skin and the same 2 column 'liquid' layout. I've read all the docs. on creating a custom theme, creating one to match your overall site layout and the tutorial re: converting a w/p theme to Coppermine + searched the forums for help and advice too .... but am still stuck!
I managed to re-create the 'Holy Grail' layout as per the docs as a learning exercise, but have spent the last week trying different options but just can't do the 2011 theme. So far I've created my custom theme and loaded it with the original w/p style + my new custom style.css as per the tutorial by Gizmo + new template and theme files (though I've REALLY struggled with how the theme file works, as it didn't work with the Classic one, so have added all the bits I think I need...?). You can see it here http://trevorpenfold.com/stock_library/index.php?cat=2 (http://trevorpenfold.com/stock_library/index.php?cat=2) but as it's in the development stage there's no content yet, just category and album egs. You can see an eg of the standard 2011 wordpress theme here trevorpenfold.com/main_site/ (http://trevorpenfold.com/main_site/) for information. As you can see hardly any of it is working out and I'm completely stuck as to what to try next!
Many thanks - in anticipation - Trev
I'd be really grateful of any support for this
-
For some reason your site is blocked by my corporate proxy but there is already a twentyten theme maybe you can start from there.
http://coppermine-gallery.net/demo/cpg15x/?theme=twentyten
http://sourceforge.net/projects/coppermine/files/Themes/1.5.x/cpg1.5.x_theme_twentyten_v1.1.zip/download
-
Hi Jeff,
Thanks for your reply. I have looked at 2010 but really want a liquid layout, also 2011 is more recent and presumably more code compliant/up to date with coding etc.
I've attached a copy of my custom files here FYI - though have had to change them all to text files to allow upload, so not sure if they'll be very user-friendly now??
Cheers.
-
You could have uploaded them as a zip but the txt extenstion is what we ask for when uploading individual files so thats fine. I'll take a look and see what can be done. Do you have a link for the wordpress version so I can see what it should look like?
-
Also could you upload a zip of any images or js used in the theme.
-
Hi Jeff,
Here's a link to the blog on our site which is currently using the standard 2011 w/p theme http://trevorpenfold.com/blog/ (http://trevorpenfold.com/blog/) and is the basic look I'm after (with a left-hand sidebar).
I've attached all the images in a zip ( they're the images from the Classic cpg theme as a base + the images from the w/p 2011 theme) + put the whole theme in a zip together and uploaded too, in case that's easier.
Cheers.
-
I can't access your site right now becuase my corporate proxy is blocking it. Do you have a link for the theme itself.
-
Hi Jeff,
Thanks for taking a look at it - I've uploaded the w/p 2011 theme in it's original zip file and here's the link to it in w/p http://wordpress.org/extend/themes/twentyeleven (http://wordpress.org/extend/themes/twentyeleven). Also another link to the 2011 theme on our site http://trevorpenfold.com/newsletter/ (http://trevorpenfold.com/newsletter/) if that helps...
Cheers.
-
This is all I had time for tonight. Feel free to continue work on it. If you do upload it here. If you don't I'll continue tomorrow.
-
Thanks Jeff,
I've tried it out and it works HEAPS better! I've had a look through the files and see that it's similar to the 2010 cpg theme files, but I don't understand how you managed to get the liquid layout to work - but it works well. I've tried to move the sidebar to the left of the main content using div:'left-sidebar #secondary' which seems to have moved the admin menu but not the system menu above it - though this changes sides depending on what page your on and I don't seem to be able to change this! Also the album list still 'escapes' the content to the right. I've uploaded it again - but only my very minor change in a/a.
Cheers.
-
Hi again Jeff,
I've had another look at the functionality of different themes and I guess the w/p 2011 is really like the layout of the Greenflower cpg theme BUT with a liquid layout. I've read that this theme has been updated (as it was done in ?2006 I think originally) and is due for release any moment - but not sure if it'll have the more adaptable liquid layout yet.
Cheers,
-
I'm not sure what you mean by liquid layout.
All I did was take the curve theme, replaced all the css, changed some div ids and structure in template.html and made a couple of edits to theme.php in the sysmenu function.
There is still a lot of extra code and obviously some structure issues that I can look though tomorrow .
I didn't realize you wanted the secondary column on the left I was just going with the default but I'll change that tomorrow .
I find it's easiest to create custom themes using curve as it has a great dropdown menu that can easily be edited. I have no experience with the greenflower theme, if you think it is a better approach go ahead and use that as the template instead for your custom theme.
-
I'm not sure what you mean by liquid layout.
Just guessing, maybe trevorpenfold wants to use % rather than a fixed width so it adapts to different sized screens etc.
-
That's probably correct. He says that it already has the "liquid layout" but I zoomed in and out and not much changed so I thought I'd ask.
-
Hi Jeff,
The liquid layout I'm aiming for is like in the Coppermine docs 'Creating a theme that matches your overall site layout' (see http://documentation.coppermine-gallery.net/en/theme_create_matching_page_tutorial.htm (http://documentation.coppermine-gallery.net/en/theme_create_matching_page_tutorial.htm) ) with 'In Search of the Holy grail' by Matthew Levine as the eg, BUT with a max width so can have a background colour/graphic too.
Also my aim is for my whole site to achieve this, as per Stu Nicholls 'CSS Flexible Layout' design (see it here http://www.cssplay.co.uk/layouts/flexible-equal-height.html (http://www.cssplay.co.uk/layouts/flexible-equal-height.html) ) so that when you re-size your browser window the whole layout resizes too - whereas the Greenflower Coppermine one is a fixed width layout - so that the whole site resizes depending on the users device.
Hope that clarifies things and thanks for taking the time to look at it.
Cheers.
-
Update:
Changed to left column.
Changed some text styles.
One album per row.
Random header image.
Some minor things.
Still a work in progress, just taking a break and letting you see the progress.
-
Hi Jeff,
It looks nearly there!! The only difference between this one and the w/p 2011 in how the liquid layout responds to downsizing now, is that when it gets really narrow the w/p css drops the left sidebar to below the main content (which is OK I guess), whereas the cpg 2011 version ends up with the main content overlaying the left-hand sidebar, so both become slightly unreadable. To be honest, I don't think people who want to search a stock-library will be doing it on a very narrow device anyway, so I don't think it's a problem for me - just a difference between them.
The one thing I've changed is the positioning of the 'custom footer' token to try and get the w/p 2011 footer to display. It displayed fine when I did it like this in my original tpp_custom theme (about the only thing that did...) but I can't seem to get it to work here and can't see why.
So I've uploaded it again here FYI.
cheers.
-
can you upload your custom footer?
-
Hi Jeff,
I guess it's not actually a custom footer as such -just the normal footer at the bottom of the 2011 w/p style, as per the zip upload the other day - so I think I've misused/misunderstood that term. All i did was to change the 'Powered by Wordpress' link to the 'Credits' token so it showed 'Powered by Coppermine' instead.
Cheers.
-
The theme already has a credit to Coppermine.
I'm not sure what you're tring to add or change?
Do you want to add a credit to wordpress?
When I finish I usually update the credits function in theme.php and will add it it.
-
are you talking about footer.php from the theme?
<?php
/**
* The template for displaying the footer.
*
* Contains the closing of the id=main div and all content after
*
* @package WordPress
* @subpackage Twenty_Eleven
* @since Twenty Eleven 1.0
*/
?>
</div><!-- #main -->
<footer id="colophon" role="contentinfo">
<?php
/* A sidebar in the footer? Yep. You can can customize
* your footer with three columns of widgets.
*/
if ( ! is_404() )
get_sidebar( 'footer' );
?>
<div id="site-generator">
<?php do_action( 'twentyeleven_credits' ); ?>
<a href="<?php echo esc_url( __( 'http://wordpress.org/', 'twentyeleven' ) ); ?>" title="<?php esc_attr_e( 'Semantic Personal Publishing Platform', 'twentyeleven' ); ?>" rel="generator"><?php printf( __( 'Proudly powered by %s', 'twentyeleven' ), 'WordPress' ); ?></a>
</div>
</footer><!-- #colophon -->
</div><!-- #page -->
<?php wp_footer(); ?>
</body>
</html>
-
You can add this to theme.php if you want. I'll add it in later anyway.
/******************************************************************************
** Section <<<theme_credits>>> - START
******************************************************************************/
/******************************************************************************
// Function for the credits-section
In previous versions of Coppermine the "Powered by Coppermine" used to be
obfuscated to make it hard for non-coders to remove the tag. The reason behind
this was an additional license add-on that disallowed users to change the line.
The dev team has reviewed this policy for cpg1.5.x and decided that end users
ARE allowed to change or remove the line in legal terms.
HOWEVER: We have a forum policy for the support board instead: support will
only be given for galleries that show the "Powered by Coppermine" tag
unobfuscated.
Before removing the credits, please consider this as well:
Coppermine is free software, the dev team ASKS you to keep the footer intact.
We're convinced that you should give credit where credit is due. So please think
twice before you decide to remove the tag.
******************************************************************************/
function theme_credits() {
$return = <<< EOT
<div class="footer" align="center" style="padding:10px;display:block;visibility:visible; font-family: Verdana,Arial,sans-serif;">Powered by <a href="http://coppermine-gallery.net/" title="Coppermine Photo Gallery" rel="external">Coppermine Photo Gallery</a> | Ported by Jeff Bailey | Based on <a href="http://wordpress.org" rel="external">Wordpress</a> theme <a href="http://wordpress.org/extend/themes/twentyeleven" rel="external">Twenty Eleven</a></div>
EOT;
return $return;
}
/******************************************************************************
** Section <<<theme_credits>>> - END
******************************************************************************/
-
Hi Jeff,
I was just trying to change the style of the footer so that it was the same as the w/p 2011 theme. And in that footer there's the credit to w/p in the <div id="site-generator"> (where the coppermine credit now site) but the whole footer is within the <footer id="colophon" role="contentinfo"> div which I guess gives it it's styling - well it did in my one, but it doesn't in your one...so maybe the footer id="colophon" isn't active somehow?? Though it looks like you have the whole w/p 2011 style.css as the theme style.css, so that's why I couldn't work out why it wasn't showing up??
Hope that makes it clearer? Thanks.
-
Oh ok, I haven't gotten to the footers style yet. I'll change that tomorrow.
-
So far today. Attached.
Edit:
Fixed a small typo. Attached.
-
This is it for tonight.
-
Thanks Jeff, I'm afraid I haven't been able to look at it at all today, but I'll check it out tomorrow afternoon.
Cheers.
-
Hi Jeff,
I've managed to have a good look this afternoon and have made just very minor edits to your files - just added in the footer divs to the template.html and removed them from the theme.php so there doesn't seem to be any need for the 'Custom Footer' token and it all works well now - though how you had it worked too of course!
I've also had another go at putting it together like it was suggested in the tutorial by Gizmo ( http://forum.coppermine-gallery.net/index.php/topic,38508.0.html (http://forum.coppermine-gallery.net/index.php/topic,38508.0.html) ) as I want to try and keep the wordpress syle as intact as possible so I can easily update it if there are issues with it, or even be able to more easily change to another wordpress style in the future. So I've used your theme.php file (with my small edits as above in re the footer/credit styling) as mine didn't work before, and I've taken the original cpg Curve style.css as you suggested and commented out any items that duplicate ones in the wordpress style (which I've titled 'style_wp.css). So I've also linked to both stylesheets in template.html (in fact to x3 stylesheets, as the original coppermine style.css is referenced too in the above tutorial, but not sure if it's necessary/good to do here??). I've also just moved the 'Message' token, to just above the 'Gallery' one, as I prefer the look i think.
Overall they both seem to work well now, just styling tweaks once I've uploaded all images and set out the categories for real.
The one thing that I still can't change though is how the lefthand sidebar menus gets over-written by the content when the browser window becomes very narrow. If you can think of an obvious fix for this that'd be great - but it's probably not worth a lot of time spent on it.
See what you think - thanks.
-
I won't have time to continue on this for a few days.
The one thing I haven't gotten to that really needs work is displayimage.php
You can find the theme.php functions to edit here:
http://documentation.coppermine-gallery.net/en/theme_theme_php.htm#theme_create_theme_var_display_media
http://documentation.coppermine-gallery.net/en/theme_theme_php.htm#theme_create_theme_display_image
http://documentation.coppermine-gallery.net/en/theme_theme_php.htm#theme_create_theme_var_film_strip
And there are probably a couple of others that may need a tweak.
Adding the footer divs to the template.html or the theme.php works either way, as you can see, it's just a habit of mine to do most of the edits in theme.php.
Using two style sheets is a fine idea, but when I port a theme I usally change all the classes and ids to match the original. Again either way works as long as you can follow where you've made the appropriate changes.
Glad you are getting the hang of it. If you get this to a completed phase before I can return to it please use the naming scheme I have been using with a version number of 1.x and I will add it to the theme contributions thread.
-
Hi Jeff,
Well, I had a good look at all the docs re theme editing and the 'displayimage' bits, but I'm afraid I just don't get it at all and can't see what to do or where to do it or even what the problem is!! - and just when I thought I was starting to understand how to edit the theme.php with the footer edits, as they were easy... So I'm afraid I haven't done anything on this bit.
But I've done what I can - I've reinstated your info in the template & theme files re showing the theme footer and credits, as that's obviously more how coppermine is formatted. And I've tried to tidy up the template.html file with 'comments' marking the end of each div, as recommended in the docs, so hopefully that should save you some time? But you'd better have a quick check of it in case I've messed it up somewhere - though it still works fine.
I've re-named it as per your version nos and uploaded again. I'll stick with editing your 2011 theme files here, as that's probably more useful for others trying to convert the 2011 wordpress theme, and will try and incorporate any changes you make into my tpp_cutom file to keep my stylesheets separate as mentioned before.
Cheers.
-
Hi Jeff,
just wondered if you'd had some spare time to look at issues in the theme.php file that you mentioned on Aug 11th (re: displayimage bits I think?)?
If your hard pressed for time at present perhaps someone else with experience of php files could take at look at it??
Many thanks. :)
-
I will be starting again soon, probably around wednesday. I'm just in the middle of finishing some college courses, and this project is a little more involved then standard support.
-
Hi Jeff,
Thanks for that - i do realise that it's 'above and beyond' a normal support query, so everything is very much appreciated. So whenever suits you...
Cheers.
-
Hi Jeff,
Not sure if you have time to continue what you'd started helping me with (develpoing a coppermine child theme of the wordpress twenty eleven theme)? The initial look seemed fine to me, but you said there were some issues with the image displays which still needed attention: see info from your post Aug 11th...
The one thing I haven't gotten to that really needs work is displayimage.php
You can find the theme.php functions to edit here:
http://documentation.coppermine-gallery.net/en/theme_theme_php.htm#theme_create_theme_var_display_media
http://documentation.coppermine-gallery.net/en/theme_theme_php.htm#theme_create_theme_display_image
http://documentation.coppermine-gallery.net/en/theme_theme_php.htm#theme_create_theme_var_film_strip
And there are probably a couple of others that may need a tweak.
As I said, this is way beyond my skills I'm afraid, so if you have some time to look at it again I'd be really grateful - or if anyone else could help too??
Many thanks.
-
Sorry I forgot all about this. Let me take a fresh look today and see what I can come up with.
-
Take a look at this one, I think I hit everything.
[Edit]
Forgot to mention, the style sheet could have a lot of things cleaned out of it. I just didn't spend the time to look through it all.
-
Thanks Jeff - that was SUPER quick! - and you're obviously not based around NY (poor things)! I've just got in and will have a look at it this evening (I hope) or tomorrow am for definite...
Cheers.
-
Hi Jeff,
Well I've tried adjusting a few things, namely:
- added padding to the t/nails as they were colliding
added padding to the t/nails in the filmstrip for same reason
tried to increase the space for the gallery by increasing the %age width of the 'content' div (in main w/press part of css under 'Structure')
and decreased the width/margin a bit of the sidebar div (in main w/press part of css under 'Structure')
what I've tried to do but totally failed with, is to decrease the filmstrip width from 816 to 616 or thereabouts, so that it apprears to sit within the 'content' container - at present it escapes. I've put it in under film and element.style, but it won't work - I don't think I've labeled them correctly, so would appreciate it if you could look at this?
The other problem that I just can't fix, is that my portrait thumbnails are always left aligned, whereas the landscape ones are centered. I've spent hours trying to work it out with Firebug, but it all says center aligned already, and it doesn't change no matter what I put in it!!
Anyway, I've uploaded it as version 1.2 and would appreciate your input.
Also you mentioned that there was a lot of unnecessary code in the css - do you mean the w/press features that aren't being used? If so I can clear them out.
Thanks a lot for your ongoing help.
-
I'm not seeing any colliding, unless I zoom in. The theme uses percentages to set the width of columns, maybe your resolution is low?
To adjust the widths of the content and secondary columns try this (already adjusted):
.left-sidebar #content {
margin: 0 7.6% 0 20%;
width: 78%;
}
.left-sidebar #secondary {
float: left;
margin-right: 0;
margin-left: 2%;
width: 17%;
}
The filmstrip doesn't escape for me. Find this in theme.php and try adjusting.
$CONFIG['max_film_strip_items'] = 4;
The thumbs in the flimstrip are half controled by the function theme_display_film_strip and by displayimage.js, remove float: left; from the inline styles.
When I mentioned the style.css I was talking about the wordpress styles.
I'm afraid this project has gone much farther than I expected it to and I have other things I'm currently working on. I won't be uploading any newer versions any time soon but feel free to ask if you run into a major issue.
The way I put this together was pretty sloppy but everything you need to know in order to build a decent version of this is in there. Feel free to rebuild using fixed widths and other things that would fix the issues you're having and you can also remove my credit.
When you do get it running the way you want, we would be grateful if you posted a theme contribution thread.
-
Hi Jeff,
Thanks so much for all your work and ideas - I'll continue with this as I develop my new site, and I'll definitely post what I end up with! I'm sure it won't be brilliantly coded, but hopefully it will give a jump-start to anyone else.
Many thanks again!
-
To anyone else, besides Jeff, who is following this thread and think they can help with a couple of issues remaining...
So far....As you can see, Jeff has had a HUGE input in helping me with converting the wordpress twentyeleven theme to work with/'skin' the coppermine gallery.
However, as mentioned in my post of Nov 12th, there are a couple of thigs I just can't seem to fix, namely:
what I've tried to do but totally failed with, is to decrease the filmstrip width from 816 to 616 or thereabouts, so that it apprears to sit within the 'content' container - at present it escapes. I've put it in under film and element.style, but it won't work - I don't think I've labeled them correctly, so would appreciate it if you could look at this?
The other problem that I just can't fix, is that my portrait thumbnails are always left aligned, whereas the landscape ones are centered. I've spent hours trying to work it out with Firebug, but it all says center aligned already, and it doesn't change no matter what I put in it!!
If anyone thinks they may know of a solution, or perhaps can see if I've written the css correctly or not, I'd be really grateful!
Thanks!
-
I've already posted possible solutions to those problems in
http://forum.coppermine-gallery.net/index.php/topic,75280.msg364527.html#msg364527
The filmstrip doesn't escape for me. Find this in theme.php and try adjusting.
$CONFIG['max_film_strip_items'] = 4;
The thumbs in the flimstrip are half controled by the function theme_display_film_strip and by displayimage.js, remove float: left; from the inline styles.
The width of the filmstrip is controlled by how many thumbs are in it, AFAIK there isn't a way to change that with out breaking the filmstrip navigation.
I'm still willing to help, I just won't be making any builds of the theme.
-
Hi Jeff,
sorry, I misunderstood. Thanks for the fixes and I'll work on them soon and only post here if I can't sort it.
just to mention re: the filmstrip:- I have tried reducing the number of t/nails right down to reduce the width of the background 'strip'. but it stays the same - and that's the bit of css that I can't fix. But I'll be re-looking at it in a week or so, and sometimes a fresh look does the trick!
Cheers.
-
$CONFIG['max_film_strip_items'] = 4; is located near the top of the theme.php, it overrides your actual config settings.