i create block with views module for Print Promoted to front page, this worked and i see result in my front page. this views worked with field and i print title, thumbs, content. now i need to custom this theme views for show in jquery content slider.
i click in advanced->theme->information i see this:
field content revision: views-view-field.tpl.php, views-view-field--title.tpl.php, views-view-field--frontpage.tpl.php, views-view-field--frontpage--title.tpl.php, views-view-field--block.tpl.php, views-view-field--block--title.tpl.php, views-view-field--frontpage--block.tpl.php, views-view-field--frontpage--block--title.tpl.php, views-view-field--block-1.tpl.php, views-view-field--block-1--title.tpl.php, views-view-field--frontpage--block-1.tpl.php, views-view-field--frontpage--block-1--title.tpl.php
But i don't find any .tpl.php theme files for edit theme design using html and css. how to create custom design theme for print my result with this format:
<div id="content">
<ul>
<li>
<div class="title">title1</div>
<div class="thumbs"><img 1 ......></div>
<div class="content">content1</div>
</li>
<li>
<div class="title">title2</div>
<div class="thumbs"><img 2 ......></div>
<div class="content">content2</div>
</li>
</ul>
</div>
I think the Views 2 theming guide has already explained everything clearly. Just follow the steps there and it only takes just minutes.
Related
I have a WordPress Custom Post Type called vacancies.
On my vacancies archive page, I wish to have a list of the latest vacancies with small excerpts (which I have).
When I click the "read more" link under each vacancy, I want the content of the CPT to appear on the same page in another div. When I click another link, I then want it to change the div content to the new CPT content, without reloading the archive page.
I hope this makes sense?
<ul class="vacancies-list">
<li>
<h2>Vacancy title</h2>
<p>Vacancy CPT Excerpt</p>
Read more
</li>
<li>
<h2>Vacancy title</h2>
<p>Vacancy CPT Excerpt</p>
Read more
</li>
<li>
<h2>Vacancy title</h2>
<p>Vacancy CPT Excerpt</p>
Read more
</li>
</ul>
<div class="vacancy-content">
<p>When "read more clicked, I want content of CPT pulled here</p>
</div>
There are two ways:
Either Add an AJAX Funtion, which dynamically loads the contents of your cpt when users click the "Read More". It basically is a way to execute a regular WP_Query statement using JavaScript. You can find plenty of goog tutorials online on how to implement such a thing based on your included libraries. Personally I tend to use jQuery and it's .ajax() function. - This method will ensure you have a quick initial load time of your page but there will be a slight delay between clicking "Read More" and the content being displayed.
Or Load the content in a hidden div and then just toggle the visiblity of said div using JS. Add a unique identifier to your list-items. This should then help you identify the post and then show the corresponding content in the Vacancy-content. Something like this to clarify:
<ul class="vacancies-list">
<li data-post="1">
<h2>Vacancy title</h2>
<p>Vacancy CPT Excerpt</p>
Read more
</li>
<li data-post="2">
<h2>Vacancy title</h2>
<p>Vacancy CPT Excerpt</p>
Read more
</li>
<li data-post="3">
<h2>Vacancy title</h2>
<p>Vacancy CPT Excerpt</p>
Read more
</li>
</ul>
<div class="vacancy-content">
<div class="content post-1">Lorem Ipsum</div>
<div class="content post-2">Lorem Ipsum</div>
<div class="content post-3">Lorem Ipsum</div>
</div>
All content in vacancy-content is hidden. On ReadMore-Click hide all content and then show the content based on the li's data-attribute.
This Method will cause a slightly higher intial load time but will display the new content immediatly
I'm trying to build a Wordpress theme from scratch. The drop down menu isn't appearing, although I added the list pages tag. Here is the code I'm using for the wp_nav_menu function.
<?php wp_head(); ?>
</head>
<body>
<div class="nav">
<div class="container">
<ul class="pull-left">
<li class="cursive">Mu Alpha Theta</li>
</ul>
<?php wp_nav_menu( array('menu' => 'Menu' )); ?>
</div>
</div>
The pages appear on the site's menu; however, they aren't merging into a drop-down. I'm wondering if it has something to do with the CSS. As in, do I have to create a structure for how it would look? Or, I'm thinking that I'm misusing th wordpress function.
Thank you for reading my questions. I would love to hear any advice.
If it's placing, but not as you want (in a drop down) it would seem to be a css issue. There are many arguments you can parse to the function outlined here in the codex. From there it's just using the id's/classes and css to get the display you're looking for.
Also, from that codex page:
Note: As of 3.5, if there are no menu items, no HTML markup will be
output.
So ensure there is some items in your menu as well, even for testing.
Depending on how fancy you want to be, you may need a custom Walker. Caveat emptor: they are not for the faint of heart.
When I go to my shop page products are displayed in a very strange way : Product details take lot of place. I tried to understand what have changed since yesterday and I notice (inspecting element via Chrome) that the html code before was :
<ul id=product ....>
<li class=product_item ...>
<div class=image container>...</div>
<div class=clearfix>...</div>
<div class=product details>...</div>
</il>
</ul>
and now I have this following code (and it destroy my product list display) :
<ul id=product ....>
<div class=t_singleproduct_cont>
<li class=product_item ...>
<div class=image container>...</div>
</il>
</div>
<div class=clearfix>...</div>
<div class=product details>...</div>
</ul>
As you can see the product details is outside the li tag and so my shop page is such a mess.
I tried to identify where this piece of code was coming from and I found that it was inside the content-product.php file but I can't see the line with "t_singleproduct_cont" div.
If you could help to deal with this problem I'll be very grateful !
Thank you very much
#Tayfun Akaltun. Have you installed plugin called enhanced e-commerce plugin for google analytics?
I'm developing a new website on TYPO3 6.2 using the Bootstrap Package.
I want to add a custom css class to menu links via backend and print the CSS classes in my template. So if I go on the Typo3 backend:
Page > Any page Properties > Appearance or Behavior Tab > Custom CSS class (I would like to have a field that I can type the classes)
So I could type my CSS class there like "span3 orange" for Page 2 and "span4 green" for Page 3, empty for Page 1. And in my HTML I want to print that css classes like this in the menu:
<ul>
<li> Page 1 </li>
<li> Page 2 </li>
<li> Page 3 </li>
</ul>
How can I do that?
Note 1: This is a huge website with thousands of pages, so I would be able to add classes for each page.
Note 2: Note that the menu right now is being generated via TypoScript and being called in my Fluid Template.
You could also explain how to print that css classes on the body tag or on any other part of the page:
<body class="span3 orange">
You could use the page field "frontend-layout" unless you don't use it for other purposes. A custom field would require an own mini-extension.
The you write a fluid condition for the css class, whenever the other frontend layout is selected.
Location for the condition ist the template partial redering the menu.
http://wiki.typo3.org/Fluid#f:if.2C_f:then.2C_f:else
I am new to Magnolia and am trying to configure the breadcrumb for a site. I took a look at the documentation, but it is very limited.
<div id="breadcrumb">
<h5>${i18n['nav.selected']}</h5>
<ol>
[#list model.breadcrumb as item]
[#if item_has_next]
<li>${item.navigationTitle}</li>
[#else]
<li><strong>${item.navigationTitle}</strong></li>
[/#if]
[/#list]
</ol>
</div>
I found the script above which renders the breadcrumb, but struggle with the configuration. Can you give me an example (with picture) if possible?
Thank you
very much
I'm not sure you need to configure the breadcrumb for your site.
If you use the STK (Standard Templating Kit) pages templates, like stkArticle, stkSection, etc, then you get the bread crumb trail for free.
What I've done is to extend STK templates then override the areas/main/templateScript value to point at my own freemarker script. The script then looks like this:
<div id="main" role="main">
[#cms.area name="breadcrumb" content=content/]
[#cms.area name="intro" content=content/]
[#cms.area name="opener"/]
[#cms.area name="content"/]
<!-- ADD YOUR SPECIFIC CONTENT HERE -->
</div>
Hope this helps.