Wanting to add a div element if a class is present on the page.
This is for IPS forum software. Reached out to them about this and their response was that they would charge for a custom theme design. Would rather do this myself if possible (bit too expensive otherwise).
I want to display a specific div for the "compose new private message" modal popup without displaying it on all other modal popups. Can't use body page controllers so I'm guessing my only option, other than having the PM modal inherit from a new template, would be to try and display a div if a certain class exists.
Templates are stored in the database for IPB. You can utilize the Admin system to go in and edit the templates. There is an extensive series of menus that give you access to individual template code, for example, under Messenger, there is sendNewPersonalTopicForm, PMQuickForm, and sendReplyForm.
It should be relatively easy to go into those templates, find the markup you want and add a container div where appropriate.
For example, for a 3.x board, you find something like this:
<div id='message_compose' class='post_form'>
<form id='msgForm' style='display:block'
action="{parse url="module=messaging§ion=send&do=send" base="publicWithApp"}" method="post" enctype='multipart/form-data'>
This seems fairly simple code to alter.
I would recommend a Plugin with a theme hook. You can put your logic in the php file and assign your hook to show up exactly where you want it.
Related
Currently I am working in a project in which Admin is saving the html code as a whole as a string which will later be used in the front end. It is saved so that user can put their own custom css like placing of whole div, size etc. It was working for some time, but now they want the saving part as it is, but when viewing it should look little differently. Like placement of images(it's just a part of whole div), grid system.
Following is a part of html admin saves:
<img src="http://localhost:3001/api/v1/images/image_454812039.jpeg" style="float:none;height:170.17142857142858px;width:301px;" /><p><span style="color:rgb(0,0,0);background-color:rgb(237,237,237);">Other names of Marshall Bruce Matters</span></p>
as you can see, that's what I get from backend. Now in the front when user is viewing, the span should be at the top, and image should be at bottom of it in a grid.
First of all to answer your question I will propose you to go and look at this loader react-jsx-parser -> https://github.com/TroyAlford/react-jsx-parser
But I would like to warn you that this method is not really recommended. It is better to have the structure in the code. Then call the source to the backend and then integrate it into your DOM.
This will make your frontend and backend easier to understand and therefore maintain
The only problem there is that the styles are not like jsx styles. They should be like:
style={{float:'none', height: '170.17142857142858px', width:'301px'}}
or
style={{float:'none', height: 170.17142857142858, width:301}}
But there is a npm package which helps getting the job done. react-html-parser
Hope it helps!
I have a piece of HTML code for a particular item for sale on a website. This code has all of the information needed for the item, including title, price, dimensions, weight, etc. It also has an "Add To Cart" button included with it.
What I want to do is turn away from Wix and hand-code the entire website using HTML5, CSS3, and Bootstrap 4.1.1. I want to use the same HTML code snippet that I included in Wix, but without the button. I will create my own Bootstrap button.
My question is how do I make it so the code runs when the bootstrap button is clicked?
Thank you.
What you want is JavaScript. Not to split hairs, but HTML is technically not code; it's considered "markup." To get dynamic information, you have to use JavaScript. This might require more conplexity than you realize.
var containerElement = document.querySelector('.container');
var buttonElement = document.querySelector('.button');
var populateContainer = function() {
// do some stuff here
}
buttonElement.onclick = populateContainer;
You may also need some knowledge of a back end language, like PHP, to help you build your shop. For a beginner, I would recommend looking into WordPress so you could install a plugin that handles that stuff for you, like WooCommerce.
Would need more details on what exactly you're trying to do, but Javascript/jQuery is a great way to dynamically make links when a button is clicked.
Assuming you have inputs from the user to get certain product attributes (color/size/etc). You would make it so that when a button is clicked, the jQuery code would check each input and stitch together a URL for you.
Is it possible to have a fixed structure for the HTML using CKEditor. For example, HTML5 placeholders are shown in editor as user hints so user know where to enter what content. Further, it should be possible that user shouldn't be able to change the structure.
An example structure may look like this and placeholder text is shown till user enters the text.
Title Only
....
...
...
As mentioned above, user shouldn't be able to change the structure/order of the sections.
This is a perfect use case for a CKEditor widget.
In short, widgets are special rich content units in that they are groups of elements which are treated as a single entity inside the editor. Once developed, their structure (but not necessarily their content) is immutable and enforced by the CKEditor instance they are used in. These entities can thus be selected and deleted or moved freely as a whole around the editing area, keeping their predefined structure intact. At the same time all the individual parts of the widget (its "building blocks") can be edited or configured separately, again, without affecting the whole widget entity and its structure in the process. Read more here: http://docs.ckeditor.com/#!/guide/dev_widgets
In your case, you could have a look at the sample Simple Box widget which is demoed here and actually created step-by-step in this tutorial. It creates a simple template widget with an immutable structure and pre-defined fields for the users to fill in. What's more, thanks to ACF (CKEditor content filtering mechanism) you are even able to define the elements (and their attributes, styles, classes) that are allowed in each of the widget parts.
Widgets are a really powerful tool, you can see some other implementations of the widget API in the widget demo.
I have a custom module (custom HTML) that I want to be on a specific Article
I am using the {loadposition modulename} and it displays my custom HTML modules. However I cannot seem to find where to change how my module is displayed - I want to place it in a specific location on my article, but where do I put in the position information for this?
To accomplish this the {loadposition item} must be contained within a div that has css style attached
I accomplished this by doing the following:
In the article switch the editor to show the HTML code
add the {loadposition} as follows:
<div class="wrap">{loadposition cp_frontpage}</div>
I then add a css file that handles my wrap div
.wrap
{
text-align:center;
margin-left: 0px;
margin-right: auto;
width: 50%;
height: 50%;
}
this can be done as an inline css, or by an external css file (as I did above)
If you want to place the custom module in a specific location of your article page. Please follow the below steps:
The first thing you will need to do is create the module..
Login to the administrator panel of your Joomla installation
Navigate to Extensions -> Module Manager -> New and select the module you wish placed in to your article (eg. Custom HTML)
Set the module postion to one that does not exist in your template. To achieve this, click on the dropdown box next to the 'Position' option and simply type in a new, distinct, module position (eg articlemodule_footer. I like to give the modules a common prefix (eg articlemodule_). This allows me to easily search for my article modules at a later date.
Set the 'Menu Assignment' to 'All'. (Note: it will only appear on the pages with your article because it is the only place where the articlemodule_footer module position is called)
Setup the rest the remaining parameters for your module and click the 'Save'.
Once you have set up your module it is now time to place it inside the article(s) you wish it to appear. For this the Joomla! team has provided us with the loadposition function.
Open up the article(s) in which you wish to place your module and navigate to the area of the article with in your editor where you want the mopdule to appear and type the following...
{loadposition position}
Replacing 'position' with the position name you assigned to the module which you have just created. Eg..
{loadposition articlemodule_footer}
Click save and your done!
If you find that the module is not showing in your article be sure to check the following...
Navigate to Extensions -> Plugin Manager and ensure that the 'Content - Load Module' plugin is enabled.
Clear your site's cache and refresh the page. (Joomla Administration -> System -> Clear Cache)
For us to be able to display this function in this tutorial we had to place the curly brackets surrounding the function in italics. Ensure the italic styling was not copied across if you have copied the function directly from this article.
I have a number of templates that create headings based on a formula. I am wondering if there is anyway to create an "edit" link that will take you directly to that section? The way that it currently works, the edit link takes you to editing the template itself. Could I possibly create a customized link that would keep you on the page and take you to right part?
Here is some sample code to help clear things up...
Template:Head:
==={{{1}}}===
This is a heading titled "{{{1}}}"
Test Page:
=Section 1=
{{head|1.1}}
{{head|1.2}}
{{head|1.3}}
=Section 2=
{{head|2.1}}
{{head|2.2}}
{{head|2.3}}
At the moment, if I want to edit the information for template "2.3", I have to edit all of section 2. (Note that for this example, that isn't a big deal. For the actual templates I am working with on my site, the templates have dozens of parameters and there are sometimes 10 or more in a section.)
Bottom line, is there way to create a custom edit link inside of the {{head}} template that would take you directly to editing the templates call on the page "Test Page"? Hope that makes sense.
Edit: Is there perhaps a way to make use of "anchor" tags? Can anchors be passed in to the URL?
To restate your problem, when you transclude a section heading the header isn't treated as being part of the destination page, so the edit link takes you back to the source. So you need a separate container for the template in order to edit it individually, and a complete section is the smallest editable container.
The only way I can think of doing this is using subpages (or virtual subpages if you don't have that ennabled in this namespace, doesn't change anything). So instead of placing {{head|1.1}} on MyPage, put it on MyPage/Subpage1 and then transclude that into MyPage in the usual way ({{:MyPage/Subpage1}}).
{{head}} can then include a custom edit link to the template input by using HTML heading tags (<h2> is equal to ==, etc.) to suppress the standard edit link and then use one of these templates (probably {{ed right}}) to create a custom edit link pointing to MyPage/Subpage1.
The way to create anchors in Mediawiki, by the way, is to use a <span id="name"/> tag, but that doesn't create a container that can be edited (or at least, not that I've been able to work out through URL tinkering).
I'm pretty sure there's no way to do that. As far as MediaWiki's section editing feature is concerned, the only thing that begins a new section is a line of the form:
=== Some text here ===
with the number of = signs determining the level of the heading. There's no way to get MediaWiki to let you edit any segment of the document that doesn't begin and end with such a line (or the beginning or end of the page).
Well, OK, I'm sure you technically could do it with an extension, in the sense that you can do anything with a MediaWiki extension. All you'd need to do is provide some way (e.g. a special parameter in an edit URL) for to user to indicate "I want to edit this template", then extract the template from the wikitext, present it to the user for editing, and write the result back into the page text over the original.
The tricky part will be extracting the template from the page source. (Finding and replacing templates on a page is a fairly common task for MediaWiki bot writers, so you might want to look for ideas there.) Whatever method you end up using for that, there will probably be edge cases where you need to give up and tell the user "Sorry, but I can't figure out how that template is transcluded here."