I have been trying to find a resource for learning how to develop my own themes for IBM (Lotus) Notes XPage applications and company server defaults, but I have been unable to find a way to do it. I have found plenty of information on how themes work, and I know they are a collection of css that can be server specific and application specific and they can even inherit from one another etc. but I have been unable to actually find the correct naming scheme. Of course I can write my own css and connect the classes etc that I write to a control to change text and background and so on, but as far as I understand the entire point of using a theme is to not have to do this step.
How do I find the proper naming scheme to create my own themes which also support the extension library controls?
thanks in advance!
After spending a great deal of time trying to work out an answer to this question, and with the links that #Naveen wrote in the comments of the question, I feel this question warrants a real answer.
First off, the link to this wiki is great if you are trying to create your own XPage theme. I had found something similar before posting this question. This article which was also listed by Naveen in the comments is also a great source if you are trying to find a way to expand the XPage Theme and need a way to get the control name for the Theme's XML file, however it will NOT work for the Extension Library Controls! This is because at least most, if not all extension library controls rely on dojo, and they use the dojo themes in conjunction with the XPages Theme. There might be a way to turn this off in the controls' All Property tabs, but this is a situation where it might be easier to additionally create a dojo theme yourself.
I feel that the creation of a dojo theme is a question of its own and I do not want to go into it really here, but I will say that there are four default dojo themes which are a bit basic. Upon creation of your own theme, you can import a dojo theme by using the following code:
<resource dojoTheme="true">
<content-type>text/css</content-type>
<href>/.ibmxspres/dojoroot/dijit/themes/tundra/tundra.css</href>
</resource>
and by also using
<control>
<name>ViewRoot</name>
<property mode="concat">
<name>styleClass</name>
<value>body</value>
</property>
<property>
<name>styleClass</name>
<value>tundra</value>
</property>
</control>
where body is your own html-body style and tundra is the dojo theme. This will make sure that the ExtLib controls at the very least have some sort of a style and are not always completely transparent, or have some other unwanted default style.
If you do not wish to write your own style, it is possible to only override a few classes. Finding these classes can be difficult, but they are found both on the server and on the client, and you can reference them. The file will be located in the:
..\Notes\Data\domino\js\dojo-1.5.2\dijit\themes
file. Additionally, you can use firebug or any other browser's inspect element option to find out what css classes are being used for that control. I have found no way to alter the naming scheme, or better put, create your own classes and set the style in the designer and have it make any difference. The only option that I have found is to override the class already given in my css.
I hope this helps any future person.
Related
did anyone ever customize the Twigmo addon basic theme for cs-cart? I am trying to write custom css files for font size and color. What I tried:
Using the visual Editor: after working for like 2 hours changing the styles, I tried saving and apparently my current subscription doesn't allow me to do custom files using visual editor
I tried searching for other solutions: fell on this twigmo skin editing which basically tells me to create a custom css file called custom{theme-name}.css. I did but i still can't figure out what classes the twigmo for what. Does anyone know where i can find this? i am also posting a question on the forum to see if they can help me.
Thank-you in advance. hope my question is clear enough.
The free "Starter" Twigmo subscription plan doesn't provide an ability to customize CSS. You have to subscribe for any paid plan. In this case the visual editor will be available for you. Also you will be able to write your custom CSS code in the visual editor.
Regarding your second solution - it is for old version and doesn't work for the Twigmo 3.x.
Hovewer you can modify the design/themes/[your_theme]/templates/addons/twigmo/mobile_index.tpl file. You can add your CSS code there. It is not the most convenient way, but it is free.
I am using insert-CSS node module for adding styles to DOM, internally this adds the embedded approach.
so far my understanding is using external style sheets is best way to do it. But while using insert CSS, css added to the js bundle and dynamically css embedded to the . so this also looks as same using external CSS.. and css will be cached with js and there will be one file(js+css) we can avoid one http request for loading CSS ?
I feel this insert-css is better than traditional approach(external css) am i correct? please suggest me your thought on the same and add some docs to refer.
so my question is which is the best approach among using "insert-css npm" or "external css"
I didn't find useful info on this question and sharing my experience.
My personal recommendation is not to use "insert-css" modules for the simple projects like dealing with forms and minimal amount of components.
"insert-css" - as mentioned above, "insert-css" add the embedded styles, in the network, its passed as base64 format. Though it's less weight in the network, browser needs to convert the base64 format to css and adds the embedded css, this conversion process will happen allays in js side, I guess which will cause the performance issues
I am going to design a site using asp.net, and after watching a tutorial to get a feel for what is will entail, it came to a point where the video just said "drop your css files into the project", so is there a common applications(s) for designing the actual css?
Adobe Photoshop or Microsoft Expression.
First, learn to use a css compiler, it makes life much easier and you can write css much more intuitively in my opinion
http://compass-style.org/
Second, write css (or SASS/LESS) by hand. Designers have come a long way since the early Dreamweaver days, but in my experience, you will spend just as much time, if not more, tracking down the autogenerated stuff that doesn't work, than if you just wrote it from scratch and test with Chrome (or your other favorite in-browser CSS debugger).
They could of been referring to a theme in asp.net. Creating a theme in the App_Themes folder. (ASP.Net folder when you go to the add new items)This allows you to make pathing allot simpler. You can then put your skins, images(in a image folder) along with all of your style sheets. You then can set all your pages to use that theme in a web.config file. If you use the root web.config file then it will do it for your whole site. You would link it in the <pages styleSheetTheme="MyTheme"> You also will not have to have a lot of links in your head tags because all stylesheets in the theme will be inherited.(This is the drag and drop, Drag the .css file and drop it in your theme then all pages using that theme inherit the css.) Later on you can even change your themes dynamically.
Hope this helps do what you what you where looking for if not good knowledge on how ASP.net sites work from what i have learned. I am just learning myself.
You don't need an application to write css for you. Just get yourself a book on css or read some online tutorials to get you started.
Then create one and code it yourself. That way you are in complete control of what is happening. It doesn't mean you won't spend some time tracking down strange behaviour but that is all part of the learning curve.
due to lack of documentation about this feature i can't find a way to do this. I am trying to use autoLoad with merge mode. I have a TabPanel in which each tab is supposed to open autoloading another page using merge mode.
i am aware that plain HTML does render, but pages including Ext.net components fail to render. In my child page i have a resource manager registered with RenderScripts set to 'None' Ext.Net examples page shows a merge mode example in that way.
Right now i get a 'Ext.net.Store is not a constructor' in the child page.
Is there any special parameter which needs to be sent in the loadConfig when doing the autoload? or are there any special elements besides resource manager needed on the child page?
Using <AutoLoad Mode="Merge" /> is very tricky. In general I'd say it should be avoided, with preference given to using 'XRender' functionality or <AutoLoad Mode="IFrame" />.
It's tough to say exactly what's going wrong in your code. Posting a simplified sample demonstrating how you have things configured and demonstrating how to reproduce the problem would be very helpful.
I know that the Zen starting theme is very popular but I find it harder to edit a theme made by someone else (even if it's as simple as Zen) that to create my own in static html. Is it ever a good idea to start with a static html design and then port it over to drupal? Or am I just doing twice the work for no reason?
I'm interested in hearing what other, more experienced, drupal devs do when designing a new theme.
Personally, I would never hand-code all html and css and then port it to a Drupal theme. I don't agree with Kevin that "all themes start as html". Allow me to quote what I wrote before on the drupal.org forum:
Imagine writing your own html, complete with id's and classes. You also write css and adapt the css selectors to the html structure, id's and classnames you created yourself.
Next, when you have to turn that into a Drupal theme, you will find that Drupal adds it's own html structure, id's and classnames. This means that you will have to start making changes: either change the Drupal output to match the mockup you made earlier, or change the css selectors to match Drupal's html output. Either way, you're doing double work. It's just not efficient.
And in another topic I wrote:
One thing you have to understand about Drupal theming, is that not all xhtml/css/js output is generated by the theme, because modules provide their own default output. The theme is able to override that output, but in many cases there is no reason to do that because the default output is usually valid, functional and flexible. If you want the final xhtml output to be 100% identical to the xhtml you created, you will have to override every single theme function and template... now that would be a waste of time.
If you're used to writing static html, Drupal theming may require a change in mentality. If you want to be efficient in Drupal theming, you will have to learn to work with the default html output. Whenever possible, use only css. Starterthemes like Zen, Genesis and Fusion provide an excellent base to build your own custom theme.