Jump to content

Community

ehren.

+Clients
  • Content Count

    3,039
  • Joined

  • Last visited

  • Days Won

    13

ehren. last won the day on July 25 2018

ehren. had the most liked content!

About ehren.

  • Rank
    ipsfocus.com
  • Birthday March 3

IPS Marketplace

  • Resources Contributor
    Total file submissions: 29

Recent Profile Visitors

60,092 profile views
  1. 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.
  2. 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; }
  3. I posted that in 2016. I'm aware of the increased browser upport since then 🙂
  4. I don't think the .ipsMenu and .ipsDataList classes were ever intended to be used on the one element like that (one creates menus, the other creates tables for data).. but this code will fix it in my themes 🙂 .ipsMenu[id^="elPFDrop_"]{ width: 300px; } .ipsMenu[id^="elPFDrop_"] .ipsDataItem{ width: 100%; display: block; }
  5. Just a bit of curiosity. When do you estimate your themes to be compatible with 4.4.0?

    1. ehren.

      ehren.

      I plan on having the updates out over the next 12 hours 🙂

  6. What a nice topic, happy to have helped along the way! 🙂
  7. Just set up Dimension! I really like it.

    Is there an optimal header image size for the header switcher?

    Thanks!

    Jamie

    1. ehren.

      ehren.

      Nice, thanks for the support Jamie! Since the size of the header varies depending on the size of your browser window, there isn't really an optimal size. Just make sure the file size is appropriate and you're good to go! 🙂

  8. I've worked with @Michael R over the past few years on his custom themes and he's always been a great client to work with. Nice to see the extra effort he goes to in order to keep children and prying eyes away, very dedicated. Happy holidays Mike!
  9. All ipsfocus themes have been discounted by 30% from today until November 30, 2018.
  10. Iconmoon is only used for a couple of icons if I'm not mistaken. You could quite easily overwrite them with FontAwesome icons and remove the entire iconmoon file.
  11. Hi there, I've just checked the purchase list and your username isn't listed. If you believe you've purchased this theme and renewed it in June, I'd suggest contacting the Marketplace moderators so they can look into this for you. If you are an active customer, you'll be able to download all of my updates for free 🙂
  12. Thanks Marc, nice to hear! The Support team has always been great whenever I've needed help, I just figured I'd mention this minor speed bump since it seemed to be happening every now and then. I appreciate the reply! ?
  13. Hello, I guess this is just a friendly feedback topic for the benefit of my own customers, which I'm submitting in an attempt to improve IPS Support Ticket responses. As a theme developer, customers quite often contact me with bug reports after IPS Support have told them the issue is caused by their 3rd party theme. After quickly checking the issue for myself and noticing the issue also happens with the Default IPS theme, I'm required to redirect the customer back to the IPS ticket system so the Support Staff can investigate further. This isn't a burden for myself, but I can understand the frustration from customers who are bounced between two support desks without a solution. If Support Staff could make a conscious effort to always check the Default theme before referring customers to 3rd party developers for a solution, I'm sure my customers would be greatly appreciative of the improved support times.
  14. Is the css framework outdated? Yes, absolutely. As mentioned by Charles above, it was coded 4 years ago which is ancient in terms of web coding practices, especially front-end. Floats are used to align content (and some areas even fail to clear the floats), grid containers are structured with javascript, absolute positioning is used to position the user bar, dozens of classes assign various colours and font-sizes (in px) to text, and countless hard-coded hex values are scattered throughout the css. I've made sure my theme framework has kept up with modern trends (by using flexbox and grid) to fix many of these issues, so even though the default IPS framework is outdated, it's absolutely possible to modernize it a little. But I imagine a complete re-write of the HTML, css and theme system would be priority for v5. Is a 3rd party framework like Bootstrap the solution? No - and I think plenty of people have already expressed their views as to why. Bloated files, excess classes which are never used, non-prefixed classes (such as .ips), and the pressure to keep the software compatible with the latest Bootstrap version are just a handful of reasons. IPS needs to create a clean, versatile and modern style for version 5 if communities are going to survive in the future, and I don't think a Bootstrap copy/paste layout is going to achieve that.
×
×
  • Create New...