By DollarSign on

I had a buddy of mine ask me if I could make him some common styles for his display suite layouts because he is not to handy with CSS, and it turned out pretty slick so I figured I would share it with whoever wants it. Basically what it does is some common things that you might want fields to do when they are in the same sections in display suite. I suppose it is a sort of display suite for display suite... sort of... whatever. here it is, I hope this helps somebody out somewhere.

Download Here:
http://rapidshare.com/files/379430629/Common_DS_Styles.zip.html
http://www.mediafire.com/download.php?pmsbwhfhg9fxwhd

Code and How to Install:

1) Copy either:

ds_styles_min.css
		ds_styles.css

into your theme's root directory (usually /sites/all/themes or /themes/).

2) Add one of the following (depending on which you chose above) under the stylesheets section of the theme's ".info" file:

stylesheets[all][] = ds_styles_min.css
		stylesheets[all][] = ds_styles.css

3) Go to: "?q=admin/ds/layout/styles" and paste in the following styles:

STYLE_float_left|FLOAT:LEFT
STYLE_float_right|FLOAT:RIGHT
STYLE_img_float_left|IMG:FLOAT:LEFT
STYLE_img_float_left_scale300|IMG:FLOAT:LEFT:SCALE:300
STYLE_img_float_left_scale150|IMG:FLOAT:LEFT:SCALE:150
STYLE_img_float_right|IMG:FLOAT:RIGHT
STYLE_img_float_right_scale300|IMG:FLOAT:RIGHT:SCALE:300
STYLE_img_float_right_scale150|IMG:FLOAT:RIGHT:SCALE:150
STYLE_author_float_left|AUTH:FLOAT:LEFT
STYLE_date_float_left|DATE:FLOAT:LEFT
STYLE_width_300|WIDTH:300
STYLE_width_150|WIDTH:150

ds_styles_min.css:
.STYLE_float_left, .STYLE_float_left * {float: left;padding-right: 15px;}.STYLE_float_right, .STYLE_float_right * {float: right;padding-left: 15px;}.STYLE_img_float_left img {float: left;padding-right: 15px;}.STYLE_img_float_left_scale300 img {float: left;max-width: 300px;max-height: 300px;height: auto;width: auto;padding-right: 15px;}.STYLE_img_float_left_scale150 img {float: left;max-width: 150px;max-height: 150px;height: auto;width: auto;padding-right: 15px;}.STYLE_img_float_right img {float: right;padding-left: 15px;}.STYLE_img_float_right_scale300 img {float: right;max-width: 300px;max-height: 300px;height: auto;width: auto;padding-left: 15px;}.STYLE_img_float_right_scale150 img {float: right;max-width: 150px;max-height: 150px;height: auto;width: auto;padding-left: 15px;}.STYLE_author_float_left {float: left;padding-right: 7px;margin-right: 7px;border-right: 1px solid #D6D6D6;padding-top: 0px;padding-bottom: 0px;}.STYLE_date_float_left {float: left;padding-right: 7px;margin-right: 7px;border-right: 1px solid #D6D6D6;padding-top: 0px;padding-bottom: 0px;}.STYLE_width_300, .STYLE_width_300 * {width: 300px;height: auto;}.STYLE_width_150, .STYLE_width_150 * {width: 150px;height: auto;}

⋅ Categories: Drupal 6.x

Comments

nevets’s picture

nevets commented

You might want to provide a link to a page that demonstrates the layout.

DollarSign’s picture

DollarSign commented

I was just thinking I should do that. There is a nice readme file in the zip that explains everything, but his site isn't live so I can't really show you a link, but here is a screenshot of an example of the settings and what the output would be:

http://img682.imageshack.us/img682/7967/exampleuq.png

Also, below are the descriptions copied out of the README.txt file in the zip:

Style Descriptions
				
FLOAT:LEFT
----------
Applying this style will float the field left and give it
15 pixels of padding on the right

FLOAT:RIGHT
-----------
Applying this style will float the field right and give it
15 pixels of padding on the left

IMG:FLOAT:LEFT
--------------
Applying this style will float the image to the left and
give it 15 pixels of padding on the right

IMG:FLOAT:LEFT:SCALE:300
--------------------
Applying this style will float the image to the left, and
make the image be a maximum of 300x300 pixels
automatically scaling up to that amount and adds 15 pixels
of padding to the right side.

IMG:FLOAT:LEFT:SCALE:150
--------------------
Applying this style will float the image to the left, and
make the image be a maximum of 150x150 pixels
automatically scaling up to that amount and adds 15 pixels
of padding to the right side.

IMG:FLOAT:RIGHT
--------------
Applying this style will float the image to the right and
give it 15 pixels of padding on the right

IMG:FLOAT:RIGHT:SCALE:300
--------------------
Applying this style will float the image to the right, and
make the image be a maximum of 300x300 pixels
automatically scaling up to that amount and adds 15 pixels
of padding to the left side.

IMG:FLOAT:RIGHT:SCALE:150
--------------------
Applying this style will float the image to the right, and
make the image be a maximum of 150x150 pixels
automatically scaling up to that amount and adds 15 pixels
of padding to the left side.

AUTH:FLOAT:LEFT
---------------
Applying this style will float the author field to the left
and add 7 pixels padding and 7 pixels margin to the right side
and then a 1 pixel border creating the illusion of a seperator.

DATE:FLOAT:LEFT
---------------
Applying this style will float the date field to the left
and add 7 pixels padding and 7 pixels margin to the right side
and then a 1 pixel border creating the illusion of a seperator.

WIDTH:300
---------
Applying this style will add a width property of 300 pixels
and set the height to auto for proper scaling.

WIDTH:150
----------
Applying this style will add a width property of 150 pixels
and set the height to auto for proper scaling.
m_i_c_h_a_e_l’s picture

m_i_c_h_a_e_l commented

This sounds like something I wish was in core. I'll try it out and report.

bewhy’s picture

bewhy commented

Hey, I agree that some styles 'should' be in core. however, not necessarily these particular styles. The possibility of customizing these is in core, which is great.

What I would like to be in core are a few basic styles: bold/ bold 1.5em . . . minor variations that we'd want to see on particular fields.

I don't like any site where I don't have admin menu

kpojeta’s picture

kpojeta commented

Thanks for sharing this! I tried downloading from your link but it's reached 10 downloads on rapidshare and is locking anyone else from downloading. Any other way you can share?

DollarSign’s picture

DollarSign commented

Everything you should need is in the first post. The only file you would need to download would be the stylesheet, but I pasted the contents of it above, so you could just copy and paste that into a blank css file.

And just to clarify, you need to know how to use Display Suite in order for any of this to work, and it is sort of a "hacky" way of doing things, should probably use imagecache and then add css to the theme, but sometimes being lazy is more fun. I MIGHT think about making this into a module. We will see :) If I do, I will post it here.

fehin’s picture

fehin commented

subscribing

derawal74’s picture

derawal74 commented

Hi I can't download zip file as its removed, please upload and post link.
Thanks

DollarSign’s picture

DollarSign commented

http://www.mediafire.com/download.php?pmsbwhfhg9fxwhd

bewhy’s picture

bewhy commented

Thanks a million for this post!

I've been trying to figure this out for a little bit (well, more like wondering and thinking than actively trying, even though "there is no try there is only do"), and I don't remember any of the tutorials saying exactly where to match up the styles.

I'm a rookie themer and have very experience in modifying .tpl files and the like, so Display Suite was my hero until I couldn't find/figure out where to modify each field. . . thanks to you, it is now my hero all over again!

I don't like any site where I don't have admin menu

dddave’s picture

dddave commented

This is an awesome resource that taught me a lot. Using css to size images is indeed far from best practice but that is something easily changed. Your stuff really helped me. Thank you for sharing.

ButterFly-2’s picture

ButterFly-2 commented

Hi this is an extremely helpful post. I clicked on the above file to download it. I was taken to a page that says the file is no longer available? What am I doing wrong?

Thanks for your help.

You can ignore the above comment. I did some more reading on this link and found that you or someone had placed the download link in a different location at http://www.mediafire.com/?pmsbwhfhg9fxwhd

Thank You I successfully downloaded the zip file.

smerth’s picture

smerth commented

Display Suite is such a nice piece of work. I find Panels to be overkill for alot of what I want to do and I find making up lots of template files really tedious. Display Suite really fills a niche. However in D6, out of the box it lacks a variety of standard layouts (in D7 its really cool, with more standard layout and nicer interface - but then everything about D7 is just super!)

Your post really helps to fill in the layout gap in Display suite and show how to do your own layouts for DS!

THANKS

Kreativs’s picture

Kreativs commented

Hi !

The download link seemes dead, can you create a new download link ?

Thank you

Tokoh’s picture

Tokoh commented

Firstly I'm using d7, and although this is an old thread it provides the only instructions I can find about stylesheet location under ds.
I've created a simple class specification and put it into a style sheet.
I then referenced the class from the ds styles setting and then used this in the extra classes for region dropdown and applied it to a region for my layout.
But I couldn't see the effects (specification, ie background-color: green;) of my class.
I used firebug and found that the named class I defined in ds is getting into the html, but it looks like it doesn't find the specification.
So I moved the specification around. I moved it into styles.settings.css. I put it into its own .css file and notified the theme using stylesheets[all][] spec in the theme's .info file. But it never seems to see it.
The only time the html can find the style's specification is if I include it in the ds layout's css file at /sites/all/modules/ds/layouts/ds_2col_stacked/ds_2col_stacked.css.

One complication here may be that I'm using a subtheme, at-commerce under adaptivetheme.

Obviously this is far from ideal, so where should I put it and are there any special settings needed?

nevets’s picture

nevets commented

When you add a css file to an .info you need to clear the theme registry for the change to have an effect.

Tokoh’s picture

Tokoh commented

I have found my problem.
I was caused by looking at views preview rendering of ds without the view being saved.
If you are working on a view and using ds to change the layout and reviewing your work using the views previewer then the rendered output of ds will not use the normal stylesheet paths. That is, only the ds templates will be used to provide styles.
However, when the view is saved and the then viewed through normally rendered browser pages then the normally used stylesheet paths are used.