Monitor Reply

Support

Swap the 'flexslider-icon' icon font?

Permalink Browser Info Environment December 03, 2014 at 4:29 PM

Hi There - Wondering if it is at all possible to swap the icons or modify the icon fonts for the slideshow arrows? I'd like to use different icons that what you've got included with the package.

Type:	Discussion
Status:	Resolved

emirii replied on Dec 3, 2014 at 4:43 pm Permalink Reply

Yes! The easiest way is to do this via font, since that's what it is already. You can also make it an image if you are very comfortable with CSS.

Find C5 Install:
packages/gallery_e_s/assets/css.php - open in your favorite editor

Lines 673-682 are dealing with the URL to the font you want. Make sure its a webfont format (can convert with fontsquirrel if it isnt)

@font-face {
                  font-family: \'flexslider-icon\';
                  src:url(\'' .  BASE_URL . DIR_REL . '/' . DIRNAME_PACKAGES . '/gallery_e_s/blocks/gallery_e_s_view/fonts/flexslider-icon.eot\');
                  src:url(\'' .  BASE_URL . DIR_REL . '/' . DIRNAME_PACKAGES . '/gallery_e_s/blocks/gallery_e_s_view/fonts/flexslider-icon.eot?#iefix\') format(\'embedded-opentype\'),
                     url(\'' .  BASE_URL . DIR_REL . '/' . DIRNAME_PACKAGES . '/gallery_e_s/blocks/gallery_e_s_view/fonts/flexslider-icon.woff\') format(\'woff\'),
                     url(\'' .  BASE_URL . DIR_REL . '/' . DIRNAME_PACKAGES . '/gallery_e_s/blocks/gallery_e_s_view/fonts/flexslider-icon.ttf\') format(\'truetype\'),
                     url(\'' .  BASE_URL . DIR_REL . '/' . DIRNAME_PACKAGES . '/gallery_e_s/blocks/gallery_e_s_view/fonts/flexslider-icon.svg#flexslider-icon\') format(\'svg\');
                  font-weight: normal;
                  font-style: normal;
               }

Then on line 709 is the start of the next/prev nav button style. If you want an image you will have to edit the :before attributes to match your image. If you use the font you will just need to tell it to use your font and what letter to use (the content property)

Line 718 & 719 replace with your font name and your letter number. be sure to keep the \'\ \' characters I don't think it'l work without it.

.flex-direction-nav a:before  { font-family: "flexslider-icon"; font-size: 40px; line-height: 40px; display: inline-block; content: \'\f001\'; }
 .flex-direction-nav a.flex-next:before  { content: \'\f002\'; }

Let me know if you need further help.

If you like GalleryES I would love if you left a review after we work out a solution! Thank you!

juddc replied on Dec 3, 2014 at 4:45 pm Permalink Reply

Thanks - I'll give it a try.

concrete5 Environment Information

# concrete5 Version
5.7.2.1

# concrete5 Packages
GalleryES (2.0.2).

# concrete5 Overrides
blocks/page_list, blocks/testimonial, blocks/topic_list, languages/da_DK, languages/de_DE, languages/el_GR, languages/fi_FI, languages/fr_FR, languages/it_IT, languages/ja_JP, languages/nl_NL, languages/ru_RU, languages/sl_SI, languages/sv_SE, languages/tr_TR, themes/lanstonehomes

# concrete5 Cache Settings
Block Cache - Off
Overrides Cache - Off
Full Page Caching - Off
Full Page Cache Lifetime - Every 6 hours (default setting).

# Server Software
Apache/2.2.26 (Unix) mod_fastcgi/2.4.6 mod_wsgi/3.4 Python/2.7.6 PHP/5.5.10 mod_ssl/2.2.26 OpenSSL/0.9.8y DAV/2 mod_perl/2.0.8 Perl/v5.18.0

# Server API
apache2handler

# PHP Version
5.5.10

# PHP Extensions
apache2handler, bcmath, bz2, calendar, Core, ctype, curl, date, dom, ereg, exif, fileinfo, filter, ftp, gd, gettext, hash, iconv, imap, intl, json, ldap, libxml, mbstring, mcrypt, mysql, mysqli, openssl, pcre, PDO, pdo_mysql, pdo_pgsql, pdo_sqlite, pgsql, Phar, posix, Reflection, session, SimpleXML, soap, sockets, SPL, sqlite3, standard, tokenizer, xml, xmlreader, xmlwriter, xsl, yaz, zip, zlib.

# PHP Settings
max_execution_time - 30
log_errors_max_len - 1024
max_file_uploads - 20
max_input_nesting_level - 64
max_input_time - 60
max_input_vars - 1000
memory_limit - 128M
post_max_size - 32M
sql.safe_mode - Off
upload_max_filesize - 32M
ldap.max_links - Unlimited
mysql.max_links - Unlimited
mysql.max_persistent - Unlimited
mysqli.max_links - Unlimited
mysqli.max_persistent - Unlimited
pcre.backtrack_limit - 1000000
pcre.recursion_limit - 100000
pgsql.max_links - Unlimited
pgsql.max_persistent - Unlimited
session.cache_limiter - <i>no value</i>
session.gc_maxlifetime - 1440
soap.wsdl_cache_limit - 5

Browser User-Agent String

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_4) AppleWebKit/537.78.2 (KHTML, like Gecko) Version/7.0.6 Safari/537.78.2

Hide Post Content

This will replace the post content with the message: "Content has been removed by an Administrator"

Hide Content

GalleryES

Support

Swap the 'flexslider-icon' icon font?

Issue Reply

concrete5 Environment Information

Browser User-Agent String

Hide Post Content

Request Refund

Code

Delete Post