| @@ -237,27 +237,11 @@ | ||
| 237 | 237 | <label>Placement Name:</label> |
| 238 | 238 | <input class="widefat" type="text" name="mid_placement[]" value="<?php echo esc_attr($widget->placement ?? ''); ?>" placeholder="Mid Article Thumbnails" /> |
| 239 | 239 | </div> |
| 240 | 240 | </div> |
| 241 | - <div class='heading_mid_home'><label style="float:left;">Position the widget immediately below the element:</label> | |
| 242 | - <div class='tooltip'> | |
| 243 | - <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> --> | |
| 244 | - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN"> | |
| 245 | - <g fill="none" fill-rule="evenodd"><path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path> | |
| 246 | - </g> | |
| 247 | - </svg> | |
| 248 | - <div>The widget will be placed <i>just beneath</i> this element.<br><br> | |
| 249 | - To target an element, 2 pieces of information are needed:<br><br> | |
| 250 | - i) A CSS selector - e.g. <i>p</i> (for paragraph).<br> | |
| 251 | - ii) An occurrence - e.g. 1st, 2nd, 3rd, etc.<br><br> | |
| 252 | - For more information, see the <a href="https://developers.taboola.com/web-integrations/docs/wordpress-plugin-managing-placements" target='_blank'>Taboola Dev Center</a>. | |
| 253 | - </div> | |
| 254 | - </div> | |
| 255 | - </div> | |
| 256 | - | |
| 257 | 241 | <div style="display: flex; flex-wrap: wrap; margin-top: 10px;"> |
| 258 | 242 | <div style="flex: 1; min-width: 200px; padding-right: 10px;"> |
| 259 | - <label>Position:</label> | |
| 243 | + <label>Position below:</label> | |
| 260 | 244 | <select class="widefat mid-widget-type-selector" name="mid_paragraph_ui_mode[]"> |
| 261 | 245 | <option value="Paragraph" <?php echo !isset($widget->location_string) || $widget->location_string === 'p' ? 'selected' : ''; ?>>Paragraph</option> |
| 262 | 246 | <option value="Other" <?php echo isset($widget->location_string) && $widget->location_string !== 'p' ? 'selected' : ''; ?>>Other (Custom)</option> |
| 263 | 247 | </select> |
| @@ -301,44 +285,30 @@ | ||
| 301 | 285 | onclick="setEnabledDisabled('#category_widget', this)" |
| 302 | 286 | name="category_enabled"/> |
| 303 | 287 | <span class="slider round"></span> |
| 304 | 288 | </label> |
| 305 | - <b style="font-size:15px;float: left;">Category (Section Page)</b> | |
| 306 | - <div class='tooltip'> | |
| 307 | - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN"> | |
| 308 | - <g fill="none" fill-rule="evenodd"><path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path> | |
| 309 | - </g> | |
| 310 | - </svg> | |
| 311 | - <div>Settings will be applied to all 'Category/Section' pages on your site.</div> | |
| 312 | - </div> | |
| 313 | - </div> | |
| 289 | + <b style="font-size:15px;">Category (Section Page)</b> | |
| 290 | + <div class='tooltip'> | |
| 291 | + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" | |
| 292 | + viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN"> | |
| 293 | + <g fill="none" fill-rule="evenodd"> | |
| 294 | + <path fill="currentColor" | |
| 295 | + d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path> | |
| 296 | + </g> | |
| 297 | + </svg> | |
| 298 | + <div>Settings will be applied to all Category/Section archive pages on your site.</div> | |
| 299 | +</div> | |
| 314 | 300 | |
| 301 | + </div> | |
| 302 | + | |
| 315 | 303 | <div class="label_below"> |
| 316 | - | |
| 317 | 304 | <div class="mode_style"> |
| 318 | - <label id="category_widget_id_label" style="float:left;">Mode (Widget ID):</label> | |
| 319 | - <div class='tooltip'> | |
| 320 | - <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> --> | |
| 321 | - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN"> | |
| 322 | - <g fill="none" fill-rule="evenodd"><path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path> | |
| 323 | - </g> | |
| 324 | - </svg> | |
| 325 | - <div>Your <i>category</i> Mode (Widget ID), as provided by Taboola.</div> | |
| 326 | - </div> | |
| 327 | - </div> | |
| 328 | - | |
| 329 | - <div class="placement_style"><label id="category_placement_label" style="float:left;">Placement Name:</label> | |
| 330 | - <div class='tooltip'> | |
| 331 | - <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> --> | |
| 332 | - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN"> | |
| 333 | - <g fill="none" fill-rule="evenodd"><path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path> | |
| 334 | - </g> | |
| 335 | - </svg> | |
| 336 | - <div>Your <i>category</i> Placement Name, as provided by Taboola.</div> | |
| 337 | - </div> | |
| 338 | - </div> | |
| 339 | - </div> | |
| 340 | - | |
| 305 | + <label id="category_widget_id_label" style="float:left;">Mode (Widget ID):</label> | |
| 306 | + </div> | |
| 307 | + <div class="placement_style"> | |
| 308 | + <label id="category_placement_label" style="float:left;">Placement Name:</label> | |
| 309 | + </div> | |
| 310 | + </div> | |
| 341 | 311 | |
| 342 | 312 | <div class="input_below"> |
| 343 | 313 | <div class="widget_below"> |
| 344 | 314 | <input id="category_widget_id" type="text" |
| @@ -351,55 +321,14 @@ | ||
| 351 | 321 | name="category_placement" placeholder="Placement Name"/> |
| 352 | 322 | </div> |
| 353 | 323 | </div> |
| 354 | 324 | |
| 355 | - <div class='heading_mid_home'><label style="float:left;">Position the widget immediately below the element:</label> | |
| 356 | - <div class='tooltip'> | |
| 357 | - <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> --> | |
| 358 | - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN"> | |
| 359 | - <g fill="none" fill-rule="evenodd"><path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path> | |
| 360 | - </g> | |
| 361 | - </svg> | |
| 362 | - <div>The widget will be placed <i>just beneath</i> this element.<br><br> | |
| 363 | - To target an element, 2 pieces of information are needed:<br><br> | |
| 364 | - i) A CSS selector - e.g. <i>p</i> (for paragraph).<br> | |
| 365 | - ii) An occurrence - e.g. 1st, 2nd, 3rd, etc.<br><br> | |
| 366 | - For more information, see the <a href="https://developers.taboola.com/web-integrations/docs/wordpress-plugin-managing-placements" target='_blank'>Taboola Dev Center</a>. | |
| 367 | - </div> | |
| 368 | - </div> | |
| 369 | - </div> | |
| 370 | - | |
| 371 | 325 | <div class="home_occurrence"> |
| 372 | 326 | <div class="mode_style_home_selector"> |
| 373 | 327 | <label id="category_location_string_label" style="float:left;">CSS selector :</label> |
| 374 | - <div class='tooltip'> | |
| 375 | - <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> --> | |
| 376 | - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN"> | |
| 377 | - <g fill="none" fill-rule="evenodd"><path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path> | |
| 378 | - </g> | |
| 379 | - </svg> | |
| 380 | - <div> | |
| 381 | - The element to target - e.g.:<br><br> | |
| 382 | - <i>section</i> - to target a <i>section</i>.<br> | |
| 383 | - <i>#my-id</i> - to target an <i>ID</i> of "my-id".<br> | |
| 384 | - <i>.my-class</i> - to target a <i>class</i> of "my-class". | |
| 385 | - </div> | |
| 386 | - </div> | |
| 387 | - | |
| 388 | 328 | </div> |
| 389 | 329 | <div class="placement_style_home_occurrence"> |
| 390 | 330 | <label id="category_occurrence_label" style="float:left;">Occurrence :</label> |
| 391 | - <div class='tooltip'> | |
| 392 | - <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> --> | |
| 393 | - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN"> | |
| 394 | - <g fill="none" fill-rule="evenodd"><path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path> | |
| 395 | - </g> | |
| 396 | - </svg> | |
| 397 | - <div>For a <b>non-unique</b> selector - e.g. <i>section</i> - fill in the <b>occurrence</b> to target.<br><br> | |
| 398 | - E.g. To target the <b>2nd</b> section, fill in <i>2</i>. <br><br> | |
| 399 | - For a <b>unique</b> selector - e.g. <i>#my-id</i> - leave the default value of '1'.</div> | |
| 400 | - </div> | |
| 401 | - | |
| 402 | 331 | </div> |
| 403 | 332 | </div> |
| 404 | 333 | |
| 405 | 334 | <div class="home_placement"> |