I translated DataTables links to brazilian portuguese and now I'm having a problem with links' width as some of the used words are longer than the original english word. How can I resize these links?
Thanks
How did you translate it ?
I tried to translate it and it works well.
The text is inside a span which class is paginate_button so no problem with the content width, btw you can style it using css.
Just an example:
.dataTables_paginate span.first,
.dataTables_paginate span.last {
background-color: red;
}
Related
As the title says I'm trying to use "text-align: center;", but it isn't working on a specific block of text. It works on others, so I'm confused about that. I'm a complete noob lol (have been learning HTML and CSS for about 5 days), and decided to use my knowledge to get an easy 100 on the project. Bear with me, please. It's that's causing the issue.
CSS:
p4 {
text-align: center;
}
HTML:
<p4>
Over here, we have an economy consisting<br> of mostly fishing, shipbuilding, wheat<br> growing, and fur trapping. There are<br> many different economic opportunities.
</p4>
(Sorry, I didn't know what to really put, so you should probably check out the complete code, it's near the bottom: https://codepen.io/fishstick_god_/pen/ZEWjLyX)
text-align: center aligns the text to the center of the element, in your case the p4 element isn't the full width of the page so its only centering to the width of the content. Easy fix is to add display: block to your p4
p4 isn't a valid HTML tag, so the browser isn't clear how to display it. You should just use p as the tag for all instances of paragraphs. If you want to style one of those paragraphs specifically and differently from the other paragraphs, then also include a class attribute with the tag, like this in the HTML:
<p class="special">
Then, in the CSS, you create a class selector, like this
.special { text-align: center; }
You can place that same HTML class on any text-containing tag (like p, h1, li, etc.) and it will center those.
Note that you can't text-align: center; any tags that don't have a default display of block, like an a tag or an img tag. Also, you can't center structural tags (like div, header, nav, etc.) with text-align: center; because, well, they aren't text. There are other choices you can make in the CSS to center those.
text-align works on so-called block level elements. Like div or p. See, e.g., https://developer.mozilla.org/en-US/docs/Web/CSS/text-align
p4 does not qualify. Try plain p:
<p style='text-align: center'>Hello World!</p>
I have made a table (with child rows) using jQuery plug in dataTables. I'm having trouble finding out how to apply a style to an individual column of cells (<td>)
I've made an edit to this existing fiddle as you can see I've made the text larger in column 2, but I also want to make the text larger (plus other styling) in column 4 and 5.
I put a class in line 114 in the CSS (this is the original css from dataTables) and this made the text bigger,
.sorting_1{
font-size: 29px;
line-height: 29px;
}
it didn't work for the other columns (as I assumed .sorting_2, .sorting_3 (etc) was the class to change it). When looking at the inspect panel you can see the <td> tag for the the changed cells all have the class of sorting_1, but the others don't and I'm not sure how to do that,
How would I do this?
Each row has the class of either even or odd so you could use nth-of-type to specify the td that you want to style and go from there. You would have to style both the even and odd column so you would have to specify both like so:
.even td:nth-of-type(4),
.odd td:nth-of-type(4){
background:red;
}
.even td:nth-of-type(5),
.odd td:nth-of-type(5){
font-size:20px;
}
Or you could specify it by the role attribute and use nth-of-type like so:
tr[role=row] td:nth-of-type(4){
background:red;
}
tr[role=row] td:nth-of-type(5){
font-size:20px;
}
I got confused trying to create a hybrid between the 'List Slider' theme (which uses classes of "t" and "c" for title and caption), and the 'Slider-with-caption' example (which uses u="caption"). What's the difference? And how can I style the titles to appear over the slide and the caption alongside the thumbnails?
I surmise that u="caption" is for animating the caption, but I'm still stuck on how to integrate the two approaches. Simply replacing the div class="c" with the div u="c" busts the whole slider!
re: (which uses classes of "t" and "c" for title and caption)
it's not caption, it is custom thumbnail in html format,
<div u="thumb">
...
</div>
caption is another way to play text/image/content animation,
see slider with caption
Just create a ID or CLASS intiator after.
ex. div u="thumb" id="right" class="hand">
I have a big problem with arranging the text from "featured products" in prestashop. First of all, I want the title to be on two lines and centered. I've tried several methods, but with no success. Second, I want "short description" to have more characters and be centered as well.
I've posted below the link to the site and an image of how I would like it to look. Do you know what line should I change or what I need to do?
http://www.3bwine.com/CRISTY/prestashop/index.php
http://oi58.tinypic.com/1608m10.jpg
This is a simple CSS "problem". Css for described changes come from two files.
.../prestashop/themes/default/css/golbal.css
.../prestashop/modules/homefeatured/homefeatured.css - this is not very important but may or may not interfear with some of our changes
To align your title they way you showed on your image I reccomend to add these lines of code to your global.css file ( as you dont have any VERY unique classes on your p or a elements we will be targeting them from a bit further)
div#featured-products_block_center div.block_content ul li p.s_title_block a{
text-align:right;
width: 150px; // set as big/small as you want yoru heading title to display, you can play around with it. This should push the title on two lines, but if your title is chagining all the time in lenght then it might not be useful.
font-size: 22px; // should overwrite the current font-size, make as big/small as you need
}
To align description the way you need add this line to global.css file
div#featured-products_block_center div.block_content ul li div.product_desc a{
text-align:right;
margin-bottom: 20px; // you can play around with it , this pushes your price further away from the text
}
To change the lenght of your short description go to ../prestashop/modules/homefeatured/homefeatured.tpl and locate something similar to this
{$product.description_short|strip_tags|truncate:65:'...'}
And there change the truncate to whatever you need. ( changes the lenght of your " short description"). Number is in characters.
BR's
I have a simple page with products-list (downside) and basket (upside). When i click on any product in products-list, it will move img from product's list td to basket's td. It is realized by tables with some width, height and paddings of td's. But in IE7 there is an issue with padding-top when td is empty. Please, look at this image and tell me, why td in products-list (the grey ones) are not affected from padding-top?
Image:
In IE, if a td tag is empty, it consider it does not exists. Add a (HTML entity for space) in each td who have no content to avoid this bug.
Alternatively, you might be able to use border-top rather than padding-top to fix this issue.