I can see that you can set themes for tabulator tables, from the documentation it states
"To use one of these simply include the matching CSS file instead of the default tabulator.css"
What happens if I want to have 3 tables each with a different theme?
I can see it's possible because the documentation page does it but I can't see how. Any guidance would be greatly appreciated
This is not possible out of the box because each theme's CSS uses the same CSS selectors for the tables elements so they will all fight to style each of the tables.
I would also question why this would be necessary, generally speaking putting tables of multiple themes on the same page would create quite a jarring experience for your users and i would not recommend it.
That being said, the examples page achieves this by updating the style sheets for each of the themes to look for a specific table id rather than the generic .tabulator selector.
So anywhere in the stylesheet that .tabulator is referenced:
.tabulator .tabulator-header.tabulator-header-hidden {
becomes for example:
#bulma-theme-table .tabulator-header.tabulator-header-hidden {
You would also need to prefix the generic selectors later down the stylesheet, so for example:
.tabulator-row.tabulator-moving {
would become:
#bulma-theme-table .tabulator-row.tabulator-moving {
Related
I have a question about paginationElement in Tabulator.
As per tabulator documentation, i created a DIV and used paginationElement in Table setup to render the paginator in the DIV. Well, it works. But with a drawback, no styling works, no colors, no highlighting of current page. So it is kinda inconvenient.
Is there a way to resolve this?
Otherwise, i am really happy with Tabulator! Thank you for the great work!
Cheers
You might have to style the pagination footer by css as the location of it has been changed by paginationElement.
This is because all of the table styling is based around the pagination element being inside the table.
Moving it outside the table will mean you will need to apply the styles yourself. The classes that denote that you are on the current page etc will still be applied, you just need to tell the browser how to style them.
The Styling Documentation contains more information on the classes used by tabulator and how to style the table
Setup:
I am using Orchard CMS 1.6.
I have a site where I need to be able to set the background color of the whole page. Ie, I need to style the body tag.
I could use the LayoutSelector module and have distinct layouts. However, the only difference in each layout is that the background-color rule for the body tag is different. So it seems a very un-dry way of doing things.
I can't find any way to make Vandelay.Classy add a distinct id or class to the body tag (it adds, as I understand it) an id or a class to the outer tag of a content type. In my case, that isn't the body tag.
So that is no good, I really do need to customize the body tag.
How to do this?
Note:
I need 3 different background colors. I also have a two column layout and a three column layout. [I use (a modified version of) the layoutSelector module to achieve this.] So to have 3 different colors of background, and I used layouts to achieve this, I would need 6 different layouts: TOTAL overkill.
There must be a better way...
From any cshtml file, you should be able to access the Layout shape. From pretty much anywhere else, you can still get to the Layout shape through WorkContextAccessor. Once you have a reference to the Layout shape, you can do Layout.Classes.Add("the-class-you-want").
I am using orchard cms with the bootstrap theme.
I have created a content type: House
it contains FIELDS
image (media picker field)
Property Type (taxonomy field)
Location (taxonomy field)
It has PARTS
common
body
publish later
Title
Autoroute
I want queries of houses and be able to choose the view/ layout for them
e.g. layout called HouseList (for sidebars mainly) which will render: title, image and link to house, possible location and type but with out the links as defaulted. And then a fullDetails layout and a image only layout (so i can show a jquery image reel a widget say in a quadzone) How can i do all this please, i have tried in view Content-House.cshtml etc but i cant access the details model.content to choose what to display.
Im sure when i get the idea of how to do 1 i should be able to sort the rest. I have read documentation etc but there are so many different ways, ie placement file, change the parts, contents, create classes to handle display etc. sureley i am missing something simple like create a view for each list i want eg. houue-list, house-details, house-imageONly and then manipulate content.
Please help i have been trying different things for getting this site running for weeks and not getting very far. Examples would be fantastic but i have searched google for hours and found similar but nothing with enough details for a meer beginer.
Thanks
The standard way of doing that is placement to move things around and alternate templates for the different parts and fields. You can specialize placement and alternates with the display type, which is Summary when rendering in a list such as what a projection returns, and Detail for the detail view. More info on placement can be found here: http://docs.orchardproject.net/Documentation/Understanding-placement-info and on alternates here: http://docs.orchardproject.net/Documentation/Alternates
Now if you prefer to completely take over the rendering and do without placement, here are a few posts that may help:
http://weblogs.asp.net/bleroy/archive/2011/07/31/so-you-don-t-want-to-use-placement-info.aspx
http://weblogs.asp.net/bleroy/archive/2011/03/27/taking-over-list-rendering-in-orchard.aspx
I currently have a Content Type called "News" which is very simple (No custom properties etc.). I am trying to style this Content type when it occurs on a page of a specific layout, in this case a "News" page.
So - I have the layout that a News page will inherit from (Layout-url-News.cshtml), however I cannot seem to get the Content to display or inherit from a template (I have tried creating alternates such as Zone-url-News.cshtml and Zone-Content-url-News.cshtml, however both result in having no content at all.)
I had create both of the mentioned alternates by hand, as Designer Tools was unable to generate an alternate (The relative virtual path 'Orchard.Core.Shapes.CoreShapes::Zone' is not allowed here)
Basically - I cannot figure out how to style the content found on a specific page, (Title, Tags, Date, Body) as the Content always seems to inheirit from the base shape.
If your point is to style content in a zone, u might find it easier to use css. The layout system makes it really easy to identify the elements your interested in styling by using css selectors.
for example
.aside1.news { ... }
That takes care of 80% of styling needs
Most of the remaining is taken care of by the placement.info file which allows you to indicate which fields and what order for contenttypes and viewstypes (summary and detail)
the remaining needs are address by overriding the contentitem.view.
But you seem to indicate that you want to set the style for a contenttype in a specific zone for a url. So... You have the same contentType in different zones at the same url? I cannot imagine what you are doing. :)
Long and short, it sounds like your focused on the zone but it might be more helpful to focus on the contenttype or better yet, css. I ran into the same thing with url alternates suggesting alternates that aren't valid. It seems weird that it suggests zone alternates. I don't think those those are allowed.
I'm customizing a NewForm.aspx page and I've created a few new SharePoint:FormFields in the form of textboxes. I'm looking to customize the height of these boxes on a case-by-case basis, but I can't figure it out.
I've looked into DisplaySize, but that only controls the width of a specific textboxe, and I've seen adding in:
<style>
.ms-long{width:100px;}
</style>
but that changes every SharePoint:FormField size, not just one.
Find the element in the complete html output, and use the id rather than the class as the css selector. If you can't find a suitable selector or you need to use selectors not supported in ie, you can use javascript/jquery to find and modify individual controls.
If you are customizing the NewForm.aspx, and you want to customize the look of the controls, you should also customize the CSS by using your own .css file. That may or may not include a customized master page.
I take it your a user of SharePoint Designer to be editing NewForm.aspx. Personally the route I would go down is to design a custom text box field and give it the desired size that way. Might not be what you want, but it's one way to do it.