In Drupal6, I basically have a block (a hierarchical menu structure) that turns out like this in HTML:
<div class="block block-menu_block" id="block-menu_block-1">
<div class="content">
<div class="menu-block-1 menu-name-menu-navigation parent-mlid-0 menu-level-1">
<ul class="menu">
<li class="leaf first menu-mlid-248 active active-trail"><a class="active-trail active" title="" href="/">Start</a></li>
<li class="expanded menu-mlid-249 active"><a class="active" title="" href="/">Aktuell</a>
<ul class="menu">
<li class="leaf first menu-mlid-259">
<a title="News und Presse" href="/news-und-presse">News and Press</a>
</li>...
What I would like to get is actually a lot simpler:
<div id="topmenu">
<ul class="one">
<li>some main entry
<ul>
<li>
some sub entry ...
or maybe:
<div id="topmenu">
<h2>some main entry</h2>
<h3>some sub entry</h3>
<h3>another sub entry</h3>
<h2>another main entry</h2>
So, keeping the structure, but being able to use simpler, even completely different tags, if and when needed. I think I understand from the drupal docs, that I am (maybe) looking at
<div class="block block-menu_block"
id="block-menu_block-1"
==> module := menu_block
delta := 1 (?)
regrettably, none of the suggested
block-[module]-[delta].tpl.php
block-[module].tpl.php
block-[region].tpl.php
placed next to page.tpl.php (yes, I did clear the cache), has any impact. Even with just a big, shiny HELLO WORLD inside... no luck...
What do I need to override and how? (ideally some sort of recursive function?)
Thank you!
You can control all html output by overriding theme functions and templates in your own custom theme. Read the documentation to learn how: http://drupal.org/node/341628.
That said: if this really bothers you about Drupal, you may want to save yourself a headache and choose a different CMS/framework. Drupal is designed to produce generic html with enough divs and classes for 95% of the use cases. Clean and minimal html can be accomplished, but it can take a lot of time.
you can install the devel and the theme developer module. then you cativate theme developer and in the bottom left corner you can switch it on. after pointing on your block you get much information which templates are userd or if it's functions who generate the code, which functions to use for naming the overwrite.
Related
Thanks in advance for any help here.
I have a sandbox and a live site that I'm making some minor tweaks to. There's one section that I just can't figure out what's causing the issue. Photos below.
Inside a li there's menu items that have a title, description and price. In some instances there's no price for the item and when that field is empty in the CMS the lines style themselves differently.
Here is the way I want it to appear: Live Site: https://www.crownshy.nyc/menus/#cocktails
cocktails page non-alc with no prices
The following is the way it's populating on the sandbox: https://crownshy-sandbox.getbento.com/menus/#cocktails
Sandbox cocktails page non-alc no prices
There's really nothing special about the code here, which is why I'm a bit confused. I just need to take a break and come back with a fresh eye but hoping you all can speed this along. I'm happy to post the CSS but figure because it's several classes that it would be easier to look at it on the developer console
<section class="menu-section">
<div class="menu-section__header">
<h2>Non-Alcoholic</h2>
</div>
<ul>
<li class="menu-item">
<p class="menu-item__heading">No Mas</p>
<p>Pear, Citrus, Rose, Lemon, Yogurt</p>
<p class="menu-item__details menu-item__details--price">
</p>
</li>
<li class="menu-item">
<p class="menu-item__heading">Ginger Jammer</p>
<p>Ginger, Mango, Togarashi, Lime, Soda</p>
<p class="menu-item__details menu-item__details--price">
</p>
</li>
<li class="menu-item">
<p class="menu-item__heading">Hojito</p>
<p>Hoja Santa, Lime, Tonic, Seasonal Herbs</p>
<p class="menu-item__details menu-item__details--price">
</p>
</li>
</ul>
</section>
On Sandbox the heading appears to be missing a width.
p.menu-item__heading {
width: 100%;
}
You put the style on span tag of on live site with this class name .menu-item__currency
You can use that class name or you can put a new tag and add float:left property with that class, I think then the issue will resolve.
I am trying to get the output as follows:-
pic-1
....
required ouput
i am writing the following snippet for the footer component-
<div class="ftrsection" data-sly-repeat="${currentPage.listChildren}">
<h3 data-sly-test.child="${item.title}" >${child}</h3>
<ul class="footermenu">
<li data-sly-repeat.child1="${currentPage.listChildren}">
${child1.title}
</li>
</ul>
</div>
And i am geeting the following output-Generated output.
The structure of my site in aem is Site structure in aem.
I am trying to get the child pages of the child pages of the root page.
The first level child pages (
Explore, Experience, Stay, Taste, This Is Bhubaneswar) should be headers of the footer as in pic-2. And the child pages( level 2)( Heritage Circuits,
Temples) in those child pages(level 1)(Explore) should be under them. But i am getting the wrong output.
Your second iteration (data-sly-repeat) is listing the children of the current page again. I believe you want to list subpages of the current item:
<div class="ftrsection" data-sly-repeat="${currentPage.listChildren}">
<h3 data-sly-test.child="${item.title}" >${child}</h3>
<ul class="footermenu">
<li data-sly-repeat.subpage="${item.listChildren}">
${subpage.title}
</li>
</ul>
</div>
I am trying to create a page with a search bar and filters underneath. I really like the way the search-toolbar looks, but it's creating space that I don't need. Is there a way to modify i to get rid of the space?
Thanks!
Here's an image of what I have:
Search bar with toolbar underneath
Edit: That grey space is what I'm trying to get rid of.
Here's my asp code:
<div class="search-toolbar" style="background-color:white">
<ul class="list-unstyled nav nav-pills">
<li>
Everything
</li>
<li>
Other Content
</li>
</ul>
</div>
<div class="tab-content">
Content
</div>
Figured it out, I found the css file and edited it.
I'm still new to web development, and I wasn't aware that I could do that.
Lately, I have been using data attributes for layout. For example:
<section data-ui-panels="vertical open" data-ui-accordion="stacked" class="primary new-products">
<ul data-area="nav" class="ui-list">
<li>Option 1</li>
<li>Option 2</li>
</ul>
<div data-area="body" class="journals">
<div class="unit">
<p>This is my text</p>
</div>
</div>
</section>
Benefits
Code is more readable: I can more easily spot the layout elements in both HTML and CSS. Options for the layout don't have to be verbose (e.g. stacked instead of ui-accordion-stacked).
Easier styling: The layout classes might get overridden by other classes. Attributes always take priority over classes, so then don't get overridden. Many of these layout attributes work with Jquery, so Jquery doesn't get overridden by anything else.
Easier re-usability: I can re-use the code between projects, without having to worry about site-specific code overriding the layout.
Works on older browsers such as IE8.
Are there any drawbacks to doing this?
I found this article that suggests there might be performance issues, but in the values it provides, the data-attributes perform quicker, so I don't quite understand it.
I have Firebug and IE Web Developers' toolbars installed on my machine, and they are very helpful for investigating CSS classes, DIVs, etc. My problem is that I'm working in Wordpress (custom Genesis theme) and I need to know the exact syntax of CSS class when it is nested rather deep. Yes, I can look at the code and see the code, but I'm not able to derive the CSS class sucessfully.
For example:
<div
id="inner">
<div
id="content-sidebar-wrap">
<div
id="sidebar-alt"
class="sidebar
widget-area">
<div
id="menu-pages-7"
class="widget
menupages"> <div
class="widget-wrap">
<ul
class="nav">
<li class="page_item
page-item-12 current_page_ancestor
current_page_parent">
<a
href="http://mywebsite.org/wordpress/about-us/"
title="About Us">About
Us</a> <ul
class="children">
<li class="page_item
page-item-117
current_page_item">
<a
href="http://mywebsite.org/wordpress/about-us/contact-us/"
title="Contact
Us">Contact Us</a>
</li>
I want the parent to have different formatting than the child item, but
#sidebar-alt .nav li {
border-bottom: 0px dashed #003893;
}
doesn't make anything happen th way I want it to.
Yes, I realize that I need to learn my CSS better, but there are so many nestings, I would simply love to have a browser tool that would allow me to click on a portion of the page and it would tell me the class that bit of text is and how the class should read in the CSS. When I use Inspect in Firebug, I get a number of different existing classes that apply, but not necessarily that exact class that I could add to the style sheet to customize.
Any help would be greatly appreciated.
Maybe this would work:
http://www.downcase.com/project/firequark