I desperately need help. I am trying to customize main menu (only) in Drupal 7 so that it suits my blueprintcss needs. I tried to find the answer in the documentation, but there is no straightforward example for this, which makes it a bit difficult.
Basic requirement is to have other menus (navigation etc) not affected by the main menu styling.
My page.tpl.php includes this code:
<?php if ($main_menu): ?>
<div class="span-9" id="topmenu">
<?php print theme('links__system_main_menu', array(
'links' => $main_menu,
'attributes' => array(
'id' => 'main-menu',
'class' => array('links', 'inline', 'clearfix'),
),
)); ?>
</div>
<?php endif; ?>
The output shows:
<div class="span-9" id="topmenu">
<ul id="main-menu" class="links inline clearfix">
<li class="menu-151 first">Home</li>
<li class="menu-152">Contact Us</li>
<li class="menu-153 last">About Us</li>
</ul>
</div>
Whereas the desired output should be something like this:
<div class="span-9" id="topmenu">
<div class="span-3 menu-151">Home</div>
<div class="span-3 menu-152">Contact Us</div>
<div class="span-3 menu-153 last">About Us</div>
</div>
You can override the theme function to modify the generated markup.
To achieve this :
Locate the theme function you are calling (shall be
theme_links__system_main_menu).
Copy and paste the code of this function into a custom theme function (could
be done in phptemplate or custom module)
Customise your theme function to use divs instead of ul li
See the offical Drupal documentation : Overriding themable output Section "How to change HTML the Drupal way"
Related
TYPO3 website is using TYPO3 extension of Smarty.
In one existing template called header.tpl I have this code:
<div class="header">
...
</div>
<div class="nav">
...
</div>
Is there some way to hide div element with the class "nav" using if condition? This header.tpl is used on every page, but I want to achieve that only on page with id=3 (in TYPO3) the navigation part will be hidden.
For example:
<div class="header">
...
</div>
{if (???) }
<div class="nav">
...
</div>
{/if}
Thank you very much for your help.
If you use the TYPO3 extension of Smarty, there are special plugins that give you the possibility to access data from TYPO3.
You can find them here: https://github.com/rtp-ch/smarty/tree/master/Classes/SmartyPlugins/Frontend
I'd say to use {if $data.uid == 3}, but I also need to see more of your setup to be sure.
I am using Glass Mapper v3.2.3 with Sitecore v7.5. I see in this tutorial how easy it is to handle a field like a MultiList and get back a list of objects that I can iterate through on my sublayout like this:
<ul class="thumbnails">
<% foreach (var news in Model.News)
{ %>
<li class="span3">
<div class="thumbnail">
<img src="<%=news.FeaturedImage.Src %>" alt="<%=news.FeaturedImage.Alt %>">
<h4>
<a href="<%=news.Url %>">
<%=news.Title %>
</a>
</h4>
<p><%=news.Abstract %></p>
</div>
</li>
<% } %>
</ul>
And I also see how easy it is to make use of the Editable feature in Glass in this tutorial. But what I can't figure out how to do is make the fields editable in the above code when I am iterating through a list of objects. The Editable feature seems to only apply to the underlying Model.
In the above code I want to make the news Feature Image, Title and Abstract all edtiable. Is that even possible using Glass Mapper?
Like so: #Editable(news, x=>x.Title)
I have a 3 column layout in my app. I'm using Semantic UI. So, the layout is:
<div class='ui celled grid'>
<div class='left column'>...</div>
<div class='middle column'>...</div>
<div class='right column'>...</div>
</div>
So, straightforward.
In my application.hbs it is simply:
<div class='ui celled grid'>
<div class='left column'><!-- menu --></div>
{{outlet}}
</div>
And the other 2 columns are in my sub-controller/templates. And this works fine until I need a View. If I need a View, then Ember makes the HTML layout become:
<div class='ui celled grid'>
<div class='left column'><!-- menu --></div>
<div class='ember-view'>
<div class='middle column'><!-- content --></div>
<div class='right column'><!-- content --></div>
</div>
</div>
And the wrapping <div class='ember-view'> breaks my layout. Because I don't always need a View I need a way to make the HTML the same for with or without a View.
At this point, I see 2 solutions. I'll either have to rework my layout in some way (that I'm yet to work out). Or I can get rid of the wrapping div.
But is it possible to get rid of the wrapping div? I tried this:
export default Ember.View.extend({
tagName: null
});
But that doesn't work. I also tried a span, but that still breaks my layout.
Any ideas?
Thanks.
Try using
tagName:''
The empty string as the tagName's value on your view.
Update:
When I brought this to the attention of ember.js contributors, they suggested inheriting the view from
Ember._MetamorphView
https://github.com/emberjs/ember.js/pull/4790
I have a joomla 3.0 custom template, with no overrides. The issue I am having is that the Print, Email and Edit icons do not show, instead, these show in form of a vertical list. Also note that I have enabled "Show Icons" in both Article Options and Menu Items. I know the code in default.php is what is mean't to display these icons, see below: -
<?php if (!$this->print) : ?>
<?php if ($canEdit || $params->get('show_print_icon') || $params->get('show_email_icon')) : ?>
<div class="btn-group pull-right">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> <span class="icon-cog"></span> <span class="caret"></span> </a>
<?php // Note the actions class is deprecated. Use dropdown-menu instead. ?>
<ul class="dropdown-menu actions">
<?php if ($params->get('show_print_icon')) : ?>
<li class="print-icon"> <?php echo JHtml::_('icon.print_popup', $this->item, $params); ?> </li>
<?php endif; ?>
<?php if ($params->get('show_email_icon')) : ?>
<li class="email-icon"> <?php echo JHtml::_('icon.email', $this->item, $params); ?> </li>
<?php endif; ?>
<?php if ($canEdit) : ?>
<li class="edit-icon"> <?php echo JHtml::_('icon.edit', $this->item, $params); ?> </li>
<?php endif; ?>
</ul>
</div>
<?php endif; ?>
<?php else : ?>
<div class="pull-right">
<?php echo JHtml::_('icon.print_screen', $this->item, $params); ?>
</div>
<?php endif; ?>
But I see no problem in the above code, I have even created overrides and still no change which means the template is not the problem. Why is this so? do I need to change the location of the images folder? what should I do to replace the links with the icons?
Regards.
I've been working on migrating a 1.5 template to 3.0 as well. The reason the icons are gone is that Joomla no longer uses them or adds them in the same way. In current template they are using Bootstrap and for good reason (as bakual indicated). If you are doing a direct port of an old template and want to keep the old look and feel you can add the following css to your template.
.pull-right{
float:right;
}
.btn-group{
position:relative;
margin-top:-30px;
}
.btn-group ul{
list-style:none;
display: inline;
padding-left:4px;
}
.print-icon{
background: url(../images/printButton.png) no-repeat;
height: 16px;
width: 16px;
overflow: hidden;
display: inline-block;
}
.email-icon{
background: url(../images/emailButton.png) no-repeat;
height: 16px;
width: 16px;
overflow: hidden;
display: inline-block;
}
.print-icon a,
.email-icon a{
color:transparent;
}
You may have to massage the numbers a bit depending on your template and add some stuff to get other icons I didn't add but you get the idea at least. Also to get the icon I just looked at an old version of the site and copied them into my template in the image folder.
The default output uses Bootstrap markup. The icons are generated by the Icomoon fontset and the Javascript included in Bootstrap will wrap the list together into a dropdown menu.
If you only see a flat list of those items, that means you neither have the Bootstrap CSS loaded nor the Bootstrap Javascript framework.
The Javascript framework can be loaded using JHtml::_('bootstrap.framework');
The CSS can be loaded by included one of the files found in media\jui\css. Or by compiling your own from the LESS files in media\jui\less.
I'm using CakePHP 2.2.4 and have similar layouts. For one page, however, the <head> content is the same, but essentially the whole body is different. What I have is a website with a navbar used from twitter's bootstrap. On this one page, the navbar is completely different. I know the quick fix would be to create a layout for just that page, but what if I come across another page I need to make with a different navbar? What would be the "proper" MVC way of doing this?
If every view will have a navbar of some kind, then you can just use CakePHP Elements to display the bar, you would put the element call in your one layout file and set a variable from the controller which you pass to the element to show a specific element...
echo $this->element('navbar', array(
"which_element" => "thisone"
));
In the above example, your navbar.ctp would have to contain all navbars and use a PHP Switch statement or something to work out which to display based on the $which_element...
Or better still, just call the element directly using the variable from the controller
$this->set('navbar', "thisone"); // this line is in your controller and sets the file name of your nav bar, minus the .ctp extension
echo $this->element($navbar); //this line is in your layout.ctp and renders elements/thisone.ctp, in the above example.
If some pages will have a nav bar but some will not, use View Blocks
$this->start('navbar');
echo $this->element($navbar);
$this->end();
I guess it depends how complex the differences are.
One way to go would be to have a common layout file
// in app/View/Common/layout.ctp
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Your header content -->
</head>
<body>
<div id="wrap">
<div class="navbar">
<?php echo $this->fetch('menu'); ?>
</div>
<div class="container">
<?php echo $this->fetch('content'); ?>
</div>
</div>
<div id="footer">
<?php echo $this->fetch('footer'); ?>
</div>
</body>
</html>
Have your layout file extending it
//app/View/Layouts/default.ctp
<?php
$this->extend('/Common/layout');
$this->assign('menu', $this->element('menu'));
echo $this->fetch('content');
$this->assign('footer', $this->element('footer'));
?>