Posted by sinasalek on March 16, 2010 at 8:27am
4 followers
| Project: | RootCandy |
| Version: | 6.x-1.x-dev |
| Component: | Code |
| Category: | feature request |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | active |
Issue Summary
Styles in various locations like Tables and Edit forms are uncool.
I recommend this http://icant.co.uk/csstablegallery/ for tables
We might also be able to borrow some styles from other themes.
I noticed that you sell style separately, so i wanted to know if me or someone else add more professional looking default styles will you commit it?
PS : Thanks for this useful theme, i really like it.
Comments
#1
The styles are not being sold separately!
I wonder what changes would you make, I have some changes prepared, however would love to see what/how would you change it. Any suggestions?
#2
Have you committed those changes? if so then i think i should try the dev release.
PS : Oh sorry , i checked your site that's why i said that.
#3
I just tested the dev and it's the same (I cleared the cache)
Please have a loot the attached image to see what i mean.
- Tables have no header style, background colors make reading the text difficult, cells don't have any padding, etc
- Blocks have almost no style
- Forms could have much better style specially fieldsets
- Breadcrumb is a bit difficult to spot
PS: Styles offered by cleanr,seven and other admin themes are quite good. with a little modification i think it's possible to adopt them here as well.
#4
#5
Can I suggest a simple change to make tables more readable?
Make the text align to top of cells
This means where cell contents increase the depth of a row, the main 'label' for the row is visible at the top, rather than half way down.
td, th {padding: 0;
line-height: 2em;
vertical-align: top; /* Added to make all text align to top of table cells -- more readable */
}
I've adapted the rootcandy styles.css to do this. It would be great if this was adopted for future upgrades.
#6
We can borrow some ideas from cleanr module
http://drupal.org/node/640286
#7
ok, had a play with tables, here are some screenshots and already committed the code so you can have a play with dev version once its updated
will tweak the dark version too, then will be able to mark this as fixed tho
thanks for inspiration!
module page screen shot: http://www.flickr.com/photos/30032901@N04/4546966240/sizes/o/
#8
and here is the rootcandy dark,
http://www.flickr.com/photos/30032901@N04/4547023554/sizes/o/
I am quite happy with it, feel free to re-open or comment!
Thanks
#9
Oh, that's great and looks nice @sign thanks. I have done some modification on block and text styles and i can send the style if you find it useful. I also think that by using CSS3 it can look much more beautiful you should be able to see the shadows , gradient and round corners i used for labels
Have a look :
http://files.salek.ws/temp/snapshot2.png
http://files.salek.ws/temp/snapshot3.png
#10
#11
Yeah, sign, looks like we are gonna keep this one going for a while.
It looks good. Thanks for what you've done.
I downloaded 6.x-1.x-dev and there are improvements I think are great:
I wish we still had:
Also - in places there is a problem with small light grey text on a light blue background (e.g. form item descriptions); suggest you make it darker grey (#666666) and therefore easier for people to read.
My original request for the table rows/cells to text-align top still stands. Here's an image attached to illustrate the problem, when I'm looking at data with site documentation module.
You might have guessed - I see beauty where I see usability :)
#12
committed small table style changes
* changing the description color to #666
* odd and even rows in base colour scheme
@eff_shaped - I understand your comments about valign top of td cells, but I am not sure atm. Out of the box, drupal doesnt have many tables like that (if any) and then, it is pretty ugly like on Themes page, where the form items are on top, not looking great, however I understand for tables like you were showing it is usable. need to make a decision :)
#13
@sinasalek thanks for these screenshots, although I think it will be maybe too css3 overused? so less readable?
#14
Yes you're right, i didn't play with it too much just wanted to show off how beautiful it can be with a bit of effort :) but it's not difficult to make something in between. Yours actually looks better than mine.
#15
@sign , Thanks the new release is beautiful :)
Here is my 2 cent :)
Improving blocks style : http://files.salek.ws/temp/snapshot3.png
style.css
.block .content {...
padding:5px;
}
rootcandy_dark/dark.css
.block {
overflow:hidden;
margin-bottom:5px;
border-top:1px solid #A7A7A7;
padding:0px;
}
.block h2 {
margin:0px;
margin-bottom:5px;
background: url("images/navigation_bg.png") repeat-x scroll center bottom #B2C8D3;
padding:5px;
}
Increasing the space between title and breadcrumb header and the content : http://drupal.org/files/issues/Forms.jpg
style.css
#content-wrap {...
padding-top:10px;
...
}
Better default font-family for rtl languages
style-rtl.css
body, p, div, span, td, th, input, select, textarea, h1, h2, h3, h4, h5, h6 {font-family:Tahoma,Arial,Helvetica,sans-serif;
}
#20
#23
(spelling fix in title for search) (subscribing)