Develop Reference

How to define and assign variables in html

I am making a website, but i am learning it by editing a template. So far i start to learn it quite quickly, but i cant figure everything out and i cant find everything on the internet. What i'm trying to achieve is that i can add a variable, which i place on every page of my site, so i do not have to modify it per HTML file.
This is the code (HTML):
<div id="sidebar">
<h2>Interesting Topics</h2>
<p class="news">####Read More » </p>
<p class="news">####Read More » </p>
<p class="news">####Read More » </p>
</div>
all #### basically need to be articles that i only have to define once, so it will show the same on every page. even better would be random/personalized articles, but that will come later i guess. if anyone can help me or has any tips, please let me know. :)

HTML is a markup language, meaning it is used to give semantics to text. Thus, you cannot declare variables, as it is not a programming language. However, what you can do instead, is use a server-side language to "feed" in the data to each page, and store the data in a separate file or something.

Is there a way to add a configurable modal/lighbox/pop-up to a website?

Problem:
I manage a series of websites for clients that are all in the same industry. During certain times of the year (ie. Christmas, New Years, Summer, etc), we want to push certain promotions or specials on the sites. Right now when this happens, I have to go to each client's website (some wordpress, some straight html, some grav, some dnn...) and change some code to reflect the promotion.
Desired solution:
I would like to go into a tool/ui, configure some settings like the text, an image and a start/end date and have a pop up dialog be displayed on the website. For bonus points, I'd love to be able to build/schedule these ahead of time and just let them run. I use some tools like Drip that do something similar (displaying a modal) for sign up forms but haven't found anything that quite fits what I'm trying to do.
Ideas so far:
All of our sites have tag manager so I think there may be a way to do it using it. I would likely not be able to run things on a schedule or get an easy way to configure the modals but at least it would get me out of having to go to each site and do something different. I could copy/paste the html for the modal for each container, turn the tag on/off and update the markup when needed. Does that sound reasonable or a terrible idea? It feels like there should be something that does this already but I cant find anything.
Anyways, if someone has done something similar or if there are any tools/libraries I could buy I'd really appreciate the help!
Thanks!

This is perfectly possible by using the Custom HTML Tag..

PrestaShop MultiShops class name changing

I have 6 same shops but in different languages. Last developer(which not answering for me) created this theme and made "Free Shipping" image(Red one with a car) in the header on https://www.badetonnesite.de/, how should I display it in other shops/languages?
I know that in .de shop picture div gets <div class="free_shipping_de"></div> class name, but in others it is : <div class="free_shipping"></div>
I was looking in modules, in code files, but I cant find file to modify it. Maybe anyone can help for me with this problem? Where should I look and what should I do?
Thank you in advice !

Judging by the way the previous developer has done it, you should look in your translations, because the way he has done it is via
<div class="{l s='free_shipping'}"></div>
In your themes/default-bootstrap/header.tpl, line 98. Same goes for payment_logo and a few others. Which means that this div's class attribute will be obtained from theme's translations for the currently selected language.
So in your theme's translations (in your Back Office) you should look for free_shipping line and translate it for other languages.
I might add you're lucky he doesn't respond, because this is very poorly executed :) You should consider hiring someone to do it properly.
Also, you might want to instruct your server to forbid directory index, because right now it allows anyone to download the template files. Ideally I should be getting an error when trying to do this.

addThis smart api layer add a link

I would like to add a new button with a link to a custom url on the addThis slideBar generated by using addThis Smart Layer Api (you can have a look at the documentation here)
I would like to add a custom service that is just a link to a precise page.
Is it possible?
Here is the sample of the code I use to generate the side bar.
addthis.layers({
'theme': 'transparent',
'share': {
'position': 'left',
'services': 'facebook,twitter,google_plusone_share,pinterest_share,print,more'
}
});

Is it Possible?
Although it's not particularly helpful to hear, I don't think that this can be accomplished with the AddThis SmartLayers API at this time. You may have found differently though, in which case I'm curious to hear about how you figured out to do it.
After perusing the docs and playing with it for a solid amount of time I can't figure out a way to insert a new option into the services on any of the layers (Share, Follow, What's Next, or Recommendation layers). The only way that I think adding a service to any of their SmartLayers would work is to submit it to AddThis to get it officially approved.
On the bottom of this page you can submit new services to AddThis to be implemented into their API completely. The massive downside to this in terms of your problem is that the submitted service needs to be OExchange compatible. For some projects this may not be feasible, but it might not be too much of a roadblock if you're free to implement compatibility in whatever web application you want to add to their services.
Small discussion about the API.
AddThis' platform is based around being able to show the most relevant marketing to its users, and so making custom buttons/services is discouraged by AddThis. They try to encourage developers to use their built in personalization by saying things such as:
We encourage you, however, to take advantage of automatic menu and
toolbox personalization. You'll see an increase in overall sharing of
about 20%, particularly from your site's international visitors, who
use many of our other hundreds of sharing services!
I think that this is why AddThis is not the most easily customizable service on the planet. However it is very good at what it boasts, showing relevant marketing to users.
The Workaround
These may be aspects of the API that you're familiar with and know how to use but I figure it can't hurt to help by providing them since the answer to the originally proposed question was "Probably not".
You can make what AddThis refers to as a toolbox of buttons and then put your service anywhere in the mix. This is done using HTML instead of JavaScript and it looks like this for the "default" toolbox:
<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
</div>
This produces clickable sharing service links for the top 4 most
preferred services as decided by AddThis.
Now let's make one of these buttons our own. We will just use stackoverflow.com as an example.
<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_stackoverflow" href="http://www.stackoverflow.com">
<img src ="http://fc06.deviantart.net/fs70/f/2012/099/d/f/stackoverflow_16x16_icon_by_muntoo_stock-d4vl2v4.png" width="16" height="16" border="0">
</img>
</a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
</div>
This code produces a clickable stack overflow button alongside the top
buttons as suggested by AddThis!
Although this isn't what you're looking for exactly, I hope that it helps!

The addthis creates a division with id #at4-share and creates the links within it, try to prepend ( or append ) using jquery an "a" element similar to the elements created by the addthis plugin in this div, and create a custom class similar to aticon-print in your css and set your custom icon.
I haven't tried it though but i think it shall work.
$("#at4-share").prepend('<a class="at4-share-btn at-svc-print"
href="https://stackoverflow.com/questions/31108214/how-to-increase-audio-play-speed-using-javascript">
<span class=" at4-icon aticon-print" title="KAD">KAD</span></a>');

Menu looks broken until I refresh browser

I tried to put together a CODEPEN HERE for you, but I'm afraid it will not be much help since I can't reproduce the problem there.
This is a very complex and large website. It is very difficult to provide you with just the code that applies to this, since there is so many scripts and stylesheets that are working together to make it work, but I am doing my best to provide you with what I can.
Basically, when the page loads, it loads fine, but when I click on a link in the menu to take me to that page, that page loads with a "broken" menu look. SEE PIC. As soon as I refresh the page or even resize it by one pixel, it resets to the way it should look. SEE PIC ALSO
Please, someone, have you come across something like this? enter code here And if you can't find a mistake by looking at the code, is there a way to refresh any given stylesheet or script? I can't force a page refresh because some things are supposed to process from the database on PageLoad.
I'm not holding my breath, but I certainly hope you guys can help.
Here is the pic with the problem. and the link to codepen is above

Try to add something like ?v=1232 to your style
href="css/init.css?v=1232"

The problem has been resolved. Apparently, the accessibilitymegamenu.js adds the attribute aria-haspopup="true" programmatically which it makes it bug out if you add it manually when coding for JAWS and/or any other non-sighted users accessibility website.
If you're using any accessibility script and your hyperlink is coded as follows:
<a id="myID" href="#" class="myClass" aria-haspopup="true">My Link</a>
change it to:
<a id="myID" href="#" class="myClass">My Link</a>
Your output (according to the accessibility script) will still be:
<a id="MyID" aria-label="My Label" href="javascript:void(0)" aria-haspopup="true" aria-controls="accessible-megamenu-1426257105716-6" aria-expanded="true" class="MyClass">My Link</a>
Hopefully this helps others and saves them the two weeks of debugging it cost us.
Happy Coding!