View Slide show, eliminate title & generated system name

By Peters on 28 Nov 2012 at 15:48 UTC

Hi all!

I have just seen a nice tutorial on View Slide show: http://www.ostraining.com/blog/drupal/views-slideshow-in-drupal-7/

BUT, of course a slideshow generally is shown on the main page without any text, especially not needed is the node title or
automatically generated system_name.

How to hide these?

ps, I just installed a "Automatic Nodetitles" but that didn't do the trick.

Thanks ahead!

Peters

Comments

---

cfox612 commented 28 November 2012 at 18:35

In your content type in the "manage display" tab you should be able to set the title to "hidden".

It's the label of the title

Peters commented 28 November 2012 at 21:30

It's the label of the title field which seems to be required at all times

It comes with a red * at the right corner and has to be filled in

Issue solved with the

Peters commented 29 November 2012 at 00:50

Issue solved with the http://drupal.org/project/exclude_node_title module

;)

What content do you have in

Dollowmite commented 30 November 2012 at 15:42

What content do you have in the Fields of your View? If you you click on the Fields content in your Views there is a box that says Label. Is that checked?

=-=

vm commented 29 November 2012 at 16:21

yes all nodes require titles for storage in the database

elements on a page can be hidden with CSS using display: none;

Does this delete the space

Peters commented 29 November 2012 at 17:24

Does this delete the space reserved for the title as well or does it just hide the title?

depends on which element the CSS is used on and how the theme is built. if the h1 (which is what node titles typically are) is targeted the entire h1 element should be hidden. testing will provide more knowledge.

Can also utilize http://drupal.org/project/title which turns the title into a move able field, thus you can move it to disabled in manage display

I just checked with firefox

Peters commented 29 November 2012 at 18:54

I just checked with firefox that this is the information of the node, I guess the issue is on the 3rd line, correct? (h2..)

  <div class="views-slideshow-cycle-main-frame-row-item views-row views-row-0 views-row-first views-row-odd">
  <div id="node-57" class="node node-slide" about="/drupal/node/57" typeof="sioc:Item foaf:Document">

  
        <h2 property="dc:title" datatype=""><a href="/drupal/node/57"></a></h2>
    
  
  <div class="content clearfix">
    <div class="field field-name-field-slide-img field-type-image field-label-hidden"><div class="field-items"><div class="field-item even"><a href="/drupal/node/57"><img typeof="foaf:Image" src="http://www.gaudimodels.com/drupal/sites/default/files/styles/slide_img/public/slide-2_0.jpg" alt="" height="250" width="850"></a></div></div></div>  </div>

  <div class="clearfix">
          <div class="links"></div>
    
      </div>

</div></div>

By the way, where is this code installed?

=-=

vm commented 29 November 2012 at 23:08

much of the html is output through the tpl.php file of the theme. the content is output through variables in the tpl.php files.

Can't find this back in any

Peters commented 30 November 2012 at 13:22

Can't find this back in any file :/

=-=

vm commented 30 November 2012 at 13:37

because it's content output by the views slideshow module it's output through the content variable. I highly suggest spending time with the theme developers guide in the documentation section.

what are you trying to do? If this is still with working with CSS you don't need to alter the HTML, just understand it. I highly suggest htmldog.com to use to better grasp CSS. I also highly suggest learning to work with chromes developers tools, or the firebug addon for firefox to aid in understanding and working with CSS.

Yes VM, I am slowly getting

Peters commented 30 November 2012 at 13:43

Yes VM, I am slowly getting on my way on learning more about all these issues.

But the only thing I need here is to have a slideshow without any white spaces.
Now I am stuck with a white space above the slides and can't get rid off it.

The node title is hidden but the space is still there

=-=

vm commented 30 November 2012 at 14:39

You don't link screenshots. you don't link to the site. you don't show any CSS code. Thus making it difficult to help you with specificity. For example? why not use a block instead of page display to place the slideshow in?

as can be clearly seen in the HTML you pasted above:

<h2 property="dc:title" datatype=""><a href="/drupal/node/57"></a>

it looks like it hid the text only as the h2 element is still being constructed without any linkable text. Thus you would need to utilize CSS to hide the h2 element in question

If you have no desire to learn how to work with CSS, you were offered another module called the title.module which integrates titles with the fields api in drupal 7 and allows you to move the field from display in the manage display tab of the content type.

Hi VM, I thought I already

Peters commented 30 November 2012 at 17:23

Hi VM,

I thought I already sent you the link before..
Here it is: http://www.gaudimodels.com/drupal/

I used the code given by "Dollomite" (see below)
It worked almost 100%. A fine line is left..

My great desire is to have complete knowledge about CSS and I am learning every day.
Meanwhile I'm learning I wish to continue constructing the page

Your assistance is highly appreciated!

Kind rgs,
Peters

=-=

vm commented 30 November 2012 at 18:44

after seeing the site, you did send it to me before to help with CSS and block placement from another issue. However, when you need CSS help you should link to the site and illustrate what CSS you are trying to manipulate.

Kick it off the

Dollowmite commented 30 November 2012 at 15:47

Kick it off the screen

#node-57 h2  {
	position: absolute;
	top: -9999px;
	left: -9999px;
}

Hi Dollowmite, thanks for the

Peters commented 30 November 2012 at 17:20

Hi Dollowmite,

thanks for the code, did the job...almost! ;)

There's a fine line left, I think about 2px

Here you see the result:
http://www.gaudimodels.com/drupal/

lol, you have a white border

Dollowmite commented 30 November 2012 at 18:21

lol, you have a white border around both your slider and header. Remove it and your golden

still 1px

Peters commented 30 November 2012 at 20:22

Hey Dollowmite!

I got rid off 1px border but the other one which has to be #header-menu is still there...

#header-menu { clear:both; }

I added: border:0; and border:none; but still there...
Actually I added "border:0" on many header-menu's but nothing

If you have a minute?
http://www.gaudimodels.com/drupal/sites/all/themes/corporateclean/style.css

=-=

vm commented 30 November 2012 at 21:59

because border: 0 isn't correct in this situation. The following will explain why:

the definitions for the element is:

#header-menu {
background: #3B3B3B;
border-top: 1px solid white;
border-bottom: 1px solid white;
}

it's using a border top and border bottom.
Thus your override needs to be constructed like:

#header-menu {
background: #3B3B3B;
border-top: 1px solid white;
border-bottom: 0;
}

which removes the border-bottom from the #header-menu

the border definition you were trying to use would only work if #header-menu was using border but it isn't.

Hi VM, Where are these lines

Peters commented 30 November 2012 at 22:40

Hi VM,

Where are these lines from?

#header-menu {
background: #3B3B3B;
border-top: 1px solid white;
border-bottom: 1px solid white;
}

Can't find them in the css file...

color.css

mcfilms commented 30 November 2012 at 23:11

These lines are in colors.css. But before going in there and hacking that css, the "Drupal way" would be to impose your css over that so it doesn't get lost when you upgrade a module or theme. So in the styles.css file you are editing, put in what VW wrote but change the last line to border-bottom: 0 !important;

_{A list of some of the Drupal sites I have designed and/or developed can be viewed at motioncity.com}

Thanks VM for the lines and

Peters commented 30 November 2012 at 23:41

Thanks VM for the lines and thank you Jerry for the !important ;)

Have a good night!

Your problem is come coming

Dollowmite commented 3 December 2012 at 15:25

Your problem is come coming from site/default/files/color/corporateclean-7c104649/colors.css remove border-bottom: 1px solid #FFFFFF; from #header-menu

Use fields

mcfilms commented 30 November 2012 at 17:23

@Peters, it sounds like you are doing a slide show of full nodes and then trying to hide the title and label. If I understand that right, you might want to consider a slideshow of fields. Then you can select the specific fields you want and slideshow them.

To get rid of the white space, you can create an image preset that scales and crops all the images to fit in your slideshow viewing area. Here is an example slideshow I just did that uses two sized of images and rolling over the small image loads it into the viewer: http://shopbornandraised.com/lookbook.

Hope that helps!

Jerry

_{A list of some of the Drupal sites I have designed and/or developed can be viewed at motioncity.com}

That's a nice looking

Peters commented 1 December 2012 at 11:15

That's a nice looking slideshow Jerry!

=-=

vm commented 30 November 2012 at 18:46

it should also have been able to be accomplished with:

#node-57 h2 {
display: none;
}

I tried that first, but it

Dollowmite commented 30 November 2012 at 18:53

I tried that first, but it didn't work. There was an empty box there. So kicking it off the screen was my next choice.

Next time

cfox612 commented 30 November 2012 at 18:58

you should consider doing the slideshow with fields as mcfilms suggested. This way you can choose exactly which fields to display (for instance just the image). It would save you loads of time hunting through your CSS!

todays the day

mcfilms commented 30 November 2012 at 20:21

Honestly I think s/he should take the hour to learn it now. It would negate the need for rendering something and then pushing it off screen. Bonus: it will prove to be a useful skill in the future.

_{A list of some of the Drupal sites I have designed and/or developed can be viewed at motioncity.com}