Using GD Star Rating Wordpress Plugin.
I'm having an extremely tough time trying to figure out how to do something as simple as resizing the rating button.
I have an image that I want to use as thumbs up/down, but it's width is 232px instead of the default max 40px.
Has anyone accomplished resizing the stars/thumbs past 40px or am I the only one in the world with this problem?
To put it simply:
BEFORE
AFTER
If you can do it via css use width:40px !important;height:40px !important;
comment-> It would help if you paste a link to your site.
The new image width is 232px, so the code should be:
width:232px !important;height:232px !important;
But can you be more specific about what issue you are having?
new image being cut off? or is it not resized at all when you view it on browser?
I know how can you change the size of thumb.
Go to : plugins/gd-star-rating/css/gdsr.css.php line:183
you found this:
echo sprintf(".gdt-size-%s.gdthumb, .gdt-size-%s.gdthumb a, .gdt-size-%s.gdthumb div { width: %spx; height: %spx; }\r\n", $size, $size, $size, $size, $size);
change it:
echo sprintf(".gdt-size-%s.gdthumb, .gdt-size-%s.gdthumb a, .gdt-size-%s.gdthumb div { width: 232px; height: 232px ; }\r\n", $size, $size, $size, $size, $size);
change: width and height , after that change the image size.
Related
I converted my wordpress theme to responsive..
all values of "width" change to percents (%)
and the poroblem is :
from 400px width it show:
first line 2 post
second line just one post (instead 2 post)..
how can i fix that so the page will show 2 post in all line?
i attached some pictures to explain the situation.
image of smartphone until 400px width
image of 500px
Ok your situation was a little tricky. The theme was not really designed in the best way to make those "blocks" responsive. To make it work I added js to your footer (you can move this to a js file if you prefer)
<script>
function equal_cols(el)
{
var divs = jQuery(el);
divs.css('height', '');
var tallestHeight = divs.map(function(i, al) {
return jQuery(al).innerHeight();
}).get();
divs.css('height', Math.max.apply(this, tallestHeight));
//alert(Math.max.apply(this, tallestHeight));
}
( window ).resize(function() {
$('.products-row').each(function(){
var el = $(this).find('.product-container');
equal_cols(el);
});
}).resize();
jQuery(window).resize(function() {
columnConform();
});
jQuery(document).ready(function() {
columnConform();
});
Then in the movie-home.php and taxonomy-movie-genre.php file I commented out the "clears" that were being added every third row. We don't need that any more since we are making all the boxes the same size with JS.
<?php /* if(++$counter % 3 == 0) : ?>
<div class="clear"></div>
<?php endif; */ ?>
The only gotcha is that all the boxes are the same size now regardless of how much content is in them.
I have a problem. When I post a featured image in a post and I publish, the only thing that is seen is one color background. The funny thing is that only one picture works. I have 5 pictures. 1 of them is showing up. All have the same size, all are .jpg. I don't know what to do. Has anybody seen something like that?
This is the functions.php
function fotosani_setup(){
add_theme_support('post-thumbnails');
add_image_size('small-thumbnail', true); /* width, height, softcrop*/
add_image_size('banner-image', true);
}
add_action('after_setup_theme','fotosani_setup');
CSS is just styling for the border.
single.php is calling in the same way as in index.php
<div class="post-image">
<?php the_post_thumbnail('banner-image'); ?>
<?php
echo the_content();
if(is_active_sidebar ('post1')) : ?>
</div>
Your function calls to add_image_support() are not correct.
add_image_size('small-thumbnail', true); /* width, height, softcrop*/
add_image_size('banner-image', true);
is equivalent to:
add_image_size('small-thumbnail', 1); /* width, height, softcrop*/
add_image_size('banner-image', 1);
In other words, you are creating images that are 1px wide.
You need to set the widths and heights to what you want, just like the comment says:
add_image_size('small-thumbnail', some width, some height, true/false);
add_image_size('banner-image', some width, some height, true/false);
Since I'm complete new to this, I'll try to be as clear as possible.
My questions concerns the positioning of my buttonicons for my mobile pages.
Basically, for every page there is an option to select an icon which gets displayed to the left of the page title.
How would I change the positioning below in order to get the icons displayed on the right side of the page titles. Unfortunately I can't post a screenshot of the current and ideal situation. Ideally I would like to have the page titles slightly more to the left.
I hope this still makes sense without a screenshot.
if($page->buttonicon){
$icon = "<img src=\"icons/".$page->buttonicon."\" style=\"position:relative; top:33px\">";
}
else{
$icon = "<img src=\"images/noicon.png\" style=\"position:relative; top:33px\">";
}
$menurow = "<li id=row_".$page->id." style=\"display:$rstyle\">$icon<a class=\"".$bs."\" href=\"".trim($page->url)."\" $target >".$page->title."</a></li>\n";
If I may say, referring me to another post doesn't help me a lot since I'm completely new to this, so in order to avoid getting confused - I need this particular code to be used/rewritten.. :)
Any help is more than welcome, thanks in advance!!
EDIT
The CSS stylesheet doesn't seem to affect the positioning. The CSS stylesheet only seems to be called for the layout of the navigation buttons. The icons within the navigation buttons are related to the first code mentioned above.
With CSS you can float HTML elements example:
float:left
float:right
If that doesnt work try setting the position of the element to absolute and physically margining the element into place:
position:absolute;
margin: 10px, 10px, 10px, 10px
In your code, this inserts the image:
if($page->buttonicon){
$icon = "buttonicon."\" style=\"position:relative; top:33px\">";
}
else{
$icon = "";
}
and this inserts the title:
$menurow = "id." style=\"display:$rstyle\">$iconurl)."\" $target >".$page->title."\n";
If no CSS interferes, you should be able to simply switch the order of those two statements to get the desired effect.
EDIT
Thanks. Something like the code below? I tried (without any luck):
if($page->buttonicon){
$menurow = "<li id=row_".$page->id." style=\"display:$rstyle\">$icon<a class=\"".$bs."\" href=\"".trim($page->url)."\" $target >".$page->title."</a></li>\n";
$icon = "<img src=\"icons/".$page->buttonicon."\" style=\"position:relative; top:33px\">";
}
else{
$icon = "<img src=\"images/noicon.png\" style=\"position:relative; top:33px\">";
}
I'm having problems with printing some text on a A4 paper that has 24 labels.
Basically, in every row there are 3 labels in which comes the name, surname and adress of a person and that label will be used for mails ( it's a sticky label that is sticked on a mail).
So this is the paper. Its characteristics:
There are 10 rows.
The first and last row are the smallest and have height:0.5mm;.
In first and last row there are no cells.
All the rest rows have height:36mm;.
All the cells have width:70mm; and height:36mm;.
In every cell comes a text that is text-align:center; and vertical-align:middle;.
I'm using normalize.css for css reset.
CSS
html,body,table{
width: 100%;
height: 100%;
}
.first, .last{
width: 100%;
height: 5mm;
}
.row{
width: 100%;
height: 36mm;
}
.cell{
width: 70mm;
height: 36mm;
text-align: center;
vertical-align: middle;
}
I'm using Chrome and I turned off the margins on printing.
But still, the last two rows are printed on the next page.
I need all 10 rows on the same page and that their position is fixed ( doesn't shift ) in case if there are multiple pages.
How to fix/achieve that ? Or is there a simpler solution ?
Here is an example of the code.
I've used FPDF class to create a pdf for my labels.
require_once ABSPATH . '/path/to/fpdf.php';
class PDF_MC_Table extends FPDF{
var $widths;
var $aligns;
function SetWidths($w){
//Set the array of column widths
$this->widths=$w;
}
function SetAligns($a){
//Set the array of column alignments
$this->aligns=$a;
}
function Row($data){
//Calculate the height of the row
$nb=0;
for($i=0;$i<count($data);$i++)
$nb=max($nb,$this->NbLines($this->widths[$i],$data[$i]));
$h = 36;// again trial and error until you fnd the desired height of your label
//Issue a page break first if needed
$this->CheckPageBreak($h);
//Draw the cells of the row
for($i=0;$i<count($data);$i++){
$w=$this->widths[$i];
$a=isset($this->aligns[$i]) ? $this->aligns[$i] : 'L';
//Save the current position
$x=$this->GetX();
$y=$this->GetY();
//Draw the border. reset the parameters of the function below as you desire.
$this->Rect($x,$y,$w,$h);
//Print the text. reset the parameters of the function below as you desire. changing the values will resize the boxs.
$this->MultiCell($w,3,$data[$i],0,$a);
//Put the position to the right of the cell. reset the parameters of the function below as you desire. changing the $x and $y will shift the cells.
$this->SetXY($x+$w,$y);
}
//Go to the next line
$this->Ln($h+3);
}
function CheckPageBreak($h){
//If the height h would cause an overflow, add a new page immediately
if($this->GetY()+$h>$this->PageBreakTrigger)
$this->AddPage($this->CurOrientation);
}
function NbLines($w,$txt){
//Computes the number of lines a MultiCell of width w will take
$cw=&$this->CurrentFont['cw'];
if($w==0)
$w=$this->w-$this->rMargin-$this->x;
$wmax=($w-2*$this->cMargin)*1000/$this->FontSize;
$s=str_replace("\r",'',$txt);
$nb=strlen($s);
if($nb>0 and $s[$nb-1]=="\n")
$nb--;
$sep=-1;
$i=0;
$j=0;
$l=0;
$nl=1;
while($i<$nb){
$c=$s[$i];
if($c=="\n"){
$i++;
$sep=-1;
$j=$i;
$l=0;
$nl++;
continue;
}
if($c==' ')
$sep=$i;
$l+=$cw[$c];
if($l>$wmax){
if($sep==-1){
if($i==$j)
$i++;
}
else
$i=$sep+1;
$sep=-1;
$j=$i;
$l=0;
$nl++;
}
else
$i++;
}
return $nl;
}
}
$pdf=new PDF_MC_Table();
$pdf->SetMargins(4, 2);
$pdf->AddPage();
$pdf->SetFont('Arial','',8);
// displays the empty row in the top
$pdf->SetRightMargin(2);
$pdf->SetLeftMargin(4);
$pdf->Cell(0,10,'',1);
$pdf->Ln(10);
$pdf->SetWidths(array(50,50,50));// these are the widths of your cells. this is a trial and error process. increase the values until you find the suitable ones.
$count = 0;
$lables = array(); // your labels array
$l = array();
$j = 0;
// i used this foreach for breaking my plain array into a 2dimentional array- an array of arrays consisting 3 labels in each.
foreach($lables as $i=>$lbl ){
$l[$j][] = $lbl;
if($i%3==2){$j++;} // $i=0,1,2 > $j=0; $i=3,4,5 > $j=2 etc this will break the main labels array as 2D array.
}
// displays the empty row in the bottom.
$pdf->Ln(1);
$pdf->Cell(0,10,'',1);
$pdf->Output();
for further information about the class and methods please refer to http://www.fpdf.org/ At best you need to understand three methods- Multicell(), Cell() and Rect() methods. There are pretty nice explanation of these methods with examples in the site.
Here i've posted my solution and i've changed some code based on your problem. Most of the things are self explanatory. If you need further assist please feel free to comment. Thanks.
reduce the cell and row height sizes if you are no using the sizes in specific, what happens even after turning off margins, printing data goes out of paper length and printer moves it to another page automatically.
thats the best solution i think you can try.
p.s: these kinds of sticky labels usually come with their design software cd which you usually use to set the margins with preview. if you dont have it, only thing you can do is maually adjust the heights as i told above, print on a normal A4 plain paper and tele with the sticky label paper. I used to do it too... worked for me though
Try borderless printing if your printer supports this feature.
Try adding in the styling below and playing with the #page attributes. More info in #page can be found here: https://developer.mozilla.org/en-US/docs/CSS/#page
I've had good luck using the styles defined below to print perfectly on 8.5x11 documents where I can set my own margin and have consistent results out of the browser.
<style type="text/css" media="print">
#page {
size: auto; /* auto is the initial value */
margin: 0mm; /* this affects the margin in the printer settings */
}
body {
background-color: #fff;
border: solid 1px #000 ;
margin: 0px; /* this affects the margin on the content before sending to printer */
padding: 0.25in 0.5in;
}
</style>
Hi I have big background images 1200 by 1200, what i would like to do is expand the images when the user resizes the browser but constrain it so they never scale any smaller than the original size.
There all lots of scalable bg images out there but none I can find that do this, any help would be appreciated.
background-size: cover;
there you go
The following CSS + Javascript + JQuery combination has worked for me.
Thanks to ANeves for the above answer which was helpful.
CSS:
body
{
background: url(background.jpg) center center fixed;
background-size: 100% auto;
}
Javascript (JQuery):
jQuery (function ($)
{ // ready
$(window).resize (function (event)
{
var minwidth = 1200;
var minheight = 1024;
var bodye = $('body');
var bodywidth = bodye.width ();
if (bodywidth < minwidth)
{ // maintain minimum size
bodye
.css ('backgroundSize', minwidth + 'px' + ' ' + minheight + 'px')
;
}
else
{ // expand
bodye
.css ('backgroundSize', '100% auto')
;
}
});
});
another possibility would be to use media queries. set the image size to be say..1280x450 and then use a media query of background-size:100% auto; for all window sizes over 1280px wide.
there is some code which also handles image resizing with IE, however ive admittedly had limited success with it...
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/beach_2.png',sizingMethod='scale');
-ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/beach_2.png',sizingMethod='scale')" ;
if anybody has any add ons or fixes for the above then feel free to contribute.
hope this helps someone out there...
For background images, I usually set a minimum width for the html tag which would be the original width of the image or less, this stops the image from shrinking too far.
Put image in div and give size to it.
Apply following property to img tag
background-repeat: no-repeat;
background-size: 100% 100%;
You seem to be looking for CSS3's background-size property. You can constraint the minimum size to the container, if you know that the images are 1200x1200.
I don't believe it'll work on IE though, so it might not be an option for you.
In that case, I suggest you take a peek at http://www.markschenk.com/cssexp/background/scaledbgimage.html