I need to change text-decoration to none on my preview text, but I can't do it. Perhaps I am using wrong selectors.
.content .main-content.single .post-content{
text-decoration: line-through;
}
<div class="content clearfix">xxx
<div class="main-content single">
<h1 class="post-title"><?php echo $post['title']; ?> </h1>
<div class="post-content">
<?php echo html_entity_decode($post['body']); ?>
xxx
</div>
</div>
</div>
Daniel is right by adding a comma it applies to all and additionally change the text-decoration: line-through; to text-decoration: none;
:)
<style>
.content, .main-content.single, .post-content{
text-decoration: none;
}
</style>
<div class="content clearfix">xxx
<div class="main-content single">
<h1 class="post-title"><?php echo $post['title']; ?> </h1>
<div class="post-content">
<?php echo html_entity_decode($post['body']); ?>
xxx
</div>
</div>
</div>
Related
I have two pages with search results from the Search & Filter plugin, as i don't know how to build the query and loop myself.
http://staging.montra.dk/tilbud & http://staging.montra.dk/events
I want the results to look just like my blocks on the rest of the site; image on one side - text on the other, and then reverse that in the next row. I've successfully managed to display this on every other page than the Search & Filter pages. It's either all images on the left or right, not reversing every other.
I've targeted the div id #artikel on the working pages, but that won't work. Do i need to use some kind of unique id here?
This is my css from the results php;
<section id="post-<? the_ID(); ?>" <? post_class('blok-item'); ?>>
<div class="container-wrap">
<div class="container">
<div id="search-blok" class="row">
<div id="artikel">
<div id="artikel-image" class="col-sm-12 col-md-12 col-lg-6" style="background:linear-gradient( rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.1)), url(<?php the_field( 'intro_billede' ); ?>); background-position: 0% 50%; background-size: cover;"></div>
<div id="artikel-content" class="col-sm-12 col-md-12 col-lg-6">
<div class="hotel-name-artikel">
<?php the_field( 'intro_lille_overskrift' ); ?>
</div>
<div class="artikel-overskrift">
<h2><?php the_title(); ?></h2>
</div>
<div class="artikel-intro">
<?php the_field( 'intro_tekst' ); ?>
</div>
<?php if ( get_field( 'intro_pris' ) ): ?>
<div class="pris-wrapper">
<h2 class="pris">KR. <?php the_field( 'intro_pris' ); ?>,-</h2>
<h4 class="pris-ekstra"><?php the_field( 'intro_pris_extra' ); ?></h4>
</div>
<?php endif ?>
<div class="artikel-link-container">
<?php if ( have_rows( 'links_repeater' ) ) : ?>
<?php while ( have_rows( 'links_repeater' ) ) : the_row(); ?>
<?php $side_intro_repeater_knap_url = get_sub_field( 'side_intro_repeater_knap_url' ); ?>
<?php if ( $side_intro_repeater_knap_url ) { ?>
<a class="<?php the_sub_field( 'repeater_knap_farve' ); ?>" style="float:left" href="<?php echo $side_intro_repeater_knap_url; ?>"><?php the_sub_field( 'repeater_knap_tekst' ); ?></a>
<?php } ?>
<?php endwhile; ?>
<?php else : ?>
<?php // no rows found ?>
<?php endif; ?>
</div>
</div>
</div>
</div>
</div>
</div>
and the :nth-child css:
artikel:nth-last-child(odd) {
display: -webkit-flex; /* Safari */
-webkit-flex-direction: row-reverse; /* Safari 6.1+ */
display: flex;
flex-direction: row-reverse;
flex-wrap: wrap;
}
Now i'm no wiz at php nor css, so the code might not be precisely as it ought to be, so please bare that in mind :)
Thanks for all help and assistance
I want the results to look just like my blocks on the rest of the
site; image on one side - text on the other, and then reverse that in
the next row.
I'm not entirely sure I understand the question, but if I do, you are definitely on the right track using flex-direction: row and flex-direction: row-reverse.
Working Example:
article {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 600px;
}
article:nth-of-type(even) {
flex-direction: row-reverse;
}
.text-block,
.image-block {
flex: 1 1 50%;
}
img {
display: block;
width: 90%;
height: 150px;
margin-top: 30px;
line-height: 150px;
text-align: center;
border: 1px solid rgb(0, 0, 0);
}
<main>
<article>
<div class="text-block">
<h2>Heading</h2>
<p>Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph.</p>
</div>
<div class="image-block">
<img src="" alt="Image" />
</div>
</article>
<article>
<div class="text-block">
<h2>Heading</h2>
<p>Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph.</p>
</div>
<div class="image-block">
<img src="" alt="Image" />
</div>
</article>
<article>
<div class="text-block">
<h2>Heading</h2>
<p>Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph.</p>
</div>
<div class="image-block">
<img src="" alt="Image" />
</div>
</article>
<article>
<div class="text-block">
<h2>Heading</h2>
<p>Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph.</p>
</div>
<div class="image-block">
<img src="" alt="Image" />
</div>
</article>
</main>
This is the container and two sections which i'd like to display flex; one with the image on the left and text on the right. The next row text on the left, image on the right.
This is the container and two sections which i'd like to display flex; one with the image on the left and text on the right. The next row text on the left, image on the right.
<div class="search-filter-results" id="search-filter-results-2898">
<div class="container" style="background-color:#21002c;color:#fff;">
<div class="search-results"><h6>Viser 24 resultater</h6></div>
</div>
<div class="pagination">
<div class="nav-previous"><a href="http://staging.montra.dk/tilbud?sf_paged=2" >Ældre indlæg</a></div>
<div class="nav-next"></div>
</div>
<section id="post-3293" class="blok-item post-3293 odderparkhotel type-odderparkhotel status-publish kategori-tilbud hoteller-odder-parkhotel">
<div class="container-wrap">
<div class="container">
<div id="search-blok" class="row">
<div class="artikel">
<div class="artikel-image col-sm-12 col-md-12 col-lg-6" style="background:linear-gradient( rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.1)), url(http://staging.montra.dk/wp-content/uploads/2020/01/Weekend-intro.jpg); background-position: 0% 50%; background-size: cover;"></div>
<div class="artikel-content col-sm-12 col-md-12 col-lg-6">
<div class="hotel-name-artikel">
</div>
<div class="artikel-overskrift">
<h2>Weekendphold for 2 i Jylland</h2>
</div>
<div class="artikel-intro">
<p>Nyd et weekendophold for 2 på 4-stjernet hotel i Odder syd for Århus med velrenommeret køkken, som byder på udsøgte smagsoplevelser.</p>
</div>
<div class="pris-wrapper">
<h2 class="pris">KR. 995,-</h2>
<h4 class="pris-ekstra"></h4>
</div>
<div class="artikel-link-container">
<a class="knap-1" style="float:left" href="http://staging.montra.dk/odder-parkhotel/weekendphold-for-2-i-jylland">Læs mere</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="post-3290" class="blok-item post-3290 odderparkhotel type-odderparkhotel status-publish kategori-tilbud hoteller-odder-parkhotel">
<div class="container-wrap">
<div class="container">
<div id="search-blok" class="row">
<div class="artikel">
<div class="artikel-image col-sm-12 col-md-12 col-lg-6" style="background:linear-gradient( rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.1)), url(http://staging.montra.dk/wp-content/uploads/2020/01/Aarhus-intro.jpg); background-position: 0% 50%; background-size: cover;"></div>
<div class="artikel-content col-sm-12 col-md-12 col-lg-6">
<div class="hotel-name-artikel">
Montra Odderpark Hotel </div>
<div class="artikel-overskrift">
<h2>Mangler du også en studiebolig til studiestart 2020</h2>
</div>
<div class="artikel-intro">
<p>I Århus er der mangel på studieboliger og derfor vil vi på Montro Odder Parkhotel gerne hjælpe studerende, som er i akut boligmangel.</p>
</div>
<div class="pris-wrapper">
<h2 class="pris">KR. 2.000,-</h2>
<h4 class="pris-ekstra"></h4>
</div>
<div class="artikel-link-container">
<a class="knap-1" style="float:left" href="http://staging.montra.dk/odder-parkhotel/mangler-du-ogsaa-en-studiebolig">Læs mere</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Screenshots:
Inspect element shows:
The "7 in stock" i want to align with the "10" bellow
I would like to align two $elements to display on the same line.
<span class="max">
<?php echo $tickets_sold, $max_tickets; ?>
</span>
When the $tickets_sold is not included, the $max_tickets goes on the top. But when it's included, it immediately goes on the next line.
I've tried many different options as &&, and, but they never appear on the same line. I am sure the solution is easy, but I am a beginner.
$max_tickets = $product->get_max_tickets();
$tickets_sold = wc_get_stock_html( $product );
PHP code
<div class="wcl-progress-meter <?php if($product->is_max_tickets_met()) echo 'full' ?>">
<progress max="<?php echo $max_tickets ?>" value="<?php echo $lottery_participants_count ?>" low="<?php echo $min_tickets ?>"></progress></br>
<span class="zero">0 </span>
<span class="max"> <?php echo $tickets_sold, $max_tickets?></div></span>
</div>
CSS file
.wcl-progress-meter meter::-webkit-meter-suboptimum-value {
box-shadow: 0 5px 5px -5px #999 inset;
background: #cb132b;
display:inline-block;
}
.wcl-progress-meter .zero {
display: inline-block;
position: absolute;
top: -100%;
}
.wcl-progress-meter .min {
display: inline-block;
position: absolute;
top: -100%;
}
.wcl-progress-meter .max {
display: inline-block;
position: absolute;
top: -100%;
right: 0;
vertical-align: middle;
}
Just tweak your HTML a bit and all should work as you desire:
<style>
.flex-parent{display:flex;}
.flex-child{flex-basis:content;margin-right:10px;}
</style>
<div class="max flex-parent">
<div class="flex-child"><?php echo $tickets_sold;?></div>
<div class="flex-child"><?php echo $max_tickets;?></div>
</div>
<style>
.flex-parent{display:flex;}
.flex-child{flex-basis:content;margin-right:10px;}
</style>
<div class="max flex-parent">
<div class="flex-child">tickets_sold</div>
<div class="flex-child">max_tickets</div>
</div>
Or, you could also just use display:inline:
<style>
.inline-block{display:inline-block;margin-right:10px;}
</style>
<div class="max">
<div class="inline-block"><?php echo $tickets_sold;?></div>
<div class="inline-block"><?php echo $max_tickets;?></div>
</div>
<style>
.inline-block{display:inline-block;margin-right:10px;}
</style>
<div class="max">
<div class="inline-block">tickets_sold</div>
<div class="inline-block">max_tickets</div>
</div>
Update:
Note the change to the first example code - I neglected to add the flex-parent class (a className I invented, not a convention) to the .max div.
To center the items in the parent, add justify-content:center; to the parent:
<style>
.flex-parent{display:flex;}
.flex-child{flex-basis:content;margin-right:10px;justify-content:center;}
</style>
<div class="max flex-parent">
<div class="flex-child"><?php echo $tickets_sold;?></div>
<div class="flex-child"><?php echo $max_tickets;?></div>
</div>
Using the display:inline-block method:
<style>
.inline-parent{text-align:center;}
.inline-block{display:inline-block;margin-right:10px;}
</style>
<div class="max inline-parent">
<div class="inline-block"><?php echo $tickets_sold;?></div>
<div class="inline-block"><?php echo $max_tickets;?></div>
</div>
<style>
.inline-parent{text-align:center;}
.inline-block{display:inline-block;margin-right:10px;}
</style>
<div class="max inline-parent">
<div class="inline-block">tickets_sold</div>
<div class="inline-block">max_tickets</div>
</div>
Here's my HTML:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-sm-3">
<img class="img-sm" src="<?php echo Config::get('links/app_root') . 'assets/imgs/icons/user-add.png'; ?>">
<p>User Add</p>
</div>
<div class="col-sm-3">
<img class="img-sm" src="<?php echo Config::get('links/app_root') . 'assets/imgs/icons/user-edit.png'; ?>">
<p>User Edit</p>
</div>
<div class="col-sm-3">
<img class="img-sm" src="<?php echo Config::get('links/app_root') . 'assets/imgs/icons/user-delete.png'; ?>">
<p>User Delete</p>
</div>
</div>
</div>
I'm looking to make the HTML like this:
<a href="#">
<div class="col-sm-3">
....
</div>
</a>
Where when the whole column is a link and when hovered over it changes opacity and is able to redirect to another page. However when i change my HTML my style sheet gets super messed up, and the alignment goes all haywire. (See second Code Pen)
https://codepen.io/JDSWebService/pen/BZpoaq
This is how I want it to look when all is said in done. Three evenly spaced column's with the correct widths.
Heres the Codepen of the issues i'm running into when i change my HTML code
https://codepen.io/JDSWebService/pen/bRgVVz
Help?
You can add 'onclick' instead of messing around with tag since that will screw up the bootstrap's col settings.
For example, <div class="col-sm-3" onclick="location.href='add.user.php';">
Please check out this Codepen. I was not able to test your links, but please let me know if this is what you are looking for.
https://codepen.io/pkshreeman/pen/awpvGy
You can put the a tag inside the col-3 and put all the rest of the content in it. Display the a tag as block, then move the padding code that is on the col-3 to the a tag. You can also move the background and border radius to be on the a tag as well. The col-3 should just be that, columns.
.row {
display: flex;
justify-content: center;
}
.col-sm-3 {
text-align: center;
margin: 0 2.5%;
}
.col-sm-3:hover {
opacity: 0.9;
}
.col-sm-3 a {
font-size: 1.5em;
color: white;
display:block;
padding: 2.5% 25px;
background: #303030;
border-radius: 25px;
}
.col-sm-3 a:hover {
text-decoration: none;
color: #00bc8c;
}
.img-sm {
width: 100px;
height: 100px;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-sm-3"><a href="adduser.php">
<img class="img-sm" src="<?php echo Config::get('links/app_root') . 'assets/imgs/icons/user-add.png'; ?>">
<p>User Add</p></a>
</div>
<div class="col-sm-3"><a href="edituser.php">
<img class="img-sm" src="<?php echo Config::get('links/app_root') . 'assets/imgs/icons/user-edit.png'; ?>">
<p>User Edit</p></a>
</div>
<div class="col-sm-3"><a href="deleteuser.php">
<img class="img-sm" src="<?php echo Config::get('links/app_root') . 'assets/imgs/icons/user-delete.png'; ?>">
<p>User Delete</p></a>
</div>
</div>
</div>
I havn't tried this out but I'm pretty sure that one way is to give your link a class like:
<div class="container">
<div class="row">
<a href="adduser.php" class="link">
<div class="col-sm-3">
<img class="img-sm" src="<?php echo Config::get('links/app_root') . 'assets/imgs/icons/user-add.png'; ?>">
<p>User Add</p>
</div>
</a>
and then something like:
.link {
height: 100%;
width: 100%
}
of course from there you can give the .link whatever properties you like. Might not be the best solution, but it is one solution I believe.
This can be easily done with jquery
give class name other than col-sm-3 for each div
make firstcol or col-sm-3 for all cursor: pointer;
$(".firstcol").click(function(){
window.location = "URL";
});
I am making a invoice generate web application. invoice is design with div, and row & cell are also border lined div.
All is good in the screen but when i send invoice to print, all the bottom border line are stack up in first page which are to be in second page, weird part is this only happens in second page only.
How can I fix this??
Here is HTML code for each row this keep looping for max number of rows needed.
<div class="container_24">
<div id="invoice_frame" class="grid_18" style="padding:0px;">
<?php for ($x = 1; $x <= 60; $x++) {
<!-- Row Box <?php echo $x ?> -->
<div class="rowBox rowBox-<?php echo $x ?> ti_box_WO_bottom" data-id="1" style="width:705px;">
<div class="ti_box_onlyRight"> </div>
<div class="ti_box_onlyRight"> </div>
<div class="ti_box_onlyRight" style="width:378px;" align="left"> </div>
<div class="ti_box_onlyRight"> </div>
<div style="margin:0px; margin-right:3px;"> </div>
</div>
<?php } ?>
<div class="ti_line"> </div>
<div>
<div style="width:592px;" align="right"><strong>Total: </strong></div>
<div class="ti_box" style="width:113px;" align="center"><?php echo $TInvoice_ROW['total_amount']; ?></div>
</div>
<div>
<div style="width:592px;" align="right"><strong>Tax(GST) 6%: </strong></div>
<div class="ti_box" style="width:113px;" align="center"><?php echo $TInvoice_ROW['gst_amount']; ?></div>
</div>
<div>
<div style="width:592px;" align="right"><strong>Grand Total: </strong></div>
<div class="ti_box pv_total_box" style="width:113px; margin:0px;"><?php echo $TInvoice_ROW['total_grand']; ?></div>
</div>
<div>
<div style="padding-top:6px;" align="right"><strong>Amount in words: </strong></div>
<div style="width:559px; vertical-align:text-bottom; margin:0px;" align="left">
<textarea name="inwords" disabled="disabled" readonly class="pv_textbox_WO_outline" id="inwords" style="width:580px;"></textarea>
</div>
</div>
</div>
</div>
Here is CSS
.container_24 {
margin-left: auto;
margin-right: auto;
width: 960px;
}
#invoice_frame {
margin: 5px;
background-color: #FFF;
padding: 20px;
}
#invoice_frame div{
display: inline-block;
float: left;
}
#invoice_frame div.ti_box_onlyRight {
border-right-width: 1px;
border-right-style: solid;
border-right-color: #000;
margin:0px !important;
}
#invoice_frame div.ti_box_WO_bottom {
border: 1px solid #000;
border-bottom: none !important;
}
I am designing a web page which has a list of dates appearing on below the other. I want to align the dates such that they line up perfectly below each other. I have tried using align but it didn't make a difference. I also tried putting a style tag but I got an error which said:
"Element "style" not allowed as child of element "div" in this context."
Here's the code of the page:
<div class="report-title">
<h1>Response Tracking Report</h1>
</div>
<div class="info">
<div style="width:93%;float:left;">
<p class="title">Project: </p>
<p class="value"><?php echo $response_data['project_name']; ?></p>
</div>
<div class="spacer"></div>
<div style="width:7%;float:left;">
<p class="value"><?php echo date("Y-m-d"); ?></p>
</div>
<div class="bottom"></div>
</div>
<div id='response-info' class='info'>
<div style='width:100%;'>
<p class='title'>Risk Statement: </p>
<p id='risk_statement' class='value'><?php echo $response_data['risk_statement']; ?></p>
<br/><br/>
</div>
<div style='width:24%;float:left;'>
<p class='title'>WBS: </p><p class='value'><?php echo $response_data['WBS']; ?></p>
<br/><br/>
<p class='title'>Date of Plan: </p><p class='value' ><?php echo $response_data['date_of_plan']; ?></p>
<br/><br/>
<p class='title'>Last Updated: </p><p class='value' ><?php echo $response_data['date_of_update']; ?></p>
<br/><br/>
<p class='title'>Planned Closure: </p><p class='value' ><?php echo $response_data['planned_closure']; ?></p>
</div>
<div class='spacer' style='width:1%;float:left;height:1px;'></div>
<div style='width:24%;float:left;'>
<p class='title'>Owner: </p><p class='value'><?php echo $response_data['owner']; ?></p>
<br/><br/>
<p class='title'>Cost: </p><p class='value'>$<?php echo round($response_data['cost']); ?></p>
<br/><br/>
<p class='title'>Release Progress: </p><p class='value'><?php echo $response_data['release_progress']; ?></p>
<br/><br/>
<p class='title'>Action: </p><p class='value'><?php echo $response_data['action']; ?></p>
</div>
<div class='spacer' style='width:1%;float:left;height:1px;'></div>
<div style='width:50%;float:left;'>
<p class='title'>Current Status: <br/> </p><p class='value'><?php echo $response_data['current_status']; ?></p>
<br/>
<br/>
<p class='title'>Action Plan: <br/> </p><p class='value'><?php echo $response_data['action_plan']; ?></p>
</div>
<div id='bottom' style='clear:both;width:100%'></div>
</div>
<div id="ResponseUpdateTableContainer" class="jTableContainer" style="width:100%;"></div>
</body>
How dates are displayed currently: http://imgur.com/UxbugwX
How I am trying to get them: http://imgur.com/mAgfRYO
I am new to html so please excuse my errors. All help is greatly appreciated.
To have those DIV'saligned, you need to give them the same width, the problem with this, is when you have dynamic text, and the length overflow your already specifyed width.
One solution, is emulate the native table style, with display property in your css
like this for example:
.table { display: table; }
.row { display: table-row; }
.cell { display: table-cell; }
Then, your html will have something similar to this markup:
<div class="table">
<div class="row">
<span class="cell title">WBS:</span>
<span class="cell value">1.1</span>
</div>
<div class="row">
<span class="cell title">Planned Closure:</span>
<span class="cell value">2014-07-18</span>
</div>
<div class="row">
<span class="cell title">Last Updated:</span>
<span class="cell value">2014-09-10</span>
</div>
<div class="row">
<span class="cell title">Date of Plan:</span>
<span class="cell value">2014-04-26</span>
</div>
</div>
jsFiddle example: http://jsfiddle.net/gmolop/csx10g64/
With this code the dates will be aligned:
HTML:
<div class="container">
<div class="title">Date of Plan:</div>
<div class="date">2014-04-26</div>
</div>
<div class="container">
<div class="title">Last Updated:</div>
<div class="date">2014-09-10</div>
</div>
<div class="container">
<div class="title">Planned Closure:</div>
<div class="date">2014-07-18</div>
</div>
CSS:
.container {
width: 600px;
}
.title {
width: 180px;
display: inline-block;
}
.date {
width: 180px;
display: inline-block;
}
You can see the result here: http://jsfiddle.net/ben220/fuzhvL54/
I hope it helps.
I was able to solve the problem using margin-left, adjusting it until the dates aligned.