I am looking for a solution to a kind of odd problem. I am creating a website whose intended purpose is to be embedded in to other peoples websites using an iframe. I want the people who embedd the iframe to be able to customize the CSS of my website. I do not want the viewer of the iframe to be able to customize the CSS but the embedder. I am not sure how I would go about doing that. Any suggestions?
How I would handle this is to have the user be able to provide a get parameter to select the css file form a server, e.g.
http://www.YourSite.com/page/?css-file=http://www.site.com/path/to/file.css
And based on the get parameter your server(or the client) would (using Django, php, or possibly in the client using javascript) load the provided css file.
Related
As a beginning IT'er, i want to create my own CSS file to use on an existing site, so it becomes more readable.
Is this possible at all? Do I need certain extentions on it? Is it browser-specific?
Yes, it is possible. Actually you can create your own extension but I would recommend you to use Stylebot (for Chrome). Go to the Chrome's Web Store and download the extension. It is completely free.
Once you added your CSS for a certain web site the extension will save that CSS and use whenever you enter this web site again.
I was wondering if you can give me any pointers on how to write a firefox plugin/add-on, that would change the layout of the page one is on, based on a pre- written CSS file.
It's meant as a prototype and what I want to be able to do initially is to make my browser automatically change the background color of certain div's, when I navigate to the chosen page. I'm only trying to make it work for a couple of sites.
I speak python, javascript/jquery, css, html ..
You may be able to accomplish your goal using the Stylish addon without writing your own. This basically allow you to attach custom CSS overrides based on a URL pattern.
If you want to do this and write your own extension, you could use the addon-sdk and make use of page-mod. Here is a tutorial that will help you with running the script only on the URL's you specify. As of FireFox 34 you should be able to attach actual CSS files instead of having to rely on JavaScript. Learning the addon-sdk it a lot less intimidating than making an old style / low-level extension and should be sufficient for your needs.
There are a few different ways to accomplish similar things, so you will need to experiment based on your needs.
I am working on a Facebook iFrame application, and have a question about styling.
I want the application content to look like the rest of facebook. So the most obvious approach I could think of was to use a stylesheet provided by Facebook for application development that includes such styles. However I cannot seem to find anything about this on developers.facebook.com or any other site for that matter.
I have created some FBML application earlier, and these was able to use Facebook styles directly since the application content was rendrered within the facebook pages. But iframes does not inherit the stylesheet from the parent content (nor should they), so I was wondering how (or possibly if) this can be done.
I have found some posts/blogs that simply tells you to create an application stylesheet that mimics the Facebook look. But I don't think this is a very good idea, as this CSS must be updated every time anything changes on Facebook. It also seems that all facebook wiki pages regarding CSS (which I have used before) has been removed.
The reason I do not want to use FBML Canvas is that Facebook is in the process of deprecating this approach. They recommend new applications to be created using iframes.
http://developers.facebook.com/docs/reference/fbml/
I really hope anyone has any good ideas on this.
There is no official way. For some reason, FB shards their styles to a ridiculous degree. They also change the filename rather than appending a version parameter every time they make a change to prevent downstream caching. Here's an example of todays stylesheets:
http://static.ak.fbcdn.net/rsrc.php/y-/r/40PDtAkbl8D.css
http://b.static.ak.fbcdn.net/rsrc.php/yE/r/u7RMVVYiOcY.css
http://static.ak.fbcdn.net/rsrc.php/yT/r/P-HsvhlyVjJ.css
http://static.ak.fbcdn.net/rsrc.php/yT/r/CFyyRO05F0N.css
http://static.ak.fbcdn.net/rsrc.php/y0/r/k00rCIzSCMA.css
http://b.static.ak.fbcdn.net/rsrc.php/yv/r/BJI6bizfXHL.css
http://b.static.ak.fbcdn.net/rsrc.php/yD/r/rmbhh_xQwEk.css
http://b.static.ak.fbcdn.net/rsrc.php/yn/r/xlsrXFt9-vD.css
http://b.static.ak.fbcdn.net/rsrc.php/yN/r/Uuokrl6Xv3c.css
http://b.static.ak.fbcdn.net/rsrc.php/y0/r/klTGALEjWM8.css
http://b.static.ak.fbcdn.net/rsrc.php/yN/r/mlYhlJwnCdr.css
http://b.static.ak.fbcdn.net/rsrc.php/yT/r/uFI2FW2LitH.css
http://b.static.ak.fbcdn.net/rsrc.php/yh/r/5Bzj1255G1S.css
http://b.static.ak.fbcdn.net/rsrc.php/yp/r/5UteuBI1b8_.css
You can automate this process fairly easily using either PHP or .NET using existing solutions Minify and Combiner respectively.
A simpler method would be to use the Web Developer toolbar for Firefox, go to Facebook and choose the Web Developer toolbar option to "view CSS" which will bunch all the CSS up for you. Copy and paste it into your own local stylesheet and you only have to update when Facebook makes a major change.
So while there is no simple way (that I am aware of), there are methods for you take care of it in a fairly speedy manner.
I'm trying to create a page that allows a user to change the "look and feel" of the site. I would like to use something similar to jQuery's ThemeRoller or FireFox's Developer Tool.
I can't force the user to use Firefox and I don't need all the options that the ThemeRoller has. I'm really only looking for header, background, font size and font type.
Any suggestions?
Thanks
Try a Stylesheet Switcher, it can be as advanced as you want and this will give you a lot more control the simple Div targeting.
http://www.dynamicdrive.com/dynamicindex9/stylesheetswitcher.htm
If your concern is transferring fewer/smaller files and you really want to avoid jQuery UI, it would be quite easy to develop a small jQuery plugin to modify background, font-size/type, and some header stuff.
Since you ask about jQuery specifically, I assume you have some experience working with it. Check out the plugin authoring documentation at http://docs.jquery.com/Plugins/Authoring
If you aren't worried about transferring fewer/smaller files, just use jQuery UI themeroller and ignore the features you don't want.
I couldn't find a plugin that already did this. I used Brosho to give me a base starting point. Brosho basically set's "Brosho: css info" to the element using the attr method. Then scans the entire document for Brosho to create the CCS to export.
Store the user's style attributes in a datastore (cookie or server based). Then on each page of the site have something like the following if user's preferences are stored server-side:
$(document).ready(function() {
$("h1").css('color','<% =UsersHeaderFontColor');
$("body").css('color','<% =UsersBodyFontColor');
$("body").css('font-size','<% =UsersFontSize');
$("body").css('font-family','<% =UsersFontFamily');
});
If you want to get from a cookie, then there's a nice jquery cookie plugin that would allow you to set/get cookie name/value pairs.
I have a very large cascading menu system with over 300 items in it. (I know it's large but it's a requirement.)
Currently, it's written in javascript so the external file is cached by browsers.
To improve search engine results I need to convert this to a css menu system.
I realize the browsers will also cache external stylesheets but,
is there a way to cache the menu content (<ul> and <li> tags)?
If I use javascript (document.write) to write the content I could have this in an external javascript file, which would be cached locally, but,
would this be search engine friendly?
What is the best solution?
The best way to accomplish what you want to do is using SiteMaps to inform Google about the urls for your web site. Basically you will want to translate your hierarchial data for the menus into a SiteMap.
You could generate the menus beforehand into static html / javascript files, and have all the pages pull the site from the same URL on your site. That way, the client side browser will do the caching. You'll just have to have a step in your deployment that generates the html files for the menu.
Try to have it generate as much plain HTML (+JS +CSS) as possible, then whatever has to be dynamic can be adjusted with javascript.
You could do the whole thing in CSS and HTML only, and you don't need yo use any Java script. See < http://www.netwiz.com.au/cssmenu.htmlvalue >. This pages shows a tool to be used with a specific documentation software, but the sample CSS and HTML shows how to use ul li elements for a CSS/HTML only menu in a large number of browsers.
You still have the problem of 300 items in the menu which will add to the loading time. If this is an issue I guess you could move this code to a separate iframe to increase the chance of it being cached at a proxy (or by the browser). At the risk of offending the purists even a frame might do the job, but you will have problems with the topic pages not being able to display the menu if they are linked to directly.