custom graphics of: .fbOuterClose, .fbPrev2, .fbIcon, .fbNext2, .fbIcon etc.

Page: 1

Author Post
Member
Registered: Aug 2016
Posts: 2
Good day to the FB-Team!

This is my second license I use and I'm very glad with this great tool!

Could you give me a hint to customize the graphics (or I suspect the fbicon.ttf font in the folder Resourses) of the control symbols, like mentioned in the title?

The original design of the website that I adapt is very much different from the designs of the FB themes, so I wish to change it completely and not only retune its position/size or color.

Where do I have to start?

I use Naked Theme with some extra options, like;

naked: {
boxCornerRadius: 0,
showOuterClose: true,
showClose: false,
titleAsCaption: "a",
altAsCaption: true,
inFrameResize: false,
showItemNumber: false,
navType: "overlay",
showNavOverlay: true,
caption: null,
outerBorder: 0,
innerBorder: 0,
zoomBorder: 0,
padding: 0,
textColor: "#808080",
strongTextColor: "#808080",
panelPadding: 0
},


Do I have to edit fbicon.ttf file or should I make first ow custom graphics? If so, how to integrate these? Or should I do something different?


Thank you in advance,
With compliments,


Alfredo
Administrator
Registered: Aug 2008
Posts: 3382
Older versions of Floatbox used small .png images as backgrounds for the various Floatbox controls. These were moderately easy to modify or substitute, although many who tried messed them up by not recognizing that they were 4-sectioned sprites that needed precise layout.

Version 7 drops all background images and uses a custom icon font set instead. These are sharper and cleaner in appearance, load a little quicker, and, most importantly can be coloured by CSS thus avoiding multiple copies of background images for the different colours.

It's a bit of a pain to modify the font files, but certainly do-able. Use FontForge to edit and generate the .ttf font and fontsquirrel to generate the modified web font set from that. There's a learning curve with those tools and there's likely a lot of trial and error to figure it all out.
Member
Registered: Aug 2016
Posts: 2
Giant thanks for your replay!


In a few sentences I got some clear info how to act.

Below is the how-to for nobs as me:

-Edit your desired symbols taken from fbicon.ttf font (could not to do it in FontForge, sinds this font seems to be empty in that program, idono why...) and export the edits as a new .ttf
-Go to fontsquirrel, upload and convert this .ttf file to the new .eot, .woff, .woff2 Use Expert options and tweak with the settings. Check .ttf if it is not empty.
-Replace these files (rename old ones before) in the Resources folder of your website. Refresh the browser. Tweak the position/opacity/color etc of the new symbols in the the <head> on your wpage (but not in the original floatbox.css, its better).
It should work.

below is an example how it worked for me:

Thanks again to the Team for FB for support and great work!
All the best,


Alfredo



<style>

.fbOuterClose .fbIcon{padding:10px; margin: 15px 0 0 -25px;font: 24px/1 fbIcon; color:#fff; opacity: 0.90;}

.fbx a.fbPrev2,.fbx a.fbNext2{
position:absolute; background-color:#000; opacity: 0.25; padding:10px;
}

.fbx a.fbPrev2{
left:0;padding-left:5px; border-radius:0 0 0 0;
}
.fbx a.fbNext2{
right:0;padding-right:5px; border-radius: 0 0 0 0;
}

.fbPrev2 .fbIcon,.fbNext2 .fbIcon{
font:5px; color: #fff;
}

</style>

Page: 1