I am looking for styling ideas. Currently there's teaser content that's being added to a page. The current content looks like this:

https://drive.google.com/file/d/0B7Hr9Lrku-CxdTR3cnJvYm9NbXc/view?usp=sh...

They want it styled like this:

https://drive.google.com/file/d/0B7Hr9Lrku-CxNWs0WWNJdDhSZDg/view?usp=sh...

I styled what you see in the 2nd image above but another Drupal colleague told me that the way I'm doing it is wrong - what I did was I hand-coded the waves image and text in the summary/teaser section of the page. I also added some DIVs in there and then styled it with those DIVs. He said don't do it this way because it may mess up maintenance of the site later and so on.

Instead, he said just style it based on the tags and classes that Drupal is generating. So here is the code and I'm wondering if someone can tell me how to get rid of the captions, make the image smaller and then move the text over to the right and not wrap (like you see in the 2nd image above):

<div class="field-slideshow field-slideshow-4 effect-fade timeout-4000 with-pager with-controls" style="width:220px; height:137px">
          <div class="field-slideshow-slide field-slideshow-slide-1 even first">
        <a href="assessment.html"><img class="field-slideshow-image field-slideshow-image-1" typeof="foaf:Image" src="myimage.jpg" width="220" height="137" alt="The alt text" title="The title text" /></a>                  <div class="field-slideshow-caption">
            <span class="field-slideshow-caption-text">The caption text for the photo</span>
          </div>
              </div>
      </div>
</div>
</div>  </div>  
  <span class="views-field views-field-title">        <span class="field-content"><a href="assessment.html"><h3>Assessment</h3></a></span>  </span>  
  <div class="views-field views-field-body">        <div class="field-content"><p>This is the that needs to appear to the right of the small thumb photo and it cannot wrpa and mus stay in a small column like the photo image seen above.</p>
</div>  </div>  </div>
    </div>

Comments

VM’s picture

The title doesn't seem to have anything to do with the question you are asking.

Please do not duplicate posts on durpal. org. The above is a duplicate of https://www.drupal.org/node/2463095