A web designer has created a design for our Drupal web site which requires a different color scheme for various sections of the site. Drupal does not support this design requirement by default.
Currently I am using JavaScript to change the color scheme based on the page title. After adding some content pages I now realize that this is a terrible way of doing things. I need some ideas for a better way of changing the color scheme depending upon the content.
Is there a way to apply a different theme to a page based on its node value? I could create a slight variation of my theme for each color scheme, although that makes theme maintenance more difficult.
I've also thought about using CCK to add a field to my page content type and then changing the color scheme based on that custom field. This would eliminate the need to add code to my JavaScript for every new page.
Or is there a module for changing color schemes per page?
You might want to take a look at the ThemeKey module, which allows you to determine which theme is used based on conditions like node type or path.
You could add some css in hook_preprocess_page function based on node or other criteria and add the css in the page template as embedded styles.
The idea will be the same as doing it in JavaScript, but you will have php, drupal etc available to do what you need. It should be a lot easier since you can test the node type, or a value you set on the node object.
The CSS module does node-specific CSS, so you could use that to adjust colors.
I would suggest implementing hook_preprocess_page in your theme, and applying a body class based on the node type (or types) being displayed. Or, potentially, put these classes in the node's preprocess for display. So, for instance, if you're viewing a 'project' node, put:
<body class="... node-type-project">...
Then the designer can target styles based on which classes the body has. This is fairly easy to automate, just do a "node-type-". strreplace("_", "-", $node->type) to change any future node type into a class, which you then feed into either the body or the node.
Related
Is there any sort of easy way or helper that would enable to functionality to set custom variable flags. For example I could set a color variable to "blue" in the editor and I could use handlebars to add the "blue" class an element in that post.
EDIT: I ended up having to use a different CMS. Ghost was made intentionally to be simple and my needs require more customization features.
This is something I have been trying to figure out, but (being new to ghost), I haven't found a clean way to do this. Unlike Wordpress, there is no field for this in the editor (I have checked the documentation, nothing similar), so you have to apply some custom solution. Here are two options:
If the styling you want to apply depends on a tag, e.g. if 'movie'-tagged posts need some special styling, you can just add CSS because the {{body_class}} helper adds all the tags to the <body> element as tag-classname, e.g. tag-movie.
If tags are not your option, you could use client side JavaScript, check some condition in the content and apply the styling. I use this to change color of an svg logo when it is placed on a hero image that happens to have the same color as the logo. This requires the hero image of the post to follow some url convention, like post-heroimg3663-blue.jpg. Then you can add some inline Javascript to the <head> to change the color of the logo. Not so good, but it should work.
UPDATE:
If the second option works for you, you could even consider creating a Handlebars custom helper and running any styling (via adding a class) on the server side.
Typo3 provides option to add multiple images to a page content, but all the images are wrapped under some default <div> tags. I want these images to be wrapped under <ul> and <li> tags instead and giving my own custom CSS ids and classes to it.
There are not many resources on TYPO3 for me to approach this issue. Can TYPO3 allow to use custom tags for the page content elements?
UPDATE
From Jost's answer was able to get my images displayed, but how do I split the image details?
My each image will have title, alt-text, image-path and image-link. Now, using TypoScript how do I retrieve this, because each details has to go in separate tags.
Check the TypoScript object browser. There you will find the object tt_content, which contains the rendering definitions for content elements. The rendering definition for images is found at tt_content.image.20, for example
tt_content.image.20.imageStdWrap.dataWrap = <div class="csc-textpic-imagewrap" style="width:{register:totalwidth}px;"> | </div>
The default definitions given there are usually provided by the static TypoScript of CSS-styled-content. You can overwrite them in your own TS, but when updating to a newer TYPO3-version, the default template may change, which could result in additional wrappers.
Update
Most content rendering in TYPO3 is defined in the TypoScript object tt_content. You can browse all TS-objects that will be used on a page by selecting the "Template" module and the page in question, and then choose "TypoScript Object Browser" in the selectbox at the top of the window. To understand what that stuff means, knowledge of TypoScript is necessary (Tutorial, Reference).
You can add your own TypoScript, which may override existing settings. You can do that in the Template-module too, but usually this is done by creating a file containing the script somewhere in the fileadmin folder and including it from the Template module.
The above enables you to edit the markup of the page. (Additional) CSS is usually defined in external files, that are included by a PAGE object (see the reference about that).
This post is a bit older but I want to add the following:
If you want to understand how the different content elements are wrapped, you may have a look into the css_styled_content extension. I assume that you have included the "Static Template (from extension)" in your main Typoscript template.
You can find the setup.txt here:
typo3/sysext/css_styled_content/static/setup.txt
There you´ll find the line Jost mentioned in line 860 (TYPO3 version 6.1), for example. And of course a lot of other definitions, too.
But check to read the documentation and tutorials on typo3.org.
HTH
merzilla
I am setting up my first drupal (6) site and so far I like the system.
I've now run into a problem however: to give the content more space I want to hide the right-sidebar (with the navigation menu etc.) on every page from a specific module (or also fine: for a specific node/view from the module)
The only way I've come up with is to add some CSS to the module CSS files, but this doesn't seem very clean to me since I would need to redo it on every update (also the module uses 5 CSS files for different views)
Is there a better way to do it?
To be clear: I don't want to just hide a block, I want to hide the whole sidebar
Hmmm. Is this a custom module or something commonly available? Some modules allow you to create custom tpl.php files (see the theming guide) for them. This might quickly solve your problem.
If you are theming a node, then it is significantly easier. You can theme a specific type of node by naming convention (again via .tpl.php files in your theme). You can check out how to do that here.
Definitely check out the theming guide, since you will probably want to create your own theme instead of hacking on one of the core themes (not recommended). Typically you can copy /themes/garland into /sites/all/themes/my_garland, switch your site's theme to that and then make whatever changes you need (otherwise you'll have to reapply changes every time you update core).
Finally, you can check for path arguments (which seemed weird to me at first) if you want to do things in PHP that are more complex (see the arg function). If this is your first Drupal site, you may also need to know how to include css programatically.
Good luck! Drupal is a fun and interesting product.
You can configure the block visibility for each individual block and path in your website (admin/build/block). Under 'Configure'/'Page specific visibility settings'/'Show block on specific pages' you can set the navigation menu block not to be displayed for some specific routes. If a sidebar has no blocks to display it will hide itself allowing more space for the content.
You could use the Context module, with it you can, among other things, set rules for each block/menu where and when i should be shown (or not). You could also do this the way Josep explained but with Context you get more options.
And as Josep said when there are no blocks active in the sidebar it should disappear automatically, if not check your page.tpl.php it should have something like this in it:
<?php if ($right): ?>
<div id="sidebar-right">
<div id="sidebar-right-inner"> <?php print $right; ?> </div>
</div>
<?php endif; ?>
So if there is nothing in the Right region it doesn't display the sidebar. Maybe you have to change the name of the region, depending how they are called in you template.
I believe you already got the answer or a way to fix your problem.
There is a simple way to fix your problem. Here's a link.
I am creating a site which will have a "desktop" and a "mobile" theme. I've two theme packages for this site: mysite.theme and mysite.mobile_theme. The mobile_theme is a stripped down version of the desktop theme, with new views and a reduced set of viewlets. I want to switch between these two themes based on the URL the site is visited from (i.e., mobile.mysite.com vs. www.mysite.com).
As the mobile and desktop themes will share a lot of code, mysite.mobile_theme descends from mysite.theme in the following ways:
1) mobile_theme GS skins.xml has a skin path based on the old theme, so the desktop theme's CSS etc. is used:
<skin-path name="mysite.mobile_theme" based-on="mysite.theme">
2) IThemeSpecific marker subclasses the original one, so views which I'm not overriding for the mobile site fallback to the ones in mysite.theme:
from mysite.theme.browser.interfaces import IThemeSpecific as IBaseTheme
class IThemeSpecific(IBaseTheme):
"""Marker interface that defines a Zope 3 browser layer.
"""
3) I have registered various views in mysite.mobile_theme to override the certain ones in mysite.theme.
4) I've used generic setup to have different viewlet registrations for each theme.
At this stage, if I select mysite.mobile_theme in the "Default skin" option portal skins->properties, everything works correctly: my views are used and the viewlets settings from the mobile_theme's GS profile are picked up correctly. So it appears the theme is set up correctly overall.
As mentioned above, however, I would like to swap between these two themes based on URL.
First, I swapped the "Default skin" back to "mysite.theme". I then created an access_rule in the root on my Plone site, roughly following these instructions to select a skin based on URL. It's at plonesite/access_rule and is set up as the access_rule for the plone site:
url = context.REQUEST.get('ACTUAL_URL', '')
if 'mobile' in url:
context.changeSkin('mysite.mobile_theme', context.REQUEST)
else:
context.changeSkin('mysite.theme', context.REQUEST)
I've also tried using context.REQUEST.set('plone_skin', 'mysite.theme') rather than calling context.changeSkin(...).
Using this setup, the viewlets displayed change correctly based on the URL I've used--so it looks like the skin is being changed at some point--but the mysite.mobile_theme's view classes/templates are not being used in preference to mysite.theme's. In summary:
If I call from a URL containing "mobile" I get mysite.theme's views, but mysite.mobile_theme's viewlet registrations.
Otherwise, I get mysite.theme's views and mysite.theme's viewlet registrations.
It looks like I might have to hook into the traversal mechanism to change it so if "mobile" is in the URL, the mysite.mobile_theme's views registered against its IThemeSpecific are chosen rather than the mysite.theme ones, but I'm not sure this is correct nor how I'd go about this.
Can anyone give me some pointers?
UPDATE 3hrs after originally asking
To answer my own question (which I can't do for another 5 hours due to SO's rules):
"""
It would appear that you must patch much lower down in the stack to make this work. I looked at how it was done in plone.gomobile, and they monkeypatch the skin choosing code itself. See:
http://code.google.com/p/plonegomobile/source/browse/gomobile.mobile/trunk/gomobile/mobile/monkeypatch.py
"""
You could use collective.editskinswitcher. Its main use case is to use the Plone Default theme on say edit.example.com and My Custom Theme on www.example.com. You can probably tweak its property sheet to fit your use case though.
Since the 'mobile theme' use case is fairly common I would accept patches to make that easier; or I may work on that myself some time.
(BTW, note that there is a fix-browser-layers branch that may help when you miss some items that are registered for a specific browser layer; seems ready to merge except that I would like to add some tests first.)
I have done this in some prototypes of mobile themes. Please consider thoses two addons not ready for production:
https://github.com/toutpt/plonetheme.jquerymobile
https://github.com/toutpt/plonetheme.senchatouch
The related code is:
The patch on browserlayer to mark the request with my theme layer: https://github.com/toutpt/plonetheme.jquerymobile/blob/master/plonetheme/jquerymobile/layer.py
The patch on plonetool to add ##mobile on every content page: https://github.com/toutpt/plonetheme.jquerymobile/blob/master/plonetheme/jquerymobile/PloneTool.py
The patch on skintool to tell skin layer is this one if browser layer: https://github.com/toutpt/plonetheme.jquerymobile/blob/master/plonetheme/jquerymobile/SkinsTool.py
If you are using plone.app.theming, you also can switch your diazo theme: https://github.com/toutpt/plonetheme.jquerymobile/blob/master/plonetheme/jquerymobile/transform.py
Do I understand correctly that at the mobile URL your skins are correct, but your Zope3 Views are not? Which makes sense to me, since the view classes are based on Interfaces. In the same code above, where you use context.changeSkin, add:
from zope.interface import alsoProvides
alsoProvides(context, IMobileView)
and have your view zcml specify for ... IMobileView
[edit: on second thoughts, this really should be what happens when you change the skin - where the additional inteface will be your "IThemeSpecific" - so I'm not sure what's at play here, but it wouldn't hurt to try alsoProvides(context, IThemeSpecific)]
Is there a module in Drupal that allows me to put link at the end of a page?
http://lh6.ggpht.com/_SDci0Pf3tzU/Sfm7vF_MSiI/AAAAAAAAEtY/VX3BXaMOfSM/s400/linksatend.jpg
I tried to use menu and put it as a block at the footer, but the menu items are arranged vertically, instead of horizontally.
Is there anyway to do it without ( preferably) touching the CSS and HTML?
changing the menu items from vertically to horizontally is a matter of 1 or 2 css rules. which is why i doubt that there is a module for this. if you would post a link to your site, or the html + css, i could help with the css.
Links at the end of the page can be controlled by a few different things.
First, check the Blocks administration and see if there is a content area for the footer. Maybe there is a block there that is controlling these links.
Next, depending on well the theme is built, check the configuration options under Admin > Site Building > Themes > Conigure > (Your theme). Many have options to change what links display in the footer.
Lastly, check the page.tpl.php. They could also be hard-coded in the template (which is bad) and edited from there.
In terms of answering your question about 'a module to alter links', you can see that since the links can be controlled from different places, a module just for this purpose would be pointless. The correct way is to set the appropriate options in template.php so it can be configured in your theme settings.
You might have some luck using the Nice Menus module - it's intended to create animated menus but if you give it a flat menu tree, it might be close enough to what you want. If that doesn't work, there's about 100 modules dealing with navigation.
Still, the best way would be to place the menu's block in the footer and modify the theme to flatten it with CSS.
Assuming you don't won't to touch the theme, maybe because you're using an unmodified contrib theme, you can use either of two approaches:
create the block by hand as a custom HTML block, which gives you full control over the contents. The main downside is that you'll have to maintain it by hand instead of using admin/build/menus
create a PHP block, either custom (boo !) or in your site-specific module (better), to generate a block with markup appropriate for the theme you're using, based on the actual primary links, which you obtain from menu_primary_links(). Downside it that you have to create a site module if you don't already have one, or that you'll have to enable the PHP filter if you create it as a custom block.
This being said, I think you'd still be better off modifying the theme if it's a custom one, or creating a sub-theme for the theme you're using if it's a contributed one. It will be less work and, this being a matter of appearance, falls rather in theme scope than in module scope.