I wonder if it's possible to create an include in Pug where the include file partially is a bit of a div?
I am importing the include with: include includes/footer
So in the example below, I don't want to close the ul.boxes in the parent file, but in the include file.
For example in the main file, I have the following structure:
ul.boxes
li
li
li
and then in the include I want to continue the li structure with just the li:s, but I want to close the parent ul.boxes in the include.
Is this possible at all with Pug?
Yes, I just tested this and it generated the list as expected:
ul
include ./include_a1
include ./include_a2
include ./include_a3
The include files each contain one line:
li Item A.1
This was the generated HTML:
<ul><li>Item A.1</li><li>Item A.2</li><li>Item A.3</li></ul>
You can also easily do this with a mixin.
In a separate file your mixin can live by itself:
mixin listItem(value)
li= value
Then your main pug file will look like this:
include file_with_mixin
ul
+listItem('Item A.1')
+listItem('Item A.2')
+listItem('Item A.3')
This will produce the exact same output as the straight include method above, but have the benefit of controlling all formatting in the common mixin file and driving presentation logic independently of the data.
That matters if you wanted to bold all of the li elements you would do it in the mixin file only and not need to edit three separate include files.
Related
I use AE Templates in Wordpress to create templates which are used around the website, so I don't have to change every occurrence of a single template every time I need to update some information. In my case I have tens of these templates which are exactly the same apart from some text and an image, so they all have exactly the same CSS except for some unique identifiers in classes.
Here's an example:
.elementor-3464 .elementor-element.elementor-element-380443b9 > .elementor-element-populated{
some-rules;
}
This is a line of CSS which is the same for all templates, except 3464 and 380443b9 change from template to template.
It seems a waste of code to me to load all CSS files for every web page with multiple templates with the same CSS. Is there a way I can target all templates by rewriting the above line to be arbitrary for any ID number/sequence (3464 and 380443b9)?
I was hoping I could use the [class*=...] selector but it doesn't work.
I tried this as a replacement for the above example:
[class^="elementor-"] [class*="elementor-element-"] > .elementor-element-populated{
some-rules;
}
The [class^="elementor-"] will only work if the class list begins with "elementor-". If there is another class before it, e.g. class="elementor elementor-1234" then it will not work.
You might need to use:
[class*="elementor-"] [class*="elementor-element-"] > .elementor-element-populated{
some-rules;
}
What I have now in my index.jade file:
html
include head
body
include header
include main
include aside
// a bunch of other includes
include footer
What I prefer to receive
html
include head.jade
body
+multiinclude('header','main','aside','footer')
But when I'm trying to pass an argument in mixin to include directive it doesn't work:
mixin multiinclude(...includes)
each i in includes
include= i
It just add <include>header</include> tags
You are passing strings into you multiinclude mixin.
You are also trying to loop over your inputs, but they are not in an array format.
Maybe you should include a body.jade file, and in the the body.jade include the different pieces to the body?
I have a web app that needs to display pages whose CSS values are set via a form. To be clear: not the CSS parameters, just their values are user-defined.
I'm using a framework (jquery mobile). My css file is about 700 lines (the sass file is a little longer but full of comments and variables for colors, margins, etc). There are about a dozen variables inteded to be defined by the user (eg $pageBackgroundColor, $borderWidth, $spanColor), but each variable is used several times in the sass file.
Let's say I now have these dozen variables safely stored in my database, and a user requests a page. How do I provide the necessary CSS?
I could:
compile a minified css file at the time of form submission and link
it when a page is requested (downside: I'm likely to have several thousand CSS files sitting on my server)
compile a minified css text string and dump it between two <style> tags in the <head> (downside: ugliness, no caching, and request handling time increases)
Are there any other options? I looked at one site that does custom visuals for each user and they went for a separate CSS file for each person.
I'm using a Django+Postgres backend, if it's relevant.
You could move the style declarations in which these variables are used to inline CSS, in the <head>. Additionally, you could do this with just a few styles, but it does require you to add more classes to your HTML:
<style type="text/css">
.user-background-color {
background-color: #abc123;
}
.user-color {
color: #abc123;
}
.user-border-color {
border-color: #abc123;
}
</style>
Then your HTML gets additional classes:
<div class="style-1 style-2 user-border-color"></div>
So I went the giant composite heredoc external file route, with the file name saved in the db. It works well enough, but is obviously not fun to edit.
I am trying to use the content URL in CSS for wordpress. See the following code, what did I do wrong?
#object-nav ul li a:before{
content:url(<?php echo get_stylesheet_directory_uri().'/images/home.png';?>);
}
A.L. mistyped a word in his comment. He meant it cannot be placed in your stylesheet. PHP code in CSS files is not interpreted so it is read as is. In other words, your instruction does not make sense as it is not converted.
Anyway: you could use a root-relative url, like this:
#object-nav ul li a:before{
content:url('/wp-content/themes/nameofyourtheme/images/home.png');
}
If you move your site to another domain, it will still work.
Create a new file in your theme's folder called something like mystyle.css.php.
Start it with the following line of code:
<?php header('Content-type: text/css'); ?>
Then move all your css rules where you want to use php to create variables into this file and remove them from your primary style.css.
Near the beginning of your style.css file add:
#import url('mystyle.css.php`);`
I know that id selector is used to specify a style for a single element. My question is, if I have a project and it has multiple php files, can these php files contain elements with same id?
Here is example:
php file 1:
...
<body>
<h1 id="test">header1</h1>
</body>
...
php file 2:
...
<body>
<h3 id="test">header3</h3>
</body>
...
css file:
#test
{
color:red;
}
This usage is correct or not?
If they are all rendered in the same HTML page in the browser, it's incorrect as ID should be unique on a single page. If only one is ever rendered then it'll be a-ok.
If you want your Web pages to validate as XHTML or HTML, then you should have unique IDs on your pages.
Yes, that is correct. In fact, that is a good idea. If you do that, you can use the same stylesheet on both pages. As long as you don't combine the files, it's a great idea.
What you are doing is fine, but it looks like class is better for what you are trying to do. You typically use ID to specify a specific element on a specific page and class to apply styling to different elements, on the same or different pages.
Using the same ID on multiple pages WILL work, but imo class is the more proper thing to use.
The id should be unique for each element per (HTML) document.
So, unless you combine the output of your PHP files into a single HTML file there is no problem. In page1 your one h1 heading will be red, in page2 your one h3 heading will be read, etc.
Personally, I prefer CSS classes for appearance and DOM IDs for functions, but they can be mixed.