Plone: Using the default skin for administration - python

I'm developing a skin for Plone 3.x. The skin have a lot of differences from the default theme, and i would like to keep the default skin in administration mode. I read some solutions like this http://maurits.vanrees.org/weblog/archive/2008/01/switch-your-skin-based-on-the-url . But I cannot use subdomains in my web, so I cannot use these solutions.
I'm thinking that the solution would be something like that:
In my main_template.pt:
<tal condition:"true: Autenticated as admin">
''Put here the specifics css
</tal>
But I don't know the correct sintax in Plone
Thank you.

Your solution will work - but there are better ways. You don't describe how your stylesheets are installed, but here are two ways to do it.
Either, if you have a policy product, put the following in your product's profiles/default/cssregistry.xml:
<object name="portal_css" meta_type="Stylesheets Registry">
<stylesheet title="" cacheable="True" compression="safe" cookable="True" enabled="1"
expression="here/portal_membership/isAnonymousUser"
id="visitors.css"
media="all" rel="stylesheet" rendering="import"/>
<stylesheet title=""
cacheable="True" compression="safe" cookable="True" enabled="1"
expression="not:here/portal_membership/isAnonymousUser"
id="admin.css"
media="all" rel="stylesheet" rendering="import"/>
</object>
or; visit "portal_css" in the ZMI (Zope management interface). There you can do the same thing by "Add"ing the two stylesheets shown above, where "condition" is the value from "expression" above.
These are the same thing - one just sets it through the web, the other through GenericSetup - and now Plone will automatically incorporate one or the other css file into every page without you having to change main_template.pt. Which is something you should never, ever, do.

This doesn't answer your question directly, but you might want to take a look at "Editskin switcher".

Finally, I used this solution. The condition to detect if you are authenticated is tal:condition="not: here/portal_membership/isAnonymousUser". So, you can use a stylesheet only for visitors and other stylesheet for authenticated users. Something like that:
< style type="text/css" tal:content="string:#import url($portal_url/visitors.css);" media="all" tal:condition="here/portal_membership/isAnonymousUser" />
< style type="text/css" tal:content="string:#import url($portal_url/admin.css);" media="all" tal:condition="not: here/portal_membership/isAnonymousUser" />
Maybe this is not the optimal solution, but it works for me

Related

Detecting non responsive websites with no RWD with python

Is there a way to reliably scrawl (python 2.7) a website and determine whether it is responsive and thus will adapt to mobile devices or not? I want to build a crawler who screens multiple websites and stores the ones which are non mobile friendly.
I've heard methods like
-Finding websites without a "viewport" in their DOM HTML code
-Looking through CSS media queries
Do you know a way to accurately detect non responsive websites? Any suggestion would be very much appreciated.
If a web page doesn't have in its head a viewport meta tag then it's unlikely it will be responsive, ie you would look for
<head>
...
<meta name="viewport" content= SOMETHING>
...
</head>
Two cases you might want to consider that would fail the above test.
If a site uses device detection to route users to say a mobile or desktop site based on their device, then although the mobile or desktop sites may not be responsive, this wouldn't be obvious to an end user and their experience could be good.
Another case I can think of is a page that uses javascript to detect viewport size and uses the result to modify the page or the page's stylesheet.
On balance I think searching for a viewport meta tag would give good results, though don't expect it to be perfect.
I hope this helps!

How to add python text to HTML website? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I am trying to add this python code into my website. How can I go about referencing the python code into the html? ? Sorry I'm a total n00b to development, just started coding a week ago, aylmao.
python
>>> print "papa bless."
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>GETTING STARTED WITH BRACKETS</title>
<meta name="description" content="An interactive getting started guide for Brackets.">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>GETTING STARTED WITH BRACKETS</h1>
<h2>This is your guide!</h2>
<!--
MADE WITH <3 AND JAVASCRIPT
-->
<p>
Welcome to Brackets, a modern open-source code editor that understands web design. It's a lightweight,
yet powerful, code editor that blends visual tools into the editor so you get the right amount of help
when you want it.
</p>
<!--
WHAT IS BRACKETS?
-->
<p>
<em>Brackets is a different type of editor.</em>
Brackets has some unique features like Quick Edit, Live Preview and others that you may not find in other
editors. Brackets is written in JavaScript, HTML and CSS. That means that most of you using Brackets
have the skills necessary to modify and extend the editor. In fact, we use Brackets every day to build
Brackets. To learn more about how to use the key features, read on.
</p>
<!--
GET STARTED WITH YOUR OWN FILES
-->
<h3>Projects in Brackets</h3>
<p>
In order to edit your own code using Brackets, you can just open the folder containing your files.
Brackets treats the currently open folder as a "project"; features like Code Hints, Live Preview and
Quick Edit only use files within the currently open folder.
</p>
<samp>
Once you're ready to get out of this sample project and edit your own code, you can use the dropdown
in the left sidebar to switch folders. Right now, the dropdown says "Getting Started" - that's the
folder containing the file you're looking at right now. Click on the dropdown and choose "Open Folder…"
to open your own folder.
You can also use the dropdown later to switch back to folders you've opened previously, including this
sample project.
</samp>
<!--
THE RELATIONSHIP BETWEEN HTML, CSS AND JAVASCRIPT
-->
<h3>Quick Edit for CSS and JavaScript</h3>
<p>
No more switching between documents and losing your context. When editing HTML, use the
<kbd>Cmd/Ctrl + E</kbd> shortcut to open a quick inline editor that displays all the related CSS.
Make a tweak to your CSS, hit <kbd>ESC</kbd> and you're back to editing HTML, or just leave the
CSS rules open and they'll become part of your HTML editor. If you hit <kbd>ESC</kbd> outside of
a quick inline editor, they'll all collapse. Quick Edit will also find rules defined in LESS and
SCSS files, including nested rules.
</p>
<samp>
Want to see it in action? Place your cursor on the <!-- <samp> --> tag above and press
<kbd>Cmd/Ctrl + E</kbd>. You should see a CSS quick editor appear above, showing the CSS rule that
applies to it. Quick Edit works in class and id attributes as well. You can use it with your
LESS and SCSS files also.
You can create new rules the same way. Click in one of the <!-- <p> --> tags above and press
<kbd>Cmd/Ctrl + E</kbd>. There are no rules for it right now, but you can click the New Rule
button to add a new rule for <!-- <p> -->.
</samp>
<a href="screenshots/quick-edit.png">
<img alt="A screenshot showing CSS Quick Edit" src="screenshots/quick-edit.png" />
</a>
<p>
You can use the same shortcut to edit other things as well - like functions in JavaScript,
colors, and animation timing functions - and we're adding more and more all the time.
</p>
<p>
For now inline editors cannot be nested, so you can only use Quick Edit while the cursor
is in a "full size" editor.
</p>
<!--
LIVE PREVIEW
-->
<h3>Preview HTML and CSS changes live in the browser</h3>
<p>
You know that "save/reload dance" we've been doing for years? The one where you make changes in
your editor, hit save, switch to the browser and then refresh to finally see the result?
With Brackets, you don't have to do that dance.
</p>
<p>
Brackets will open a <em>live connection</em> to your local browser and push HTML and CSS updates as you
type! You might already be doing something like this today with browser-based tools, but with Brackets
there is no need to copy and paste the final code back into the editor. Your code runs in the
browser, but lives in your editor!
</p>
<h3>Live Highlight HTML elements and CSS rules</h3>
<p>
Brackets makes it easy to see how your changes in HTML and CSS will affect the page. When your cursor
is on a CSS rule, Brackets will highlight all affected elements in the browser. Similarly, when editing
an HTML file, Brackets will highlight the corresponding HTML elements in the browser.
</p>
<samp>
If you have Google Chrome installed, you can try this out yourself. Click on the lightning bolt
icon in the top right corner of your Brackets window or hit <kbd>Cmd/Ctrl + Alt + P</kbd>. When
Live Preview is enabled on an HTML document, all linked CSS documents can be edited in real-time.
The icon will change from gray to gold when Brackets establishes a connection to your browser.
Now, place your cursor on the <!-- <img> --> tag above. Notice the blue highlight that appears
around the image in Chrome. Next, use <kbd>Cmd/Ctrl + E</kbd> to open up the defined CSS rules.
Try changing the size of the border from 10px to 20px or change the background
color from "transparent" to "hotpink". If you have Brackets and your browser running side-by-side, you
will see your changes instantly reflected in your browser. Cool, right?
</samp>
<p class="note">
Today, Brackets only supports Live Preview for HTML and CSS. However, in the current version, changes to
JavaScript files are automatically reloaded when you save. We are currently working on Live Preview
support for JavaScript. Live previews are also only possible with Google Chrome, but we hope
to bring this functionality to all major browsers in the future.
</p>
<h3>Quick View</h3>
<p>
For those of us who haven't yet memorized the color equivalents for HEX or RGB values, Brackets makes
it quick and easy to see exactly what color is being used. In either CSS or HTML, simply hover over any
color value or gradient and Brackets will display a preview of that color/gradient automatically. The
same goes for images: simply hover over the image link in the Brackets editor and it will display a
thumbnail preview of that image.
</p>
<samp>
To try out Quick View for yourself, place your cursor on the <!-- <body> --> tag at the top of this
document and press <kbd>Cmd/Ctrl + E</kbd> to open a CSS quick editor. Now simply hover over any of the
color values within the CSS. You can also see it in action on gradients by opening a CSS quick editor
on the <!-- <html> --> tag and hovering over any of the background image values. To try out the image
preview, place your cursor over the screenshot image included earlier in this document.
</samp>
<h3>Need something else? Try an extension!</h3>
<p>
In addition to all the goodness that's built into Brackets, our large and growing community of
extension developers has built hundreds of extensions that add useful functionality. If there's
something you need that Brackets doesn't offer, more than likely someone has built an extension for
it. To browse or search the list of available extensions, choose <strong>File > Extension
Manager…</strong> and click on the "Available" tab. When you find an extension you want, just click
the "Install" button next to it.
</p>
<!--
LET US KNOW WHAT YOU THINK
-->
<h2>Get involved</h2>
<p>
Brackets is an open-source project. Web developers from around the world are contributing to build
a better code editor. Many more are building extensions that expand the capabilities of Brackets.
Let us know what you think, share your ideas or contribute directly to the project.
</p>
<ul>
<li>Brackets.io</li>
<li>Brackets Team Blog</li>
<li>Brackets on GitHub</li>
<li>Brackets Extension Registry</li>
<li>Brackets Wiki</li>
<li>Brackets Developer Mailing List</li>
<li>#brackets on Twitter</li>
<li>Chat with Brackets developers on IRC in #brackets on Freenode</li>
</ul>
</body>
</html>
use code tag but if you need hightlighting the check: highlight.js
<code>print('Hello')</code>
Here is an example for you even though you provided none of yours.
<!DOCTYPE html>
<html>
<body>
<pre>
<code>
>>> print "papa bless."
</code>
</pre>
</body>
</html>
I specifically modified your code by adding one more space between print and the what you have in double quotes to demonstrate what value pre tag offers here. It simply displays preformatted text the way it is provided preserving tabs, double spaces and any other typographic formatting you may use in your code.
You may run into issues with pre tag if you have long lines of code, which may overflow (or not) inside a container holding your pre tag, but you can deal with that using CSS, by adding a scroll bar
pre {
overflow: auto;
}
or simply wrapping the text...
pre {
white-space: pre-wrap;
}
Understand, that most browsers display the text wrapped in pre tags using the default setting for CSS:
<style>
pre {
display: block;
font-family: monospace;
white-space: pre;
margin: 1em 0;
}
</style>

Custom Fonts on Heroku with Django/Python

I'm using custom fonts from Pixeden, which are similar to FontAwesome. For some reason, the custom font-faces are not rendering, though I've placed all of the necessary files in my static folder. How do you get custom fonts working on Heroku with Python?
I'm using Django Storages, Django Pipeline, and Amazon S3.
I'll reply because I have had this problem lately and I resolved it. If you are using a font for example from googleapis in your html page, just remove http: at the beginning, so inside <head> instead of:
<link href="http://fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext" rel="stylesheet" type="text/css">
use:
<link href="//fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext" rel="stylesheet" type="text/css">
This is an old question, but it might benefit someone who stumbles upon it:
The issue here is that you cannot import the fonts with good old insecure http. It will work for your local enviroment, but not on Heroku.
You should use https instead!
Do it like this:
<link href="https://fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext" rel="stylesheet" type="text/css">

Url Rewrite With Python Paste

I'm hosting a Pylons application using Apache as a proxy to paste, which serves my app. I'm trying to set up a Rewrite Rule to force browsers to update modified css, js, and image files, as inspired by the latter half of section 10.8 in Chapter 10: Survive the Deep End. It works by writing a view helper to automatically include the modification time of any of these files in the url, so the html may look like this:
<link href="/css/main.1302802028.css" media="all" rel="stylesheet" type="text/css" />
Then, you use Rewrite Rules to get the server to forward the request to the location of the actual file at /css/main.css. That way, anytime you update your file the client's browser thinks it's getting a new file, thus ignoring its cache.
I tried setting it up in my site's conf file within apache with a rewrite rule like so:
RewriteEngine On
RewriteRule ^(.*)(css|img|js)/(.+)\.(\d+)\.(css|js|jpg|gif|png)$ $1$2/$3.$5 [L]
However, the Rewrites don't seem to function since I'm using Apache with ProxyPass. Is there either a way to get them to work with a proxy, or use paste/pylons to achieve the same effect?
Thanks!
I don't know if you are running on top of Linux or not, but have you simply tried setting up a symlink?

CSS file not loading for page with multiple arguments

I am working with google app engine for a class, and while working on a project, I came across something strange that I can't figure out. When I load a site with multiple arguments, such as www.something.com/something/1, the css file doesn't affect the page. It does this even if I copy and paste the exact code from another working html file. I am guessing it has to do with the multiple arguments and maybe me not defining something in the app.yaml file, but I am not sure really. Any help would be appreciated, let me know if you need any code, I didn't figure it would be useful in this case.
WWaldo
Edit:
<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1"/>
<title>Google App Engine</title>
<link rel="stylesheet" type="text/css" href="stylesheets/page.css"/>
</head>
You're not showing any code so it's hard to tell for sure, but my guess is that you are using relative references to your CSS files:
<link rel="stylesheet" href="styles.css">
these will break when you're in a different directory. /something/1 will be interpreted by the browser as a different directory, so it will search for
/something/1/styles.css
the best solution is usually to use absolute paths:
<link rel="stylesheet" href="/stylesheets/styles.css">

Categories