ehren. Posted July 31, 2014 Share Posted July 31, 2014 Chameleon Dark // ipsfocus.com View File Chameleon Dark by ipsfocus Chameleon Dark is an adaptive skin which uses semi-transparent "frosted glass" content boxes, allowing your background image to partially show through. This allows you to easily customize the genre of the theme by changing only the background image. The header collapses on-scroll, and stays at the top of the screen for easy access. Themes features Theme Settings Easily enable, disable or modify theme features such as background images, logos, social media links, guest messages and colors. This makes modifications and upgrades very simple since little code changes are required. Sticky, shrinking header The header shrinks in size and sticks to the top of the page for easy access to user controls and the board index. Frosted Glass content boxes Your background image is displayed beneath your content boxes which have a frosted glass effect (available in all modern browsers except IE and Edge). Background picker If enabled, your members can choose their own background image from a predefined selection and their choice is saved via cookies. Guest message A customizable message can be shown to guests, prompting them to either register or login to your forum. Two designs, "billboard" and "alert" (shown) are available. Social links Over 20 social links can be enabled/disabled and customized to your own URL, allowing you to easily link to your social network pages (facebook, twitter, etc). If your site doesn't exist, it's easy to add custom icons to the list! HTML logo with slogan Easily add/edit your text logo and slogan from within the theme settings. If required, the text can be replaced by an image instead. Mega Footer A mega footer with configurable column numbers and content can be enabled and customized all within the theme settings. High quality on every screen! By using scalable fonts and css effects to create the theme, it'll look great on any screen - even ones with high resolutions! Want to see more? Check out the screenshots and live demo on IPSFocus! Submitter ehren. Submitted 07/31/2014 Category Dark Themes Link to comment
sijad Posted July 31, 2014 Share Posted July 31, 2014 very nice skin, good luck with sales ;) ehren. 1 Link to comment
ehren. Posted August 4, 2014 Author Share Posted August 4, 2014 Thanks sijad! sijad 1 Link to comment
peter.bond Posted November 5, 2015 Share Posted November 5, 2015 Chameleon Dark // ipsfocus.com View File Chameleon by ipsfocus Chameleon Dark is an adaptive skin which uses semi-transparent "frosted glass" content boxes, allowing your background image to partially show through. This allows you to easily customize the genre of the theme by changing only the background image. The header collapses on-scroll, and stays at the top of the screen for easy access. Themes features Theme Settings Easily enable, disable or modify theme features such as background images, logos, social media links, guest messages and colors. This makes modifications and upgrades very simple since little code changes are required. Sticky, shrinking header The header shrinks in size and sticks to the top of the page for easy access to user controls and the board index. Frosted Glass content boxes Your background image is displayed beneath your content boxes which have a frosted glass effect (available in all modern browsers except IE and Edge). Background picker If enabled, your members can choose their own background image from a predefined selection and their choice is saved via cookies. Guest message A customizable message can be shown to guests, prompting them to either register or login to your forum. Two designs, "billboard" and "alert" (shown) are available. Social links Over 20 social links can be enabled/disabled and customized to your own URL, allowing you to easily link to your social network pages (facebook, twitter, etc). If your site doesn't exist, it's easy to add custom icons to the list! HTML logo with slogan Easily add/edit your text logo and slogan from within the theme settings. If required, the text can be replaced by an image instead. Mega Footer A mega footer with configurable column numbers and content can be enabled and customized all within the theme settings. High quality on every screen! By using scalable fonts and css effects to create the theme, it'll look great on any screen - even ones with high resolutions! Want to see more? Check out the screenshots and live demo on IPSFocus! Submitter ehren. Submitted 07/31/2014 Category Dark Themes Compatibility 4.24.34.4 Link to comment
ehren. Posted November 6, 2015 Author Share Posted November 6, 2015 7 hours ago, peter.bond said: Just downloaded it - but need it for 3.4.8 please! Many thanks! Hello, You can download earlier versions by scrolling to the bottom and pressing the "See changelog" button next to "Whats new in Version 4.1.2" :) Link to comment
Alistair Hudson Posted July 4, 2016 Share Posted July 4, 2016 Hi - I purchased this theme through this IPS website. Is there a way to get registered on the IPSFocus webite as a customer? Link to comment
ehren. Posted July 4, 2016 Author Share Posted July 4, 2016 1 hour ago, Alistair Hudson said: Hi - I purchased this theme through this IPS website. Is there a way to get registered on the IPSFocus webite as a customer? I've replied to your PM. Link to comment
Alistair Hudson Posted July 4, 2016 Share Posted July 4, 2016 13 minutes ago, ehren. said: I've replied to your PM. Much appreciated! Epic theme! ehren. 1 Link to comment
Alistair Hudson Posted December 8, 2016 Share Posted December 8, 2016 (edited) Theme is broken after this most recent update @ehren. Edited December 8, 2016 by Alistair Hudson Link to comment
Alistair Hudson Posted December 8, 2016 Share Posted December 8, 2016 This fixed it for me.. ehren. 1 Link to comment
DannyPhantom Posted May 29, 2017 Share Posted May 29, 2017 (edited) I would like to blue articles and the comment boxes, how I can do this if this could be posaible? I had found this script: {{if theme.bonusToggle}} if (detectDevice() > 25){ // Add blurred elements only on desktop var addBlurTo = ".ipsBreadcrumb, #header, #userBar, #ipsf_picker, .ipsButtonBar, .ipsfocus_megaFooter, .ipsWidget, .ipsPageHeader, #ipsLayout_footer, {{if theme.simpleTopicLayout}}.cTopic .ipsBox.cPost, {{endif}} .ipsfocus_guestBillboard"; $( addBlurTo ).prepend( "<div class='blur-image-wrap'><div class='blur-image'></div></div>" ); $( ".blur-image-wrap").each(function(){ // Windows offset needs to be different due to scrollbar if (navigator.userAgent.indexOf('Mac OS X') != -1) { // Mac var boxPositionTop = $(this).offset().top - 5; var boxPositionLeft = $(this).offset().left - 5; } else { // PC var boxPositionTop = $(this).offset().top + 3; var boxPositionLeft = $(this).offset().left + 3; } $(this).css({ "background-position" : "-" + boxPositionLeft + "px -" + boxPositionTop + "px" }); }); } {{endif}} Edited May 29, 2017 by DannyPhantom Link to comment
ehren. Posted May 29, 2017 Author Share Posted May 29, 2017 1 minute ago, DannyPhantom said: I would like to blue articles and the comment boxes, how I can do this if thia could be posaible? Can you please post a link to your articles and comment box pages? Just so I can check the code Link to comment
DannyPhantom Posted May 29, 2017 Share Posted May 29, 2017 Our new site is not online at the moment, I had take a look on thw demo page, I thought this is an issue. Will this theme updated to 4.2? When you like I write you a pm Link to comment
ehren. Posted May 29, 2017 Author Share Posted May 29, 2017 9 hours ago, DannyPhantom said: Will this theme updated to 4.2? Of course. All of my themes will be Link to comment
imJexs Posted April 7, 2018 Share Posted April 7, 2018 (edited) Hey @ehren. , I just wanted to check if you have any sort of ETA for the 4.3 updates and if you're already working on them. I know 4.3 is still in beta, but I'd love to be able to upgrade ASAP but that won't be possible as the search functionality is broken on the theme. Thank you for any updates. Love your work! Edited April 7, 2018 by pndemc Link to comment
ehren. Posted April 8, 2018 Author Share Posted April 8, 2018 3 hours ago, pndemc said: Hey @ehren. , I just wanted to check if you have any sort of ETA for the 4.3 updates and if you're already working on them. I know 4.3 is still in beta, but I'd love to be able to upgrade ASAP but that won't be possible as the search functionality is broken on the theme. Thank you for any updates. Love your work! Hello, The 4.3 updates will be started once 4.3.0 Final is released. My themes have never supported beta versions, sorry about that! I'll aim to have the themes updated within the first week of 4.3.0 though Link to comment
GTAPoliceMods Posted November 30, 2019 Share Posted November 30, 2019 (edited) @ehren. Hi, just purchased this theme and I am having some issues. How can I edit the theme to fit the entire background page? At the moment the theme stops half way through the forums (http://prntscr.com/q45ts1) Also the image seems to be way too zoomed in, doesn't matter what picture I upload. What resolution does the background image need to be? Thank you Edited November 30, 2019 by GTAPoliceMods Link to comment
ehren. Posted December 2, 2019 Author Share Posted December 2, 2019 Hi @GTAPoliceMods There's a tutorial teaching you how to edit the background on the ipsfocus website. I've copy/pasted it here for you which should hopefully help you custimize your background 🙂 ============ Due to Chameleons blur and gradient effects, the process for adding backgrounds requires an extra step compared to other themes. ----- This tutorial assumes I have uploaded an image under the "Background Picker" tab, in the "Image 2" slot. The image is 1600px in width and 1667px in height. These 3 values are necessary for this tutorial. Once you have uploaded your image, return to your theme list and press "Edit HTML and CSS". Choose the CSS tab, and open custom.css. This file will be pre-filled with background image sizes. Since we uploaded the image to "Image 2", all of our classes will be prefixed with .ipsfocus_bg2 If you have disabled the background picker, replace .ipsfocus_bgx with .ipsApp ----- To scale the image so it occupies 100% browser width (this is the default setting), use the following but replace 1600 and 1667 with your own image dimensions. {{if theme.picker_i2}} .ipsfocus_bg2 .background, .ipsfocus_bg2 .box-blur{ background-size: auto calc(1667 / 1600 * 100vw); } .ipsfocus_bg2 .box-blur-image{ max-height: calc(1667 / 1600 * 100vw); } {{endif}} You can stop the tutorial at this stage if you just needed to change the image dimensions. The rest of the tutorial will explain how to customize the background further, however it's not necessary to follow any more steps. To use a fixed image height, use this code instead and replace 1400px with any pixel value - it doesn't need to match the actual height of the image which you uploaded. Any value will work. {{if theme.picker_i2}} .ipsfocus_bg2 .background, .ipsfocus_bg2 .box-blur{ background-size: auto 1400px; } .ipsfocus_bg2 .box-blur-image{ max-height: 1400px; } {{endif}} To remove the gradient which is used to fade your image into a hex colour, add the following to the end of custom.css .ipsfocus_bg2 .background:before, .ipsfocus_bg2 .box-blur:after{ display: none; } To use a fixed image when the page is scrolled, add the following to the end of custom.css. Due to the CPU power required, the blur effect (in browsers which don't support backdrop-filter) is removed when background images are changed to 'fixed'. .ipsfocus_bg2 .background{ position: fixed; } .ipsfocus_bg2 .box-blur{ display: none; } To remove the pattern overlay, add this to the end of custom.css .ipsfocus_bg2 .background:after{ display: none; } If you want to use a repeating pattern instead of a large background image, add this to the end of custom.css. The 500px value is the height of the pattern which you uploaded: .ipsfocus_bg2 .background, .ipsfocus_bg2 .box-blur-image:before{ background-repeat: repeat; background-size: auto 500px; } .ipsfocus_bg2 .box-blur-image{ max-height: none; } /* Remove gradient and overlay for patterns */ .ipsfocus_bg2 .background:before, .ipsfocus_bg2 .background:after, .ipsfocus_bg2 .box-blur:after{ display: none; } Link to comment
GTAPoliceMods Posted December 11, 2019 Share Posted December 11, 2019 On 12/1/2019 at 9:11 PM, ehren. said: Hi @GTAPoliceMods There's a tutorial teaching you how to edit the background on the ipsfocus website. I've copy/pasted it here for you which should hopefully help you custimize your background 🙂 ============ Due to Chameleons blur and gradient effects, the process for adding backgrounds requires an extra step compared to other themes. ----- This tutorial assumes I have uploaded an image under the "Background Picker" tab, in the "Image 2" slot. The image is 1600px in width and 1667px in height. These 3 values are necessary for this tutorial. Once you have uploaded your image, return to your theme list and press "Edit HTML and CSS". Choose the CSS tab, and open custom.css. This file will be pre-filled with background image sizes. Since we uploaded the image to "Image 2", all of our classes will be prefixed with .ipsfocus_bg2 If you have disabled the background picker, replace .ipsfocus_bgx with .ipsApp ----- To scale the image so it occupies 100% browser width (this is the default setting), use the following but replace 1600 and 1667 with your own image dimensions. {{if theme.picker_i2}} .ipsfocus_bg2 .background, .ipsfocus_bg2 .box-blur{ background-size: auto calc(1667 / 1600 * 100vw); } .ipsfocus_bg2 .box-blur-image{ max-height: calc(1667 / 1600 * 100vw); } {{endif}} You can stop the tutorial at this stage if you just needed to change the image dimensions. The rest of the tutorial will explain how to customize the background further, however it's not necessary to follow any more steps. To use a fixed image height, use this code instead and replace 1400px with any pixel value - it doesn't need to match the actual height of the image which you uploaded. Any value will work. {{if theme.picker_i2}} .ipsfocus_bg2 .background, .ipsfocus_bg2 .box-blur{ background-size: auto 1400px; } .ipsfocus_bg2 .box-blur-image{ max-height: 1400px; } {{endif}} To remove the gradient which is used to fade your image into a hex colour, add the following to the end of custom.css .ipsfocus_bg2 .background:before, .ipsfocus_bg2 .box-blur:after{ display: none; } To use a fixed image when the page is scrolled, add the following to the end of custom.css. Due to the CPU power required, the blur effect (in browsers which don't support backdrop-filter) is removed when background images are changed to 'fixed'. .ipsfocus_bg2 .background{ position: fixed; } .ipsfocus_bg2 .box-blur{ display: none; } To remove the pattern overlay, add this to the end of custom.css .ipsfocus_bg2 .background:after{ display: none; } If you want to use a repeating pattern instead of a large background image, add this to the end of custom.css. The 500px value is the height of the pattern which you uploaded: .ipsfocus_bg2 .background, .ipsfocus_bg2 .box-blur-image:before{ background-repeat: repeat; background-size: auto 500px; } .ipsfocus_bg2 .box-blur-image{ max-height: none; } /* Remove gradient and overlay for patterns */ .ipsfocus_bg2 .background:before, .ipsfocus_bg2 .background:after, .ipsfocus_bg2 .box-blur:after{ display: none; } @ehren.Thank you for the tutorial and I apologize for the delay in response! I tried messing with the settings in the Theme but is there anyway for me to edit the amount of transparency in the overall background? In my opinion there is too much transparency within our forums. Thank you! Link to comment
ehren. Posted December 11, 2019 Author Share Posted December 11, 2019 3 minutes ago, GTAPoliceMods said: I tried messing with the settings in the Theme but is there anyway for me to edit the amount of transparency in the overall background? In my opinion there is too much transparency within our forums. Adding this to custom.css should do the trick! .ipsBox:not( .ipsBox_transparent ):not( .ipsModerated ), .ipsBox, .ipsPageHeader, .focus-topic-compact .focus-topic, .ipsPager, .ipsWidget, .ipsBox_alt, #comments, .focus-pickerWrap, .ipsfocus_megaFooter{ background-color: {hextorgb="area_background_reset" opacity="0.9"}; } Change the 0.9 value until you're happy with the result. It should be between 0 and 1. Joy Rex and GTAPoliceMods 1 1 Link to comment
the real dubwhizz Posted October 25, 2020 Share Posted October 25, 2020 (edited) ive got multiple errors with this theme, please see link http://www.dubforce.net/forums/index.php?/topic/28911-car-history-whats-yours/ both theme and boards are latest version. edit: just realised you probably cant see the forum without logging in, so attaching a grab Edited October 25, 2020 by the real dubwhizz Link to comment
ehren. Posted October 26, 2020 Author Share Posted October 26, 2020 Hi @the real dubwhizz Did you upgrade the Chameleon theme from 4.4 to 4.5, or was this a fresh install? Due to the significant changes between the 4.4 and 4.5 version, a fresh install is suggested. Link to comment
IkkleGemz Posted July 6, 2021 Share Posted July 6, 2021 Great theme. Is there a way to change the colour of the NEW icon when there are new posts? Link to comment
ehren. Posted July 7, 2021 Author Share Posted July 7, 2021 10 hours ago, IkkleGemz said: Great theme. Is there a way to change the colour of the NEW icon when there are new posts? Hi @IkkleGemz Add the following to your custom.css file and change the hex value :root{ --new-badge--background: #000000; } Link to comment
Recommended Posts