By dresde on

Hello,

With VIEWS module I have created a page were to promote the content of my custom type of content. It really works, but I can't find the way to edit the layout. I just want to be able to change the font size and colors, text aligns.... so I'm trying with the templates, as I read in the theing information that the module itself gives. But it just doesn't work that easy. I can't "tell" views to use the tempate views-view-fields--customview.tpl.php instead of views-view-fields.tpl.php, and even when creating the template I'm not pretty sure how to make it work somehow like

here goes the title for first node
here goes my own CCK field "A"
here goes my own CCK field "B"
here goes the teaser of the node

HORIZONTAL BAR

here goes the title for secon node
here goes my own CCK field "A"
here goes my own CCK field "B"
here goes the teaser of the node

PLease, can anyone give me a hand with this? This weeks they are pushing me to learn all this stuff, and I love it but is a bit overloading.

⋅ Categories: Drupal 6.x

Comments

nickbits’s picture

nickbits commented

Hi,

Is it the layut you want to change or the formatting (i.e. do you want to move things around or just change colours and fonts)?

If it is the latter, just use CSS. You should find, if you look at your HTML output, where the view starts you have something like:

<div class="view view-Directory view-id-Directory view-display-id-page_1 view-dom-id-1">

All you would need to do us use view-Directory or view-id-Directory. So for example to make all paragpraphs in that view have a red abckground and white text you would have in your CSS:

.view-Directory p 
{
      background-color: #ff0000;
      color:#fff;
}

Hope that help, please forgive me if I ahve totally missed the point.
Nick

------------oOo----------------------
Nick Young (www.nickbits.co.uk)

dresde’s picture

dresde commented

Thanks nickbit, that may help for the css since I don't want to move things, but I think i need something more specific, since I want the title, the fileds and the content with a diffrent style (differen align, different paddings. different colors...). And also, with this way I can't add the line to separate one tease from the other.

nickbits’s picture

nickbits commented

Hi,

You should be able to do it all with CSS then. Instead of using an HR to seperate the teasers, use a border. To give you an example, this is the code that one of my views generates:

<div class="view view-news view-id-news view-display-id-block_1 view-dom-id-1">
	<div class="views-admin-links views-hide">
		<ul class="links">
			<li class="0 first"><a href="/admin/build/views/edit/news?destination=node#views-tab-block_1">Edit</a></li>
			<li class="1"><a href="/admin/build/views/export/news">Export</a></li>
			<li class="2 last"><a href="/admin/build/views/clone/news">Clone</a></li>
		</ul>    
	</div>
	<div class="view-content">
		<div class="views-row-1 views-row-odd views-row-first">
			<div class="views-field-title">
				<span class="field-content"><a href="/news/2009/02/thatcham-berks-and-its-manors">Thatcham, Berks, and its manors</a></span>
			</div>
			<div class="views-field-created">
				<span class="field-content">24th Feb</span>
			</div>
		</div>
		<div class="views-row-2 views-row-even">
			<div class="views-field-title">
				<span class="field-content"><a href="/news/2009/02/art-wheelwright">Art of the Wheelwright</a></span>
			</div>
			<div class="views-field-created">
				<span class="field-content">24th Feb</span>
			</div>
		</div>
	</div>
</div>

So, to change the title to a diff. colour and add a line between items, I would use the following:

.view-news .view-content .views-field-title{font-size:200%;font-weight:700}
.view-news .view-content .views-row-odd,.view-news .view-content .views-row-even{color:#fff;background-color:#000;border-bottom:1px solid #000}

The exact class and ID's may well be different for your views, but that should give you the general idea.
Nick

------------oOo----------------------
Nick Young (www.nickbits.co.uk)

dresde’s picture

dresde commented

Hey, thanks for that nick!!!

I assume that your VIEW is called "news", and all you did was define in the CSS all the div-classes generated. Am I right?

nickbits’s picture

nickbits commented

Hi,

Yep, spot on.

Also, I used Firebug in Firefox to help nail the CSS names exactly and debug.

Good luck,
Nick

------------oOo----------------------
Nick Young (www.nickbits.co.uk)

dresde’s picture

dresde commented

I'm finally working on this. I have used just the CSS tips and it works fine, but there is a weird issue: in the page created, when I go over the main content with the mouse, it makes appear the horizontal scroll bar in the browser. How can I avoid that? It is quite disgusting...

nickbits’s picture

nickbits commented

Hi,

Not sure, can't say I have seen that issue. Can you post a picture + settings you ahve in your view.

Nick

------------oOo----------------------
Nick Young (www.nickbits.co.uk)

dresde’s picture

dresde commented

It was just because I was in the administration area, it's solved now. Thank you.

junro’s picture

junro commented

Hello, Using Firebug

I've got a view named "quiz_by_user" witch page & block display.

I would like to change the page CSS but only the page CSS, not the block CSS.

I've got this class for the page CSS:

.view-quiz-by-user ---> affect all the view, page & block.

To target only the page, I tried:

.view-quiz-by-user .view-id-quiz-by-user .view-display-id-page-1 .view-dom-id-1
.view-quiz-by-user-display-id-page-1 .view-dom-id-1
.view-quiz-by-user-display-id-page-1

I tried so much things but not the good code.

Any idea?

It's the only thing I can't understand with CSS. How to target only the page from a view.

Thanks :)

nickbits’s picture

nickbits commented

Hi,

If you drill back up through firebug, you should see an ID or class for the sidebars and main content (assuming your blocks are in sidebars). You just need to find out what that ID or class is and add it infront of the CSS entries.

Cannot be more precise without knowing what theme are you using?

Nick

------------oOo----------------------
Nick Young (www.nickbits.co.uk)

junro’s picture

junro commented

I'm using Littlejazz theme

................
<div id="main">
<div id="squeeze" style="outline-color: rgb(255, 0, 0); outline-style: solid; outline-width: 1px;">
<div id="breadcrumb">
</div>
<h1 id="titre" class="title">Quizzes taken by Junro</h1>
<div class="tabs"/>
<div class="messages status">
</div>
<div class="view view-quiz-by-user view-id-quiz_by_user view-display-id-page_1 view-dom-id-1">
<div class="views-admin-links views-hide">
</div>
<div class="view-content">
<table class="views-table">
<thead>
<tr>
<th/>
..............................
junro’s picture

junro commented 
<div class="view view-quiz-by-user view-id-quiz_by_user view-display-id-page_1 view-dom-id-1">

I should use something like this?:

.view-display-quiz-by-user-page_1

or using the id #squeeze before?

#squeeze .view-display-quiz-by-user-page_1

The page use all these classes: view view-quiz-by-user view-id-quiz_by_user view-display-id-page_1 view-dom-id-1.

view-display-id-page_1 seems to be the right to use to target the page display, no?

nickbits’s picture

nickbits commented

Hi,

Assuming your view class is ".view-quiz-by-user-display-id-page-1", then to apply this only to the main content, use

#main .view-quiz-by-user-display-id-page-1
{
  border:1px solid black;
}

You will see in page.tpl.php that #main comes after the sidebars. Should work. Give it a go, if it doesn't just elt us know.
Nick

------------oOo----------------------
Nick Young (www.nickbits.co.uk)

junro’s picture

junro commented

The problem is that my block is not in sidebars. I'm using the block inside a panel page.

Using the class: ".view-quiz-by-user-display-id-page-1 " have no effects.

I don't have the right class for the page display. I can't find it, it's so frustrating! lol

nickbits’s picture

nickbits commented

Hi,

Okay, so it panels we have got to sort. I have not got panels installed at present, To make life easier, can you copy the ENTIRE HTML output of the page and I will take a look.

Nick

------------oOo----------------------
Nick Young (www.nickbits.co.uk)

junro’s picture

junro commented

Hi, thanks for your support :)

In fact, I know how to change CSS to the block. It's really easy with blocks.

I'm going to try to explain better, sorry about my english... in France, we begin to learn english at 11 years old! not smart at all....

Well, I want to target only the page without changing the css of the block.

The view name is "quiz_by_user"

I can't change CSS with this class: ".quiz-by-user", but it will change all the css of the view, page & block.

I just want to change the page CSS without affecting the css block. (I'm using an ID with Panel for that.)

the classes for the page are:

But I tried all theses classes, with differents options, without results.

Maybe I should create a view issue, this problem seems to be more complicate than i thought.
There are so much views issue I didn't add another with CSS problems.

What do you think?

nickbits’s picture

nickbits commented

Hi,

I understand what you are saying, I think. When you say block I assume you mean block and not a panel?

I do not think it is a view issue, maybe a panel issue, but without the HTML output, cannot see what to advise you to do. If you could attache the raw output of the page, at least then I can see where it is going wrong and maybe advise you better.

Cheers,
Nick

------------oOo----------------------
Nick Young (www.nickbits.co.uk)

junro’s picture

junro commented

When I say Block I mean the block display generated by my view. I don't want to change CSS of my Quiz results block. I just want to target the page display of my view, without affecting the block css.

The only thing I have to do is to find the class of my page display.

.view .view-quiz-by-user .view-id-quiz-by-user .view-display-id-page-1 .view-dom-id-1 { } doesn't work.

The only class in this that works is .view-quiz-by-user but it's the class of all displays of the view, page & block. But I just want to change the page display class.

.view-quiz-by-user .view-display-id-page-1 { } doesn't work either.

junro’s picture

junro commented

Here the html source of the page

<html class="js" lang="fr" xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
</head>
<body class="sidebar-left lightbox-processed">
<div id="page">
<div id="masthead">
<div id="header" class="clear-block">
<div class="header-right">
<div class="header-left">
<div id="logo-title"> </div>
<div id="name-and-slogan">
</div>
<div style="clear: both;"/>
<div id="block-block-12" class="block block-block unstyled-block">
</div>
<div id="block-block-37" class="block block-block unstyled-block menu-head">
<div class="content">
<p>
</p>
<p>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="navigation" class="menu"> </div>
<div id="suckerfishmenu" class="clear-block">
</div>
<div id="middlecontainer">
<div id="sidebar-left">
<div id="block-block-36" class="customframeblock color3-box-page-bg block block-block">
<div class="boxborder">
<div class="bi">
<div class="bt">
</div>
<div class="custom-inbox">
<h2 class="title"/>
<div class="content">
<table class="views-table" width="100%" style="color: rgb(255, 255, 255);">
<tbody>
<tr class="">
<td align="center">Membres </td>
</tr>
<tr style="background-color: rgb(4, 4, 180);">
</tr>
<tr class="">
</tr>
<tr style="background-color: rgb(4, 4, 180);">
</tr>
<tr class="">
</tr>
</tbody>
</table>
</div>
</div>
<div class="bb">
</div>
</div>
</div>
</div>
<div id="block-faceted_search_ui-2_keyword" class="customframeblock color3-box-page-bg block block-faceted_search_ui">
</div>
<div id="block-block-41" class="block block-block unstyled-block menug">
</div>
<div id="block-user-3" class="customframeblock color0-box-page-bg block block-user">
</div>
<div id="block-views-users_list_slideshow-block_1" class="customframeblock color3-box-page-bg block block-views">
</div>
<div id="block-modr8-0" class="customframeblock color3-box-page-bg block block-modr8">
</div>
<div id="block-block-23" class="customframeblock color3-box-page-bg block block-block">
</div>
<div id="block-block-7" class="block block-block unstyled-block">
</div>
</div>
<div id="main">
<div id="squeeze">
<div id="breadcrumb">
<div class="breadcrumb">
</div>
</div>
<h1 id="titre" class="title">Quizzes taken by Junro</h1>
<div class="tabs"/>
<div class="messages status">
</div>
<div class="view view-quiz-by-user view-id-quiz_by_user view-display-id-page_1 view-dom-id-1">
</div>
</div>
</div>
</div>
<div style="clear: both;"/>
<div id="footer">
</div>
<div id="footer-wrapper" class="clear-block">
</div>
<div id="user_relationships_popup_form" class="user_relationships_ui_popup_form"/>
<script src="/sites/all/modules/google_analytics/googleanalytics.js?z" type="text/javascript">
</script>
<script type="text/javascript">
</script>
<script type="text/javascript" src="http://www.google-analytics.com/ga.js">
</script>
<script type="text/javascript">
</script>


nickbits’s picture

nickbits commented

Hi,

Going by the code, using any of view view-quiz-by-user view-id-quiz_by_user view-display-id-page_1 view-dom-id-1, will only alter that view and none of the blocks. Although I wonder why there is no other content, which would have been useful. I think things are starting to get confusing here. I would suggest starting a NEW thread and.

1. Give a CLEAR example of what you are trying to achieve.
2. The settings of your view.
3. The actual, unaltered/editted output in HTML
4. A CLEAR description of what you expected to see.

Nick

------------oOo----------------------
Nick Young (www.nickbits.co.uk)

junro’s picture

junro commented

Hi, I dit it yesterday night, I created a view issue Theming with Views 2.0: CSS: Target only page display from a view.

I tried to explain better but it's not good enough lol

Thanks anyway for your help! :)

nickbits’s picture

nickbits commented

Hi,

No problem. Glad you got it sorted.

Nick

------------oOo----------------------
Nick Young (www.nickbits.co.uk)

drupal-boss’s picture

drupal-boss commented

Hello Nickbits. I am a new drupal user. I even know css a little. I think you are a master of views module. Please will you help me to achieve this?? I just Want my two cck fields aligned left and right side.
here goes my own CCK field "A"
here goes my own CCK field "B"

IE: Field "A" on left side and Field "b" on Right side. Other example: image field left aligned, node title right aligned and node teasure also right aligned and just below the title field. 

Plz help me how can I get this lay out

long-runner’s picture

long-runner commented

I also have the same problem