Feature #2000
closedInconsistent Font sizes in site footer
Added by Matt Gold over 12 years ago. Updated over 11 years ago.
0%
Description
Was just looking at the site footer and noticed how inconsistent the font sizes are. If we're putting this on everyone's blog, the least we can do is make it look good. Chris, can you suggest a possible fix?
Files
Screen_Shot_2012-07-20_at_4.21.54_PM.png (28.4 KB) Screen_Shot_2012-07-20_at_4.21.54_PM.png | Matt Gold, 2012-07-20 04:24 PM | ||
footerV0.png (28 KB) footerV0.png | Chris Stein, 2012-08-01 03:39 AM | ||
footerV1-1.png (30.1 KB) footerV1-1.png | Chris Stein, 2012-08-01 03:39 AM | ||
footerV2.png (30.3 KB) footerV2.png | Chris Stein, 2012-08-01 03:39 AM | ||
footerV3.png (45.7 KB) footerV3.png | Chris Stein, 2012-08-01 03:39 AM | ||
footer-comments.png (58.8 KB) footer-comments.png | Chris Stein, 2012-08-01 03:39 AM | ||
sitewide-footer-css.html (1.77 KB) sitewide-footer-css.html | Chris Stein, 2012-08-02 11:37 PM | ||
sitewide-footer-html.html (1.65 KB) sitewide-footer-html.html | Chris Stein, 2012-08-02 11:37 PM | ||
cuny_white.gif (2.61 KB) cuny_white.gif | Chris Stein, 2012-08-02 11:37 PM | ||
footerV4.html (77.1 KB) footerV4.html | Chris Stein, 2012-08-02 11:37 PM | ||
footerv4.png (76.9 KB) footerv4.png | Chris Stein, 2012-08-10 11:51 PM | ||
footerV5.png (48.4 KB) footerV5.png | Chris Stein, 2012-08-13 04:39 PM | ||
footerV6.png (46.7 KB) footerV6.png | Chris Stein, 2012-08-13 04:39 PM | ||
footerV6_2.png (46.3 KB) footerV6_2.png | Chris Stein, 2012-08-13 04:48 PM | ||
sitewide-footer-html-V2.html (1.63 KB) sitewide-footer-html-V2.html | Chris Stein, 2012-08-14 12:36 PM | ||
sitewide-footer-css-v2.html (1.85 KB) sitewide-footer-css-v2.html | Chris Stein, 2012-08-14 12:36 PM |
Related issues
Updated by Matt Gold over 12 years ago
Updated by Boone Gorges over 12 years ago
- Tracker changed from Bug to Feature
- Target version changed from 1.3.17 to 1.4
Chris, it'd be great to get this for 1.4, so any suggestions would be welcome. Thanks.
Updated by Chris Stein over 12 years ago
- File footerV0.png footerV0.png added
- File footerV1-1.png footerV1-1.png added
- File footerV2.png footerV2.png added
- File footerV3.png footerV3.png added
- File footer-comments.png footer-comments.png added
I have a sick kid so my time on this was less than I expected. It brought up some issues.
One is that I think as we have it now the licensing is a bit confusing. Not sure we can or want to address this now but some thoughts that came up:- There can be two licenses, one from whatever theme the person is using and one from our sitewide footer
- There is no clear way for the owner of the blog to modify the default license even though our TOS states "You may offer your Content on a more restrictive basis by removing the Creative Commons logo and link from the blog, website or posting and labeling your Content with a full copyright notice: your name, the word “copyright” or symbol © and the year it was first published."
Also in both the sitewide and the Commons footers (which are almost the same but a little different) there is no copyright symbol by the text "2010 CUNY Academic Commons." It's not clear to me if that should exist on our member's blogs and on the main site it should probably have the © symbol. (and should the date change each year?)
There are some other things from a design and information perspective we could consider but I thought we might push that to a different ticket and time.
I have some screenshots of a few quick versions. Some of them try to address in small ways the licensing and other design issues. Also I changed the CUNY logo because it is supposed to be a square and with the black on black that doesn't show through. And I added the Commons logo in one version because on members sites (not the main site) it might be good to put that visual branding in. Also I kind of separated the sections of information a bit (one of screenshots has comments in it)
These are all quick and comments welcome. I hope it is the direction you were looking in and if other's agree I'd like to revisit the footers with some more thought and time in the future.
Before I get into the changes another thought is that I (or someone) may want to look over the CSS a bit for specificity because some of the font-size inconsistencies may be due to particular themes. Once we get the general idea that can be done pretty easily.
V0
- changed font size to 12px
- narrowed the .fleft to account (long sentence broke with a couple words, better broken sooner)
- changed CUNY logo so can see square
- widened .fright to have one sentence (like on main site)
- made look more like footer on main site (nav, cuny logo and "2010 CUNY Academic Commmons on separate lines)
V1
- put the sentence above a line and added a sentence about creative commons
-separated "with" and "by" lines to separate lines
V2
- moved CUNY logo to right
V3
- added Commons logo
Updated by Matt Gold over 12 years ago
Some really great points and insights, Chris. Of the three possibilities you put together, I think that v3 is the cleanest, though I wonder whether the Commons logo should appear right below the HR line. If we need to mirror that on the right by having the CUNY logo above the "powered by" language, that would be fine.
Not sure about the 2010 Commons stuff. I think we didn't want to have a copyright symbol there because we were going with CC licenses. Maybe we should delete that line.
Updated by Boone Gorges over 12 years ago
Just a note that CC licenses and copyright are not mutually exclusive; in fact, CC only makes sense in the presence of copyright.
Updated by Chris Stein over 12 years ago
Matt, moving the images sounds fine. I'm doing daddy daycare and I'm under the weather so I may not be able to make the changes and upload the HTML/CSS file until nap time.
Boone, thanks for the note, which is as I understand it as well. Perhaps it makes sense to have a © 2012 CUNY Academic Commons, on the main site and then not have that on individual blogs.
Updated by Chris Stein over 12 years ago
- File sitewide-footer-css.html sitewide-footer-css.html added
- File sitewide-footer-html.html sitewide-footer-html.html added
- File cuny_white.gif cuny_white.gif added
- File footerV4.html footerV4.html added
I'm attaching the html and css in separate files and the gif of the white cuny logo. Also a screenshot of how it looks.
Updated by Matt Gold over 12 years ago
Thanks, Chris. I may be missing something, but I don't see the screenshot. Can you repost if it's not already here? Many thanks.
Updated by Chris Stein over 12 years ago
I did forget it. I'm having a charging problem with my laptop, on the iPad now. If I can fix the problem soon I'll update it. If. It it is basically v3 with the logos at the top of each side.
Updated by Boone Gorges over 12 years ago
- Target version changed from 1.4 to 1.5
Updated by Chris Stein over 12 years ago
- File footerv4.png footerv4.png added
Yeah, took a bit longer than anticipated to get it together. Here's the long awaited image.
Updated by Matt Gold over 12 years ago
Looks really great, Chris -- I think the repositioning works well. What do you think of reducing the vertical line spacing between "Built with/Protected by/Powered by"? Those lines extend the overall vertical height of the footer, leaving blank space over on the left, and I wonder how it would look with things a bit more compact on the bottom. What do you think?
Updated by Chris Stein over 12 years ago
- File footerV5.png footerV5.png added
- File footerV6.png footerV6.png added
I'm not sure the line-height made much difference. You can see it in footerV5, I make one where they are all on the same line like the navigation, footerV6 and that makes more of a difference. Also I changed the height of the Commons logo to match the CUNY logo so things lined up.
Also these screenshots show the site at a narrower width than the others (about 900px) to see if you think there is enough separation between the left and right when both are on one line.
Updated by Chris Stein over 12 years ago
- File footerV6_2.png footerV6_2.png added
Sorry, didn't update the line-height properly on V6 so lines weren't actually lined up right.
Updated by Matt Gold over 12 years ago
Thanks so much, Chris -- I think these do help. My preference is for footerV6_2.png since it really makes a difference on the size of the footer and looks good overall. I like the drama of the line breaks in v5, but I'm not sure they're worth the extra space they take up.
What do you think?
Updated by Matt Gold over 12 years ago
I suppose that another possibility is to keep the line breaks but to move the "this blog is part of the CUNY Academic Commons" and "unless otherwise stated" lines under the CAC logo/nav links, thus bringing everything under the white horizontal rule. Having said that, since the referent of "this blog" is the material directly above that line, it's probably best to keep it where it is.
Updated by Chris Stein over 12 years ago
I'm not too concerned about the space in the footer since it's the last thing on the page and it's just three lines. I'll be fine with either version, so go for the one that you feel most inclined towards. I do like keeping the sentences separate since I think they are more likely to get read that way and for your reasoning too.
Updated by Matt Gold over 12 years ago
Okay -- thanks, Chris. Let's go with V6_2.png, then. I think it's a big improvement and I appreciate your work on this.
Updated by Chris Stein over 12 years ago
- File sitewide-footer-html-V2.html sitewide-footer-html-V2.html added
- File sitewide-footer-css-v2.html sitewide-footer-css-v2.html added
OK, sounds good. Attaching the revised CSS and HTML files. For the Commons logo I just used the same one as in the header (resized in HTML), the URL is absolute in the HTML, you may want to change it to relative. The cuny_white.gif is the same as above.
Updated by Matt Gold about 12 years ago
Updating this issue to make sure that our footer lists 24 campuses, not 23, per this ticket: http://redmine.gc.cuny.edu/issues/2115
Updated by Boone Gorges almost 12 years ago
- Assignee changed from Chris Stein to Dominic Giglio
- Severity changed from Normal to High impact
Dom, can you look at Chris's latest implementation, and port it over to our current mu-plugin?
Updated by Micki Kaufman over 11 years ago
Hi Dom:
Can you take a look at this issue and verify status? We'd like to include this in the new major release with minor text changes (eg 23-24 campuses) from Matt.
Updated by Dominic Giglio over 11 years ago
No prob, I'll take a look at this one again today. I reviewed it a few days ago, I don't think it'll be too difficult to get this into the next major release. I'll update in a day or two with either a resolution or status.
Updated by Boone Gorges over 11 years ago
- Estimated time set to 2.00 h
Dom, if you have a chance to get to this today, I can review it and put it into the 1.5 release. If not, I can try to do it myself tomorrow, though it looks as though it's going to take an hour of two of futzing around to integrate everything. Otherwise, we'll have to bump.
Updated by Dominic Giglio over 11 years ago
I agree, the futzing around inside the different parts of our footer is what I haven't been able to get too. I'll update you later today to let you know what I was able to do today or if I wasn't able to get to it. That way you'll know if you need to look into it tomorrow.
Updated by Dominic Giglio over 11 years ago
Boone,
I've gone back and re-read this thread to make sure I didn't miss anything. From what I can gather, Matt and Chris decided that Chris' "footerV6_2.png" version was they way they wanted to go. You can see that pic at this link:
http://redmine.gc.cuny.edu/attachments/download/746/footerV6_2.png
I agree, this footer looks really nice. I'm assuming that a resolution to this issue would require me to make small changes to both the bp-nelo theme's footer.php
as well as the code in /plugins/cac-sitewide-footer.php
to reflect the requested changes. I'm going to create a topic-branch off of master so you can review the changes before merging them into the 1.5 release.
But, before I start making these changes I just wanted to make sure I understood correctly; this issue has been running for quite a while and I don't want to go in the wrong direction. Does the info above sound correct to you? Would you rather I branch off of another line than master? This issue is requesting changes to both The Commons footer AND the sitewide footer, correct?
Let me know if I've missed anything or misunderstood any part of the request above. Once I've heard from you I'll make the changes using the files Chris has attached above and push the topic branch up to our repo tonight so you can review and merge it tomorrow.
Updated by Boone Gorges over 11 years ago
Hi Dom,
Yes, that's the correct design (footerV6_2.png). Please also note that Chris has shared his HTML and CSS http://redmine.gc.cuny.edu/issues/2000#note-20, which will probably do much of the work for you.
And yes, this is a change that needs to be made both in bp-nelo and in plugins/cac-sitewide-footer.php
Please do branch off of master; this'll become 1.5.
Thanks!
Updated by Dominic Giglio over 11 years ago
Awesome, I did see (and have already downloaded) Chris' HTML and CSS.
I'll make the changes and push up the topic branch tonight, then notify you here so you can review.
Updated by Dominic Giglio over 11 years ago
Boone,
I've pushed up the topic branch with the changes from Chris' HTML and CSS files. It's looking good. The white CUNY image is broken in local testing because it is trying to load it from the same location on the live site as the Commons logo. So that will stay broken until the next production deploy, but should work no problem after that.
Commit: https://github.com/castiron/cac/commit/300a22aa558ee9778466da2a7d918d4c005a10dc
Turns out the sitewide-footer plugin is loading it's CSS on all pages, so I've left the bp-nelo footer wrapped in a div with a class of sitewide-footer. This simplified the styling and ensures that the Commons footer and all other site wide footers look exactly the same. I think what we should do is either move this ticket to a 1.5.1 target to discuss further improvements and simplifications to the footer code or start a new issue. There are probably a few more things we could do to streamline the footer from bp-nelo to the sitewide plugin. I'm thinking a bunch of footer css in custom.css could probably be removed or merged with the CSS Chris included for the sitewide footer.
Let me know what you think.
Updated by Boone Gorges over 11 years ago
- Status changed from Assigned to Resolved
Thanks for doing the hard work here, Dom.
I made the following improvements:
- Fixed the asset links so they are dynamically generated based on current URL, instead of the hardcoded commons.gc.cuny.edu
- Reorganized things so that the sitewide footer is pulled from an mu-plugin
- Pulled the markup into a standalone template file at mu-plugins/assets/sitewide-footer.php
- Yanked the duplicate markup out of bp-nelo, so that everything is now being generated with the sitewide-footer.php template file
- Made some styling fixes to the footer so that it responds reasonably well to window width (though it's not totally perfect in cases where the theme itself is not responsive, like on the main Commons site)
The changes have all been merged into the master branch, and everything's been pulled to cdev to have a look at. Going to mark this one as resolved, and we can iterate with new tickets after the 1.5 release. Thanks again, Dom.
Updated by Dominic Giglio over 11 years ago
You're welcome. All of the improvements you made were the topics I thought we could move into the 1.5.1 target if we wanted to pursue them, but since you knocked them out, we don't need to.
I'd also like to thank Chris for his hard work as well. His HTML and CSS files made the job much simpler than a styling and layout redesign from scratch would have been.