I'm trying to add vertical center alignment to a table in Tablepress, but it only gives you the option to add additional CSS.
I've tried a general alignment;
.tablepress-id-1 td {
vertical-align: middle;
But it's not worked. Any help would be great. By default it appears text aligns correctly the issue are the icons I've entered into the cells.
Any help would be amazing.
Taken from newbloggerzone.com:
Centering Text in a Specific Column in a Specific Table Only
Here’s how to align specific columns of content in your table only:
Go to the Plugin Options tab on the main menu of the TablePress plugin on your Dashboard.
At the top of this page is a Frontend Options box with Custom CSS in it. This is where you need to put the code in. Make sure the “Load these Custom CSS commands to influence table styling” box is ticked.
You then need to put specific kind of code into this box, as follows:
.tablepress-id-x .column-x {
text-align: center;
}
where x is the number of the table and the column you want to center. All tables you create get assigned a number or ID, which is in the shortcode. This is what you put in to identify which table needs this styling, along with the columns number you want to centre.
Related
I am working on a HTML form in which I need to right justify the text in the form field. I could accomplish this using the following css code "Input", but this right justifies the entire form, I need to just do one section of the form, I need the rest of the form to be left justified.
If I can find out how to put the "Input" CSS code "inline" with the form fields, that should work. I can't figure out how to do/format that.
<style>
input {
text-align: right;
}
</style>
I have tried breaking the page into multiple html code blocks, that didn't help. it seemed whichever CSS code it reads last is what was applied to the entire page, not just the section it was set up for. I have exhausted google searches, there are plenty of solutions to right justify the field itself, I need the text inside the field to be right justified. In only part of the form.
Thanks in advance for any assistance.
As per DenverCoder1 recommendation to:
Add class names to elements to make the selector more specific
Here is what I did to make it work. First I added the following code to CSS:
.rightjustify {
text-align: right;
}
And then adding the "rightjustify" class to the Input element, something like so:
<td style="text-align: right">BP: <input class="rightjustify"
type="text" name="BP"></td>
The code is inside a table cell, hence the "td". Adding the style="text-align: right", sets the form field to be right justified in the table cell.
Then adding the "rightjustify" class to the input element, right justified the text inside the form field.
Currently, I'm trying to center-align four(4) custom html-boxes I've made in Joomla 2.5.x., with the ability to center themselfs after one or more of the boxes is unpublished.
So far, I've tried to make a "div"(with a class) inside an article, where I loaded each of the four(4) custom html-boxes with {loadposition name}. But when I do that, the boxes gets centered under each other in the middle of the page.
In the following example, this is what I would like to get Joomla to do:
I've made five(5) boxes, each in custom html. Then loaded them into one article with the following method: qB48wJSFiddle. Here, when one uncomments a box, the rest of boxes get automatically centered.
With the example above, I would like to be able to do the same with 4 boxes, all of them made in custom-html in Joomla 2.5.x
Can anyone help me with this challenge, or point me in the right direction ?
Best regard
Jens.
<div> elements are block-level elements. That means that, unless you tell them otherwise, they will occupy 100% the width of their parent element.
It sounds like you are loading 4 custom_html modules, which are all 100% wide, which each have their contents centered.
The solution is to force them to the width of their content only by specifying your own custom css, e.g.
.module-centered {display: inline-block; text-align: center;}
Then, to make this apply to each module, set the module class (in the modules advanced settings) to module-centered (note the preceding space).
I am trying to create an email template with HTML + CSS for GMAIL. It will be responsive!
But I know that "media queries" are not supported by gmail. So I am trying to create a "fluid layout" using old-fashioned HTML tags (table, td etc) and percentage instead of using CSS tags. I've already created a template (like here: http://webdesign.tutsplus.com/articles/creating-a-simple-responsive-html-email--webdesign-12978) but still have a problem;
When I resize the browser I want -left column- to move at the bottom but now -right column- moves there.
How can I code so that left column will be at the bottom and the right one will be on the top of it. Is it possible to do it without using the "media queries" ?
Thanks,
This is can be caused by your tables being in the wrong order. Make sure the table with -left col- inside is placed underneath the -right col-. So long as the table wrapper is aligned to the left, it will still appear that way when viewed.
If that answer doesn't help, can you please provide a snippet of your HTML and I can take a look at what is causing the issue?
I'm trying to make a blogpost into a forum-format, which i thought would be quite simple with html-tables and some css. I can't attach an image because this is my first question/answer here, but everyone knows the forum/disqus format: two-column with a narrow one on the left for the avatar and a wider one for the text.
Fact is that using just hmtml-css tables, the text floats to the left as soon as it (vertically) passes the image. That is solved by using "position:absolute", but then the whole image&text overlap each other AND most or everything that is beneath it, depending on how one resize the window.
Anyway, it's just the old forum-format, what am I doing wrong. Can't link to a page, not a live site yet. I'm using WP with the (modified) Blaskan theme.
It is isn't clear if you're trying to add a forum or just a table that looks like a forum-format table.
If you want to a forum in WP, then you might want to follow
http://wordpress.org/support/topic/add-forum-to-wordpress
http://wpmatter.com/top-5-wordpress-forum-plugins/
If you are trying to add a two column table, you'll need to post the html and css using.
For example, you can post like this http://jsfiddle.net/minerva/UJjup/. You must've added a "position: absolute" in the <td> tag and that is why your text is overlapping
Remove the position:absolute from the tag.
table td
{
position:absolute
}
Then add your css style specifically on the first column and or second column.
I'm trying to configure a content section of my site but I'm having trouble with the bootstrap grid system.
See my bootly example: http://www.bootply.com/121304
In my website design, i use a column-lg-3 and a column-lg-9 within a row class. To serve as a Help section and Content Area. In the content area on the majority of my pages, i use the whole column-lg-9. However in a few of my pages, i use horizontally aligned forms, such as login page (dont know ajax to get login modal working..) and input forms. On the pages with the input forms i wish to keep the column-lg-9 at its proper size, but have the login/input fields centered into it.
I have attempted to do this with a small amount of success, after reading some of the bootstrap documentation, by adding 3 column-lg-3's inside of the column-lg-9. As you can see in my bootply example, this has not fully centered the login form inside of the larger column, and ideally I would also like to center this form inside its parent column.
You simply need to remove float: left from the CSS of the affected DIVS
Create a new class e.g. .col-centered and apply it to whatever column you want centered e.g.
<div class="col-lg-3 col-centered">
CSS
.col-centered{
float: none;
margin: 0 auto;
}
Also, by looking at your code, it seems like you are trying to use empty <div class="col-lg-3"></div> to offset. That is incorrect. You don't use empty divs to achieve this.
You use offset classes such as <div class="col-lg-3 col-lg-offset-6">...</div> Documentation