Editing Styles in view.php and superfish.css
Permalink Browser Info Environment
I purchased Superfish 1.1.1 and I've been trying to style the menus.
The first thing I wanted to do was remove the top border and I found that the styling for that wasn't in the superfish.css, but was instead in the view.php.
I'm guessing that after playing with it some more I'll understand why the styles are in both files - instead of just in the css. That's sort of a question, but soldier on please - I'm getting to my point...
...however, I'm still having trouble with creating a custom template for this block (instead of editing the core superfish.css and view.php).
I noticed that there is a "template" sub-folder in the packages/superfish/blocks/superfish folder. I tried adding a custom template there, and alternately adding a custom template in the top level "blocks" folder. Both times my menu reverted to vertical instead of horizontal - as if the block wasn't finding a crucial style rule.
So, long time getting here (sorry), but my two questions are:
1) is there a recommended custom template setup and location? For example, in the blocks folder one should have the view.php and a sub-folder named css with the superfish.css included?
2) wait, no I don't have a second question. I am tired, I guess...
3) no, wait - I do have a second question: Is it installed correctly? Does packages/superfish/blocks/superfish/css etc look right?
Thanks!
The first thing I wanted to do was remove the top border and I found that the styling for that wasn't in the superfish.css, but was instead in the view.php.
I'm guessing that after playing with it some more I'll understand why the styles are in both files - instead of just in the css. That's sort of a question, but soldier on please - I'm getting to my point...
...however, I'm still having trouble with creating a custom template for this block (instead of editing the core superfish.css and view.php).
I noticed that there is a "template" sub-folder in the packages/superfish/blocks/superfish folder. I tried adding a custom template there, and alternately adding a custom template in the top level "blocks" folder. Both times my menu reverted to vertical instead of horizontal - as if the block wasn't finding a crucial style rule.
So, long time getting here (sorry), but my two questions are:
1) is there a recommended custom template setup and location? For example, in the blocks folder one should have the view.php and a sub-folder named css with the superfish.css included?
2) wait, no I don't have a second question. I am tired, I guess...
3) no, wait - I do have a second question: Is it installed correctly? Does packages/superfish/blocks/superfish/css etc look right?
Thanks!
| Type: | Discussion |
|---|---|
| Status: | New |
I think its worth adding that once you have done this - you need to go to the page with your block on it, in edit mode, and click 'custom template' from the pop up menu. Then you should be able to select the custom template you created by making that folder.
Maybe it's obvious... but I missed it when looking for help, so I hopefully this will save others some time as well.
Maybe it's obvious... but I missed it when looking for help, so I hopefully this will save others some time as well.
Yeah, block overrides and custom templates are similar but different. Good point! Seems like most folks that I help customize Superfish are just interested in doing an override, but the template approach is pretty useful too, especially if you want to style the menu more than one way on a single site.
And I think I know what's happening regarding the custom template not inheriting the styles. A block without a custom template will automatically include any JavaScript and CSS found in the css/ and js/ folders in the block's folder. This means that superfish automatically includes
blocks/superfish/js/superfish.js
blocks/superfish/css/superfish.css
when it is added to a page. Additionally, a block without a custom template will also automatically include the files named view.css and view.js in the same directory (should they exist.)
When you create a custom template based on the superfish menu, you'll not only need to duplicate view.php, but also the js/ and css/ directories. This can be done easily with our custom template system, though. Let's say you wanted to create a custom template for superfish named "No Bordered." Do this.
1. In your site's blocks/ directory (likely empty), create this directory
blocks/superfish/templates/no_bordered/
2. Copy view.php from within packages/superfish/blocks/superfish/ into blocks/superfish/templates/no_bordered/
3. Copy js/ and css/ from within packages/superfish/blocks/superfish/ into blocks/superfish/templates/no_bordered.
Now should you have this in your local blocks directory
blocks/superfish/templates/no_bordered/view.php
blocks/superfish/templates/no_bordered/css/superfish.css
blocks/superfish/templates/no_bordered/js/superfish.js
Finally, make the changes to view.php and superfish.css that you need for your custom template to work.
And here is the recommended way to create a custom template for the superfish menu. This applies to all blocks.