In one of my templates I'm attempting to be able to set the background color of a specific post via the liquid template at the top of a post. My template has this in it:
<style>
{% if page.style %}
body {background-color: { { page.style.bgcolor }}}
{% endif %}
</style>
And then here's the liquid template from the post:
---
layout: post
title: "Post Name"
date: 2014-03-18 16:01:57
tags: game
style:
bgcolor: green
image:
feature: feature-image.png
---
Am I creating a custom variable properly, or is what I'm attempting not even possible?
This the result:
body {background-color: { { page.style.bgcolor }}}
Apparently I was doing this correctly but it wouldn't parse because of the extra spaces between { {.
The fix involved simply changing
body {background-color: { { page.style.bgcolor }}}
To
body {background-color: {{page.style.bgcolor}} }
Related
so I'm trying to get something like this
hero.css.liquid
.hero_image {
background-image: url( {{ section.settings.hero-image-image }} )
}
hero.liquid
<div class: "hero_image"></div>
{% schema %}
{
"name": "hero",
"class": "hero-section",
"settings": [
{
"type": "image_picker",
"id": "hero-image-image",
"label": "Hero Image"
}
],
"presets": [
{
"category": "hero",
"name":"hero"
}
]
}
{% endschema %}
is there a way to make something like this work or should i just create a {% style %} section in my hero.liquid folder and put the css i want to edit in there
The file hero.css.liquid has no knowledge of your section settings, so you won't be able to reference the section settings in your CSS file. The section Liquid variable only exists inside the matching section file (and any snippets used within it).
This gives us two main options:
a) Move your style settings to the config/settings_schema.json file, as theme settings can be accessed in your .css.liquid files;
b) Create a {% style %} (or <style>) tag inside your section file to put your settings.
Note: When {% style %} was first introduced I had some trouble getting it to work exactly as I expected so went back to using <style> tags. I think {% style %} works better now, but if you have trouble you may want to try a simple HTML tag instead.
I have text that is being saved from a textarea. I save it to the database. I now want to display this text onto another page after submit. I would like to keep the same format as the original text input.
This is what shows up on the browser after redirecting to the other page.
Im replacing br with --- or else it will create actual breaks in this text.
--- equals br
"M <---><---/> O <---/><---/>C<---/>Hub<---/>"
How do I display onto the page without the br tags? I have seen this work in other circumstances but unsure what I am doing wrong.
I have been able to use the .replace method to replace the enter's with . The only thing though, the tag is showing up in the display.
x.component.ts
getMessages() {
this._messageBoardService.getMessages().subscribe(
(data: any) => {
this.msgList = data
this.msgList[0].message = this.msgList[0].message.replace(/\n/g, "<br />")
})
}
x.component.html
<h3>{{ msgList[0].title }}</h3>
<p> {{ msgList[0].message }}</p>
The expected output without the breakpoints is
M
O
C
Hub
Because this is how angular works. It prevents from injection "bad html".
To print html you will need to use DomSanitizer
Change your code
this.msgList[0].message = this.msgList[0].message.replace(/\n/g, "<br />")
to
this.msgList[0].message = sanitizer.bypassSecurityTrustHtml(this.msgList[0].message.replace(/\n/g, "<br />"))
then template
<p [innerHTML]="msgList[0].message"></p>
BUT for security reason I would not do it I'd better do it with css
p.break-newline{
white-space: pre-wrap
}
add class
<p class="break-newline"> {{ msgList[0].message }}</p>
And now you dont need to modify your message in code.
If it is just for display purposes add a css property that displays your line breaks
<p class="message">{{ msgList[0].message }}</p>
.message { white-space: pre-line; }
in which case your api fetching has no operations
getMessages() {
this._messageBoardService.getMessages().subscribe(
(data: any) => {
this.msgList = data
})
}
OR
else you can do in angular is use innerHTML property
<p [innerHTML]="msgList[0].message"></p>
I am trying to add a CSS class to the whole form_row in a twig template from Symfony 4! As you can see from the image, my code right now only adds the class to the input tag, put I need the class to be added to the parent div container.
Below is my code:
{{ form_row(form.firstname, { 'attr' : {'class' : 'first_name'} }) }}
below is an image of the rendered code:
From the documentation of symfony:
attr: A key-value array that will be rendered as HTML attributes on the field.
This means the attributes only get applied to the field.
You could instead wrap the whole div in another div like so:
<div class='first-name'>
{{ form_row(form.firstname) }}
</div>
And then apply the style either to div.first-name or div.first-name > div
Alternatively: Render the whole row yourself
With the following you can render the label and widget yourself:
<div class='first-name'>
{{ form_label(form.firstname) }}
{{ form_widget(form.firstname) }}
</div>
I'm using polymer 1.3.1 but can't get the following to work inside a polymer-element named: poly-main. The text of the <div> should be in red but isn't.
<div testcolor="[[colorLocalRed]]">
-->ERROR This must be RED because testcolor="[[colorLocalRed]]"
(expected "myred" and styles.css translates this to color="red")
</div>
with the following at the start of the script tag:
Polymer({
is: 'poly-main',
properties: {
colorLocalRed: {
type: String,
value: "myred",
notify: true
},
And the following inside styles.css:'
[testcolor="myred"] {
color: red;
}
Note: the following works as it should:
<div testcolor="myred"> some red text </div>
Not using the custom tag testcolor but using directly style or color is not an option because this example is only to show the problem of databinding to a non-standard html-tag
I guess this is what you want:
<div testcolor$="[[colorLocalRed]]">
Adding $ to the attribute name binds to the attribute instead of the property which can't be addressed in CSS.
For more details see https://www.polymer-project.org/1.0/docs/devguide/data-binding.html#native-binding
I have html code from my db and I'm trying to print it as {{ blog.content }}. But it renders as string and shows all the html tags etc. How can I make it to render as html?
it looks like:
<p>I am writing my blog post here to show everyone that I can do such things as this: <span style="font-weight: bold; font-family: Impact; font-size: 36px;">adsdsfadsf </span><span style="font-size: 11px; background-color: yellow;">and also like this one</span></p>
htmltags shouldn't be visible. The line above should be rendered as html. Which means bold parts example; should be bold.
1) Create Elements.php (Library or Plugin all are same)
namespace YourAppNameSpace;
use Phalcon\Config;
class Elements extends \Phalcon\Mvc\User\Plugin
{
public function decodeString($string)
{
return html_entity_decode($string);
}
}
2) Add Elements.php to the service
$di->set('element', function () {
return new YourAppNameSpace\Elements();
});
3) In Volt File Try this
{{ element.decodeString(blog.content) }}
Hope It Works.. :)