By Toffee on

Hi,
Been racking my brains for 2 days now, have searched many different sentences to explain my problem and can't find an answer which I am pretty sure is basic stuff.

I created a View which is linked to be my frontpage display, however, I can't seem to isolate these fields for styling without changing the style on other places.

You can see the page at http://www.bluenosesoccer.com/drupal

Where it currently says "new face of bluenose" I want that to be large and a different color, then the 'Lorem Ipsum' to be different aswell, I can change them, BUT, it also changes the block on the right "previous news"

If you could let me know what variables I need to change in what page, it would help me out incredibly.

Cheers.

⋅ Categories: Drupal 6.x

Comments

prajaktam’s picture

prajaktam commented

You can try giving the css to following variables.

.view-Home .view-content .views-row .views-field-title a {
/* Add your css for face of bluenose here for example*/
color: #000000;
font-weight: bold;
font-size: 18px;
font-family: Arial;
}

.view-Home .view-content .views-row .views-field-title a:hover {
/* Add css to change the color of face of bluenose(title) on hover */
color: #0678BE;
}

.view-Home .view-content .views-row .views-field-teaser {
/* Add your css for lorem ipsum text here for example*/
font-family: Arial;
font-size: 12px;
}

This is just an example. You can change the color, font size etc inside the css rule.

Thanks
Prajakta

Toffee’s picture

Toffee commented

Excellent, it worked thanks.

So the spaces between the .view-Home and .view-content (etc) is to break down through the div classes?
I originally thought that linked several classes together so they could all be styled the same!

Much appreciated :)

prajaktam’s picture

prajaktam commented

1) So the spaces between the .view-Home and .view-content (etc) is to break down through the div classes?

Yes, It is to apply css specifically to a certain element. If you have firebug(firefox Addon) and inspect the elements you will see the html elements tree. So what we are doing is choosing the parent element class or id to differentiate that element. So here it will be
.view-Home .view-content .views-row .views-field-title a {

}
ie, css for the title link of a view which has the class .view-Home. So the css will not be generic. It will be applied to view-Home only not to any other title inside any other view.
For eg: if you want to apply a different css for Previous News, You will write,
#block-views-Articles-block_1 .view-Articles .view-content .views-row .views-field-title a {
color: #000000;
}

2) If you want to give same css, then the classes or ids should be Comma separated. For eg:
css mentioned in point 1 is specific to 'view-Home'. Now lets say you want to apply the same css to another view 'Previous News' then we do this
.view-Home .view-content .views-row .views-field-title a,
#block-views-Articles-block_1 .view-Articles .view-content .views-row .views-field-title a {
font-family: Verdana;
}
So this css will be applied to both the views.
Thanks,
Prajakta