Drupal 7 Drupal7自定义视图主题

Drupal 7 Drupal7自定义视图主题,drupal-7,drupal-views,drupal-theming,Drupal 7,Drupal Views,Drupal Theming,我的HTML如下所示: <div class="top-grids"> <div class="container"> <div class="col-md-4 top-grid text-center"> <div class="top-grid-pic"> <img src="images/pic01.png"

我的HTML如下所示:

        <div class="top-grids">
        <div class="container">
            <div class="col-md-4 top-grid text-center">
                <div class="top-grid-pic">
                    <img src="images/pic01.png" title="Boots" />
                    <span>Boots</span>
                </div>
                <div class="top-grid-pic-info">
                    <a href="single-page.html">Seeall</a>
                </div>
            </div>
            <div class="col-md-4 top-grid text-center">
                <div class="top-grid-pic">
                    <img src="images/pic02.png" title="Boots" />
                    <span>Casual</span>
                </div>
                <div class="top-grid-pic-info">
                    <a href="single-page.html">Seeall</a>
                </div>
            </div>
            <div class="col-md-4 top-grid text-center">
                <div class="top-grid-pic">
                    <img src="images/pic03.png" title="Boots" />
                    <span>Formal</span>
                </div>
                <div class="top-grid-pic-info">
                    <a href="single-page.html">Seeall</a>
                </div>
            </div>
            <div class="clearfix"> </div>
        </div>
    </div>
<div class="top-grids">
        <div class="container">
                <?php print $output; ?>

        </div>
在Drupal7中,我创建了一个视图块,并将其命名为FeaturedProducts。我添加了两个字段-图像和标题。请检查附带的屏幕截图

完成同样的操作后,我创建了一个名为views-view-field-new-uc-products-block.tpl.php的视图文件,并编写如下代码:

        <div class="top-grids">
        <div class="container">
            <div class="col-md-4 top-grid text-center">
                <div class="top-grid-pic">
                    <img src="images/pic01.png" title="Boots" />
                    <span>Boots</span>
                </div>
                <div class="top-grid-pic-info">
                    <a href="single-page.html">Seeall</a>
                </div>
            </div>
            <div class="col-md-4 top-grid text-center">
                <div class="top-grid-pic">
                    <img src="images/pic02.png" title="Boots" />
                    <span>Casual</span>
                </div>
                <div class="top-grid-pic-info">
                    <a href="single-page.html">Seeall</a>
                </div>
            </div>
            <div class="col-md-4 top-grid text-center">
                <div class="top-grid-pic">
                    <img src="images/pic03.png" title="Boots" />
                    <span>Formal</span>
                </div>
                <div class="top-grid-pic-info">
                    <a href="single-page.html">Seeall</a>
                </div>
            </div>
            <div class="clearfix"> </div>
        </div>
    </div>
<div class="top-grids">
        <div class="container">
                <?php print $output; ?>

        </div>
并将其放在“模板”文件夹下

现在我看到drupal站点和视图源文件,其中包含以下HTML结构:

扭曲的
转到admin/structure/views/settings并进行这些设置

然后进入您的视图,在“高级”下,您将有一个主题:信息。单击它,您将看到一个tpl文件列表,您可以根据需要更改html