By JohnnyHa on

Created a block with fields with Views 2. I know i can style every field but i want to remove a space.
I have:

Title
Node-Teaser

Node Link (Read more)

I want the link to appear right under node link, not space out an entire line. Not figured out how i would do this yet.

⋅ Categories: Drupal 6.x

Comments

shawn.sh’s picture

shawn.sh commented

You may be able to override a specific CSS rule to achieve this. It would be easier to help if you post the actual html/xhtml.

--
Shawn Gregg

gmndesign.com - portfolio
shalosophy.com - blog

JohnnyHa’s picture

JohnnyHa commented

Yeah i wonder where it gets it from. Because the style of the block is unformatted.

Here is my code in my page-node-id.tpl.php file which is my frontpage.

<div id="lastinterviews">
<?php $block = module_invoke('views', 'block', 'view', 'News-block_2');
print $block['content'];
?></div>

Not styled that div, just positioned it.
This calls out my block created within views.
Outputs the following:

Title
Teaser

Node Link

While i want it to list like this:

Title
Teaser
Node Link

Why is there a break between teaser and node link when there isnt between title and teaser :)

shawn.sh’s picture

shawn.sh commented

What I needed was the actual source of the page (not the tpl.php). If there isn't a <br /> between "Teaser" and "Node link" then the space could be caused by a CSS rule. You can then override the CSS rule that creates the space to remove it.

Also even thought the style is "unformatted" views still inserts

or tags depending on if the display is inline or not. You can remove/modify that extra markup by clicking on "Theme: Information" in the view and overriding the template files you see listed.

A tutorial on Views theming can be found here: http://www.mustardseedmedia.com/podcast/episode23

--
Shawn Gregg

gmndesign.com - portfolio
shalosophy.com - blog

JohnnyHa’s picture

JohnnyHa commented

Have checked every option with Theme Information and there isnt a break or anything there, so i dont know why it creates a space.

Here is the HTML for the page:

<span class="text"><a href="/dev/?q=node/12">Little Big Planet (PS3)</a></span></span>
  </div>
  
  <div class="views-field-created">
                <span class="field-content">02/08/2009 - 22:27</span>
  </div>
  
  <div class="views-field-teaser">
                <div class="field-content"><p>We have tested the next generation family game and we like what we see!</p>
</div>
  </div>
  
  <div class="views-field-view-node">
                <span class="field-content"><a href="/dev/?q=node/12">Read more</a></span>
  </div>
  </div>
    </div>

Ok i see it now, it creates a paragraph and that adds space before and after. But where do i override this ? Tried checking in Theme Information and none of the fields had paragraph. A CSS file that creates it ? hmm

JohnnyHa’s picture

JohnnyHa commented 
<div class="views-field-teaser">
                <div class="field-content"><p><span>Teaser text</span></p>
</div>
  </div>

Where on earth does it come up with using paragraphs ? Even spans. Cant find this class mentioned in views.css or my style.css for that matter.
In my HTML for the page it loads up tons of css files, but tried looking everywhere and cant find it. Seems like its not css that does this, but some other feature of Drupal that automaticly creates paragraphs. Tried removing page break from input filter but that didnt work either.

Such a small thing but yet THAT hard to do.

shawn.sh’s picture

shawn.sh commented

Hey Johnny

Sorry about getting back to you so late. Yeah views does that by default but you can control the way it looks ultimately through CSS. The paragraphs are ok, they are important, the actual problem is all the div tags but that's for another post.

Your best bet would be to edit the style.css stylesheet and override the css rule causing the problem. You can easily find the css rule that needs to be overridden using tools like firebug.

I can show you exactly what you need to do but I'll have to be able to take a look at your site.

--
Shawn Gregg

gmndesign.com - portfolio
shalosophy.com - blog

JohnnyHa’s picture

JohnnyHa commented

Ok just know its a work in progress ;)

http://www.glhf.no/dev

User: dev
Password: stealth

(Its ok to give out login info, no senstive information there anyways)

As you can see i have 4 boxes which is blocks created with views 2 with fields. And Title and Date is ok but Teaser and the Link has spaces which doesnt look good.
Let me know what you find out :)
I use FireBug myself but couldnt solve it.

shawn.sh’s picture

shawn.sh commented

Hey, not a bad design so far... Didn't need the login info...

This code in your css should reduce the space. You can adjust the size of the space by changing the 3px to something bigger or smaller. 

.teasertext p{margin:3px 0;}

You should also brush up on some css basics, a little css knowledge can go a long way with simple problems like this.

--
Shawn Gregg

gmndesign.com - portfolio
shalosophy.com - blog

JohnnyHa’s picture

JohnnyHa commented

I wish it was that easy, already tried with margins. Uploaded new style.css file with:
.teasertext {
margin: 0px 0;
}

Even entered it in a custom tpl.php file for the teaserfield also but nothing.
Tried clearing my cache and everything. My guess it has nothing to do with css, what i see Drupal do is add paragraphs which adds spaces automaticly. I bet its because that. Because if you see the html it surrounds the teasertext with paragraph. This is something i dont have at all in my css file or in my page at all. Have gone through every bit of small style with firebug tool to see whats going on but im clueless. Gone trough every bit of drupal css file that gets loaded also, nothing about paragraph.

I know its much to ask, but what if you made a custom block with fields title, teaser and link with Views ? You will get the exact same problem.

To customize a field in a block you can make a views-view-field-nameofview--block-id--teaser.tpl.php for example. In there by default it says print $output; I have surrounded this by the class .teasertext as you can see.

shawn.sh’s picture

shawn.sh commented

Hi John

I know this must be frustrating a bit. It's really a very minor problem. The problem is with <p> and it's default margins. You can easily fix this using CSS. You have to make the selector more specific to the <p> tag in order to override the default margins.

This is not specific enough

.teasertext {margin: 0px 0;}

This code that I gave you before is

.teasertext p{margin:3px 0;}

There is no need to attempt changing the structure.

JohnnyHa’s picture

JohnnyHa commented

Didnt see that :) This did the trick, i should have known this. Shame on me.
Thanks man! I owe you one ;)

shawn.sh’s picture

shawn.sh commented

No problem, glad I could help.

riddleyw’s picture

riddleyw commented

I'm having a similar problem. I want all the output from my view to appear in a single block of text w/no inserted line breaks. In the example below you'll see there are TWO problems...first views has inserted into the unformatted node output a "

" marker before the review field is output. This causes one line break. Then, the spans that surround the field seem to create another break. I've posted on this elsewhere, but I'm either not being clear or not finding the right person. I am hopeful you can help:

If you can solve this for me you will be putting me out of my misery...I've spent countless hours and can't figure it out.

Here's the problem. I have some html generated by a unformated node view 2...
I can't for the life of me figure out how to get the three fields that follow the review up onto the same line as the end of the review.

So here's what it looks like when I browse to the file:

Review:
now is the winter of our discontent made glorious summer by this son of york. now is the winter of our discontent made glorious summer by this son of york. now is the winter of our discontent made glorious summer by this son of york. now is the winter of our discontent made glorious summer by this son of york. now is the winter of our discontent made glorious summer by this son of york. now is the winter of our discontent made glorious summer by this son of york.now is the winter of our discontent made glorious summer by this son of york.now is the winter of our discontent made glorious summer by this son of york. now is the winter of our discontent made glorious summer by this son of york.
** Review_PostScript: THis is the postscrtipt Toll Free Phone: 800-555-5555

Here's what I want it to look like:
Review: now is the winter of our discontent made glorious summer by this son of york. now is the winter of our discontent made glorious summer by this son of york. now is the winter of our discontent made glorious summer by this son of york. now is the winter of our discontent made glorious summer by this son of york. now is the winter of our discontent made glorious summer by this son of york. now is the winter of our discontent made glorious summer by this son of york.now is the winter of our discontent made glorious summer by this son of york.now is the winter of our discontent made glorious summer by this son of york. now is the winter of our discontent made glorious summer by this son of york. ** Review_PostScript: THis is the postscrtipt Toll Free Phone: 800-555-5555 Website: www.drupal.org

Notice that the

seems to be making the body of the review start on a new line and then the spans force a new line after the

.

Since I'm using views2, I can't directly change the output of the html, can I? Perhaps there is a way to get the result w/o touching the html

Can you help me style my way out of the problem?

I've tried a couple of CSS rules, but I just can't figure it out. I tried inserting a line like this: 

p{margin:0px,0;}

but it didn't solve the problem. Here is the whole file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

  
 <style type="text/css">
<!--

.views-label-field-review-value {
	 display:inline;
	 float:left;
 } 

.views-field-field-review-value {
	 display:inline;
	 float:left;
 }
-->
</style>

</head>
<body>

   <span class="views-field-field-review-value">

          <label class="views-label-field-review-value">
        Review:
      </label>
                <span class="field-content"><p>now is the winter of our discontent made glorious summer by this son of york. now is the winter of our discontent made glorious summer by this son of york. now is the winter of our discontent made glorious summer by this son of york. now is the winter of our discontent made glorious summer by this son of york. now is the winter of our discontent made glorious summer by this son of york. now is the winter of our discontent made glorious summer by this son of york.now is the winter of our discontent made glorious summer by this son of york.now is the winter of our discontent made glorious summer by this son of york. now is the winter of our discontent made glorious summer by this son of york.<p></span>
  </span>
      **  
  <span class="views-field-field-review-postscript-value">
          <label class="views-label-field-review-postscript-value">
        Review_PostScript:
      </label>

                <span class="field-content">THis is the postscrtipt</span>
  </span>
  
  <span class="views-field-field-toll-free-phone-value">
          <label class="views-label-field-toll-free-phone-value">
        Toll Free Phone:
      </label>
                <span class="field-content">800-555-5555</span>
  </span>
  
  <span class="views-field-field-website-value">

          <label class="views-label-field-website-value">
        Website:
      </label>
                <span class="field-content">www.drupal.org</span>
  </span>
  

  


</body>
</html>
jainrutgers’s picture

jainrutgers commented

Try above code without using span tag. Span tag usually puts the line break before and after. I hope that will work.

thanks
Chetan

riddleyw’s picture

riddleyw commented

You're correct...if the span's are removed the block works fine...but how can I remove those spans from the output of the View? If it was my own code I would do just what you're suggesting. But I have no idea where to make this happen in Drupal. Likewise, the <p> code. Drupal put this stuff in, not me!

jainrutgers’s picture

jainrutgers commented

You can theme any views. On view page you will see a link which says Theme information. Google for how to theme the particular view. Its pretty easy.

Chetan