Is there an option to change the width from the grid container in bootstrap theme? - impresspages

Is there a way to change the width from the grid container in bootstrap theme using IP or should i hack the CSS style sheet?

Can't understand why would you need this. Do you want to have GRID management narrower? Then add your own css file.
CSS can be added using ipAddCss function in ipBeforeController event.
You can add CSS only for particular admin pages. Use ipRoute()->... to get information about current page.

Related

How to align dropdown under parent control and set width as per parent control in bootstrap?

I tried to add dropdown-menu-left class but still it displayed outside the control area.
I want to show that dropdownlist under txtbox and button control, and also width as per
above control. How to do that?
Here is a demo link DEMO
I guess you misunderstood dropdown-menu-right for dropdown-menu-left. Replace dropdown-menu-left with dropdown-menu-right. As for the width, you could manually set it to a fixed value (using CSS) or you could use javascript / jquery to resize it dynamically.
Using CSS: https://jsfiddle.net/7w9wkr64/
Using JQuery: https://jsfiddle.net/Lyrzt8tu/

Bootstrap and fieldset

I hate that bootstrap has nullified the fieldset tag and legend.
Q: Is there a way to tell the browser to use the default fieldset & legend rendering without downloading a local copy of bootstrap and removing those lines from bootstrap.css? I want to leave bootstrap.css alone so that I can use a cdn.
I'm thinking of something like the !important flag.

ExtJS - Changing default button styles and fonts

I have this requirement where I have to change the default styles on my Ext JS application. I am not talking about changing stuff in CSS files yet. I am not that ambitious yet. Here is what I am looking for:
Suppose I need a Submit and Cancel buttons, I use xtype:button and text:Save ( or Cancel ). This will render buttons with the text on them. What should I do if I want to change the look and feel of the button? Or replace the button with a cool Save or Cancel image?
Right now I have all the texts on the application with the default font that ExtJS shows. What am I supposed to do if I want all the text on the application changed to a different font? Everything right from the data in forms/grids and the titles of each component should be changed to some other font my customer prefers. What am I supposed to do?
I understand these are very basic and a generic questions, but I am looking for a good headsup before I proceed with my task.
Thank you all in advance. Waiting for answers :)
Update: So, I found out how we deal with CSS and change the fonts. Can anyone help about the Chaning the look and feel for Submit/Cancel buttons.
I recommend you to use SASS and compass to build your own themes, or better said to change one the existing themes. In the Ext JS documentation you can find the css variables which you can set according to your needs.
If you are not ready for theming with SASS just yet take a look at this example of button configs from the sencha docs:
Stanadalone Example page: http://docs.sencha.com/extjs/4.1.3/extjs-build/examples/button/button.html
CSS that adds customized images to the buttons: http://docs.sencha.com/extjs/4.1.3/extjs-build/examples/button/button.css
JS that shows button configs: http://docs.sencha.com/extjs/4.1.3/extjs-build/examples/button/button.js
Essentially this shows how to use iconCls property on the button config along with a simple CSS class to add desired image to your button.

XPages Extension library DOJO Tab container control CSS Modifications

I want to know, Is there any way to change the Style sheets of the extension library DOJO Tab container control?
Thanks & regards,
Yogesh Kashid
The best way to change the Style sheets of the extension library DOJO Tab container control is to create and use an own css resource. This way you can change every single table part's look and it would be valid for all DOJO Tab container controls in your application.
Create under Resources\Style Sheet a my.css file
Add the Style changes for DOJO Tab classes in my.css file. The style classes start with "dijitTab..." and you can find them analyzing the rendered page in browser.
For changing the tab labels to red you would write e.g.
.dijitTabContainerTopNone {
color: red;
}
3 . Add the my.css class to your theme
<theme extends="oneuiv2.1">
<resource>
<content-type>text/css</content-type>
<href>my.css</href>
</resource>
</theme>

Creating div container in DOJO

I want to create the DIV container and format the container with shadow, and other nice look and feel. Because the page will have multiple containers and each will have the different data. I want to do that with DOJO, which component is most suitable for that?
As I understand you, you want to create a div element and style it. Then you should look into dojo/dom-construct and dojo/dom-style