Please log in to view this resource
Please log in to view this resource
Log in to deploy new versions or manage existing ones.
The purpose of this API is to provide a single location to store and build EurActiv section menu icons and banners. To use it:
<link href='//assets.euractiv.com/easections/v2/easections-min.css' rel='stylesheet'>
To use the section icon, you need:
For example:
div.ea-section-icons-blue
a.ea-section-icon-agriculture
Agriculture
Except for the anchor, html structure does not matter, other markup is possible. For example, a list:
ul.ea-section-icons-blue
li
a.ea-section-icon-agriculture
Agriculture
<div class="ea-section-icons-blue">
<a href="#" class="ea-section-icon-aaa-default">Aaa Default</a>
<a href="#" class="ea-section-icon-agriculture-alimentation">Agriculture Alimentation</a>
<a href="#" class="ea-section-icon-agriculture-food">Agriculture Food</a>
<a href="#" class="ea-section-icon-aide-au-developpement">Aide Au Developpement</a>
<a href="#" class="ea-section-icon-central-europe">Central Europe</a>
<a href="#" class="ea-section-icon-climate-environment">Climate Environment</a>
<a href="#" class="ea-section-icon-climate-environnement">Climate Environnement</a>
<a href="#" class="ea-section-icon-competition">Competition</a>
<a href="#" class="ea-section-icon-development-policy">Development Policy</a>
<a href="#" class="ea-section-icon-developpement-durable">Developpement Durable</a>
<a href="#" class="ea-section-icon-digital">Digital</a>
<a href="#" class="ea-section-icon-education">Education</a>
<a href="#" class="ea-section-icon-elections">Elections</a>
<a href="#" class="ea-section-icon-energie-und-umwelt">Energie Und Umwelt</a>
<a href="#" class="ea-section-icon-energie">Energie</a>
<a href="#" class="ea-section-icon-energy">Energy</a>
<a href="#" class="ea-section-icon-enlargement">Enlargement</a>
<a href="#" class="ea-section-icon-entwicklungspolitik">Entwicklungspolitik</a>
<a href="#" class="ea-section-icon-eu-aussenpolitik">Eu Aussenpolitik</a>
<a href="#" class="ea-section-icon-eu-innenpolitik">Eu Innenpolitik</a>
<a href="#" class="ea-section-icon-eu-priorities">Eu Priorities</a>
<a href="#" class="ea-section-icon-euro-finance">Euro Finance</a>
<a href="#" class="ea-section-icon-euro-finances">Euro Finances</a>
<a href="#" class="ea-section-icon-europakompact">Europakompact</a>
<a href="#" class="ea-section-icon-europakompakt">Europakompakt</a>
<a href="#" class="ea-section-icon-europe-de-l-est">Europe De L Est</a>
<a href="#" class="ea-section-icon-europe-s-east">Europe S East</a>
<a href="#" class="ea-section-icon-finanzen-und-wirtschaft">Finanzen Und Wirtschaft</a>
<a href="#" class="ea-section-icon-gesundheit-und-verbraucherschutz">Gesundheit Und Verbraucherschutz</a>
<a href="#" class="ea-section-icon-global-europe">Global Europe</a>
<a href="#" class="ea-section-icon-health-consumers">Health Consumers</a>
<a href="#" class="ea-section-icon-innovation-entreprises">Innovation Entreprises</a>
<a href="#" class="ea-section-icon-innovation-industry">Innovation Industry</a>
<a href="#" class="ea-section-icon-innovation">Innovation</a>
<a href="#" class="ea-section-icon-justice">Justice</a>
<a href="#" class="ea-section-icon-l-europe-dans-le-monde">L Europe Dans Le Monde</a>
<a href="#" class="ea-section-icon-language">Language</a>
<a href="#" class="ea-section-icon-langues-culture">Langues Culture</a>
<a href="#" class="ea-section-icon-med-south">Med South</a>
<a href="#" class="ea-section-icon-osterreich">Osterreich</a>
<a href="#" class="ea-section-icon-politique">Politique</a>
<a href="#" class="ea-section-icon-public-affairs">Public Affairs</a>
<a href="#" class="ea-section-icon-regional">Regional</a>
<a href="#" class="ea-section-icon-royaume-uni-en-europe">Royaume Uni En Europe</a>
<a href="#" class="ea-section-icon-sante-modes-de-vie">Sante Modes De Vie</a>
<a href="#" class="ea-section-icon-science-policymaking">Science Policymaking</a>
<a href="#" class="ea-section-icon-sciences-legislation">Sciences Legislation</a>
<a href="#" class="ea-section-icon-security">Security</a>
<a href="#" class="ea-section-icon-social-europe-jobs">Social Europe Jobs</a>
<a href="#" class="ea-section-icon-societe-de-l-information">Societe De L Information</a>
<a href="#" class="ea-section-icon-sports">Sports</a>
<a href="#" class="ea-section-icon-sustainable-dev">Sustainable Dev</a>
<a href="#" class="ea-section-icon-trade-society">Trade Society</a>
<a href="#" class="ea-section-icon-transport">Transport</a>
<a href="#" class="ea-section-icon-uk-europe">Uk Europe</a>
<a href="#" class="ea-section-icon-ukraine-und-eu">Ukraine Und Eu</a>
</div>
<div class="ea-section-icons-yellow">
<a href="#" class="ea-section-icon-aaa-default">Aaa Default</a>
<a href="#" class="ea-section-icon-agriculture-alimentation">Agriculture Alimentation</a>
<a href="#" class="ea-section-icon-agriculture-food">Agriculture Food</a>
<a href="#" class="ea-section-icon-aide-au-developpement">Aide Au Developpement</a>
<a href="#" class="ea-section-icon-central-europe">Central Europe</a>
<a href="#" class="ea-section-icon-climate-environment">Climate Environment</a>
<a href="#" class="ea-section-icon-climate-environnement">Climate Environnement</a>
<a href="#" class="ea-section-icon-competition">Competition</a>
<a href="#" class="ea-section-icon-development-policy">Development Policy</a>
<a href="#" class="ea-section-icon-developpement-durable">Developpement Durable</a>
<a href="#" class="ea-section-icon-digital">Digital</a>
<a href="#" class="ea-section-icon-education">Education</a>
<a href="#" class="ea-section-icon-elections">Elections</a>
<a href="#" class="ea-section-icon-energie-und-umwelt">Energie Und Umwelt</a>
<a href="#" class="ea-section-icon-energie">Energie</a>
<a href="#" class="ea-section-icon-energy">Energy</a>
<a href="#" class="ea-section-icon-enlargement">Enlargement</a>
<a href="#" class="ea-section-icon-entwicklungspolitik">Entwicklungspolitik</a>
<a href="#" class="ea-section-icon-eu-aussenpolitik">Eu Aussenpolitik</a>
<a href="#" class="ea-section-icon-eu-innenpolitik">Eu Innenpolitik</a>
<a href="#" class="ea-section-icon-eu-priorities">Eu Priorities</a>
<a href="#" class="ea-section-icon-euro-finance">Euro Finance</a>
<a href="#" class="ea-section-icon-euro-finances">Euro Finances</a>
<a href="#" class="ea-section-icon-europakompact">Europakompact</a>
<a href="#" class="ea-section-icon-europakompakt">Europakompakt</a>
<a href="#" class="ea-section-icon-europe-de-l-est">Europe De L Est</a>
<a href="#" class="ea-section-icon-europe-s-east">Europe S East</a>
<a href="#" class="ea-section-icon-finanzen-und-wirtschaft">Finanzen Und Wirtschaft</a>
<a href="#" class="ea-section-icon-gesundheit-und-verbraucherschutz">Gesundheit Und Verbraucherschutz</a>
<a href="#" class="ea-section-icon-global-europe">Global Europe</a>
<a href="#" class="ea-section-icon-health-consumers">Health Consumers</a>
<a href="#" class="ea-section-icon-innovation-entreprises">Innovation Entreprises</a>
<a href="#" class="ea-section-icon-innovation-industry">Innovation Industry</a>
<a href="#" class="ea-section-icon-innovation">Innovation</a>
<a href="#" class="ea-section-icon-justice">Justice</a>
<a href="#" class="ea-section-icon-l-europe-dans-le-monde">L Europe Dans Le Monde</a>
<a href="#" class="ea-section-icon-language">Language</a>
<a href="#" class="ea-section-icon-langues-culture">Langues Culture</a>
<a href="#" class="ea-section-icon-med-south">Med South</a>
<a href="#" class="ea-section-icon-osterreich">Osterreich</a>
<a href="#" class="ea-section-icon-politique">Politique</a>
<a href="#" class="ea-section-icon-public-affairs">Public Affairs</a>
<a href="#" class="ea-section-icon-regional">Regional</a>
<a href="#" class="ea-section-icon-royaume-uni-en-europe">Royaume Uni En Europe</a>
<a href="#" class="ea-section-icon-sante-modes-de-vie">Sante Modes De Vie</a>
<a href="#" class="ea-section-icon-science-policymaking">Science Policymaking</a>
<a href="#" class="ea-section-icon-sciences-legislation">Sciences Legislation</a>
<a href="#" class="ea-section-icon-security">Security</a>
<a href="#" class="ea-section-icon-social-europe-jobs">Social Europe Jobs</a>
<a href="#" class="ea-section-icon-societe-de-l-information">Societe De L Information</a>
<a href="#" class="ea-section-icon-sports">Sports</a>
<a href="#" class="ea-section-icon-sustainable-dev">Sustainable Dev</a>
<a href="#" class="ea-section-icon-trade-society">Trade Society</a>
<a href="#" class="ea-section-icon-transport">Transport</a>
<a href="#" class="ea-section-icon-uk-europe">Uk Europe</a>
<a href="#" class="ea-section-icon-ukraine-und-eu">Ukraine Und Eu</a>
</div>
<div class="ea-section-icons-yellow-alt">
<a href="#" class="ea-section-icon-aaa-default">Aaa Default</a>
<a href="#" class="ea-section-icon-agriculture-alimentation">Agriculture Alimentation</a>
<a href="#" class="ea-section-icon-agriculture-food">Agriculture Food</a>
<a href="#" class="ea-section-icon-aide-au-developpement">Aide Au Developpement</a>
<a href="#" class="ea-section-icon-central-europe">Central Europe</a>
<a href="#" class="ea-section-icon-climate-environment">Climate Environment</a>
<a href="#" class="ea-section-icon-climate-environnement">Climate Environnement</a>
<a href="#" class="ea-section-icon-competition">Competition</a>
<a href="#" class="ea-section-icon-development-policy">Development Policy</a>
<a href="#" class="ea-section-icon-developpement-durable">Developpement Durable</a>
<a href="#" class="ea-section-icon-digital">Digital</a>
<a href="#" class="ea-section-icon-education">Education</a>
<a href="#" class="ea-section-icon-elections">Elections</a>
<a href="#" class="ea-section-icon-energie-und-umwelt">Energie Und Umwelt</a>
<a href="#" class="ea-section-icon-energie">Energie</a>
<a href="#" class="ea-section-icon-energy">Energy</a>
<a href="#" class="ea-section-icon-enlargement">Enlargement</a>
<a href="#" class="ea-section-icon-entwicklungspolitik">Entwicklungspolitik</a>
<a href="#" class="ea-section-icon-eu-aussenpolitik">Eu Aussenpolitik</a>
<a href="#" class="ea-section-icon-eu-innenpolitik">Eu Innenpolitik</a>
<a href="#" class="ea-section-icon-eu-priorities">Eu Priorities</a>
<a href="#" class="ea-section-icon-euro-finance">Euro Finance</a>
<a href="#" class="ea-section-icon-euro-finances">Euro Finances</a>
<a href="#" class="ea-section-icon-europakompact">Europakompact</a>
<a href="#" class="ea-section-icon-europakompakt">Europakompakt</a>
<a href="#" class="ea-section-icon-europe-de-l-est">Europe De L Est</a>
<a href="#" class="ea-section-icon-europe-s-east">Europe S East</a>
<a href="#" class="ea-section-icon-finanzen-und-wirtschaft">Finanzen Und Wirtschaft</a>
<a href="#" class="ea-section-icon-gesundheit-und-verbraucherschutz">Gesundheit Und Verbraucherschutz</a>
<a href="#" class="ea-section-icon-global-europe">Global Europe</a>
<a href="#" class="ea-section-icon-health-consumers">Health Consumers</a>
<a href="#" class="ea-section-icon-innovation-entreprises">Innovation Entreprises</a>
<a href="#" class="ea-section-icon-innovation-industry">Innovation Industry</a>
<a href="#" class="ea-section-icon-innovation">Innovation</a>
<a href="#" class="ea-section-icon-justice">Justice</a>
<a href="#" class="ea-section-icon-l-europe-dans-le-monde">L Europe Dans Le Monde</a>
<a href="#" class="ea-section-icon-language">Language</a>
<a href="#" class="ea-section-icon-langues-culture">Langues Culture</a>
<a href="#" class="ea-section-icon-med-south">Med South</a>
<a href="#" class="ea-section-icon-osterreich">Osterreich</a>
<a href="#" class="ea-section-icon-politique">Politique</a>
<a href="#" class="ea-section-icon-public-affairs">Public Affairs</a>
<a href="#" class="ea-section-icon-regional">Regional</a>
<a href="#" class="ea-section-icon-royaume-uni-en-europe">Royaume Uni En Europe</a>
<a href="#" class="ea-section-icon-sante-modes-de-vie">Sante Modes De Vie</a>
<a href="#" class="ea-section-icon-science-policymaking">Science Policymaking</a>
<a href="#" class="ea-section-icon-sciences-legislation">Sciences Legislation</a>
<a href="#" class="ea-section-icon-security">Security</a>
<a href="#" class="ea-section-icon-social-europe-jobs">Social Europe Jobs</a>
<a href="#" class="ea-section-icon-societe-de-l-information">Societe De L Information</a>
<a href="#" class="ea-section-icon-sports">Sports</a>
<a href="#" class="ea-section-icon-sustainable-dev">Sustainable Dev</a>
<a href="#" class="ea-section-icon-trade-society">Trade Society</a>
<a href="#" class="ea-section-icon-transport">Transport</a>
<a href="#" class="ea-section-icon-uk-europe">Uk Europe</a>
<a href="#" class="ea-section-icon-ukraine-und-eu">Ukraine Und Eu</a>
</div>
To turn a section header into a banner, simply add the class
ea-section-banner-[section_name]
to the section title. For
example:
<h1 class="ea-section-banner-[section_name]">
Section Name
</h1>
The tag name does not matter, H1 is used here for an example.
<h2 class="ea-section-banner-aaa-default">Aaa Default</h2>
<h2 class="ea-section-banner-agriculture-alimentation">Agriculture Alimentation</h2>
<h2 class="ea-section-banner-agriculture-food">Agriculture Food</h2>
<h2 class="ea-section-banner-aide-au-developpement">Aide Au Developpement</h2>
<h2 class="ea-section-banner-central-europe">Central Europe</h2>
<h2 class="ea-section-banner-climate-environment">Climate Environment</h2>
<h2 class="ea-section-banner-climate-environnement">Climate Environnement</h2>
<h2 class="ea-section-banner-competition">Competition</h2>
<h2 class="ea-section-banner-development-policy">Development Policy</h2>
<h2 class="ea-section-banner-developpement-durable">Developpement Durable</h2>
<h2 class="ea-section-banner-digital">Digital</h2>
<h2 class="ea-section-banner-education">Education</h2>
<h2 class="ea-section-banner-elections">Elections</h2>
<h2 class="ea-section-banner-energie-und-umwelt">Energie Und Umwelt</h2>
<h2 class="ea-section-banner-energie">Energie</h2>
<h2 class="ea-section-banner-energy">Energy</h2>
<h2 class="ea-section-banner-enlargement">Enlargement</h2>
<h2 class="ea-section-banner-entwicklungspolitik">Entwicklungspolitik</h2>
<h2 class="ea-section-banner-eu-aussenpolitik">Eu Aussenpolitik</h2>
<h2 class="ea-section-banner-eu-innenpolitik">Eu Innenpolitik</h2>
<h2 class="ea-section-banner-eu-priorities">Eu Priorities</h2>
<h2 class="ea-section-banner-euro-finance">Euro Finance</h2>
<h2 class="ea-section-banner-euro-finances">Euro Finances</h2>
<h2 class="ea-section-banner-europakompact">Europakompact</h2>
<h2 class="ea-section-banner-europakompakt">Europakompakt</h2>
<h2 class="ea-section-banner-europe-de-l-est">Europe De L Est</h2>
<h2 class="ea-section-banner-europe-s-east">Europe S East</h2>
<h2 class="ea-section-banner-finanzen-und-wirtschaft">Finanzen Und Wirtschaft</h2>
<h2 class="ea-section-banner-gesundheit-und-verbraucherschutz">Gesundheit Und Verbraucherschutz</h2>
<h2 class="ea-section-banner-global-europe">Global Europe</h2>
<h2 class="ea-section-banner-health-consumers">Health Consumers</h2>
<h2 class="ea-section-banner-innovation-entreprises">Innovation Entreprises</h2>
<h2 class="ea-section-banner-innovation-industry">Innovation Industry</h2>
<h2 class="ea-section-banner-innovation">Innovation</h2>
<h2 class="ea-section-banner-justice">Justice</h2>
<h2 class="ea-section-banner-l-europe-dans-le-monde">L Europe Dans Le Monde</h2>
<h2 class="ea-section-banner-language">Language</h2>
<h2 class="ea-section-banner-langues-culture">Langues Culture</h2>
<h2 class="ea-section-banner-med-south">Med South</h2>
<h2 class="ea-section-banner-osterreich">Osterreich</h2>
<h2 class="ea-section-banner-politique">Politique</h2>
<h2 class="ea-section-banner-public-affairs">Public Affairs</h2>
<h2 class="ea-section-banner-regional">Regional</h2>
<h2 class="ea-section-banner-royaume-uni-en-europe">Royaume Uni En Europe</h2>
<h2 class="ea-section-banner-sante-modes-de-vie">Sante Modes De Vie</h2>
<h2 class="ea-section-banner-science-policymaking">Science Policymaking</h2>
<h2 class="ea-section-banner-sciences-legislation">Sciences Legislation</h2>
<h2 class="ea-section-banner-security">Security</h2>
<h2 class="ea-section-banner-social-europe-jobs">Social Europe Jobs</h2>
<h2 class="ea-section-banner-societe-de-l-information">Societe De L Information</h2>
<h2 class="ea-section-banner-sports">Sports</h2>
<h2 class="ea-section-banner-sustainable-dev">Sustainable Dev</h2>
<h2 class="ea-section-banner-trade-society">Trade Society</h2>
<h2 class="ea-section-banner-transport">Transport</h2>
<h2 class="ea-section-banner-uk-europe">Uk Europe</h2>
<h2 class="ea-section-banner-ukraine-und-eu">Ukraine Und Eu</h2>
Download all as a zip archive Select individual icons
It's easy as pie:
/plugins/easections/v-edge/svg/
Configuration is located in the file /config/easections.php
.
If you do not have the ability to modify this file, contact your
administrator to have options changed. The configuration file should
contain an array with the name $config
containing the
following offsets:
Name | Type | Description | Current Setting |
---|---|---|---|
icon_height | integer | Icon height, in pixels | 20 |
colors | array | An array mapping the colors that will be used when building. It should be a key:value map where the key is the color name to be referenced elsewhere and the value is the hex color. | Array (
[blue] => #0c285d
[white] => #ffffff
[yellow] => #ffe300
[orange] => #fec200
[bluegrey] => #616366
[bannerblue] => #1b4597
) |
combinations | array | An array mapping the combination of colors that
will be built as icon sprites. Should be an array
of arrays with format:array("default"=>$colorname, "hover"=>$colorname) | Array (
[blue] => Array (
[default] => white
[hover] => yellow
[background] => blue
)
[yellow] => Array (
[default] => bluegrey
[hover] => blue
[background] => yellow
)
[yellow-alt] => Array (
[default] => orange
[hover] => blue
[background] => yellow
)
) |
callmap_driver | string | The callmap driver to use, either "sqlite", "fsstore" or "noop" | noop |
callmap_labels | array | Labels for the callmap, where the key is the regular expression to match and the value is the label to use | Login to view this setting |
callmap_visualize_default | array | Nodes to visualize by default | Login to view this setting |
callmap_probability | integer | Probability that a given hit will log. Important for high traffic sites. Set higher for lower probability. | 1000 |
http_allowed_domains | array | Allowed domains for fetching assets or generating URLs | Login to view this setting |
http_allowed_urls | array | Specified URLs or regular expressions of specified URLs match for fetching assets or generating URLs | Login to view this setting |
http_connect_timeout | integer | The amount of time, in seconds, that cURL should wait before returning an error status. 15 is a good value for most cases. | 15 |