Basic ddblock with extra info looking messy [#617710]

I love this module from what i've seen it can do - thank you so much for it and thanks in advance for any help.

This is currently a test site on my local environment. Will upload to my host soon if it helps more.

I have basic ddblock which works nicely so I attempted to make one with 'extra info' as per the instructions. Attached is a pic of my unfortunate result. It scrolls as expected but the extra info obviously is not where it should be overlaying the photos etc.

I also place: stylesheets[all][] = custom/modules/ddblock/custom.css in the [theme].info file and makes no difference except to constantly having to clear the cache.

Also,

.ddblock-container h2 {
display:none important!;
}

in the style.css

but still always the same messed up result, with or without the above. I have also tried all the input formats including php with no difference.

Can someone please help (using newest version of Drupal 6) This is my code:

<div class="slides">
<div class="slide">
<div class="slide-text-left">
<div class="slide-title">
<h2>this is slide text for pic 1</h2>
</div>
<div class="slide-text">
<p>This is slide text for pic 1.</p>
</div>
<div class="slide-read-more">
<h4><a href="/node/2">Read more...</a></h4>
</div>
</div>
<div class="slide-image"><img src="http://localhost/whataboutlife/sites/default/files/1.jpg" /></div>
</div>
<div class="slide">
<div class="slide-text-left">
<div class="slide-title">
<h2>Slide Pic No 1</h2>
</div>
<div class="slide-text">
<p>this is slide text for pic 2.</p>
</div>
<div class="slide-read-more">
<h4><a href="/node/1">Read more...</a></h4>
</div>
</div>
<div class="slide-image"><img src="http://localhost/whataboutlife/sites/default/files/2.jpg" /></div>
</div>
</div>

Comment	File	Size	Author
#6	display.JPG	14.08 KB	newbie66
	DDBlock_Display.JPG	37.97 KB	newbie66

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

ppblaauw CreditAttribution: ppblaauw commented 29 October 2009 at 08:39

Status:

Active

» Postponed (maintainer needs more info)

The attached code is Ok.
When you say the slideshow is sliding the settings in the ddblock configuration page are also Ok.

So the issue seems to be the custom.css stylesheet not being used.

When changing a .info file in a theme you need to refresh the theme registry.
This can be done by clearing the cache at administer > site configuration > performance
or by going to the themes configuration page.

Another cause can be that the stylesheet is not placed at: custom/modules/ddblock/custom.css within your theme or that there are no read permissions for the file at filesystem level.

Yet anouther cause can be that you have CSS aggregation enabled at administer > site configuration > performance. don't use this when the site is still in development

Hope this helps you further, please let me know.

Could you have a look at the source of the page if the custom.css stylesheet is used.
please attach the source code of the page, so I can help you better.

Comment #2

newbie66 CreditAttribution: newbie66 commented 29 October 2009 at 22:27

fantastic! but new problem now and hoping for another simple resolution

thank you for your quick and easy to understand response. It seems i was indeed missing the 'custom' folder and had placed the custom.css file as [theme]/modules/ddblock/custom.ss instead. So now ddblock with extra info is looking perfect with this code: stylesheets[all][] = custom/modules/ddblcok/custom.css in the [theme].info file

but when this code is in the [theme].info file it creates the problem of losing all my other css.

The steps i took are:
1. added the above code to the .info file
2. saved file
3. navigated to administer > site configuration > performance
(site still working fine so far)
4. click 'clear cached data'

now all other css gone and won't come back until i remove the above code out of the .info file again but of course, doing that messes up my ddblock once more.

Performance settings are as follows:

Caching mode: Normal
Minimum cache ifetime: None
Page Compression: Enabled
Block Cache: Enabled
Optimize CSS files: Disabled
Optimize JavaScript files: Disabled

This is the custom.css file as requested:

/*!
 * Dynamic display block module - basic slideshow with extra info - Cascading Style Sheet 
 * Copyright(c)  2009 P. Blaauw All rights reserved. 
 * Version 1.0 (09-AUG-2009) 
 */ 
#ddblock-2 .node h2{
  visibility:hidden; /* to hide the block title*/
}

#ddblock-2 .ddblock-container{
  height:450px!important; /* to make space for block title and posted by information */
}

#ddblock-2 .slides{
  background:#cccccc;
/*  height:400px; /* same a image height setting in config page*/
  margin-top:-30px; /* to fill the block title space */
  position:relative; /* keep this to relative */
/*  width:592px; /* same a image width setting in config page*/
}

#ddblock-2 .slide-title {
  margin:0;
	padding:0;
}

#ddblock-2 .slide-title h2 {
	color: #fff;
	font-weight:bold;
  visibility:visible;
}
#ddblock-2 .slide-title h2 a {
	color: #fff!important;
}
#ddblock-2 .slide-title h2 a:hover {
	color: #fff!important;
}

#ddblock-2 .slide-text-left {
  background:transparent url(images/transparent_bg.png) repeat scroll 0 0!important;  
	float: left;
  height:280px; /* image height - padding top and padding bottom in .slide-text-left*/
  left:10px;
	margin: 3px 0 0 3px; /*3px 0 0 3px to adjust for border and padding from javascript,  put margin to 0 if borders and padding from javascript are not used*/
	padding: 10px 0 10px 10px;
  position:absolute;
	width: 150px;
}


#ddblock-2 .slide-text{
  margin:0;
	padding:0;
}

#ddblock-2 .slide-text ul {
  margin:0!important;
}

#ddblock-2 .slide-text li {
	color: #fff;
}
#ddblock-2 .slide-text p {
  font-family:verdana,arial,sans-serif;
	font-size: 9pt;
	line-height: 15px;
	color: #fff;
	margin: 0;
	padding: 0;
}

#ddblock-2 .slide-read-more a{
  background:url(images/readmore.png) no-repeat;
  border:none;
  bottom:5px;
  color:#fff!important;
  font-size:14px;
  font-family:times New Roman;
  margin:0;
  padding:4px 0 4px 19px;
  position:absolute;
  text-decoration:none!important;
  text-align:left;
  width:100px;
  right:0px;
}

#ddblock-2 .slide-read-more a:hover{
  background:url(images/readmore-hover.png) no-repeat;
  color:#fff!important;
  text-decoration:underline;
}

#ddblock-2 .slide-image {
	margin: 0;
	padding: 0;
  /*border-left: 1px solid #B0B0B0;*/
}

#ddblock-2 .slide-image img {
	border: 0;one important!;
}

Thank you in advance again for your great help and awesome module.

Comment #3

ppblaauw CreditAttribution: ppblaauw commented 30 October 2009 at 01:29

Can you attach your [**theme**].info file.
This should work.

stylesheets[all][] = custom/modules/ddblock/custom.css

Should add this stylesheet, not replace your existing stylesheets.

Comment #4

newbie66 CreditAttribution: newbie66 commented 30 October 2009 at 03:04

Cheers, thank you, here it is

; $Id: theme299.info,v 1.4 Cowboy Exp $
name = theme299
description = this template is made by template-help.com.
version = 6.14
core = 6.x
engine = phptemplate

version = "6.14"
project = "drupal"
datestamp = "1202913006"

php = DRUPAL_MINIMUM_PHP

regions[left] = Left sidebar
regions[right] = Right sidebar
regions[content] = content
regions[footer] = Footer
regions[custom] = Custom

stylesheets[all][] = custom/modules/ddblock/custom.css

Comment #5

ppblaauw CreditAttribution: ppblaauw commented 30 October 2009 at 03:31

Ok, see now what is wrong.

When your theme did not add stylesheets through the .info file it uses style.css by default.
When you add now

stylesheets[all][] = custom/modules/ddblock/custom.css

the theme-system finds this in the .info and does not use the style.css by default anymore.

You need to add your standard stylesheets also:

So it would become:

; custom stylesheets
stylesheets[all][] = custom/modules/ddblock/custom.css

; standard stylesheets
stylesheets[all][] = style.css
stylesheets[print][] = print.css

a semicolon (;) is used for adding comments in an .info file

Will add this information also to the tutorial

Hope this helps you furher, please let me know.

Comment #6

newbie66 CreditAttribution: newbie66 commented 30 October 2009 at 04:28

File	Size
display.JPG	14.08 KB

ooooo - we are so close!

okay that gives me all css - excellent - thank you so much for all your help - but attached is the result I'm getting now. As you can see, it appears to be working wonderfully but has changed size.

Comment #7

ppblaauw CreditAttribution: ppblaauw commented 30 October 2009 at 04:54

In the configuration page of the block you can set the height and width for the image in the slideshow.

In the CSS (custom/modules/ddblock/custom.css) you can also set the height and width for the slider.

#ddblock-1 .slides{
  background:#cccccc;
/*  height:400px; /* same a image height setting in config page*/
  margin-top:-30px; /* to fill the block title space */
  position:relative; /* keep this to relative */
/*  width:592px; /* same a image width setting in config page*/
}

Hope this helps you further, please let me know.

Comment #8

newbie66 CreditAttribution: newbie66 commented 30 October 2009 at 05:29

Thanks for quick replies :)
I already tried changing the size in the Block config page and the custom.css as suggested but neither made any difference.

Please note my settings in block config:
Container settings - Height 0 Width 0
Image Settings - Height 500 Width 700
Pager Settings - Height 25 Width 195

These settings were the same prior to changing the .info file with the code to give all the css so I try to make the heights and widths larger now to test but the display remains the same. Sorry to give you more problems.

Edit:

The problem seems to be with the height - i just now try reducing size to 200 x 200 and the width does change but not the height.

Comment #9

newbie66 CreditAttribution: newbie66 commented 30 October 2009 at 05:32

okay wait - you have indeed solved this for me - i just checked the custom.css and the height and widths for #ddblock-2 .slides were commented out. deleted /* and now ok.

Thank you for a great job, great documentation, great support and great module! You're awesome!