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;
}
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 a b-table with centered column headers. The headers are centered when I run locally at http://localhost..., but not in deployment. Why might this be?
I have tried two approaches to centering the headers.
I have added the text-center prop to the b-table component like this...
<b-table
striped
hover
show-empty
sort-icon-left
:items="items"
:fields="fields"
class="text-center"
>
</b-table>
I have included this style rule in my custom scss file, which I import into the app at App.vue
table {
text-align: center;
}
Both approaches work just fine locally, but when I deploy the column headers are aligned right.
Here is a sceenshot from my elements tab in the browser inspection tool.
And the styles tab makes it clear that a text-align: right rule in the tag selector overrides the text-align:center rule in the tag selector.
text-align is an inherited property.
Which means that, when resolving this property for an element, the browser looks for any rules targeting that element first. The element in question is a <th>.
If the browser finds any such rules, it applies the one with the highest selector specificity or the last one from rules with equal specificity.
If no such rules exist, then it inherits the value from the closest parent which has a text-align specified value.
If no ancestor has a text-align value, it defaults to start, which means left for documents with direction="ltr" and right for documents with direction="rtl".
So, basically, the CSS applied to one of the ancestors by Bootstrap:
.text-center {
text-align: center !important;
}
...gets overridden by the following rule applied on the actual element:
th { text-align: right }
regardless of the specificity of the parent rule (because it doesn't target the element directly).
To override the th rule you could use:
table.text-center * {
text-align: center
}
... because table.text-center * has a higher specificity than th and they both target the element (the <th>).
Obviously, if you only want to apply the centering to <th> elements, you should replace * with th in the above selector.
To answer your question on why would it work on local and not on remote: your remote has additional CSS (in app.ee70fc50.css), which resolves text-align value for <th> elements, therefore the parent value is ignored (while on local the parent value is inherited, because you don't apply CSS to <th>s).
I am creating a custom template for a page using Concrete5. I have three blocks, wrapped in a div class, that I want to repeat throughout one page. For example:
<div class="block-wrapper">
<div class="title"><?php $a = new Area('Title'); $a->display($c);?></div>
<div class="description"><?php $a = new Area('Description'); $a->display($c);?></div>
<div class="autonav"><?php $a = new Area('Autonav'); $a->display($c);?></div>
</div>
And the CSS for would be something like this:
.block-wrapper {
padding: 20px 5px 20px 5px;
border: 1px solid #e8e8e8;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.title {
float: left;
}
.description {
float: right;
}
What I want is to be able to repeat the block-wrapper with the 3 editable blocks inside. For example, the generated page would look like:
<div class="block-wrapper">
<div class="title">Steve</div>
<div class="description">Engineer</div>
<div class="autonav">Link A | Link B | Link C</div>
</div>
<div class="block-wrapper">
<div class="title">Betty</div>
<div class="description">Designer</div>
<div class="autonav">Link D | Link E | Link F</div>
</div>
...and so forth. I hope I am being clear enough. Is this possible? What are my options? Ideally, I'd have as much freedom to style the blocks and block-wrapper as possible.
Depending on what exactly your situation is, there are a few different solutions. The built-in Concrete5 approach is to use the setBlockWrapper methods on the Area object. For example:
<?php
$a = new Area('Main');
$a->setBlockWrapperStart('<div class="block-wrapper">');
$a->setBlockWrapperEnd('</div>');
$a->display($c);
?>
Note that the block wrapper is not displayed while in edit mode.
Another approach (as #BGundlach mentions) is to use the free Designer Content addon and create a custom blocktype with separate fields for each piece of data, and provide the appropriate wrapper HTML around each field. Looking at your example, though, I see you have one of those fields being an "autonav" of sorts... so I'm not sure how exactly this would be populated.
A third approach is the non-free Designer Content Pro addon, which lets you create custom blockstypes with repeating items (which might be good for your nav field... so users could choose any number of nav links if they wanted... but this would be more of a "manual nav" versus an "auto nav").
Disclaimer: I'm the author of both the Designer Content and Designer Content Pro addons (but they were created to solve this exact sort of problem so I think it's a good fit here).
If I understand you correctly a possible option is to programmatically create the three areas. For example you could create a new Page attribute with a handle number_of_bio_blocks and then something like this
<?php
$num = intval(Page::getCurrentPage()->getAttribute('number_of_bio_blocks'));
if ($num) {
while ($num--) {
?>
<div class="block-wrapper">
<div class="title"><?php $a = new Area('Title ' . $num); $a->display($c);?></div>
<div class="description"><?php $a = new Area('Description ' . $num); $a->display($c);?></div>
<div class="autonav"><?php $a = new Area('Autonav ' . $num); $a->display($c);?></div>
</div>
<?php
}
}
?>
Or possibly just set an arbitrary number of Areas like 10 as those that are not filed in will not be displayed. There is not, to my knowledge, a way to add Areas through the interface. Also, creating those Areas like that would populate the database with additional unused Areas. I'm not sure if that is a concern to you.
Designer Content was suggested, and there is now Designer Content Pro which allows you to add multiple repeating fields in a block. This wouldn't allow arbitrary blocks, but if you need things like rich text and images, that might be a good option.
Why not use one area and a repeating block type? Fewer areas allows for better sure performance.
I'm not sure there's an autonav option in Jordanlev's designer content block, but I'm sure it will do all this for you. http://www.concrete5.org/marketplace/addons/designer-content/ I've used this as the basis for many of my own blocks. It puts you in control of all the markup.
The description states:
Designer Content is an invaluable tool that allows designers to easily create custom block types. The purpose of this is to make content editing straightforward for your users, and to ensure that your styles are maintained -- without having to rely on the complicated and error-prone TinyMCE styles. For example, let's say some of the pages on your site will contain information about company employees, and each employee has a name, a bio image, and a brief description -- you can create a custom block with a textbox field for the name, an image selector for the bio image, and a wysiwyg editor for the description. You can also surround each element in html snippets (divs with classes, for example) to ensure that the content will be styled appropriately, without your users having to deal with the finicky TinyMCE toolbar.
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
So, if you add a bunch of inputs to a FieldSet, the last one has round corners on the bottom. In my form, tho, I hide and show inputs inside the form, depending on a Checkbox at the top of the form.
So now, it is possible that an input, tho logically not the last one in the Fieldset, to be visually, and temporarily, the last one.
Does anybody know how Sencha determines which is the last input in the Fieldset? Just looks which one is the last in the array of inputs, or there is a property I can set to an input to tell it that it is the last one now ... ?
There is a CSS rule, .x-form-fieldset .x-field:last-child, which styles the last child of a fieldset to have rounded bottom corners. There is a bit more to the rule to handle edge cases, but any fields that are added (or hidden/shown) to that fieldset will have the appropriate styling applied just based on their HTML position alone.
The appropriate rule is in \resources\themes\stylesheets\sencha-touch\default\widgets\_form.scss:294 in release 1.1.0.
Thanks to mistagrooves post from above, I've managed to fix the problem. The idea is that I programmaticlly set a class "last" to the input I want it t be rendered as last, and then in my CSS, I rewrite the rules for that .last class like so:
.last, .last .x-form-field-container, .last .x-form-field-container *
{
-webkit-border-bottom-right-radius: .4em;
border-bottom-right-radius: .4em;
border-bottom: none;
}
.last, .last .x-form-label, .last .x-form-label *
{
-webkit-border-bottom-left-radius: .4em;
border-bottom-left-radius: .4em;
}
Hope it helps