I usually put these below code in order to do additional styling for my product page. But I am looking for a way where I would like to link CSS style sheet in the product page and do the CSS designing in a different directory, example: "assets/custom.css".
So how do I link the below styles made under .
<style>
.checkmarks li {
list-style-type: none;
background: url("https://i.imgur.com/FqEWdiJ.png") 0px 5px no-repeat;
background-size: 20px;
padding-left: 30px;
line-height: 200%;
}
</style>
<ul class="checkmarks">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
If you have a file in the assets folder, you can access it using the asset_url filter in Liquid. (Reference: https://shopify.dev/docs/themes/liquid/reference/filters/url-filters#asset_url)
If you create your stylesheet as assets/custom.css you can get the URL using:
{{ 'custom.css' | asset_url }}
Since it's a stylesheet, you can add on the stylesheet_tag filter to also have Shopify automatically make it into an appropriate HTML tag for you:
{{ 'custom.css' | asset_url | stylesheet_tag }}
One further possible improvement would be to make your stylesheet a scss file rather than a standard css file. This allows you to use some fancy features that help keep longer CSS files more readable/maintainable. Additionally, Shopify will minify a scss file when it compiles everything into a final css file - which means the file size will be slightly smaller because all of the whitespace gets stripped out. If you decide to do this, the compiled (browser-friendly) version of the file is accessed as <filename>.scss.css - so custom.scss could be put in as:
{{ 'custom.scss.css' | asset_url | stylesheet_tag }}
Finally, if you want this file to only appear on your product pages, you can either:
Place this code inside your templates/product.liquid file, or
Place this code in the layout/theme.liquid file, wrapped in a simple template check to see if we are on a product page:
{% if template.name == 'product' %}
{{ 'custom.scss.css' | asset_url | stylesheet_tag }}
{% endif %}
Related
I'm passing a list having values -
{"StudentName":"Name1", "Status":"Present"},
{"StudentName":"Name2", "Status":"Absent"}
to a html page via flask render_template()
I'm able to print the list in html page.
How to extract individual element from list and colorize them based on status.
Eg.
Status: Present -- should be in GREEN color
Status : Absent -- should be in RED Color
I would assume there is <li> in your code. I don't know the name of the dict you pass in your template so i would call it data.
You can try something like that each time you make a list item:
<ul>
{% for item in data %}
{% if item["Status"]=="Present" %}
<li style="color:green;"> {{ item["StudentName"] }} </li>
{% else %}
<li style="color:red;"> {{ item["StudentName"] }} </li>
{% endif %}
{% endfor %}
<ul>
You can also give a class to your list item
<li class="student-present"> or <li class="student-absent">
then add some CSS between <style> and </style> or in external css file.
.student-present{
color:green;
}
.student-absent{
color:red;
}
The second solution is better if you have a lot of formatting to do, or you will have a big and unreadable style attribute in all your items. Use an external css file if you have a lot of modification in different HTML element, or your style will be too big and make your template unreadable.
Using an external CSS file is the best solution, but style attribute can save time for small project with few modification.
Check out the flask template doc : https://flask.palletsprojects.com/en/0.12.x/tutorial/templates/
And basic CSS stuff : https://www.w3schools.com/css/
On the other hand, you could use JS to check for your list value and add style to it, but it would require waiting for the JS to be done before the color appears, and make it more complex, and I don't think it's the solution you need right now.
Basically i'm building a jekyll site with a footer containing some SVGs for social icons but the problem is that the first svg(they are saved inside the icons/<socialNames>.html files) will replace all the other SVGs when rendered in the browser. So instead of having a twitter icon, snapchat icon, facebook.icon, etc, four twitter icons are being rendered. The problem is that the first svg is replacing the others, but why? is there an alternative way to import SVG files?
I've tried using firefox, chrome and safari all with the same result. Tried making a seperate svg file and using {% include icons/<fileName>.svg %} but didn't fix it.
Here is my footer.html file:
<nav>
{% include icons/twitterIcon.html %}
{% include icons/snapchatIcon.html %}
{% include icons/facebookIcon.html %}
{% include icons/instagramIcon.html %}
</nav>
imgur link to how chrome displays the footer: https://i.imgur.com/VBYNHqd.png
I expected four different svgs instead the first svg is being rendered four times. Why is this happening? is there a workaround?
First of all, I think you need to try a different approach.
Create a folder in the root of your project called "_data" and create a new file in there called content.yml or whatever you want to call it.
Add the following in the content.yml file: - Note, this can also be .json or .csv.
social:
- name: "Twitter"
link: "http://twitter.com"
icon: "/link/to/image.svg"
- name: "SnapChat"
link: "http://snapchat.com"
icon: "/link/to/image.svg"
- name: "Facebook"
link: "http://facebook.com"
icon: "/link/to/image.svg"
Add the following syntax where you want your Social links to be appear.
<nav>
{% for social in site.data.content.social %}
{{ social.icon }}
{% endfor %}
</nav>
In your _includes/icons folder, save the SVG files as actual SVGs and not as an .HTML file and place it in your images or assets folder.
This way your HTML markup is much cleaner.
Hope this helps.
As a novice starting out on GitHub Pages, I am lost among the sea of materials on the web that seem to help with my following problem:
I am using Jekyll to build my blog hosted via GitHub Pages and would like to add a background image in my default homepage like this.
So, how do I do it? I have started out, but have little to no knowledge of HTML / CSS and would thus be grateful for a simple way to do the same.
I am currently using the default minima theme! :)
Minima doesn't have a provision to easily render a "cover photo" like you expect to. But that doesn't mean, it is impossible to render one.
When using Minima, your homepage is rendered via the file ./index.md and layout file _layouts/home.html. So, if your working directory doesn't contain the home layout, create the _layouts directory with a file named home.html.
The home layout in Minima
I'll explain what the layout contains so that you'll be able to use that knowledge in other areas.
The layout contains the following code. Copy the entire code below into the _layouts/home.html file you just created in the above step:
---
layout: default
---
<div class="home">
{%- if page.title -%}
<h1 class="page-heading">{{ page.title }}</h1>
{%- endif -%}
{{ content }}
{%- if site.posts.size > 0 -%}
<h2 class="post-list-heading">{{ page.list_title | default: "Posts" }}</h2>
<ul class="post-list">
{%- for post in site.posts -%}
<li>
{%- assign date_format = site.minima.date_format | default: "%b %-d, %Y" -%}
<span class="post-meta">{{ post.date | date: date_format }}</span>
<h3>
<a class="post-link" href="{{ post.url | relative_url }}">
{{ post.title | escape }}
</a>
</h3>
{%- if site.show_excerpts -%}
{{ post.excerpt }}
{%- endif -%}
</li>
{%- endfor -%}
</ul>
<p class="rss-subscribe">subscribe via RSS</p>
{%- endif -%}
</div>
Let's dissect the layout chunk by chunk:
---
layout: default
---
This is a front matter block that tells Jekyll the 'home' layout is a subset of the 'default' layout.
<div class="home">
This opens up a container for everything else on the home page and is closed by the </div> on the very last line.
{%- if page.title -%}
<h1 class="page-heading">{{ page.title }}</h1>
{%- endif -%}
This a template instruction that would render the home page's title if it was provided in the front matter inside file ./index.md.
{{ content }}
This is another template instruction that pulls in content (anything apart fron the front matter) from the file using this layout. In our case, that would be ./index.md.
The remaining chunk {%- if site.posts.size > 0 -%} cycles through the posts in your site and renders a list of those posts.
The cover image
We now have a fair idea regarding what our template is made of. But there is no mention of the code to render the cover-photo.
Agreed. So, let us code that in then. Insert the code from the following steps before the line with {{ content }} in the layout
First, add a container for the image.
<div class="hero">
</div>
Then insert the HTML markup to render the image of your choice (say, ./assets/home-feature.jpg) within it:
<div class="hero">
<img class="feature-img" src="{{ 'assets/home-feature.jpg' | relative_url }}" />
</div>
With just the above markup, your image would perhaps be too big for your page. So we should constrain the size with some CSS styling.
Minima uses Sass partials to generate the CSS for your site. Therefore, we'll need to overwrite a partial with some custom code.
Create a new directory named _sass with a subdirectory named minima and finally a file inside the _sass/minima directory named _layout.scss. Copy the contents at this link into that file.
Now add the following custom code towards the end of the file:
/* Cover Image */
.hero {
.feature-img: {
max-width: 100%;
}
}
Rendering background image
All of the above is to just render a cover-photo. To render the image as a proper background-image, you can do the following..
First, we need to adjust the markup to render text in the foreground and image only as the background:
<div class="hero">
{{ page.hero_text }}
</div>
With the above in place you are now able to control the text over your background-image via front matter in ./index.md.
And then bring back the image using CSS:
/* Cover Image */
.hero {
background: url('../home-feature.jpg');
}
Getting the url to your image is a little tricky since we can't use Liquid instructions inside sass partials in vanilla Jekyll. So you'll have to experiment with it for your particular site.
For more tips regarding CSS backgrounds, check this link
Have you look into the inspector tool? Another easy way is to look at the code snippet of that website which you can find here: https://github.com/mnp-club/mnp-club.github.io
I'm pulling up the exact code for what they do to achieve that effect this will :
https://github.com/mnp-club/mnp-club.github.io/blob/master/_layouts/page.html
<div id="main" role="main">
<article class="entry">
{% if page.image.feature %}<img src="{{ site.url }}/images/{{ page.image.feature }}" class="entry-feature-image" alt="{{ page.title }}"{% endif %}
// Alternatively a simpler way will be to just include the img src code.
// <img src="insert-image-url.jpg" class="entry-feature-image"/>
// Whole bunch of code for body here
</article>
</div>
And to make it a full-width header image, just give it a css of
.entry-feature-image {
width: 100%;
}
My blog run on jekyll minima and github pages as well and I have a default header for certain pages. Making it full width is just a matter of CSS.
https://github.com/wing-puah/thegeekwing-jekyll/blob/master/_layouts/default.html
What you can do is just add the html code for the image to the _layouts/default.html file.
There are different ways to achieve what you want. Understand that you have little experience with html and css but I will suggest to pull up the inspector tools and see the code to identify which code does what. Hope that helps!
i created a repo on github fr my blog alireza.one and now i want to create a Persian blog and i have two problems:
First: font face doesn't load. i put an import line on my css but it doesn't load.
#import url('https://alireza.one/farsi/assets/type.css');
My Farsi (Persian) blog loads my main css but the font isn't loaded. My repository: alirezahy/farsi. My webpage: alireza.one/farsi
Second: My index.html (both in Farsi repo and alirezahy.github.io) is like this:
---
layout: default
title: Index
---
<div class="listing">
{% for post in paginator.posts %}
<div class="post other link">
<h2></span> {{ post.title }}</h2>
<p class="post-date">{{ post.date | date_to_string }}</p>
</div>
{% endfor %}
</div>
How can i make it to a normal index.html so my front page appears like a normal weblog not as a site page.
If you want to add a font, you would need to add it like this in your css file:
#font-face {
font-family: "myFont";
src: url(fontofallknowledge.woff);
}
And then you can use the font by using it like this
body{
font-family: "myFont";
}
You would use the #import to import stylesheets.
To answer your second question, you seem to be using php in your .html file. You cannot do this.
I am using Shopify to develop my e-commerce site and I am a little confused about assets.
Do I just dump all my JavaScript, css and images in the assets folder or can I have sub folders for each of them inside the assets folder?
Do I need to end every file name in .liquid?
If I can make subfolders would I use a relative path like this?
{{ 'css/default.css' | asset_url | stylesheet_tag }}
You just upload all assets (images, CSS, JS, or any other file pertaining to the theme of your website) into the assets folder. You then just reference it by the filename.
Sub-folders are not possible at this time, but it's something I think a lot of Shopify customers would appreciate. I personally like a clean folder structure.
CSS:
{{ 'styles.css' | asset_url | stylesheet_tag }}
JS:
{{ 'modernizr.min.js' | asset_url | script_tag }}
Referencing images or other assets in the CSS:
{{ 'background.jpg' | asset_url }}
div#myDIV {
background: url({{ 'background.jpg' | asset_url }}) center center no-repeat;
}