I have added four text widgets in one sidebar,
these sidebars are generated in four rows, one below the other.
What I want is to show them in one single row side-by-side.
I found class WP_Widget_Text in default-widgets.php, but I don't know how to do that.
One way is add the following code in style.css
<style type='text/css'>
.textwidget {
display:inline;
margin-left: 10px;
float:left;
}
</style>
you can also remove div tag from line 403
echo $before_widget;
if ( !empty( $title ) ) { echo $before_title . $title . $after_title; } ?>
echo !empty( $instance['filter'] ) ? wpautop( $text ) : $text;
echo $after_widget;
but this can't be a guaranteed solution, because $before_widget, $after_widget can output some code that can create div / add line breaks.
both these solutions are not update friendly. i.e. if you update WordPress or change your theme, you will see it won't work.
The best solution I feel is use one text widget, with some CSS as below.
<div style='float:left;display:block inline;margin-right:10px'>Widget text 1</div>
<div style='float:left;margin-right:10px'>Widget text 2</div>
<div style='float:left;margin-right:10px'>Widget text 3</div>
<div style='float:left'>Widget text 4</div>
you will have to use inline css. you can also add border and other styling to seprate the div's currently i have just added right margin
Related
I added this PHP function to display the excerpt of my products on the archive pages, however it affects the rest of my styling.
I'm trying to stop the CSS from my excerpts to affect the rest of the page. Basically I would like only the text without its own styling or bullets, or images, etc.
This is the code added :
<?php echo apply_filters( 'woocommerce_short_description', $post->post_excerpt ); ?>
add some html to your excerpt.. to target only that certain html...
example, adding a div with a class my-excerpt:
<div class="my-excerpt">
<?php echo apply_filters( 'woocommerce_short_description', $post->post_excerpt ); ?>
</div>
your css would then be:
.my-excerpt img {
border: 0;
}
This is semi related to my last question but i have set up a filemaker foreach loop to output a group of images to accompany there names and ids, along with a checkbox.
Once checked the relating images go to another page to print, No matter how much i try i cant get the elements to fit to one page ?
I have used inline styling, a Print css stylesheet, all possible combinations with chromes inspector.
I can make it fit, once the image name is taken away, but i need this included.
include('head.php');
if (isset($_POST['img'])) {
$img = $_POST['img'];
} else {
$img = '';
echo 'error';
}
?>
<div class="container">
<div class="row" >
<?
foreach ($img as $image){
//echo '<div class="col-md-5">';
echo '<img class="" style="margin:20px 10px 10px 0px; width:45%;" src="Invoices/Photos/RC_Data_FMS/Invoices_db/Photos/'.$image.'">';
echo '<p class="centered" style="width:45%;">'.$image.'</p>';
//echo '</div>';
}
?>
</div>
</div>
Basically i'm trying to achieve an A4 portrait, with a grid of 6 images, with a margin between and the label underneath.
I tried pushing everything into a col-md-6 div, taking the <p> tags away but this didn't help.
I also tried using px opposed to %, just cant figure this one out.
The code from the previous page;
echo '<input type="checkbox" class="form-control check" id="img" name="img[]" value="'.$pic.'">';
With the $pic variable being the image name.
I think you can achieve what you want by tweaking the img height in #media print, like so:
#media print{
img{max-height:280px} //tweak this until you're happy
}
Also, don't forget the img-responsive bootstrap class - it works wonders:)
<div class="col-xs-6"> <!-- this will limit img width if img-responsive used too-->
<img class="img-responsive" src="image.jpg">
<p>Filename 1</p>
</div>
You can probably also forgo most of your inline styling and stick with bootstrap's defaults at first, then tweak later if you really need to.
http://www.bootply.com/YZkHOq0C1i
I am trying to insert a custom tag after H3 tag with a certain class by inserting code into my theme's function.php file. Below is what I am doing but unable to achieve it.
If I have this, showing on a page currently:
<h3 class="title">TITLE HERE</h3>
<div class="desc">
I would like to insert a tag after h3 tag. Below is what I am trying to insert intp my theme functions.php file:
echo '<h3 class="title">TITLE HERE</h3>
<a tooltip="This is a test">TEST</a>
<div class="desc">'
As a result, I am just getting 'TEST' on the top of the page instead of showing it after the h3 tag.
Can you try this first.
Add **<div style="clear:both;"></div>** after your closing </h3> tag
OR
I think you are creating shortcode in function.php file. If you directly echo in your function then this problem will arise. First you assign the value to variable which you want to echo and then return this variable.
Eg:
function my_fun(){
$text='<h3 class="cuzd-title"> TITLE HERE</h3> <div style="clear:both;">
</div> <a data-tooltip="THIS IS TEST">TEST</a>';
return $text;
}
add_shortcode( 'shortcode_name', 'my_fun' );
now where you want these to be display just use
echo do_shortcode('[shortcode_name]');
Is it possible to use the_content() excluding the galleries? I want to make this because I need the gallery displayed with flexslider. I already integrate flexslider. If I want to show the content of the post, for example: some text, separated images and of course a gallery. It will display the gallery with flexslider and then the content with the text, images and the gallery again. I don't want the gallery duplicated.
<div class="entry-content">
<?php $gallery = get_post_gallery( get_the_ID(), false );?>
<div class="flexslider flexslider-gallery">
<ul class="slides slides-gallery">
<?php foreach( $gallery['src'] AS $src ){ ?>
<li>
<img alt="Gallery image" src="<?php echo $src; ?>" />
</li>
<?php } ?>
</ul> <!-- end .slides -->
</div> <!-- end .flexslider -->
<?php the_content(); ?>
</div><!-- .entry-content -->
Ok here is the solution:
Add to functions.php
function remove_shortcode_from($content) {
$content = strip_shortcodes( $content );
return $content;
}
and then call it when you need, in my case in content-gallery.php:
add_filter('the_content', 'remove_shortcode_from');
the_content();
remove_filter('the_content', 'remove_shortcode_from')
Two ways:
1) The WordPress Gallery is contained in a div with class .gallery. If flexsider does not also use that class, you could simply set your CSS to:
.gallery { display: none; }
2) You could get the content with get_the_content, parse it using a DOM parser and delete the Gallery.
Option #1 is less efficient, but avoids the complexity of parsing the DOM.
Neither method is guaranteed to work if the site is use a non-standard gallery plugin that is creating non-WP HTML.
I have a php code like this which mainly fetch rss feed from a site
<?php
$xmlstr = file_get_contents("http://news.myweb.com.au/index.php?format=feed&type=rss");
$xml_object = new SimpleXMLElement($xmlstr);
$items = $xml_object->channel->item;
?>
<?php foreach($items as $item):?>
<h1> <?php echo $item->title;?> </h1>
<p >
<?php echo substr($item->description, 0, 250);?>...
Read More
</p>
<?php endforeach; ?>
now I am including that file in some other file like this
<div class="leftColumnH">
<?php include('blog.php');?>
</div>
<div class="rightColumnH">
<h2 class="fontstyle leftColumnText ">Web Development & Graphic Design</h2>
some test here
</div>
But while I see it in browser, "rightcolumn" goes inside a div with class "feed-description" inside leftColunm.
You have to make sure that your <?php echo substr($item->description, 0, 250);?> is not echoeing any div tag. If $item->description has <div> tag, then your truncate might be removing the </div> tag.
If its echoing div tag then close the tag.
Hope this helps.
I assume that you are using float for leftColumnH and rightColumnH.
When you use float for child div, parent div's height will not be set to child div's height unless your parent div also have float attribute.
For example:
Create these classes
.parent{ border:1px solid red;}
.childLeft{border:1px solid blue;float:left;width:49%; height:100px;}
.childRight{border:1px solid blue;float:right;width:49%; height:100px;}
Now in your html file
<div class="parent">
<div class="childLeft"></div>
<div class="childRight"></div>
</div>
If you run this file you will be able to see your child divs will not be included inside your parent div properly.
To make that just try to apply float attribute to your parent div also. Refer below CSS
.parent{ border:1px solid red;float:left;width:100%}
Now if you run this file then you can see your child divs will be included in your parent div.
I refer you to check this one in your code and do the necessary style changes. This is nothing to do with PHP. You better post your CSS code with your parent div and its CSS code also. Because I answer you, by assuming that you are using float for child divs.