How can I Override NyroModal Wrapper.
I dont want to override the css class, we need the ability TO ADD our divs instead of the native WRAPPER div.
On GitHub i found 2 functions: beforeShowCont and filledContent, but i dont know how to override the wrapper using these functions.
And I also found this article on code google, and this is exactly what i want to develop, but it doesnt say how.
<table class="ctools-modal-content">
<tr>
<td class="popups-tl popups-border"></td>
<td class="popups-t popups-border"></td>
<td class="popups-tr popups-border"></td>
</tr>
<tr>
<td class="popups-cl popups-border"></td>
<td class="popups-c">
<div class="popups-container">
<div class="popups-title">
<span id="modal-title" class="modal-title"></span>
<span class="popups-close"><a class="close" href="#">Close</a></span>
<div class="clear-block"></div>
</div>
<div id="modal-content" class="modal-content">HERE WOULD .wrapper OR #nyroModalContent GO</div>
<div class="popups-buttons"></div>
<div class="popups-footer"></div>
</div>
</td>
<td class="popups-cr popups-border"></td>
</tr>
<tr>
<td class="popups-bl popups-border"></td>
<td class="popups-b popups-border"></td>
<td class="popups-br popups-border"></td>
</tr>
</table>
I refer the nyroModal code from here
If you want to override the wrapper class of it, you can do it by following way.
select the main container of the nyroModal.
add the new style for its wrapper.
i.e.
div#nyroModalFull div.wrapper{ /* your own style*/ }
load your own stylesheet after the nyroModal style
I hope this will work for you
Related
I've been battling with this issue for a while now and can't find out why it's happening. I basically have a table which displays Woocommerce variations with each variation being in it's own row. The problem I have is when refreshing the page, the <th> row collapses and doesn't line up with the tbody.
Interestingly, if i change some of the css of the <th> in the console after the page loads, it fixes itself and lines up. The same applies If i open up the console after turn on 'Disable Cache' in the network tab and refresh the page.
My guess is the html is being loaded before the Woocommerce data is being added and doesn't have enough time to get the correct widths. However, this is a recent issue which has only just started happening.
Does anyone know what could cause this?
<table class="variations variations-grid" cellspacing="0">
<thead>
<tr>
<th><img class="camera-icon" src="/wp-content/uploads/2016/10/picture-holder.png"></th>
<th>
Type
</th>
<th>Length</th>
<th class="length">Weight</th>
<th>Height</th>
<th>Depth</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="thumbnail">
<img width="44" height="54" alt="Photinia Red Robin " src="/wp-content/uploads/2016/09/Photinia-Red-Robin-267x325.jpg">
</div>
</td>
<td class="attr attr-attribute_size">
<p>Hedge Bag</p>
</td>
<td class="attr attr-attribute_length">
<p>100cm</p>
</td>
<td class="attr attr-attribute_weight">
<p>75Kg</p>
</td>
<td class="attr attr-attribute_height">
<p>140-150cm+</p>
</td>
<td class="attr attr-attribute_depth">
<p>40cm</p>
</td>
<td class="price">
<span class="price"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</span>191.00</span></span>
per metre
</td>
<td class="product-actions">
<a class="button" href="#modal0">More info</a>
</td>
</tr>
</tbody>
</table>
This is what is looks like broken:
This is what is looks like if i the disable cache OR change the css once it's loaded. This is how It should look.
I count more <td> in your <tbody> than <th> in your <thead>. Could this be the issue? Try to add empty <td> to match your <th> head count to test.
I am using mpdf library to generate PDF from HTML.I came across the limitation of mpdf that we cannot use block level elements inside table.Is there any possible way to make mpdf work with following code?. I tried span instead of p but its not act like block level elements.
<table style="width:100%; table-layout:fixed">
<tr>
<td>
<p style="text-align:left;font-size:14px;font-family:Arial;padding-left:105px;">Some text</p>
<p style="text-align:left;font-weight:normal;font-size:14px;font-family:Arial;padding-left:125px;">Some text Some text Some text </p>
</td>
</tr>
</table>
The styles of Block level elements inside table,td won't reflect in PDF.I have fixed above issue with using another table by following.Hope it will help someone.
<table style="width:100%; table-layout:fixed">
<tr>
<td>
<table>
<tr>
<td style="text-align:left;font-size:14px;font-family:Arial;padding-left:105px;">
Some text
</td>
</tr>
<tr>
<td style="text-align:left;font-weight:normal;font-size:14px;font-family:Arial;padding-left:125px;">
Some text Some text Some text
</td>
</tr>
</table>
</td>
</tr>
</table>
I am able to get the coding of a website with file_get_contents but I want to be able to get certain values out of the html. This piece of code is always the same but the value between the html tag changes from time to time. This is the HTML Code:
<div class="cheapest-bins">
<h3>Cheapest Live Buy Now</h3>
<table>
<tbody><tr>
<th>Console</th>
<th>Buy Now Price</th>
</tr>
<tr class=" active">
<td class="xb1">XB1</td>
<td>1,480,000</td>
</tr>
<tr class="">
<td class="ps4">PS4</td>
<td>1,590,000</td>
</tr>
<tr class="">
<td class="x360">360</td>
<td>---</td>
</tr>
<tr class="">
<td class="ps3">PS3</td>
<td>2,800,000</td>
</tr>
</tbody></table>
</div>
How would I go about getting the: 1,480,000 .. 1,590,000 .. --- and 2,800,000?
short answer:
find a css selector library such as https://github.com/tj/php-selector
then you could grab all td:last-child elements/innerhtml
for your specific example you could just just
preg_match_all('#<td>(.*?)</td>#', $html, $matches);
mPDF: Hide table row (CSS display:none) not work.
Do you have any suggest?
My code:
<table align="center">
<tr style="display:none">
<td valign="top" align="left">InfoOption1:</td>
<td valign="top" align="left" colspan="2">#InfoOption1</td>
</tr>
</table>
I feel very dirty for posting this suggestion, but it's the best I got working:
<tr><td>...</td></tr>
<div style="display: none;">
<tr><td>...</td></tr>
</div>
The DIV is the working part. Luckily, html validnes for seo isnt relevant for mPDF
It works if you enclose the row you want to hide inside a Div. The div will have a class which have declared hidden property.
<div class='hide_this_row'>
<tr>
<td>...</td>
</tr>
</div>
<!-- CSS file will look like this -->
<style>
.hide_this_row{
display :none;
}
</style>
I am working on a site that isn't SEO friendly. Specifically, the header.tpl is inserted automatically into every page, with no option to change it based on the content of the page. I.e., whether category = Bathroom or category = Kitchen, etc.
So I need an if/else command, but having trouble figuring it out in this instance, plus the change that goes along with it.
The code on the portfolio_category.php page is as follows, and what needs to change based on vf_category is parts/header.tpl (I can create Bathroomheader.tpl, Kitchensheader.tpl, etc so that relevant tpl has the relevant Title and Description tags for the page).
<?php
$vc_root_friendly = '.';
$vc_root_site = '.';
include_once("$vc_root_site/config.php");
include_once("$vc_includes_folder/IT.php");
$template_body = new HTML_Template_IT();
$template_body->loadTemplateFile("tpl_portfolio_category.html");
include_once("$vc_includes_folder/images.php");
if(!isset($_REQUEST['vf_category'])){
header("location:portfolio.php");
die();
}
//Show header
$template_header = new HTML_Template_IT();
$template_header->loadTemplateFile("parts/header.tpl",true,false);
$template_body->setVariable('header', $template_header->get());
//Show footer
$template_footer = new HTML_Template_IT();
$template_footer->loadTemplateFile("parts/footer.tpl",true,false);
$template_body->setVariable('footer', $template_footer->get());
$template_body->setVariable("image_category", $_REQUEST['vf_category']);
//Select photos for this category
etc.
Complicating things there is another page referenced in the code above:
tpl_portfolio_category.html
And this page too has its own header.tpl include:
<? include_once 'parts/header.tpl'; ?>
{header}
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td class="main"><h1><span class="firstLetter">{image_category}</span></h1>
<p>
</p>
<table height="89" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="7"> </td>
</tr>
<!-- BEGIN block_thumb -->
<tr>
<td width='180' height="120" background="./images/thumb-bg.gif"> <div
align="center">{thumb1}</div></td>
<td width="10"> </td>
<td width='180' background="./images/thumb-bg.gif"> <div align="center">{thumb2}
</div></td>
<td width="10"> </td>
<td width='180' background="./images/thumb-bg.gif"> <div align="center">{thumb3}
</div></td>
<td width="10"> </td>
<td width='180' background="./images/thumb-bg.gif"> <div align="center">{thumb4}
</div></td>
</tr>
<tr valign="bottom">
<td height="3"></td>
<td height="3"></td>
<td height="3"></td>
<td height="3"></td>
<td height="3"></td>
<td height="3"></td>
<td height="3"></td>
</tr>
<!-- END block_thumb -->
</table>
<br>
<img src="images/spacer.gif"></td>
</tr>
</table>
{footer}
Any guidance would be appreciated! I'm just trying to get parts/header.tpl to change to parts/Bathroomheader.tpl or parts/Kitchenheader.tpl based on the vf_category pulled from the database. But it's driving me nuts.
Thanks in advance,
Gary
there are a few ways to do this, but in order to minimize the number of files you're changing, I suggest that you:
a) Pull the variable from the database and assign it to smarty, on your first php file, for both the header and body:
//Assuming you have retrieved $vf_category from your database;
$template_header->setVariable('vf_category', $vf_category);
$template_body->setVariable('vf_category', $vf_category);
b) Edit your file header.tpl and append the following code at the top:
{if 'vf_category' == 'some_value'}
{include file="parts/Kitchenheader.tpl"};
{elseif 'vf_category' == 'other_value'}
{include file="parts/Bathroomheader.tpl"};
{else}
//the rest of the header.tpl code goes here
{/if}