Hello,

I've got a view name "quiz_by_user". Inside this view, i've got a page and block display.

I want to change only the page display CSS without changing the css of the block display.

I can't change CSS with this class: ".quiz-by-user", because 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 (Firebug classes output):

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

This issue follow this post topic: Help theming Views 2.0.

I would like to know which class to use to target the page display.

.view-quiz-by-user .view-display-id-page-1 { } and so manythings I tried don't work.

Thanks :)

Comments

junro’s picture

junro commented

forgot this:

the classes for the page are (Firebug classes output):

dawehner’s picture

dawehner
Primary language German
commented

i guess you embed the page display to the panel.

if you create a extra views display for embedding into the panel you can use ".view-display-id-page-1"

junro’s picture

junro commented

My page display is not inside a panel page... the page display has an url: ".../quiztest/byuser/7". I just want to target the page CSS.

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

junro’s picture

junro commented
Title: CSS Theming with Views 2.0 » Theming with Views 2.0: CSS: Target only page display from a view.
junro’s picture

junro commented
Category: support » bug
Priority: Normal » Critical

I don't know if it's a bug or it's something impossible but it's piss me off a lot!

We can't have different css for page & block of a same view?? All displays of a view must have the same css?? same width, same color....

Somebody should know something about it... I can't imagine i'm the only guy with this problem.

Set this post to bu report and critical because I would really like to have Karens opinion about that.

merlinofchaos’s picture

merlinofchaos commented
Category: bug » support
Priority: Critical » Normal
Status: Active » Fixed
print $css_name; view-id- print $name; view-display-id- print $display_id; view-dom-id- print $dom_id; ">

Those are the classes provided -- .view-display-id-page-1 should be sufficient. You may need to use tricks like !important to override 'more specific' styles. Use firebug like that. But Views has done everything it can to provide the classes you need. Understanding how to use CSS is beyond the scope of what we can teach you here.

This is in no way a bug and this is SO not critical.

BTW because you're targeting two classes on the same view, what you really want is this:

  div.view-quiz-by-user.view-display-id-page-1 {
    /* ... */
  }
junro’s picture

junro commented
Status: Fixed » Active

I'm getting nuts with this!

Firebug: view view-quiz-by-user view-id-quiz_by_user view-display-id-page_1 view-dom-id-1

.view-quiz-by-user {} ---> works (will affect all displays of the view)

.view-display-id-page_1 {} ---> works (will affect all page_1 displays of all the views)

.view-quiz-by-user .view-display-id-page_1 {} ---> DOESN'T WORK, affect nothing at all

I tried so much things....

I really need help, many months I have this problem... There something I don't get it! but can't really see.

Sure it's not a bug lol, but it isn't fixe for me. (sorry for the active status :) but it will help others people with this kind of problem)

What kind of tricks I should use?

merlinofchaos’s picture

merlinofchaos commented
Status: Active » Fixed

Try copying and pasting the example I wrote. There is *no space* between them.

junro’s picture

junro commented

... I learned something tonight! Thanks Merlin :)

bredi’s picture

bredi commented

Did anything change in dev? I had previously css' themed views working. Then, after updating modules and clearing cache, the css definitions changed. I had to change _ to - views to view and vice verse, etc. in some places I even had to start over.

It was either views, views jcarousel, jquery update etc. etc.

When firebugging... it's hard to know which css style to choose.

Is there an easy rule of thumb? I normally look at the theme information button to drill down and then try combinations of - or _ "view" and "views"

(my question is for CSS only, without doing .tpl files....)

assume this view

default
page "name of page"
block "name of block"
page "name of grid style page"
slideshow "name of slideshow".
block "name of block too"

thanks

Bredi

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

nvisioncurtis’s picture

nvisioncurtis commented

Ah Ha!

This worked for me also but I the selector for me uses an underscore instead of hyphen as in the example above... I thought that wasn't possible?

div.view-news.view-display-id-page_1

Anyway perhaps that may help someone here

nvisioncurtis’s picture

nvisioncurtis commented

Ah Ha!

This worked for me also but I the selector for me uses an underscore instead of hyphen as in the example above... I thought that wasn't possible?

div.view-news.view-display-id-page_1

Anyway perhaps that may help someone here