Knowledgebase: Flexsitez - Custom Theme Image/Buttons
Flexsitez - Custom Theme Images/Buttons
Posted by - NA - on 09 June 2011 01:04 PM
Custom Theme Images/Buttons
When uploading images to act as Cutom Theme Buttons/Icons, make sure that the file names have NO numbers in their names, as this will cause you problems down the road! :)
The Custom Theme Image/Button feature allows you to create and/or upload your own custom images to use as links to different pages of your choice! These could be pages such as Facebook, Twitter, Pinterest, or other social networking sites, your other websites, or anything else you would like to link out to!
The first thing you need to do is upload the new icon to the area. If you are replacing an existing icon, make sure you note all of the settings before you remove it!
Once you have uploaded your different images, you will see them all listed under the Uploaded Custom Link Images heading.
Each of the images is clickable, and will open a hidden customization menu. The first setting you will see is the Custom Image Link Position setting. This can be set to 12 different positions on the page, placing the image nearly anywhere from the top to bottom of the page!
The next section is the Edit Image Link Settings area. Here you would edit the settings if you would like the image to act as a link.
For example, if you'd like the image to take clients to your Facebook page when clicked you would enter the information in the Link Address field.
QUICK TIP: If you are adding an RSS button your rss feed location is http://YOURBLOGSITEURL/feed/ - i.e. - if our blogsite is located at http://www.portfoliositez.com/flexsitez/ then the feed url is http://portfoliositez.com/flexsitez/feed/
You can also adjust your Image Link Rollover Animation, which can be set to None, Slide Right, Slide Left, Slide Up, Slide Down, or Fade In, as well as the Animation Amount, which is the amount in pixels the image slides, or the amount in opacity the image fades in.
There is a NEW option to add a Hover Image which will appear OVER the original on hover!
For more HOVER feature information, please review this article: http://portfoliositez.com/support/index.php?/Knowledgebase/Article/View/429/79/flexsitez---custom-theme-imagesbuttons-hover-feature
Next, you will see is the Advanced Settings area.
By default, if more then one image is selected for a position they will align with 5px of space in between based on their order number below. We recommend not changing these settings unless you are an advanced user. However, if you do feel you want to change them, here is a brief overview of the settings:
Order Number: This is the order number of the image. This is used to determine which image should appear first if there is more than one image for a position, i.e., Browser Top Left.
Z-Index: This is the stacked position of the element, it determines what image appears on top or bottom when overlapping. I higher number will appear on top of an element with a lower z index in the same position. The Z Index can be a number between 0 and 9,999.
Bottom Margin: This is the spacing between this image and the one below it if more then one image is set to the same location, i.e., Browser Top Left.
Side Margin: This controls how much the button is hidden (in pixels) behind the browser sides or content panel initially. For example, if you want to have a button animate out 20 pixels you would set the side margin to -20 so it starts out hidden by 20 pixels initially.
Image Top Adjustment: You can use this number to move the image up and down from its current location. Use a positive number to move it down and a negative to move it up.
Image Left Adjustment: You can use this number to move the image left and right from its current location. Use a positive number to move it left and a negative to move it right.
Gallery Top Adjustment: Since the slideshow header and gallery header will be different height this will allow you to adjust the custom image vertical location on just the gallery pages.
The final area is the Custom Link Image Per Page Adjustment area. Adjusting these settings may be necessary if you are utilizing the Custom Pages feature (http://www.portfoliositez.com/support/index.php?_m=knowledgebase&_a=viewarticle&kbarticleid=507)
Here you can set each page THEME to use either the Global settings, or adjust the Left and Top Adjustments for each page theme individually!
***If you have deleted and need to replace the default theme icons, please visit this article for help!! http://www.portfoliositez.com/support/index.php?_m=knowledgebase&_a=viewarticle&kbarticleid=469 **