Change appearence of page dynamically like twitter or tumblr - themes

I'm trying to find tutorials or code to allow users to customise their page, just like twitter ,wordpress and tumblr do.
Could someone tell me what technology their using?
i'm a .net developer, but maybe they're using jquery?
Any help would be great.
Thanks

You can use javascript to change style sheets and the DOM

Question is a bit broad. To change the page you simply need to manipulate the DOM or change the CSS associated with the page's elements. This can be done any number of ways. E.g. you could write out a new CSS class dynamically, you could add new elements to the DOM itself or you could modify the existing attributes of the page. e.g. to set the background of the page you can do something like:
(assuming JQuery)
$("body").css('background-image','url(path/to/image)');
Hope that helps,
-fs

Related

Rotativa Issue printing RAW HTML

(More specific Giorgio Bozio)
I have been using Rotativa for the last year to print simple html to pdf and its been working fantastic. Very happy with product, but now recently i have been trying to do something a little more advance and i keep having the same issue.
Normally i would send Rotativa a simple invoice view (Predefined HTML) with model data populated via Razor and this worked well, but now i am trying to implement template's for my invoices. Customers can create their own template layouts with a custom 3rd party form designer and then upload its template file into my site. I take this file and parse it and generate the elements of the invoice with stringbuilder and div tags. I then send the generated HTML to the view that uses a #HTML.Raw() to populate the invoice html. Rotativa then takes this View and generates a pdf, but when it generates the pdf its quality of the text is horrible and blurry. Thus it generates the template correctly, but does some sort of shrinking or something to make the text not look crisp.
I have tried everything, from playing with custom switches to playing with the dimensions of the html.
When i copy the generated html to a view and just generate the pdf plainly then it prints fine, but as soon as i push the html to the view with HTML.Raw i seem to land up with fussy text.
Giorgio Bozio, does Rotativa have a issue with Html.Raw? or can you perhaps open a dialog with me to try and resolve this issue? Really hope you can help me...or someone can help me. Desperate and dont really want to change Rotativa for something else.
Please help.
Resolved Text printing issue by removing background-color definitions on Div containers.
Resolved extra blank page printing issue by reducing PageHeight on Rotativa Customswitches
:-)

Problems with the maximum font size in TinyMCE editor on a Joomla website

I am using TinyMCE as editor on my Joomla website and I have a problem with the maximum font size.
When I insert some text into the TinyMCE editor I can change the font size but the maximum size seems to be: t (36pt), why?
I need to insert larger text into my pages. What can I do to fix?
Tnx
Andrea
There are many ways you could tackle this, but I would try one of these first:
You can change the dropdown font options using the theme_advanced_font_sizes option, in general, it is something like this:
tinyMCE.init({
...
theme_advanced_font_sizes : "10px,12px,14px,16px,24px"
});
For more info on this, look here.
Now, since you're using Joomla, you can try to pass your parameters in an array to the display editor call, like is explained in the official joomla documentation (keep in mind that you need to check this is one of the adjustable parameters) or you could also try to change the setting for the editor you're interested in by adding some javascript to a specific view, but I'm not sure it'll work. It should be something like: tinymce.get('editor_id').settings.theme_advanced_font_sizes="10px,12px,14px,16px,24px";.
Depending on what you want to do, you could also try using tinyMce indepently or duplicating the plugin with your own tweaks, so that it doesn't get overwritten when you update your site.
Don't do anything at all. You can control the appearance of any block by inserting css code directly, just use the code view.

How to display the “Menu Title” in Joomla 2.5

I’m trying to display the menu title text (example “Home”) in the header area of my Joomla 2.5 website.
Joomla’s default (when activated) is to place it in the Component area.
I’m not sure the best way to accomplish this. By default Joomla wraps the menu title with an H1 tag but doesn’t wrap it with a div and class.
The ways I’ve thought might be best to do this are:
Somehow wrap all menu titles with a div and class so I could reposition them up into the header with css .
Add some php code to my template. Something like:
php
$menuTitle = $this->params->get(‘fieldNameOfMenuTitle’);
php
echo = $menuTitle;
Any ideas, suggestions, or answers would greatly appreciated
Thanks
Never found an exact answer but found a work around.
Used a modified version of the below demo/plug-in to create a custom field (named it: "Title that displays on the Web Page") in the articles menu. By default, the table that is created and displayed in the web page is in the component area and is wrapped in a w/ a class. Repositioned the with CSS up into the header/banner area.
http://docs.joomla.org/Adding_custom_fields_to_the_article_component

Sharing - social buttons in websites

I want to implement social buttons in my website. What is the best script choice according to your experience?
I found this: http://www.addthis.com/
Is it a long way to do a simple thing?
It looks like you just need to insert the generated block code
anywhere you want the buttons to show up in your document. For
a pure html page this would be extremely simple (cut and paste).
For a MVC or serverside generated website it might be a little
more tricky, but you'd just have to paste the same code in your
view, and maybe call a helper to include
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4f904e27168d5473"></script>
in the head of your document, or inline with the rest of your code.
I guess it really depends on how your website is set up.
I'd rate it from extremely easy to slightly moderate.

With Prototype how do I disable autocomplete for a given input text box?

I am sure this is on here already...
I want to be able to disable autocomplete for some CMS generated form fields with some frontend javascript code, preferably Prototype but neat javascript will do if it has no cross-browser problems.
I have ids for my boxes and I am not using some clever 'prototype autocomplete' (that seems to stuff the Google results on this). Regular browser autocomplete is what I want to turn off and not for the entire form.
Knew I would find it as soon as I asked:
$$('.MacGuffin')[1].setAttribute('autocomplete', 'off');
$$('.MacGuffin')[7].setAttribute('autocomplete', 'off');
That is specifying elements by class rather than id.

Resources