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;
}
Related
I have a simple HTML site. The main element is a grid of images. They're all classed with their row and column. There are 5 columns, A-E.
<div class="grid">
<div class="box 1 a"><img src="./assets/Account-Attempt-4-1.gif"></div>
...
</div>
I would like to specify a batch of images (preferably in Windows Explorer) and have them formatted like the child elements of my grid.
Is there something out there that will do this that I'm just bad at Googling for? I'm on Windows 10.
My first thought would be to create a macro in a code editor, like Sublime Text. The macro would incorporate some method of auto incrementing the numbers at the ends of the file names (probably with the use of a plugin), but this is based off of the assumption that all of the images in the folder follow the same naming convention (e.g. image-1.jpg, image-2.jpg, image-3.jpg).
I think that a better option for you would be to do something like this answer that I found. With a little bit of tweaking, this method should be able to take all of the images inside of a defined directory and return an html file with formatted lines of code.
Best of luck to you!
When we change an icon foundry, it causes a minor snafu in that a lot of code needs to be revisited because icon names change. Some automated translation might be possible using text utils, but not when icon names are generated in a structured way (e.g., i-star-filled v/s i-star-empty based on a boolean).
What I want instead is to use functional names for my icons (such as xyz-search, xyz-cancel, xyz-filterable, etc.) and then map them to the actual icon name provided by the foundry. For example, glyphicon names might be different from those used by font awesome. How can I provide some kind of indirection (the same kind of liberation that HTML tags strong and em provide)?
Our first thought was to use a lookup table in javascript to translate from one namespace into another. But that works only when the HTML is being generated (we use angularjs); not helpful for static code, nor in those few cases where the icon name is generated computationally, as in the example in the first para.
So now we are toying with SASS (I have googled a fair bit but all in vain, nor is my CSS very shiny). Is there a SASS idiom that fits here, to translate something like
<i class="xyz-filterable ...">
to
<i class="i-funnel ...">
for the same visual and interaction outcome. (I understand the actual CSS will look quite different)
I do not want to use any foo.addClass().
Thanks
Use #extend:
Sass:
.xyz-filterable {
background-image: url(foo.png);
}
.i-funnel {
#extend .xyz-filterable;
}
Compiled CSS:
.xyz-filterable, .i-funnel {
background-image: url(foo.png);
}
I'm experimenting with the HTML Filter module from the PowerMezz library and would like to customise the filter rules for a particular instance of the function. Is this possible?
For example, by default the style attribute is permitted, however I'd like to have this attribute stripped:
>> filter-html {<p style="color:red">A Para</p>}
== {<p>A Para</p>}
As well as limiting some other tags/attributes that are otherwise allowed.
After studying the filter-html module it looks like the immediate answer is no --- there appears to be no way to change the filter options for a particular instance.
After some experimentation, however, I discovered that you can make small change to make something like this possible. Most attribute handling can be customized by changing the attributes-map block, but inline style attributes are not handled in that block. They are dealt with specifically in the check-attributes function.
I commented out these lines in check-attributes which then causes all style attributes get stripped out by default:
if value: select attributes 'style [
append style value
]
You would need to add the ones you didn't want filtered back in to the specific html tags in attribute-map. I make a copy of the original attribute-map, make my changes, run filter-html, then revert back to the original before the next filtering instance.
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.
Trying to learn html/css. I've been looking at the html & css files of a couple different websites that have something along the line of:
<span class="mytest anothertest">some text goes here</span>
I understand the "mytest" part but what does "anothertest" do? There's no reference to that anywhere in their css or html files.
anothertest is just another class like mytest. You can apply more than one to an element.
There are several possible reasons for the presence of a class name in a class attribute value. Using the class in page stylesheets is probably most widely known, but not the only one:
The class name can be used in JavaScript in order to process a set of elements conveniently. (Using document.getElementsByClass is one way to achieve this; another way is to use jQuery; and you could even hand-code it rather simply.)
Designated class names are used in some metadata systems, such as microformats. Some search engines recognize such names and use them to provide semantic searching (though this approach probably loses to microdata, which uses different attributes).
A class name can be used in a user style sheet, e.g. by a developer who wishes to do some testing. This could well be the case if the class name is literally “anothertest.”
The name might be there to allow future development, e.g. so that elements of a class will be or may be styled in some future version. The designers might have ideas on styling but they haven’t decided on it—they just want it to be easy when they are ready.
It could be just a holdover. It was a class that had some use, but things changed. There was really no particular reason to remove it.
This is a very good question. It involved the difference between id and class.
ID
An ID placed on an element, is a unique identifier for that element. An element may only have one ID, and only one of the same ID may exist on a page. So for instance, the following examples are not possible.
<a id="someid anotherid">Multiple IDs - Wrong</a>
<a id="someid"><span id="someid">Same ID twice - Wrong</span></a>
Class
A class name however, is the exact opposite. An element may have several class names, and the same class name may appear multiple times on a page. Like so:
<a class="someclass anotherclass">Multiple Classes - Correct</a>
<a class="someclass"><span class="someclass">Same Class twice - correct</span></a>
In short, the syntax displayed in the question is simply having 2 class names on one element, which is perfectly acceptable.
Class name are also used to easily select elements in the page with JavaScript. You can use the getElementsByClassName method to access them or using your favorite CSS selector library (ex.: Sizzle) if you need compatibility for older browser.