Quite new to Drupal theming and need some help editing the markup a view outputs.
I know I have page templates, node templates, block templates; but what about views?! I choose the fields that are displayed in the results using views UI but that doesn't let me customise the outputted markup I want.
So for example, instead of this:
<div class="band propertysearch-results">
<section class="layout">
<ul>
<li>
<div><img src="" alt=""></div>
<div>
<h3>Location Name</h3>
<small>123 Leather Lane, London, NW1 123</small>
<p>oremque ad laborum et reiciendis eos quasi odit!</p>
</div>
<div class="results-info">
3 <span>Rooms</span>
View
Save
</div>
</li>
</ul>
Drupal is giving me:
<div class="view viewproerties">
<div class="view-content">
<ul data-thmr="thmr_46">
<li class="">
<div class="views-field views-field-field-photo" data-thmr="thmr_43">
<div class="field-content">
<img typeof="foaf:Image" src="http://findabode.d7/sites/default/files/mvenue1.jpg" alt="" data-thmr="thmr_16 thmr_17 thmr_18">
</div>
</div>
<div class="views-field views-field-title" data-thmr="thmr_43">
<span class="field-content">Leather Lane</span>
</div>
<div class="views-field views-field-body" data-thmr="thmr_43">
<div class="field-content"></div>
</div>
<div class="views-field views-field-field-rooms-1" data-thmr="thmr_43">
<span class="views-label views-label-field-rooms-1">Rooms: </span> <div class="field-content"><span data-thmr="thmr_22" class="devel-themer-wrapper">2</span></div>
</div>
<div class="views-field views-field-view-node" data-thmr="thmr_43">
<span class="field-content">view</span>
</div>
</li>
</ul>
</div>
</div>
So my question is how to I customise the outputted markup and how do I figure out what the variables for each field is called?
Do I make these changes in a tpl file or somewhere else?
Theming the output of views in Drupal is somewhat tricky, depending on the types of fields you have used and the kind of output style you have chosen to create the view.
You will need to learn about Views Templating in order to override the specific templates that your particular view is utilizing to render the output.
In order to customize the output , you need to implement custom template for views , that would override the default rendering of views
If you are creating a view, then views let any theme to overwrite at different levels
Display Output
Style Output
Row style output
Field Content
Here is the quick tutorial on how to theme views
Overriding drupal views
You can also use the Views interface to adapt the markup to what you need:
With the Style Settings you can alter the field markup including its container and label:
Or you can use the Rewrite Results to customize your markup and using tokens for the fields values.
Related
I am trying to learn meteor, so I created few sample which worked fine. I searched for boiler plate and came across http://www.meteorkitchen.com/examples which is very helpful.
I setup the http://generator-accounts.meteor.com/ and added Login with facebook and google out of which Google worked fine.
The sample I am working on need sub pages for which I referred Subpages example and modified code but it is not working as expected.
Now the requirement is whenever I click on menu the content should be displayed below the menu.
So I modified the template
<template name="HomePrivate">
<div class="page-container container">
<div class="row">
<div id="navbar" class="navbar navbar-inverse" role="navigation">
<div class="navbar-container container">
<div id="listing" class="collapse navbar-collapse">
<ul id="menu-items" class="nav navbar-nav">
<li id="menu-item-simple" class="{{menuItemClass 'home_public'}}">
<a href="{{pathFor 'home_private.general_information'}}">
<span class="item-title">
General Information
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div id="subcontent">
{{> yield region='HomePrivateSubcontent'}}
</div>
</div>
</div>
</template>
and in route
this.route("home_private.general_information", {path: "/home_private/general_information", controller: "GeneralInformationController"});
Now when I click on menu item it replaces the menu as well whereas my understanding is the content should be rendered in
{{> yield region='HomePrivateSubcontent'}}
Please advice.
I have solved the problem.
Please use the YAML version instead of JSON version to setup locally.
https://github.com/perak/kitchen-examples/tree/master/example-subpages
and some changes in controller were required.
For designs similar to this the image card used on Materialize: http://materializecss.com/components.html#
Screenshot: http://i.imgur.com/zvncUFz.png
Should I be using roles of a group or listbox for properly describing the content? I'm a tad lost reading through the aria accessibility specs.
Basic Structure:
<div class="card">
<div class="card-image">
<img src="images/sample-1.jpg">
<span class="card-title">Card Title</span>
</div>
<div class="card-content">
<p>Card Content</p>
<a href='#'>Authors</a>
</div>
<div class="card-action">
This is a link
</div>
</div>
Side question on possibly how to deal properly addressing the links for multiple authors.
I would consider this to be a figure with a figcaption.
I would mark this up as follows(in Jade):
figure
div.card-image
img(src="", alt="If needed, any descriptive text here will be spoken by a screen reader, but will not be visible")
span.card-title Card Title
figcaption Anything within this figcaption tag will automatically be spoken by the screen reader
a.card-action(href="#") This is a link
In this case, there is no need at all to use any ARIA attributes. All that is needed is semantic markup. I hope this helps.
I am pretty new in WordPress and totally new in BootStrap development (I have beginning to study BootStrap yesterday) and I have the following doubt about how create a custom WP template that use BootStrap from 0.
For example I have the source of this page made using BootStrap: http://www.html.it/guide/img/bootstrap/demo/home.html
and I want try to create a WP template starting by it.
Some time ago I have realized a standard HTML\CSS template for WP, can I use the same tecnique dividing the previous page into (header, footer, content, etcetc) and the put in these section the WP php code to show articles and other WP functions?
Is it the right way?
The other doubts is related to the upper slideshow, in this slideshow the immage are fixed and definied in a static way:
<!-- Sezione slider con Flexslider -->
<div class="row">
<div class="col-sm-12">
<div id="main-slider" class="flexslider">
<ul class="slides">
<li>
<img src="assets/img/flexslider/flex-1.jpg">
<div class="flex-caption">
<p class="flex-caption-text">
<span>Lorem ipsum</span><br>
<span>sit dolor</span><br>
<span>adipiscing elitur</span>
</p>
</div>
</li>
<li>
<img src="assets/img/flexslider/flex-2.jpg">
<div class="flex-caption">
<p class="flex-caption-text">
<span>Lorem ipsum</span><br>
<span>sit dolor</span><br>
<span>adipiscing elitur</span>
</p>
</div>
</li>
<li>
<img src="assets/img/flexslider/flex-3.jpg">
<div class="flex-caption">
<p class="flex-caption-text">
<span>Lorem ipsum</span><br>
<span>sit dolor</span><br>
<span>adipiscing elitur</span>
</p>
</div>
</li>
</ul>
</div><!-- /.flexslider -->
And what can I do if I want that the administrator can choose the immages that should be displayed from the backend (I think in the theme configuration panel)
Can you give me some ideas about how do these things?
Tnx
Andrea
I'm not 100% sure this will cover all your questions, but using Bootstrap with WP is the same as creating a regular theme with WP, you just include the additional bootstrap files and then use the relevant classes in your markup. Apparently there's also a plugin you can use: http://wordpress.org/plugins/wordpress-bootstrap-css/
The biggest difference is how to you will handle the menu-I usually use this walker to generate the it, and then I can use the default Bootstrap menu styles: https://github.com/twittem/wp-bootstrap-navwalker.
As for the carousel, try this: http://www.lanexa.net/2012/04/how-to-make-bootstrap-carousel-display-wordpress-dynamic-content/
I'm new to web dev and I'm working with Twitter Bootstrap right now. I am trying to create 3 columns on my page using this code:
<div class="container">
<div class="row">
<div class="span4">
<h4 class="muted text-center">About me</h4>
<p>Sample Text1.</p>
<i class="icon-user"></i> Text1
</div>
<div class="span4">
<h4 class="muted text-center">About you</h4>
<p>Sample Text2</p>
<i class="icon-star icon-white"></i> Text2
</div>
<div class="span4">
<h4 class="muted text-center">About Us</h4>
<p>Sample Text3</p>
Text3
</div>
</div>
</div>
I've looked at numerous examples and tested it on my page but they don't seem to work.
This code outputs all the text one above the other and doesn't divide it into columns in the same row.
Do I need to alter the bootstrap.css file in some way? The default one doesn't contain a span4 class or anything.
Assuming you might have fumbled up with the library you are using for bootstrap and the syntax. (happened to me a while back)
As of bootstrap 3.0...spanX have been depreciated,instead,col-xx-## is used now where xx can be lg, md, sm or xs and # ranges from 1 to 12
so in above html markup of yours change <div class="span4"> to <div class="col-xs-6 col-md-4"> and it should work
see the demo here
see docs here on how to use it
Also, if you are using ver 2.xx of bs...i'll suggest you to move to latest 3.0 on which this solution is based!!
I think you’re using Bootstrap 3 with the classes of Bootstrap 2. Grid class names have changed in the last version, see the documentation.
I have been trying to resolve an issue for awhile with rendering of content and the {{currentUser}} check in meteor. A code snippet is below:
{{#if currentUser}}
<div class="sparkline-box side">
<div class="sparkline-row">
<h4 class="gray"><span>Pending Contract Actions</span> 25</h4>
<div class="sparkline big" data-color="gray"><!--28,11,24,24,8,20,26,22,16,6,12,15--></div>
</div>
<hr class="divider">
<div class="sparkline-row">
<h4 class="dark-green"><span>Outstanding Task Orders</span> $43.33M</h4>
<div class="sparkline big" data-color="darkGreen"><!--16,20,6,19,25,22,9,13,7,10,15,4--></div>
</div>
<hr class="divider">
<div class="sparkline-row">
<h4 class="blue"><span>Current Month Actions</span> 45</h4>
<div class="sparkline big" data-color="blue"><!--20,18,21,17,5,7,29,9,8,14,23,8--></div>
</div>
<hr class="divider">
</div>
{{/if}}
With the {{currentUser}} block in place, the text appears, but the sparkline charts do not render in the browser, even when the page is reloaded. If I am not logged in, the text and charts are not visible. The problem is with the rendering of the sparkline charts when wrapped in the {{currentUser}} block. This also happens with other third-party javascript libraries that I am using in the application if wrapped in a {{currentUser}} block. Any thoughts on what may be happening?
Thanks!!
What happens is that meteor re-renders the context when {{currentUser}} changes. It does not preserve any changes made to the DOM by third parties. Read about isolate, preserve and constant. I believe that {{#constant}} will do the trick here.