I working on my new site in Joomla 3 with mobile ready theme. Can somebody tell me please, how I can hide few modules for mobile device (iPhone, etc...) visitors? I have a long banners in two modules, what is looks nice if visiting that site with computer browser. But how I can hide this modules if somebody visiting my site with mobile device? Is too long and broke a nice view...
Assuming that your template is using Bootstrap (and most 3.0 templates will be), you can just add a special class to the module to hide it for phones. When editing the module, go to Options -> Advanced Options and look for a box to add a "Module Class Suffix". Add " hidden-phone" (space is important at the start since some modules don't put it there for you...) to hide for screen sizes less than 767px. Add "hidden-tablet" as well to the list (also separated by a space) if you want to hide it as well for 767px to 979px widths.
I don't know if this is the best solution but it's a solution that I have now in mind.
You can use the JBrowser class
$browser = JBrowser::getInstance();
$browser->isMobile()
it returns a boolean value.
You can hide the modules from the template directly.
In the new version of bootstrap there is a new css names for hidding modules, check it on http://getbootstrap.com/css/
For example:
"hidden-xs" stands for the old "hidden-phone"
But if you still have a truble and "hidden-phone" nor "hidden-xs" works. You can add this class by yourself:
Add this code to one of your Css files (your style.css or your custom.css):
#media (max-width : 768px) {
.hidden-phone {
display: none;
}
}
Then follow the advise above and add module class suffix to desired module.
When editing the module, go to Options -> Advanced Options and look
for a box to add a "Module Class Suffix". Add " hidden-phone"
Related
I am trying to add links in the form 555-555-555 arbitrarily into paragraphs of text on my wagtail site. These phone numbers are currently peppered throughout the site as plain text, but I want to convert them to links.
I found this old wagtail github issue where they explained why they would not add them, but the 'Special-purpose pages' use case they described seems to be different than mine: my site has these numbers in paragraphs of text on most of the content pages (blog, product, marketing, etc).
Can anyone explain how I can add telephone links that can be used throughout the site?
I am using wagtail 1.x
To have telephone link within rich text, you'll need to create a plugin for Hallo.js. Have a look at the documentation and how Wagtail 1.13 creates and register such plugins.
Be aware though that it's usually quite involved and that Wagtail 2.0 rich text editor is now Draftail and Hallo.js is deprecated. Therefore, if you create a Hallo.js plugin and upgrade to Wagtail 2.0, you'll have to add some configuration to continue using Hallo.js or recreate the plugin for Draftail.
FWIW, if you are interested in having a look at what would be involved with creating an plugin for Draftail, you'll need to create an entity (also note that the API for creating entities should receive some enhancements in Wagtail 2.2).
With Raw HTML there is nothing to prevent editors from inserting malicious scripts into the page. Do not use this block. http://docs.wagtail.io/en/v2.1/topics/streamfield.html#rawhtmlblock
A workaround would be a custom filter. Eg:
{{ self.text|richtext|phonify }}
In your templatetags.py:
>>> def phonify(val):
... for tel in re.findall(r'tel:(\d+)', val):
... tag = '{}'.format(tel, tel)
... val = val.replace('tel:{}'.format(tel), tag)
... return val
...
>>> phonify('Hello tel:123 world tel:456!')
'Hello 123 world 456!'
>>>
Now you can instruct editors (via help_text) to add phone numbers like tel:5555555555.
This example does not handle - and +1. But if you figure that out, I'll update the answer ;)
I ended up chopping up my paragraphs and including raw html where I needed to add the tel links. A bit tedious, and the styles were slightly different on some pages, but shorter than doing it any other way.
In Drupal one can basically style the elements, like the search box, or the basic page etc. and then put some content in the site and the resulting page will be generated. But what if you want one specific site (e.g. the index page) to be different? E.g. have a image as a background, a different navigation styling etc.
What's the best paractice way of doing this?
Best practice is to have a different theme which you can switch to by using hook_custom_theme() where you check the current path. Also make sure that your theme to switch to is enabled:
/**
* Implements hook_custom_theme().
*/
function YOUR_MODULE_custom_theme() {
# check path with arg(0)
# return theme name to switch to
return 'different_theme_machine_name';
}
Alternatively you can also try ThemeKey doing this out of the box with an interface & allowing you the specify rules.
If you need to change only the content(body) section of your page, use Disply Suite. You can create unique look and feel layouts for your body section of each page.
If you trying to change the complete layout of one page (eg: Services), Create new Content Type 'Services'. Then create a template file for this content type, You must name this template call page--services.tpl.php. And also you can overwrite the index page layout by creating page--front.tpl.php template. Done!
What you are saying you want to change is all styling. And you know you can do a page to look drastically different with CSS... and you can do it that way depending on your chosen Drupal theme.
Now, with the Chrome Inspector (or FF inspector) look at the body tag, it probably has many classes which indicates in what page you are, what type of node (if it's a node) or if it's an admin section, or an anonymous user.
Using those specific classes you can style a frontpage, or a view, or a node, or anything, without installing more modules... with some limitations because you can't change rendered HTML this way.
Finally, don't get scared by using modules in Drupal, it's how Drupal works and it works pretty well. The thing is to install the best tools to increase your productivity, and Drupal have excellent options to change your theming and content like Display Suite (like #BaikHo suggested).
Hope that helps.
PD: Using the less module and with custom your theme you can have LESS css which is considerably faster than using only CSS, and because it's integrated with Drupal you can theme make everything even faster. Give it a try.
In Joomla I have the following situation:
I have an article (a page) that i declared in articles, the "products page". I did not enter any text or html in it.
I went to Module Manager and declared 3 modules (with text and html inside). The 3 modules are describing the 3 products that the company offers. Also I set the 3 modules to be placed in specific places (POSITIONS). I am using Gantry as a template, and the positions for the 3 modules are utility-a, utility-b and utility-c.
In each module, I chose the menu assignment, so that the modules will be shown in a specific page: the products page.
In MainMenu, I have a menu Item called "Products" that points to the empty article and is: index.php?option=com_content&view=article&id=2. Also in this menu item, I checked the Module Assignment, to see if the utility modules are shown and yes, they appear as "Display:yes"
NOW: When I access the "products page" from the main menu, the page shows up and contains the 3 utility modules, so everything is ok. But if I want to access this product page from a (manual)link (a href with the src above) inside a different page, then the product page shows up empty, like there is nothing on the page. I mean those utility modules do not show up. Only the empty article is shown.
How can I make the modules to show up?
Thank you
I solved it. I had to make a manual change to the link used as src. I had to add &Itemid=yyy at the end of the page link, and the yyy is the ID.
The useful documentation is here: http://docs.joomla.org/How_to_control_module_display_when_linking_to_an_article_with_no_menu_item
Thank you. Problem solved
I am currently trying to jazz up a SilverStripe site by making the content more engaging. The site is responsive, but all this means currently is that the navigation bar/header snaps to a more mobile friendly style when it hits the mobile break point.
The long and short of it is, my main page.ss is this:
<html>
<head>
<title>$Title</title>
</head>
<body>
$Header
$Layout
$Footer
</body>
</html>
With $Layout rendering a few variations of a basic page. We have a couple of layouts that aim to give our webmaster pages that are a bit more engaging - for example we have an accordion type page that has many accordion section DataObjects, that present the page as an accordion page with the open/shut javascript functionality.
But this is not enough. I want to give the webmaster more flexibility in the CMS to create interesting pages, without me having to create hundreds of different page types.
I'm thinking of creating a module that gets rid of the main $Content field for all pages, and instead inserts a sort of grid system management field. The webmaster can add rows (one DataObject) and then split those rows into sections (another DataObject). The sections will have a content field managed by TinyMCE, just like a page has. Then on the front end I will map these rows and sections to a responsive grid system.
For variations on the sections, I will add classes (a bit like having different page types) that render slightly differently. The sections will have .ss and .css (and possibly .js) to control their own look and feel.
My question is, how have other people approached this problem? Does my idea sound like overkill? Or does it sound like a good idea for a module?
-
For some examples of what I am trying to achieve, this page is a good example:
http://www.wingsforlife.com/en/research/
Content is split up into various sections, which allows for better control when the page is resized. Also throughout the site, content is varied, sometimes it will be in a single column, other times two, which snaps to one column when the window is smaller.
On the home page, if you scroll down, there are 4 links that are presented inside circles, that contain a number and some text: http://www.wingsforlife.com/en/
This is something I can't see being possible inside TinyMCE (which is fair enough as TinyMCE is just a basic content editor, not a web design tool).
Have a look at https://github.com/burnbright/silverstripe-widgetpages for an implementation of using Widgets to compose a webpage. Also https://github.com/g4b0/silverstripe-widget-pages-extension.
this can easily be achieved by replacing the HTMLEditorField that's linked to the Content field in the database by some GridField, managing DataObjects that make up what you might call 'ContentParts'. we've already used this approach in some projects to allow for more rendering flexibility of content elements.
simply tie some DataObjects to your Page class:
private static $has_many = array(
'ContentParts' => 'ContentPart'
);
then, use a GridField to manage them in your getCMSFields:
$gridFieldConfig = GridFieldConfig_RecordEditor::create();
$field_ContentParts = new GridField('ContentParts', 'Content Parts', $this->ContentParts(), $gridFieldConfig);
simplest way to render them in your template is as follows:
<% loop ContentParts %>
<section>...</section>
<% end_loop %>
of course you'll want to have different contentparts, so you might want to create subclasses of ContentPart with their custom fields and use the GridFieldAddNewMultiClass component to add them to your GridField (it's part of the GridFieldExtensions module, to be found here: https://github.com/ajshort/silverstripe-gridfieldextensions)
hth
This should really be a basic question but I simply don't get it after hours of searching. The question is, how do I theme menu blocks in Drupal 7?
I've created three different blocks all based on the main menu. Now I want to:
create unique HTML for all three blocks, that means modifing the surrounding wrapper and the <ul> and <li> that builds the menu. I wanna set special classes and remove all of the Drupal-added stuff
attach different classes to the different levels within each block. One of blocks will show two levels of the menu, i.e. it will display a submenu. I want to set a special class on the for the submenu...
This seems impossible... :(
Thank you in advance for the help!!!!
Theming is a tricky beast that often varies a lot depending what you need to do. Even with your very detailed description I can still say "it depends", but here are a couple steps that may help you get pointed in the right direction.
Step 1: Use a block tpl.php as suggested by Caffeine Addict. If you're not sure what to name the .tpl.php, I recommend the Theme Developer module. It's buggy, but you can use it to select an particular element and have it tell you suggestions for naming of .tpl.php files.
Step 2: Use a theme / preprocess function in template.php to modify the pre-defined variables and markup. Be sure to check on the theme_menu_tree & template_preprocess_menu_tree functions on api.drupal.org for starting points. If you're using the devel module, use dpm($variables); in each of those to see what you have to work with from the start.
I hope that helps! I agree with Caffeine Addict when he says that superfish might be an alternative. You should also probably check out the menu block module for breaking out conditional sub-sections into their own blocks.
In addition to what davidneedham said, to change what Drupal added to your menu HTML tags, you can override them. Here it is added classes:
<ul class="expanded">
<li class="firstleaf">...<li>
...
</ul>
i did not find a way to remove this classes, but you can override them in your block--system--main_menu.tpl.php file, like this:
li.expanded,
li.collapsed,
li.leaf {
padding: 0 0 0 0;
margin: 0;
}
ul.menu li {
margin: 0 0 0 0;
}
and then print your menu content:
<?php echo $content; ?>
I'm new in Drupal, wish my post can help you! :)
I would suggest to start with installing the Zen theme and follow the instructions inside the theme to setup a starter sub theme. This has all the information needed to learn theming in drupal and even how to add your own stylesheets etc.
This will allow you to start editing the templates for menu blocks and set your own html wrappers and classes.
For setting extra classes on blocks i would use this module:
http://drupal.org/project/block_class
Then just edit the block and you will see an extra section for adding additional classes to the block.