i want to include design in all pages, for this i had set a master page layout, it works perfect.Then i want to add some portions to each page of my site,i am also done this by creating a utility page, but problem is repeats all contents. here is my code
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/data">
<h1><xsl:value-of select="$page-title"/></h1>
<ul><xsl:apply-templates select="/categories/entry"/></ul>
</xsl:template>
<xsl:template match="categories/entry">
<div class="left_wrap">
<div class="large_video"><img src="{$workspace}/images/video.jpg" style="border:#393939 solid 1px;" /></div>
<div class="title1">Categories<img src="{$workspace}/images/arrow.jpg" /></div>
<div style="float:left; width:680px;">
<div class="category_block">
<div class="category_title"><xsl:value-of select="title"/></div>
<div class="category_image"><img src="{$workspace}/images/politics.jpg" /></div>
<div class="category_info"><xsl:value-of select="description"/></div>
<div class="date"><img src="{$workspace}/images/time.png" style="float:left;"/><p style="float:left; width:120px; margin-left:6px;">2 days ago</p></div>
</div><!--category_block END-->
</div>
</div>
</xsl:template>
</xsl:stylesheet>
I want to repeat only the "class='category_block'" div ,but i need all other in this page. How is it possible in symphony?. Also i want to limit category description character count to 100 character in my home page, how can i limit it.
Firstly, is your <div class="left-wrap"> meant to be repeated for each category entry, or should it contain all categories? I'm going to assume the latter, as that seems to make most sense given what I'm seeing here.
If that's so, your data template should look like this:
<xsl:template match="data">
<h1><xsl:value-of select="$page-title"/></h1>
<xsl:apply-templates select="categories"/>
</xsl:template>
That will match the categories node and allow you to set up the container for all your category entries:
<xsl:template match="categories">
<div class="left_wrap">
<div class="large_video">
<img src="{$workspace}/images/video.jpg" style="border:#393939 solid 1px;" />
</div>
<div class="title1">Categories<img src="{$workspace}/images/arrow.jpg" /></div>
<div style="float:left; width:680px;">
<ul>
<!-- This will be your repeating block -->
<xsl:apply-templates select="entry"/>
<ul>
</div>
</div>
</xsl:template>
Now, when you've got more than one entry, whatever's in the entry template below will be repeated for each:
<xsl:template match="categories/entry">
<li>
<div class="category_block">
<div class="category_title">
<xsl:value-of select="title"/>
</div>
<div class="category_image">
<img src="{$workspace}/images/politics.jpg" />
</div>
<div class="category_info">
<xsl:value-of select="description"/>
</div>
<div class="date">
<img src="{$workspace}/images/time.png" style="float:left;"/>
<p style="float:left; width:120px; margin-left:6px;">2 days ago</p>
</div>
</div><!--category_block END-->
</li>
</xsl:template>
Obviously, I've had to make some assumptions here, so let me know if this isn't exactly what you're after. Also, bear in mind that with XSLT there's always more than one way to do something.
Finally, you should consider cleaning up your markup a bit. Lots of extraneous, non-semantic divs and so on. Your <div class="title1"> should probably be a heading, for instance. Ditto the <div class="category_title">.
To answer your last question about truncating the description, try this utility from the Symphony site.
Related
I have been trying to display image for quite sometimes now and some of the solutions in this website does not work for me...
This is my xslt code
<xsl:template match="/">
<div class="main">
<h2>Product Catalogue</h2>
<xsl:for-each select="productdetails/product">
<div class="box">
<img src="<xsl:value-of select="product_image"/>"> </img>
<xsl:value-of select="format-number(product_Price,'0.00')" />
<h3>
<xsl:value-of select="product_Name"/>
</h3>
RM<xsl:value-of select="format-number(product_Price,'0.00')" />
<br/>
<p style="font-size:9pt; font-style: italic;">
<xsl:value-of select="product_description"/>
</p>
<br/>
Add to Cart
</div>
</xsl:for-each>
</div>
</xsl:template>
Just so you know product_image in the xml is already the imagepath thats why I did not need to write the path in the xslt code.
In XML, a tag cannot contain another tag - so this is invalid code:
<img src="<xsl:value-of select="product_image"/>"> </img>
Use either:
<img>
<xsl:attribute name="src">
<xsl:value-of select="product_image"/>
</xsl:attribute>
</img>
or:
<img src="{product_image}"/>
To understand the 2nd syntax, read about Attribute Value Templates.
I have a PDF report, using qWeb in Odoo (v8). My report has this line of code:
<t t-call="report.external_layout">
This line I suppose is for inserting the predefined header in the PDF report. In Settings -> Companies, tab Report Configuration in respective company, there is something like this:
<header>
<pageTemplate>
<frame id="first" x1="1.3cm" y1="3.0cm" height="21.7cm" width="19.0cm"/>
<stylesheet>
<!-- Set here the default font to use for all <para> tags -->
<paraStyle name='Normal' fontName="DejaVuSans"/>
<paraStyle name="main_footer" fontSize="8.0" alignment="CENTER"/>
<paraStyle name="main_header" fontSize="8.0" leading="10" alignment="LEFT" spaceBefore="0.0" spaceAfter="0.0"/>
</stylesheet>
<pageGraphics>
<!-- Set here the default font to use for all <drawString> tags -->
<setFont name="DejaVuSans" size="8"/>
<!-- You Logo - Change X,Y,Width and Height -->
<image x="1.3cm" y="27.7cm" height="40.0" >[[ company.logo or removeParentNode('image') ]]</image>
<fill color="black"/>
<stroke color="black"/>
<!-- page header -->
<lines>1.3cm 27.7cm 20cm 27.7cm</lines>
<drawRightString x="20cm" y="27.8cm">[[ company.rml_header1 ]]</drawRightString>
<drawString x="1.3cm" y="27.3cm">[[ company.partner_id.name ]]</drawString>
<place x="1.3cm" y="25.3cm" height="1.8cm" width="15.0cm">
<para style="main_header">[[ display_address(company.partner_id) or '' ]]</para>
</place>
<drawString x="1.3cm" y="25.0cm">Phone:</drawString>
<drawRightString x="7cm" y="25.0cm">[[ company.partner_id.phone or '' ]]</drawRightString>
<drawString x="1.3cm" y="24.6cm">Mail:</drawString>
<drawRightString x="7cm" y="24.6cm">[[ company.partner_id.email or '' ]]</drawRightString>
<lines>1.3cm 24.5cm 7cm 24.5cm</lines>
<!-- left margin -->
<rotate degrees="90"/>
<fill color="grey"/>
<drawString x="2.65cm" y="-0.4cm">generated by Odoo.com</drawString>
<fill color="black"/>
<rotate degrees="-90"/>
<!--page bottom-->
<lines>1.2cm 2.65cm 19.9cm 2.65cm</lines>
<place x="1.3cm" y="0cm" height="2.55cm" width="19.0cm">
<para style="main_footer">[[ company.rml_footer ]]</para>
<para style="main_footer">Contact : [[ user.name ]] - Page: <pageNumber/></para>
</place>
</pageGraphics>
</pageTemplate>
</header>
I changed some lines in order to print the header just like I need it. When I press button Preview Header/Footer, it shows everything just like I typed it, but I doesn't work when I print the report: header is still printed like it was by default. Some threads in forums say to uncheck the Reload from Attachment checkbox... in my case, it always has been unchecked.
As you can see, header is typed in RML form, and my report is in qWeb... Is this a problem? If it is it, how to fix it?
So, how to edit (... and make it to work ...) the PDF report default header???
Thanks in advance.
To define your custom header in qweb report by giving a header class to div tab like
<template id="your_custom_layout_header">
<div class="header">
<div class="row">
<div class="col-xs-3">
<img t-if="company.logo" t-att-src="'data:image/png;base64,%s' % company.logo" style="max-height: 45px;"/>
<!-- All your custom code here -->
</div>
</div>
</div>
<div class="footer">
<div class="row">
<!-- All your custom code here -->
</div>
</div>
</template>
Hear In Qweb there are Two different classes for set the custom header and Footer in div tag can directly set the custom header set as the header class in div and footer class set as the footer in div tag.important think is that we do not add any external or internal header and footer in your view file Just add the below tag.
<div class="header">
<div class="row" style="border-bottom: 1px solid black;">
<div class="col-xs-3">
<img t-if="company.logo" t-att-src="'data:image/png;base64,%s' % company.logo" style="max-height: 45px;"/>
<div t-field="company.partner_id"
t-field-options='{"widget": "contact", "fields": ["address", "name"], "no_marker": true}' />
</div>
<div class="col-xs-5 pull-right" style="margin-top:5px;">
<t t-if="company.vat">
<b>GST ID :</b>
<span t-field="company.vat" /><br/>
</t>
<t t-if="company.phone">
<b>PHONE :</b>
<span t-field="company.phone" /><br/>
</t>
<t t-if="company.fax">
<b>FAX :</b>
<span t-field="company.fax" /><br/>
</t>
<t t-if="company.email">
<b>EMAIL :</b>
<span t-field="company.email" /><br/>
</t>
<t t-if="company.website">
<b>WEBSITE :</b>
<span t-field="company.website" />
</t>
</div>
</div>
</div>
<div class="footer">
<div class="text-center" style="border-top: 1px solid black;">
<ul class="list-inline">
<li>Page:</li>
<li><span class="page"/></li>
<li>/</li>
<li><span class="topage"/></li>
</ul>
</div>
</div>
header and footer class automatically set the custome header and footer for that report in Qweb.
The code which I showed off you which is working fine from my side.
I hope this should helpful for you ..:)
I have a list of items in one of my view.
I can only fit up to 6 items, and it's laid out like this:
I used class="col-md-2" for each one.
When I have more than 6, it just simply go down to the another row.
I don’t want that. You can see it here.
Now, if the list has 6 or more items,
list them horizontally
show the big > so that the users will know that there is more
show the 2 dots in the middle
Edit
This is what I got so far. I used Larval 4 so this syntax is in HTML/Blade.
#foreach ( MarketingMaterialCategory::all() as $mmc )
<h2><i class="fa fa-file-image-o color lighter"></i> {{{ $mmc->name or '' }}} <small> </small></h2>
<div class="row">
#foreach ( MarketingMaterial::where('marketing_materials_category_id','=', $mmc->id )->get() as $marketing_material)
<div class="col-md-2" >
<!-- Shopping items -->
<div class="shopping-item">
<!-- Image -->
<div class="col-sm-12 imgbox" >
<!-- <span class="col-sm-6"></span> -->
<img class="col-sm-12 pull-right" width="200" src="/marketing_materials/{{$marketing_material->id}}/download/thumb_path" alt="" />
</div>
<!-- Shopping item name / Heading -->
<h6>{{{ $marketing_material->title or '' }}}<span class="color pull-right">{{ FileHelper::formatBytes($marketing_material->media_size,0) }}</span></h6>
<!-- Shopping item hover block & link -->
<div class="item-hover bg-color hidden-xs">
Download
</div>
</div>
</div>
#endforeach
</div>
<hr>
#endforeach
Can someone help me how to resolve this ?
Bootstrap doesn't support that kind of scrolling. However, I have used this JavaScript library in the past and it does pretty much exactly what you want: Slick.js
It is very flexible and it will only show the scrolling options if it can't display all the contents on the page.
If you use it though, do not use the bootstrap col-md-2 classes, just set a manual width.
I'm having trouble with placing divs next to each other rather than having them below. I'm new to using CSS and I'm not sure what I need to do exactly.
The webpage is www.panduzee.com/wordpress
The post "Richard Lu" is suppose to be next to "Ashley Lee."
The link to the code is: http://pastebin.com/J3CNMfaP
And the CSS is: http://pastebin.com/isn5NViA
Sorry, I tried getting the code to work within this post but it wasn't showing up correctly.
Any help would be appreciated! The CSS was from the wordpress theme, just letting you all know.
Thank you!
jsFiddle( http://jsfiddle.net/BnJ7g/3/ )
on your "boxes" and "boxes2" divs, add the float:left attribute.
<div id="boxes" style="float:left;">
<div class="box">
<!--The post title-->
Ashley Lee <!--The post image-->
<img width="210" height="312" src="http://www.panduzee.com/wordpress/wp-content/uploads/2012/04/527802_2560693355446_1797426028_1635316_739143794_n-210x312.jpg" class="attachment-homepage-thumb wp-post-image" alt="" title="" />
</div>
</div>
<div id="boxes2" style="float:left;">
<div class="box">
Richard Lu <!--The post image-->
<img width="210" height="312" src="http://www.panduzee.com/wordpress/wp-content/uploads/2012/04/527802_2560693355446_1797426028_1635316_739143794_n-210x312.jpg" class="attachment-homepage-thumb wp-post-image" alt="" title="" />
</div>
</div>
Follow up question to achieving hover effect answer, most said that the HTML markup below was abysmal. So I implemented one of their suggestion which is to change tables into divs.
<html>
<head>
<title>Abyssal Warder Fire</title>
<link href="http://225175.edicypages.com/stylesheets/cards.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div class="pictureholder"><img src="http://lh5.googleusercontent.com/_qvhVKLFln2A/TU-51_bGZ9I/AAAAAAAAEW4/uAmzL3e-vn0/Abyssal%20Warder%20fire.jpg" /></div>
<div class="information">
<div class="Orbs">
<div class="layout">Orbs:</div>
<div class="value"><img src="http://225175.edicypages.com/photos/N.jpg" /><img src="http://225175.edicypages.com/photos/N.jpg" /><img src="http://225175.edicypages.com/photos/N.jpg" /> <i>(3)</i></div>
<div class="Affinity">
<div class="layout">Affinity:</div>
<div class="value"><font color="red">Fire</font></div>
</div>
<div class="Energy">
<div class="layout">Energy:</td>
<div class="value">250</td>
</div>
<div class="Type">
<div class="layout">Type:</td>
<div class="value">Creature <i>(Giant Destroyer)</i></div>
</div>
<div class="Charges">
<div class="layout">Charges:</div>
<div class="value">1</div>
</div>
<div class="Rarity">
<div class="layout">Rarity:</div>
<div class="value">UR</div>
</div>
<div class="Edition">
<div class="layout">Edition:</div>
<div class="value">Lost Souls</div>
</div><br />
<div class="WeaponType">
<div class="layout">Weapon:</div>
<div class="value">L</div>
</div>
<div class="Size">
<div class="layout">Size:</div>
<div class="value">XL</div>
</div>
<div class="Attack">
<td class="layout">Attack:</div>
<td class="value">2500</div>
</div>
<div class="Defense">
<div class="layout">Defense:</div>
<div class="value">2500</div>
</div>
<div class="CardID">
<div class="layout">CardID:</div>
<div class="value"></div>
</div><br />
<div class="Abilities">
<p class="description"><i>
<img src="http://225175.edicypages.com/photos/Activated.jpg" />Crystal Spikes - Activate to ram Abyssal Warder's crystaline fist into the ground. Crystal Spikes will erupt from the ground and within 4 seconds cover a 20m radius. They deal 570 damage to enemies within it, up to 1710 in total that cannot be warded off with the help of damage reducing abilities as the crystals are able to circumvent every buff or protective shield. Knocks back small and medium units. Only affects ground entities. Reusable every 20 seconds. (Power: 80)<br /><br />
<img src="http://225175.edicypages.com/photos/Passive_r.jpg" />Infused Breakdown - Upon dying the unit collapses into pieces that will reassemble on their own to form two large sized Abyssal Warders. If those die their remains will again form to medium sized golems each. All smaller variants of Abyssal Warder are enraged and deal increasingly more damage the longer they attack.
</i></p></div>
</div>
<div class="upgrades">
<div class="Upgrade1">
<div class="L U1"><u>Upgrade I:</u></div>
<div class="V Map1">Empire <br />(<font color="green">Standard</font>)</div><br />
<div class="L HT1">Honor Tokens:</div>
<div class="V HTV1">0</div>
<div class="L VT1">Victory Tokens:</div>
<div class="V VTV1">4</div>
<div class="L BT1">Battle Tokens:</div>
<div class="V BTV1">30</div>
<div class="L PR1">PvP Rank:</div>
<div class="V PRV1">8</div>
</div><div class="Upgrade2">
<div class="L U2"><u>Upgrade II:</u></div>
<div class="V Map2">Empire <br />(<font color="orange">Advance</font>)</div><br />
<div class="L HT2">Honor Tokens:</div>
<div class="V HTV2">0</div>
<div class="L VT2">Victory Tokens:</div>
<div class="V VTV2">30</div>
<div class="L BT2">Battle Tokens:</div>
<div class="V BTV2">60</div>
<div class="L PR2">PvP Rank:</div>
<div class="V PRV2">9</div>
</div><div class="Upgrade3">
<div class="L U3"><u>Upgrade III:</u></div>
<div class="V Map3">Empire <br />(<font color="red">Expert</font>)</div><br />
<div class="L HT3">Honor Tokens:</div>
<div class="V HTV3">40</div>
<div class="L VT3">Victory Tokens:</div>
<div class="V VTV3">70</div>
<div class="L BT3">Battle Tokens:</div>
<div class="V BTV3">120</div>
<div class="L PR3">PvP Rank:</div>
<div class="V PRV3">10</div></div>
</div>
<div class="comments"></div>
Here is before and after the changes. Before I proceed to CSS, is there any html codes I should add or remove? Any div tags I should change?
P.S. I will be using Microsoft Excel to automate more than 500 html pages and uploading them manually one by one, so it is important that I get this right.
Layouts and individual styling should be done in CSS, agreed. However, if within a layout you have tabular data, you should use tables. You don't want to indulge in "divs for divs' sake"!
Looking at your mark-up, it's very "dense"—there are an awful lot of classes specified in there. For ease of maintenance (and your sanity), I'd really try to think about what you're trying to achieve and go from there.
For example, this sort of mark-up, with subtly different (and obscurely-named) classes is a bear to maintain:
<div class="L BT2">Battle Tokens:</div>
<div class="V BTV2">60</div>
Perhaps you could use a list instead; this seems more readable to me, but your mileage may vary:
<li class="tokens">Battle Tokens:<span class="count">60</span></div>
1st of all, it is great that you changed from <Table> to <div>, however!
You have to understand that each tag has it's own purpose, and the fact that you use div for everything, is quite bad HTML etiquette.
Also, the <i>, <font> tags are OBSOLETE, instead of writing your code like that, you can use the styling properties of CSS, for example:
p{font-style: italics}
or if you want to color the element
p{color:red}
and if you already have styled element, it's not a problem adding a sub-style (or an extra style to the element)
<p class='style 1 style2'>bla bla</p>
in this case, the <p> element will make usage of both style1 and style2.
also, I believe that you can be MUCH, MUCH smarter if you'll not create 500 html pages, and you'll make usage of database power, so you could easily change the pages if you'll want later on, and simply parse the pages using simple PHP.
Will be MUCH EASIER than to re-write 500+ html pages in the future, incase you'll want to change the layout.
Sniff around the topics of PHP and MySQL - it might seem a bit tricky at first, but in the long run, it'll make your life much easier.
I'm not sure, this looks pretty tabular for me, so id try working with tables, making sure to use proper semantic.
This is a reference http://www.htmlcodetutorial.com/tables/_THEAD.html
Although I'd work the layout with divs (html/css stuffs)
GL.