Templateog体育首页 © Privacy Policy

HTML Templates Documentation

包括设置模块和扩展

Google webfonts

大多数模板使用非标准字体. 默认情况下，浏览器只能使用字体，安装到操作系统.

In other words, 如果网站设计涉及使用未安装在计算机上的自定义字体, these fonts won't be 从参观者的侧面在现场展示. 取而代之的是显示标准字体.

这就是web开发人员寻找替代解决方案的原因. 我们的模板自定义字体是由 using 最流行的技术—— Google Web Fonts.

Google字体初始化过程在官方文档中有详细描述: http://developers.google.com/fonts/docs/getting_started.

请随意查看有关使用谷歌网页字体的详细教程: 如何与谷歌网络工作 Fonts.

如果谷歌字体加载失败:

  1. Open 'site\index-*.html' or 'site\css\style.css' file

  2. Locate this line:

    //fonts.googleapis.com/css?家庭=[——your_web_font_name_here]

  3. 并将其更改为以下内容:

    //fonts.useso.com/css?家庭=[——your_web_font_name_here]

使用额外的谷歌字体字符集

如果你的网站内容不是用英语写的, 而是其他包含非拉丁字符的语言, you might 需要扩展字符集. 为了将新的字符集添加到初始Google Fonts one，请遵循以下步骤 at Google Fonts service page:

  1. Select your font (i.e.，打开Sans)按下添加到集合按钮 .
  2. 在出现的面板上按下“使用”按钮. 将打开字体设置页面.
  3. On this page at step “2. 选择所需的字符集:"选择所需的字体编码.
  4. 在步骤3中选择“@import”选项卡.
  5. 复制此选项卡的内容.
  6. 将复制的内容插入样式中，而不是先前的字体版本初始化行.css file.

RD Google Map

模板使用插件为谷歌地图插入- RD谷歌地图.

Plugin settings allow you:

  • To change map coordinates;
  • 添加自定义标记到地图;
  • 为您的标记添加弹出窗口;

Map coordinates change

要将地图坐标替换为您需要编辑的坐标 .html file in block.

在这里指定两个数据属性: data-x (north latitude) and data-y (west longitude). 结果你会得到这行代码:

坐标可以通过使用接收 Google Maps service . 在目标地图位置按下鼠标右键并选择“这里是什么”?”. 在出现的模态窗口中，必要的坐标将显示在位置名称下. 第一个数字代表数据x，第二个数字代表数据y.

如果您没有指定自定义坐标，则将使用默认坐标.

请大家也注意了, 一个常见的错误是改变坐标顺序，使地图显示不正确的位置从另一个半球.

向地图添加自定义标记

为了添加自定义制造商到地图，请编辑 .html file by adding new

    element to

  •

    列出并指定其数据属性: data-x (north latitude) and data-y (west longitude). 结果你将得到如下代码行:

  •

    如果您没有指定自定义坐标, 插件脚本将忽略空列表元素，并且不会显示任何标记.

    完整的代码示例如下:

    

    
    
    

    
      
        
    • 
            
       9870 St Vincent Place, Glasgow, DC 45 Fr 45.
                800 2345-6789
            
      
        
      • 
        
    • 
            
       9870 St Vincent Place, Glasgow, DC 45 Fr 45.
                800 2345-6789
            
      
        
      •

    - where:

    

  • 
    
     9870 St Vincent Place, Glasgow, DC 45 Fr 45.
        800 2345-6789
    
    

    •

    represents new map marker.

    向标记添加弹出窗口

    为了将弹出窗口添加到自定义地图标记，只需将窗口内容插入到适当的地图标记列表元素中

  • 结果你将得到如下代码行:

  • Our office

    • RD Mailform

    Is a multipurpose form. 脚本允许在三种模式下使用表单:联系表单，时事通讯表单和订购 form.

    模板表单已经设置为正确模式. 您只需要指定网站所有者的电子邮件地址，这将收到 网站访问者填写表单的结果.

    如果需要，您可以指定多个地址. In 要做到这一点，请执行以下操作:

    1. Open bat/rd-mailform.php.
    2. Locate $recipients variable using search tool (Ctrl + F)

    3. 在电子邮件后插入您的电子邮件地址 “=” sign:

      $recipients = “test@gmail.com” — for single address

      $收件人= " test@demolink ..com test2@demolink.Com”——用于少数电子邮件地址.

    变换形式操作模式:

    如果需要更改表单操作模式，请打开*.html page, and edit form code by adding field right after opening

    , tag

    使用相应的表单操作模式，而不是YOUR_FORM:

    • contact
      for contact form;
    • subscribe
      for subscription;
    • order
      for ordering.

    例如，要使用contact表单，需要以下HTML代码:

    通过SMTP-server发送电子邮件:

    SMTP服务器设置与表单设置无关.

    为了通过smtp服务器发送您的站点消息，您需要参考官方PhpMailer库, used in Form)文档或从官方文档中查看本教程 http://phpmailer.worxware.com/?pg=examplebsmtp.

    Attention! 邮件功能在本地无法工作. 它在托管服务器上变得活跃 only, with PHP enabled.

    Color schemes

    如果模板有多个配色方案，则包含相应的文件colorScheme-1.css, colorScheme-2.css, colorScheme-#.CSS在主题包中传递给模板所有者.

    To activate desired color scheme initialize appropriate color schemes in section of your html files, before the closing tag.

    例如，初始化colorScheme-1.css at index.在html页面中指定以下html标记 index.html file in section before the closing tag:

    ….

    在模板的实时演示中可见的配色方案切换器仅用于预览目的 在模板包中不提供.

    Slider

    我们的模板使用Camera Slider jQuery-plugin. 您可能需要更改滑块图像和描述.

    在滑块中创建新的幻灯片, 您应该在相应的滑块标记中插入以下HTML代码 .html file:

    

    
    
    
        Slide content 2

    结果你将得到如下代码(假设已经包含了一张幻灯片):

    

    
    
    
        
    
            
    
                Slide content 1
            
    
        
    
        
    
            
    
                Slide content 2

    Here every

    …

    部分表示单独的幻灯片. 设置滑动背景图像的路径 data-src 属性中插入幻灯片内容

    为了启用/禁用滑块自动播放，您应该在脚本中找到脚本初始化代码.js file:

    
/* Camera
========================================================*/
;(function ($) {
var o = $('#camera');
    if (o.length > 0) {
        if (!(isIE() && (isIE() > 9))) {
            include('js/jquery.mobile.customized.min.js');
        }

        include('js/camera.js');

        $(document).ready(function () {
            o.camera({
                autoAdvance: true,
                height: '40.9375%',
                minHeight: '300px',
                pagination: false,
                thumbnails: false,
                playPause: false,
                hover: false,
                loader: 'none',
                navigation: true,
                navigationHover: false,
                mobileNavHover: false,
                fx: 'simpleFade'
            })
        });
    }
})(jQuery);

    并指定所需的值 autoAdvance option. Like,

    autoAdvance: true,
    to enable autoplay
    autoAdvance: false,
    to disable autoplay

    RD Parallax

    为了实现视差分割 .您应该在目标中定义以下html标记 place of page:

    Where

    • data-url
      path to background image,
    • data-mobile
      True(在移动设备上启用视差显示)/ False(在移动设备上加载静态图像)

    为了观察视差效果，图像必须高于你所应用的部分 effect to.

    Background video

    We use jQuery-plugin Vide. 实现背景视频到我们的模板.

    使用特殊脚本将视频添加到节背景中.

    不同的浏览器支持不同的视频格式, 因此确保跨浏览器的功能, please, perform the following:

    1. 将您的视频文件转换为3种格式: *.mp4, *.ogv, *.webm (文件名必须匹配);
    2. 准备一个在浏览器中显示的图像, 不支持背景视频, including mobile devices;

    3. 在适当的块中 .vide 类在data属性中指定先前创建的文件的路径 data-vide-bg 请不要指定文件扩展名.

      Example:

      Your content

    Warning. 由于苹果等移动平台的政策背景视频不会出现 on mobile devices!

    RD Calendar

    Calendar是一个可选元素, 因此，只有在模板包中预先设计它的情况下，它才包含在模板包中 .PSD layout.

    要将自定义事件添加到站点日历，请在日历HTML标记中指定适当的事件列表, in a block with .rdc-events class. For example,

    

    
    .......
    
    
        …...
        
      
            
    • 
                My Event 1
            
      • 
            
    • 
                My Event 2
            
      •

    where

  • 表示每个单独的事件. Event date is set within data-date attribute as MM/DD/YYYY.

    倒计时计时器(“在建”页面)

    倒计时定时器是一个可选的元素, 因此，只有在模板包中预先设计它的情况下，它才包含在模板包中 .PSD layout.

    为了设置自定义倒计时定时器，编辑 /js/script.js 文件在以下部分:

    
/* Countdown
========================================================*/
;
(function ($) {
    var o = $('.countdown');
    if (o.length > 0) {
        include('js/jquery.plugin.js');
        include('js/jquery.countdown.js');

        $(document).ready(function () {
            var date = new Date(),
                countTo = new Date(date.getFullYear(), date.getMonth() + 2, date.getDay());
            $(o).倒计时({直到:countTo, padzero: true});
        });
    }
})(jQuery);

    countTo 变量必须包含目标日期:

    count = new Date(年，月+ 1，日);

    例如，项目将于2020年5月12日开始. 在这种情况下，正确的代码行如下所示:

    countTo = new Date(2020, 6, 12);

    Full code example is:

    
/* Countdown
========================================================*/
;
(function ($) {
    var o = $('.countdown');
    if (o.length > 0) {
        include('js/jquery.plugin.js');
        include('js/jquery.countdown.js');

        $(document).ready(function () {
            var date = new Date(),
                countTo = new Date(2020, 6, 12);

            $(o).倒计时({直到:countTo, padzero: true});
        });
    }
})(jQuery);

    Digital progressbars

    下面的脚本是一个可选元素, 因此，只有在模板包中预先设计它的情况下，它才包含在模板包中 .PSD layout.

    为了定义径向进度条填充百分比，请在目标元素处指定所需值:

    

    
    75%

    Where

    75%
    目标进度条填充水平.

    要更改水平进度条填充百分比，请在样式的目标元素中指定所需值 attribute, by using width: Xpx parameter.

    Where

    X
    进度条的目标值.

    For example,

    Social Icons

    为了定义到客户社交网络账户的目标链接，在href属性中将社交网络账户页面的url指定为相关的社交链接.

    For example,

    Where YOUR_SOCIAL_LINK - Facebook page URL.

    Youtube & Vimeo

    使用以下HTML代码嵌入Youtube, Vimeo视频:

    where src 属性包含相关视频主机上的视频链接.

    Olark Livechat

    要像在模板的Live Demo中一样设置在线聊天，您应该在官方注册 Olark website.

    在填写完所有字段后，您将获得一个代码，以便在结束之前将其插入模板中 tag:

    代码非常庞大，所以不要因此而害怕. 它将显示如下所示: