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.
Related
I'm trying to put these pictures in a single row using semantic view in drupal7. I just created this view named try and put 2 pictures in it.
After that, I'm editing this view->format-format->setting->row (this is asking for class attribute, not mandatory) and I don't know what to write in this class attribute.
How do I put these pictures in a single row?
Make custom template for that view. Open "Advanced settings" on right side of view editing page and at bottom find "Theming information". There you can see template file suggestions. There if you can see the code of default templates (and copy it to clip board) but you can also see naming suggestions for overriding default templates. So copy code from default template, make from it file with some suggested name, save file in your theme...and clear the cache.
Then change the file as you wish, depending on your needs....
The CSS 'display:inline-block' is a good way to make rows. CSS Flexbox is more difficult to understand, but very powerful. Occasionally, the CSS 'float:left' will do what you need, but it has a tendency to 'log jamb' on differing element heights.
I have used Semantic Views to create continuous, wrap-around content from multiple View rows. I removed the View row element by deleting the default 'div' in the 'Format settings'. That way only a continuous stream of fields appears within the '.view-content' tag.
A custom template is also good.
I'm looking to create a content type which includes a field for an image file - simple enough. However, I want this image file to be displayed as a background-image. Do I have to create a custom node.tpl and include the image source in an inline style="background: url(sites/all/themes/theme/images/image.png);", or is there a more elegant way to do this, possibly including writing to a stylesheet from the field using JavaScript?
You can use drupal_add_css in a hook_node_view function, node preprocess script, or node template to add a style directly:
$css = "#bg-img {
background: url(/sites/all/themes/theme/images/image.png) left top no-repeat;
};"
drupal_add_css($css, 'inline');
Or, you can use a drupal setting and then reference it in a jquery script; look up drupal_add_js usage & examples with the 'setting' option:
drupal_add_js(array("moduleName" => array('bgImg' => $absolute_url)), 'setting');
Reference in jQuery using Drupal.settings.moduleName['bgImg']
IMO adjusting the node.tpl.php as you describe is perfectly sensible. Using drupal_add_css will let you set a background image on an element outside the node, eg the entire page. I've used jquery when I've needed more advanced positioning/resizing options.
Instead of reading documentations and digging into codes, just use Field Formatter CSS module (https://drupal.org/project/field_formatter_class) and get it done in minutes. It's a gem that you will find yourself using it over and over. It lets you add css classes and other options to each field in the "Manage display" of your custom content type. As for this particular case of serving a user-uploaded image as background, here is a screen capture. Add a class into the Field Formatter Class field, and then you should be able to reposition and resize further with css and jquery.
I am wondering if there is a way to use custom css for some specific text on my confluence page (not using embedded HTML).
Sorry this is an old question, but for the sake of people who search for an answer to this question: you can use span or div macros and use the custom css to apply whatever style you want to their contents.
If necessary, you could create custom div and span classes to allow for multiple styles to be applied to selections of text.
EDIT: Here is an example of the wikimarkup you could use to do this
{div:class=customCss|style=float:left; margin-right:50px}
Custom text in a div
{div}
So you can either use the div class and apply a style in the custom css for the confluence space, or you can use an inline style for the div.
You can do this ...
{composition-setup}import.css=/download/attachments/123456789/custom.css
{composition-setup}
That's if you've stored a custom.css file as an attachement. You'd obviously need to replace 123456789 with the actual attachment number.
You can also link CSS on an external site (with an absolute URL), but if you have any automatic URL formatting, that tends to mess it up everytime you change the document.
I use a User Macro that renders the $body in HTML. Then I can put whatever HTML tags I want in the wiki page within the user macro tag.
There could be a way to reach what you want to reach, but there is some information missing (from you). What confluence allows is the following:
If you have admin rights to the confluence wiki space, you could add there a custom style sheet that applies to all wiki pages. Else you could follow the answer of Mus.
Then you should analyse the wiki page in source form. So load a wiki page you want to style, and look at the source of that wiki page in your browser. Depending on your browser, this may be CTRL-U or something similar. Here in chrome, the page menu says View page source.
Try to find the defining selector for your wiki text you want to style in some form. A reasonable hack could be:
Find a wiki style that is not used by others. I have experimented with ~subscript~.
Find the HTML tags that are built by using that style. In my example, it was <sub>subscript</sub>.
Use your custom style sheet to style text of that style.
However, this may change the text where the style is used for its original sense :-(
You can specify custom CSS in your Confluence page via the div and span macros.
In recent Confluence versions (4.0 and later), you can do this as follows:
Type {div} or {span}. On typing the closing brace }, auto-complete will convert the text to a macro.
Left-click on the frame of the macro and select the Edit button
Enter the custom CSS into the Style field and close the dialog
Enter your text into the macro frame. It will then have the style you specified.
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.
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.