Posted by rpeters on November 23, 2010 at 5:59pm
I would like to just style all my view blocks a certain way how can I do that? Any advice
Styling just view blocks
Group organizers
Hot content this week
-
7 years 10 weeks ago
-
15 years 39 weeks ago
-
16 years 41 weeks ago
-
6 years 11 weeks ago
Comments
There should be a class
There should be a class block-view or block-views on your view blocks that you can use to target your css scoping.
Is there any documentation or
Is there any documentation or tutorials on this?
Theming Views
rpeters,
By using a tool like Firebug, you can dig through the HTML output and find and style your classes and IDs in typical CSS fashion.
.view-content {background-color: #123456;
}
You may also change the markup in your Views templates. This is described in detail here.
-NP
I use the Block Theme module
I use the Block Theme module on a fairly regular basis. You can use then create a block in views. When you visit the block edit screen, simply choose the theme and forget it. That way you can set up your own HTML in the block.tpl.php file.
Read the modules documentation for more info.
-jason
Basic Settings - CSS class
Edit your view(s) and look on the Default or Block / Page view you are working with. Basic Settings has an option for CSS Class where you can specify a class name on your own. This is just one way to solve your problem.
Another way is if they are always inside the same "location" (block / region) you can style them somewhat generically without specifying a custom CSS Class Name. For instance, we have a site with "samples" of graphic artwork for each category in the sidebar-right area. So for all of these blocks, we use:
#sidebar-right div.block-views div.content {...
}
Now if you have a lot of different views blocks, and need different styling, then yes, you could use a combination of both of these, limiting your style to #sidebar-right and using your custom CSS Class Name specified in the View Edit area.
How Do I Find Newly Created Block Names
The poster above me gave me a really good I idea of how to style blocks in a general way, but I wonder how do I find the names of the newly created blocks. For instance, I created three generic blocks, two to create space and make the site look cleaner and well spaced, and another one to hold my footer-logo. Next, I came across a problem related with the alignment of the "custom-footer" block I created last. My site-logo image is being pushed to the left at the moment, so to shoot to birds with the same bullet, I would like to know how to custom CSS-style newly created blocks. What are the file names and which directory(ies) I need to look into to find the CSS that affects my template look? (e.g. style.css, blocks.css , or template folder, css folder, etc)