I have created a table in a blog created in WordPress. I have used TablePress plugin to create the table. Now I would want to set the left column font to italics (except the table header).
After inspecting the page and some web search, I came up with the following CSS:
.tablepress-id-1 tbody .column-1 {
font-style: italic;
}
Let me explain. You see, in .tablepress-id-1, the digit after the last - is the shortcode of the table created with TablePress. Secondly, I would like to apply the CSS for the table body only, hence tbody. And finally, .column-1 implies the leftmost column of the table.
To set the CSS, you need to go to TablePress -> Plugin Options from the WordPress Admin page (I assume you have the TablePress plugin is installed), then write your CSS in Custom CSS text area and click Save Changes.
Related
I've made a website using the academic theme of hugo; there's an example provided here. I want all of my posts (of which there are three examples provided at the link) to be wider. For example, a post initially looks like this:
where the text is constrained within a more narrow window, but I want it to look like this:
where the text has the same width as the page.
I notice that I can make this happen by unchecking the 'max-width' specification in '.article-container'. How can I edit my local files for my personal page with the academic theme to make it so this automatically happens?
This may be done by overriding the CSS in the .article-container selector.
.article-container {
max-width: none;
}
The simpler way is to create a file layouts/partials/custom_head.html where you place the above CSS rule inside a <style>...</style> block.
Another way is to create a file assets/css/custom.css with that rule, and then updating the property plugins_css in the file config/_default/params.toml so that the new stylesheet can be included as part of the loaded stylesheets.
plugins_css = ["custom"]
I have inspected the page (http://hemptoday.net) using Developer Tools in Chrome. Using Custom CSS plugin for WordPress, I entered the following code to try and remove the category meta for the grid widget on the homepage (where there are 16 stories in grid format below 4 in list format at the top of the page).
Code I entered in Custom CSS is as follows:
.entry-meta .mh-fp-grid-widget.clearfix { display: none; }
Using Custom CSS, I have been able to customize a few things, but this one is a little more complicated.
Looks like you have the selectors backwards based on your HTML.
Try: .mh-fp-grid-widget.clearfix .entry-meta
I have used drupal 7.38.
My question is I have created a view for product stock.
In this view I have used the table structure. When stock is empty then mail go to the stock manager.
In mail the product display in p tag but I want to show in table format show how can I do this?
I have some change on the views-view-table--stocks.tpl.php and views-view.tpl.php.
In your email body you could add a element :
<style>
.views-table-class { border: 1px solid black }
</style>
I guess you can add a CSS class ("views-table-class") to the table in Views interface. If not, using chrome dev tools / firebug you should be able to find a CSS selector to reach the table.
More info on CSS borders here. You can also add your CSS class on the table with your .tpl file like explained here.
Hope it helps !
I have installed a plugin in wordpress that creates image thumbnails and displays links for all the subpages of a particular page. It is being displayed on the front page of this website.
The plugin is called AutoNav. More info here.
The plugin FAQ says the following about what classes are created to create the table:
table elements: subpages-table
tr elements: subpages-row
td elements: subpages-cell
p elements inside each td: subpages-text
Thumbnail images: subpages-image
Excerpt text: subpages-excerpt
My question is how I should go about formatting my CSS to change these settings. Should I just create classes with those names?
Lastly, the links that the plugin generates work on initial page load, but once the page completely loads, the links seem to stop working and just become text. Not sure what the issue is.
My question is how I should go about formatting my CSS to change these
settings. Should I just create classes with those names?
Yes. These are the classes the plugin generates and applies to the elements in the html.
For example if you wanted to add a border to the thumbnail images you would apply the styles to .subpage-image class.
.subpage-image {
border:1px solid #000;
}
Lastly, the links that the plugin generates work on initial page load,
but once the page completely loads, the links seem to stop working and
just become text. Not sure what the issue is.
This is being caused by your slider. Once it is fully loaded the div #slider overlays your content making the links unclickable.
To fix this give #slider height:280px;
I'm developing an add-on for an existing CMS system. My add-on outputs a link to a style sheet and then outputs a table. The rest of the content(header,left column, footer etc.) is provided by the CMS.
Previously linked CSS styles seems to effect the way my table is displayed. I want to avoid this. I want my table to be shown according to my CSS style. How can I this?
You can add the !important declaration to your style:
table thead th
{
color: #ff0000 !important;
}
Your column headings should have red text now, even if another color has been previously set through another style.
There are only two options:
1) Put the table and its stylesheet in an iframe. Since it is a separate webpage entirely, it won't be affected by stylesheets on the parent webpage.
2) Fully specify the styles of all elements on your table. As long as you override everything the parent page might have specified, your table will look as you want it to.
do you mean a CSS reset? google that for thousands of results.