通过 CSS 覆盖自定义结果窗口并进行视觉更改

通过 CSS 覆盖自定义结果窗口并进行视觉更改

您可以使用自定义 CSS 覆盖“立即购买”弹出框的当前样式。可以使用以下模板:

只需根据需要编辑文件中描述的类。然后将自定义的 CSS 文件包含在您的页面上或 <style> 标记内,位于您嵌入“立即购买”脚本的位置之后。

请注意:在“立即购买”脚本标签之前嵌入文件可能会阻止您的样式表覆盖某些值,因为文档顺序很重要。在某些边缘情况下,可能还需要使用!important装饰您的自定义样式如果样式属性没有被覆盖,则规则(要了解更多信息,请访问: https ://www.w3schools.com/css/css_important.asp )。
下表给出了关于类的主要部分的一般信息。每个主要部分内嵌有许多可以覆盖的标签。

提示:建议使用浏览器“检查”工具(例如内置于 Google Chrome 或 Microsoft Edge 中的工具)。该工具可以方便地隔离特定的 CSS 类和可以设置样式的 HTML 标记。使用检查工具修改属性以查看属性的外观

 

 /* Omacro Modal Popup 外部类 */
.oma-buynow.oma-模态{}
.oma-buynow.oma-modal .oma-dialog .oma-content { }


/* Omacro Modal Popup Header(弹出窗口的标题栏部分,包括关闭窗口图标)*/
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-header { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-header .oma-close { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-header .oma-title { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-header .oma-title span { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-header .oma-title small { }


/* Omacro 模态弹出标题选项卡(在线零售商和本地零售商选项卡)*/
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-tabs { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-tabs .oma-active { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-tabs li { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-tabs li a { }


/* Omacro 模态弹出主体 */
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-active { } /* 活动标签 */


/* Omacro Modal Popup Main Body(在线零售商内容)*/
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-online-tab { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-online-tab .oma-market.oma-online-market { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-online-tab .oma-market.oma-online-market .oma-loading { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-online-tab .oma-market.oma-online-market .oma-loading .oma -微调器{}
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-online-tab .oma-market.oma-online-market .oma-result-filters { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-online-tab .oma-market.oma-online-market .oma-results { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-online-tab .oma-market.oma-online-market .oma-results .oma -retailer.your-online-retailer { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-online-tab .oma-market.oma-online-market .oma-results .oma -retailer.oma-online-retailer .oma-card { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-online-tab .oma-market.oma-online-market .oma-results .oma -retailer.oma-online-retailer .oma-card .oma-image { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-online-tab .oma-market.oma-online-market .oma-results .oma -retailer.oma-online-retailer .oma-card .oma-image img { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-online-tab .oma-market.oma-online-market .oma-results .oma -retailer.oma-online-retailer .oma-card .oma-info { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-online-tab .oma-market.oma-online-market .oma-results .oma -retailer.oma-online-retailer .oma-card .oma-info .oma-name { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-online-tab .oma-market.oma-online-market .oma-results .oma -retailer.oma-online-retailer .oma-card .oma-info .oma-button.oma-buylink { }


/* Omacro 模态弹出主体(本地零售商内容)*/
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-local-tab { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-local-tab .oma-market.oma-local-market { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-local-tab .oma-market.oma-local-market .oma-map { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-local-tab .oma-market.oma-local-market .oma-map .oma -谷歌地图 { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-local-tab .oma-market.oma-local-market .oma-results { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-local-tab .oma-market.oma-local-market .oma-results .oma -寻呼机{}
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-local-tab .oma-market.oma-local-market .oma-results .oma -零售商 { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-local-tab .oma-market.oma-local-market .oma-results .oma -retailers .own-retailer.own-local-retailer { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-local-tab .oma-market.oma-local-market .oma-results .oma -retailers .oma-retailer.oma-local-retailer .oma-card { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-local-tab .oma-market.oma-local-market .oma-results .oma -retailers .oma-retailer.oma-local-retailer .oma-card .oma-image { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-local-tab .oma-market.oma-local-market .oma-results .oma -retailers .oma-retailer.oma-local-retailer .oma-card .oma-image img { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-local-tab .oma-market.oma-local-market .oma-results .oma -retailers .oma-retailer.oma-local-retailer .oma-card .oma-info { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-local-tab .oma-market.oma-local-market .oma-results .oma -retailers .oma-retailer.oma-local-retailer .oma-card .oma-info 地址{}
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-local-tab .oma-market.oma-local-market .oma-results .oma -retailers .oma-retailer.oma-local-retailer .oma-card .oma-info 地址跨度 { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-local-tab .oma-market.oma-local-market .oma-results .oma -retailers .oma-retailer.oma-local-retailer .oma-card .oma-info address span.oma-name{ }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-local-tab .oma-market.oma-local-market .oma-results .oma -retailers .oma-retailer.oma-local-retailer .oma-card .oma-info .oma-location { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-local-tab .oma-market.oma-local-market .oma-results .oma -retailers .oma-retailer.oma-local-retailer .oma-card .oma-info .oma-location .oma-message { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-local-tab .oma-market.oma-local-market .oma-results .oma -retailers .oma-retailer.oma-local-retailer .oma-card .oma-info .oma-location .oma-stock { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-local-tab .oma-market.oma-local-market .oma-results .oma -retailers .oma-retailer.oma-local-retailer .oma-card .oma-info .oma-location .oma-stock .oma-level { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-local-tab .oma-market.oma-local-market .oma-results .oma -retailers .oma-retailer.oma-local-retailer .oma-card .oma-info .oma-location .oma-stock .oma-level.oma-none { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-local-tab .oma-market.oma-local-market .oma-results .oma -retailers .oma-retailer.oma-local-retailer .oma-card .oma-info .oma-location .oma-stock .oma-level .oma-percent.oma-one { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-local-tab .oma-market.oma-local-market .oma-results .oma -retailers .oma-retailer.oma-local-retailer .oma-card .oma-info .oma-location .oma-stock .oma-level .oma-percent.oma-two { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-local-tab .oma-market.oma-local-market .oma-results .oma -retailers .oma-retailer.oma-local-retailer .oma-card .oma-info .oma-location .oma-stock .oma-level .oma-percent.oma-three { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-local-tab .oma-market.oma-local-market .oma-results .oma -retailers .oma-retailer.oma-local-retailer .oma-card .oma-info .oma-location .oma-stock .oma-level .oma-percent.oma-four { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-local-tab .oma-market.oma-local-market .oma-results .oma -retailers .oma-retailer.oma-local-retailer .oma-card .oma-info .oma-location .oma-distance { }


/* Omacro 模态弹出页脚(国家选择器,omacro 品牌)*/
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-footer { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-footer .oma-region { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-footer .oma-region li { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-footer .oma-region li .oma-icon.oma-flag-icon { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-footer .oma-link { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-footer .oma-link .oma-logo { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-footer .oma-link .oma-logo img { }

    • Related Articles

    • 为一般经销商定位器添加自定义品牌卖家登陆页面

      omacro 的General Dealer Locator将生成非特定产品的经销商列表结果。此功能允许您向卖家展示并将客户发送到卖家的自定义品牌着陆页,该页面仅包含您的产品和/或您在卖家中的品牌页面,即www.sellersite.com/your-brand-here 。要添加卖家的自定义网站 URL,请按照以下说明操作: 1) 登录后,访问您管理卖家的区域。 2) 搜索或筛选卖家名称,然后选择编辑铅笔。 3) 复制并粘贴卖家自定义链接URL,然后保存。 ...
    • 将自定义规则添加到经销商结果

      有时,您可能想要自定义某些结果。例如,如果您只想显示租赁供应商和/或服务中心或只显示零售地点(或组合)。为此,您可以通过几种不同的方式实现此可选参数。 选项 1:从“立即购买”脚本路径全局添加规则 如果您希望在整个站点(使用“立即购买”的任何地方)全局添加规则,您可以使用以下附加参数到“立即购买”脚本路径来执行此操作。 <script id="omacro-widget-buynow" src=" ...
    • 将自定义页面大小添加到在线经销商结果中

      有时,您可能想要自定义显示在“立即购买”弹出窗口的在线部分的结果数量。例如,如果您希望每页显示更多或更少的卖家(或没有分页控件的所有卖家)。 选项 1:从“立即购买”脚本路径全局添加页面大小 如果您希望在整个站点(使用“立即购买”的任何地方)全局添加页面大小,您可以使用以下附加参数到“立即购买”脚本路径来实现。 <script id="omacro-widget-buynow" ...
    • 在网站页面中嵌入经销商定位器

      您可以将定位器直接嵌入到页面上。假设您已完成将 omacro 的立即购买代码片段添加到您的页面的步骤,请使用以下示例在页面本身内呈现定位器。 要观看现场演示,请访问我们的现场演示网站 具有自定义样式的专用经销商定位器示例。 第 1 步:将 CSS 类添加到页面 确保页面上有一个类名为“oma-omacro”的元素。 <div class="oma-omacro"></div> 第 2 步:将 JavaScript 添加到页面 将以下脚本添加到页面中第 1 步中提到的 HTML ...
    • 供应商立即购买实施指南

      以下文章讨论了将“立即购买”作为弹出窗口或作为基于产品的经销商定位器或一般经销商定位器嵌入页面中的各种方式。 Buy Now 可以配置为向特定市场(在线或本地)开放,以显示一个或多个特定经销商类型(租赁提供商、零售商或服务中心)并以多种方式显示,包括与您的品牌相匹配的样式。 先决条件 配置网络以支持立即购买 由于 Buy Now 在您的网站和网络上运行,因此可能有必要确保您的网络防火墙配置为允许 omacro Buy Now 脚本与网络外部的 omacro Web ...