I am new to RiotJS (just discovered it yesterday). I just tried to do a little experiment which did NOT work. I created two tag files (navbar.tag and dropdown.tag). Each one was as simple as could be – simply a h3 tag with the name of the file:
// navbar.tag
<h3>Navbar</h3>
// dropdowntag
<h3>Dropdown</h3>
On my index.html page I want to nest the dropdown tag within the navbar tag like this:
<navbar>
<dropdown></dropdown>
</navbar>
That does not to work. Navbar shows up, but not dropdown. Only if I separate the two tags do both work -- i.e., like this:
<navbar></navbar>
<dropdown></dropdown>
Any idea how I can nest different tags within an html page. I know you can nest them within .tag files, but that is not what I want to do. What I want is the flexibility to nest custom tags that I create on ay html page (like I can do with regular html tags).
Any ideas?
Thanks.
You cannot modify the existing structure. RiotJS use this constraint as an advantage to ensure good performance.
To insert another tag into existing tag, use <yield/>.
See JSFiddle.
Related
I am creating a plugin for my theme to customize it, But when I use PHP and I edit the style of main page when using post request, and I don't believe WP AJAX system is a way way to edit style of main page with hooks?
And can I create short codes in my theme, or can I only create it in plugin???
In the case of Wordpress, which is a CMS for web projects, styling is mainly done via writing CSS code and rendering that in the web-browser.
How to apply a styling
Inline
You can do inline styling (unadvisable), example:
<input type="text" value="something" style="color: red;">
The reason this is generally not a desirable practice is that you would always have to add the styling to each element you want to apply it at. This is a problem, because if you have a consistent styling, applied at liked 10 000 elements and then you intend to change it, you will have to apply it at every 10 000 instances of its inline definition.
You may still use inline styling at some point, but you should avoid doing so unless you are absolutely sure that it's adequate for the given problem you solve.
Style tags
You can also add a style tag to your page, which is better than inline styling in general, but it's more difficult to reuse it than a css file. Example:
<style type="text/css">
input.red {color: red;}
</style>
<input type="text" value="something" class="red">
css files
You could create a file like style.css, move your styling from style tags there and create a link tag, as
<link rel="stylesheet" href="styles/style.css">
Note that the code above assumes that there is a styles folder where you store your css files and that your style.css is inside that folder. This is a generally accepted practice about styling, which is a very popular approach.
There are some technologies violating this separation of CSS from structure, like ReactJS, which has a different approach for this stuff, but, if you do not use those SPA approaches (and at least while you learn Javascript and CSS it is a good idea to avoid them), then this is an advisable practice.
The approach
In all cases I will assume that you have a CSS file that you want to append to your head tag at styles/style.css. If you have some differences in your dev environment, then you of course will need to rely on what your environment is like.
Modifying a theme
You can modify your theme whenever you want to do so, it's available on source-code level. However, if it's a theme that is not customly made by you and you intend to use its new versions in the future, then it's advisable to avoid changing the source-code of your theme.
However, at the point when the HTML is generated and particularly the head tag, you can add the link tag as described earlier. As a matter of fact you can add it inside the body tag as well.
Modifying the plugin
If you use a plugin and some HTML is generated there that is applied to the page, you can easily add your link tag to that as well. However, if you are doing some AJAX requests and you determine whether you need the styling at that level, then you will need your Javascript to add a link tag to the head, example:
function addLink(path) {
document.querySelector('head').innerHTML += `<link rel="stylesheet" href="${path}">`;
}
However, this is to be avoided if you know in advance that your file will always be needed. If you want to dynamically change the styling by adding some stuff to it, then you can call the function above, passing the desired path.
My External CSS and template was created by a friend fluent in CSS. But my friend isn't understanding that I don't know HOW to 'apply' (write) the tags in the HTML page to 'call' the CSS.
I know the difference between id (#whatever) and class (.whatever) But I don't know if a CSS entry like
.header caption (with styles listed) translates then to
'p class="header caption" with opening/closing tags ???
What I'm looking for, but not finding on the web, is a listing of how the most common tags are written as css. For example, I know
p class="left"
applies the CSS to align left, instead of HTML tag align="left" But How do I write the actual tag for
.table
.td
.tr
Is there a website to show:
"This is the tag in HTML, no External CSS" "This is the way to write the same tag for External CSS"
Second question... Other than for the 'p class' or easy tags, do I start every tag with:
class="" ?
p class="" ?
div class="" ?
When do I use SPAN vs DIV ?
I have searched for how to apply External CSS, for what tags to use--yes, I understand that every person might use different naming for divs and classes-- but I really need examples that will show the basic tags so I can plug in the 'different naming' from my
'external css'
Is there one website that shows (all on one page) examples of the tags? A website tutorial that doesn't assume novices already know how to write the tags to apply css?
Thanks
This is were I got my start in html. It teaches basic html and there are other videos that go along with it.
This will likely clear up some confusion with css.
Codeacademy.com is a much more thorough course of a multitude of web languages.
I'm attempting to make a simple blog style website using one XML, one XSLT, and one CSS.
For that I'd like to have the option to only view one entry from the xml, and I would like to do it without javascript or php.
I'm trying to do this using the :target selector.
The behaviour I would like to achieve would be;
index.html should show everything
index.html#one should only show the entry with id="one"
index.html#two should only show the entry with id="two"
and so on.
I've found solutions that will display the last sibling, however that doesn't fit. My xslt turns entries into tables, and I can't see how I dynamically could parse the xml to fit that solution.
Is there a way to do this with css, or should I start learning php?
this should be an either/or proposition ... learn PHP. it will benefit you.
but for a CSS-only solution (with a little .htaccess magic) you could do a rewrite of index.html to index.html#all, set your wrapping div to have ID of all (or whatever your wrapper ID is), then set the :target CSS for #all to show everything.
#all .YouWantToHide {
display:none;
}
#all:target .YouWantToHide, #one:target, #two:target {
display:block;
}
This will hide everything by default on the normal page (which will never be visited, it just sets the tone for the specific items to show and other to hide later), show on the #all target (which is now the default page), and the specific items will show as needed while the others will hide.
I built an extension which, whenever user visits some specific sites, I inject my script on the top of there web pages. I used
document.body.insertBefore(wrapperDiv, document.body.firstChild)
to do so.
Now problem: CSS of injected script gets messed up for each and every site(differ from one site to another).
How should I maintain single css structure for all sites?
You should be able to solve this problem by using unique IDs for your html tags with CSS.
That is, if your DIV CSS properties are interfering with their DIV CSS add a #uniqueNameHere ID to your DIV and set the CSS for the #ID.
This page on the use of the !important keyword may be useful too.
http://css-tricks.com/9462-when-using-important-is-the-right-choice/
Use unique selectors for your elements (be it classes with specific prefix or similarly constructed IDs), but you probably try to include CSS along with your script, which may not be a good idea.
In some cases the inline styling is the best idea - it will overwrite all the styles for your elements and will make sure the outlook of these elements is consistent across different pages.
So, I would say, go with inline styling.
For documentation on how the styles are overwritten in CSS 2.1, please see the following page: http://www.w3.org/TR/CSS21/cascade.html#specificity
Super simple question: Is there a class I can add to an element to prevent jquery UI from altering it?
You can always define styling inline to override any sort of styling that occurs via spreadsheet. Or if you want to at least create a centralized place for them, you can make sure that they're the most recently called in <style></style> tags right before the </head> tag.