How do i add some CSS to the Scala Helpers, and is it possible to remove the "Required" and "Numeric" text under the textfield?
#inputText(advForm("weeknr"))
#inputText(advForm("jaar"))
#inputText(advForm("datum"))
--------------------EDIT 1------------------
When I add my own CSS, im not getting the error warnings that i used to get when I try to upload an empty form, the text used to turn red. This is the code I changed
MyPlainFieldConstructor.scala.html(only 2 lines of code):
#(elements: helper.FieldElements)
#elements.input
advPlaatsen2.scala.html:
Added this line of code
#implicitField = #{ FieldConstructor(myPlainFieldConstructor.f) }
and this is how i placed the CSS(Foundation 5):
<div class="row collapse">
<div class="small-2 columns">
<span class="prefix">Email</span>
</div>
<div class="small-4 left columns">
#inputText(advForm("email"),
'id -> "right-label",
'placeholder -> "")
</div>
</div>
This way the forms looks how I want it to look but it doesnt show me errors and it doesnt even upload my files
but when i remove this line of code:(which is above the #import helper._)
#implicitField = #{ FieldConstructor(myPlainFieldConstructor.f) }
the form works as it should but looks really bad:
To customize the html and styles of a field you can write your own field constructor. Take a look to play docs here.
Related
Obligatory 'I have googled but am stuck'. I have a number of documents on a page with associated collapsible 'More Info' accordions. I want to be able to report on when people click to open one of these accordions and what the corresponding document name is.
Implementing tracking in GTM to show opens on the accordions are not a problem, but how do I associate the document name (h4) with the click event?
Div containing document, document heading and associated 'More Info':
enter image description here
Div that the document heading and the more info button are in:
<div class="employee-comms-results-documents">
<div class="row">
<div class="col-md-9 col-sm-8 col-xs-12 no-padding-right no-padding-left">
<div>
<div class="primary-document-meta"><div class="doc-type-pill" id="doc-type-pill-Flyers">Flyers
</div>
</div>
<h4>Helping you save for retirement</h4>
<div class="secondary-document-meta">More info <span class="caret"></span>
</div>
</div>
</div>
Thanks in anticipation!
I think I would need to see the whole site structure to be sure, but for your example I created a JavaScript variable in GTM that returns the corresponding h4-text on click.
This code has worked for me:
function(){
var clickElement = jQuery({{Click Element}}).parent(".secondary-document-meta").parent("div").find("h4").text();
return clickElement;
}
I come across a issue on umbraco, suggest me how I can bind the subsites of a page within a grid layout of what I set as DataType. kindly do reply how to do it.
note:
I don't want to use strongly-typed model to implement grid layout.
#CurrentPage.GetGridHtml(Umbraco.AssignedContentItem,"postTiles",
"bootstrap3")
#CurrentPage.GetGridHtml(#Umbraco.RenderMacro("ArticlesList"),"postTiles","bootstrap3")
//ArticlesList
#inherits Umbraco.Web.Macros.PartialViewMacroPage
#{ var selection = CurrentPage.Children.Where("Visible").OrderBy("CreateDate desc"); }
<section class="container">
<div class="row">
#foreach (var item in selection)
{
<div class="col-md-3">
<img src="#Umbraco.Media(item.ArticleFeaturedImage).Url" style="width: 200px; height: 120px;" />
<h3>
#item.Name
</h3>
<p>
— posted under #item.ArticleCategory
· #String.Format("{0:dddd, MMMM d, yyyy}", #item.CreateDate)
· by #item.WriterName.ToString().ToLower()
</p>
<p>#Umbraco.Truncate(#item.ArticleDescription,100)</p>
</div>
}
</div>
</section>
If you want to have a custom rendering of some content in the Grid, you need to either:
Use a Macro and have content editors pick the Macro in the Grid
Create a custom property editor and specific the rendering partial in the package.manifest
Use a grid editor tool such as LeBlender or DocType Grid Editor to create a custom editor and assign a custom partial for rendering
I'm not sure exactly if that's what you're looking for, but I think these may get you on the right track.
Is it possible to render a template, or even just a partial, from within the context passed to a top level template? It seems like this might require recursive rendering, but maybe I'm missing something.
The example below demonstrates this using Bootstrap.
Say this is my top level template:
<div class="panel">
<div class="panel-body">
{{{description}}}
</div>
</div>
And my context is:
{
description: "\
Some text before the warning.\
<div class=\"alert alert-warning\" role=\"alert\">\
<span class=\"glyphicon glyphicon-warning-sign\" aria-hidden=\"true\"> </span>\
My warning here.\
</div>\
Some text after the warning."
}
What I'd like to do is separate the alert into a partial for a number of reasons:
Arbitrary placement within surrounding text
Can make partials for types other than warning (danger, info, etc.)
Can add as many as needed interspersed in the context string
For these reasons, it seems like it's not possible to put it into the top level template.
The partial would look something like this:
<script id="partial-warning-template" type="text/x-handlebars-template">
<div class="alert alert-warning" role="alert">
<span class="glyphicon glyphicon-warning-sign" aria-hidden="true"> </span>
{{{warning-message}}}
</div>
</script>
Once this is in place, I would be able to use it like so:
{
description: "\
Some text before the warning.\
{{> partial-warning-template \"My warning here.\"}}\
Some text after the warning.\
{{> partial-warning-template \"Now adding a second warning.\"}}"
}
Maybe I'm missing something fundamental - is there a more idiomatic way of doing this?
You won't be able to include the partial blocks in the description value and expect them to be evaluated as partials by the top level template method; the entire description string will be spat out as a single literal string.
What you would need to do is to have the partials evaluated before you pass the context object with description to the top level template method.
If you have pre-compiled your partial in something like the following manner:
Handlebars.registerPartial('warn', Handlebars.compile(document.getElementById('partial-warning-template').innerHTML));
Then you will be able to call this partial when you construct your description string:
{
description: 'Some text before the warning.' +
Handlebars.partials.warn({ 'warning-message': 'My warning here.' }) +
'Some text after the warning.' +
Handlebars.partials.warn({ 'warning-message': 'Now adding a second warning.' })
}
I'm writing a Stylish user style sheet, and am trying to see if something is possible. I am customizing a page that has a structure like this:
<div class="main">
<div class="someExtraLayers">
<div class="page">
1
</div>
</div>
<div class="someOtherLayers">
<div class="post">
blah blah
</div>
<div class="post">
foo foo
</div>
<div class="post">
bar bar
</div>
</div>
</div>
Where 'someExtraLayers' and 'someOtherLayers' indicate a few levels of divs inside divs. I'm not fully replicating the page's structure here for brevity's sake.
I have this in my user CSS:
div.post:nth-child(1) {
display:block !important;
}
Essentially, I'm making visible the first post element, and this does most of what I want to do. The thing I want to add is that I only want to make that element visible if the content of the page class is 1. If it's not 1, then I don't want to display the first post element.
CSS doesn't seem to offer conditionals, or boolean ANDs, that work this way. But I'm still new-ish to CSS, so I might be missing something. If I have to use a Greasemonkey script instead, I'll do that, but I was hoping there's some CSS trickery that will let me accomplish this.
Stylish cannot do this because Stylish just injects CSS and CSS does not have a selector for text content.
To do what you want, you will have to install Greasemonkey (Firefox) or Tampermonkey (Chrome) and then a userscript can set that visibility.
Assuming that div contains only 1, then something like this complete GM/TM script will do what you want. It uses the awesome power of jQuery selectors.
You can also see a live demo of the code at jsFiddle. :
// ==UserScript==
// #name _Show the first post on page 1
// #include http://YOUR_SERVER.COM/YOUR_PATH/*
// #require http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
// #grant GM_addStyle
// ==/UserScript==
var pageHasOne = $("div.main:has(div.page:contains(1))");
pageHasOne.each ( function () {
var jThis = $(this); //-- this is a special var inside an .each()
var pageDiv = jThis.find ("div.page:contains(1)");
if ($.trim (pageDiv.text() ) == "1") {
//--- Show the first post div. !important is not needed here.
jThis.find ("div.post:first").css ("display", "block");
}
} );
Given the logic that jQuery javascript must use, we can see part of the reason why CSS doesn't attempt to provide selectors for this. It's beyond mission scope for CSS, but the kind of thing that javascript was made for.
Also note that this is for a static page. If the page uses AJAX for its content, the logic becomes a bit more involved.
CSS can not access HTML content.
To solve the problem, you will also need to add a class so CSS can "see" it:
HTML:
<div class="main one">
<div class="someExtraLayers">
<div class="page">
1
</div>
</div>
<div class="someOtherLayers">
<div class="post">
blah blah
</div>
<div class="post">
foo foo
</div>
<div class="post">
bar bar
</div>
</div>
</div>
CSS:
.one .post:nth-child(1) {
display:block !important;
}
I am trying to create a page that displays the latest images from the child pages of the holder.
Each row will alternate between the example below:
Large Image | Small Image
Small Image | Large Image
Large Image | Small Image
and so on....
template.ss
<div class="row">
<div class="span8">
LARGE IMAGE
</div>
<div class="span4">
SMALL IMAGE
</div>
</div>
<div class="row">
<div class="span4">
Small Image
</div>
<div class="span8">
Large IMage
</div>
</div>
</div>
<div class="row">
<div class="span8">
Large Image
</div>
<div class="span4">
Small Image
</div>
</div>
How can I process that in the template file?
I've tried to write a custom function to process the latest images within the Holder Controller
controller.php
$works = WorkPage::get();
This only returns the image id, I;ve tried a left join but it doesn't return the file path.
$works = WorkPage::get()->leftJoin("File", "\"File\".\"ID\" = \"WorkPage\".\"FeaturedImageID\"");
File::get()->
leftJoin("SiteTree", "\"SiteTree\".\"ParentID\" = ".$this->ID)->
leftJoin("WorkPage", "\"WorkPage\".\"ID\" = \"SiteTree\".\"ID\"")->
where("\"File\".\"ID\" = \"WorkPage\".\"FeaturedImageID\"");
might be the sql query you are after (untested though)
This is how I did, not sure if it's the best way but it works.
$works = WorkPage::get();
foreach ($works as $work) {
//Build the IMage Object so we can add it to the Work Object
$ImageObj = File::get()->byID($work->FeaturedImageID);
$Image->ID = $ImageObj->ID;
$Image->Title = $ImageObj->Title;
$Image->Name = $ImageObj->Name;
$Image->Filename = $ImageObj->Filename;
$work->ImageObj = $Image;
$ImagePath = $work->ImageObj->Filename;
}
Your question isn't 100% clear. I'm not sure if you're having trouble with the template looping and conditionals or with getting the image objects from WorkPage so I'll attempt to answer both.
To create the alternating layout, the easiest way is to use a conditional based on whether the loop count is odd or even. A quick untested example:
<% loop $Works %>
<div class="row">
<% if $Odd %>
<div class="span8">LARGE IMAGE</div>
<div class="span4">SMALL IMAGE</div>
<% else %>
<div class="span4">SMALL IMAGE</div>
<div class="span8">LARGE IMAGE</div>
<% end_if %>
</div>
<% end_loop %>
Documentation reference is at http://docs.silverstripe.org/framework/en/reference/templates#position-indicators
To get different sized images within the loop you can simply use $FeaturedImage->CroppedImage(xxx,xxx). This assumes you have on 'Work' per row and each work has two images, but as I said the question isn't that clear so if my assumptions are incorrect you will need to provide more info about your model and what you're trying to achieve.
Just to comment on your join you tested:
this wont work:
$works = WorkPage::get()->leftJoin("File", "\"File\".\"ID\" = \"WorkPage\".\"FeaturedImageID\"");
That join doesn't get the data of the joined table; in essence you are requestion workpage objects which dont have that as the data. If you had done the join the otherway around you would be able to get the info you were after
Anyways as Columba allready mentioned you can get the relations correctly on by calling the field as "a function" has one and has many, example $this->hasmanyrelation() < returns the datalist (was that coorect term for ss3 :) ). When using $hasmanyrelation relation on the tempate it just magically gets the collection.
Also you should use the Link() to get the path tho the file in my oppinnion as that works for sitetree objects as well.