Jump to content

Xtra

Administrators
  • Content count

    161
  • Joined

  • Last visited

Community Reputation

11 Good

About Xtra

  • Rank
    Advanced Member

Recent Profile Visitors

1,397 profile views
  1. purchase enquiry

    Hi , if you wish to use the theme on another site then you need to purchase again.License is only for one site.
  2. Akuma small art

    Here's an akuma small art i made
  3. Kurt Cobain signature

    Here's a sig i made some time ago,used to love making these.
  4. Heres something i made a while ago,feel free to use this as a desktop background if you like.
  5. 4.2 Black is here with a theme for your forum and acp! Customize your login page with your own branding and logo! Easy to use settings without touching a line of code! Dark theme for front and back of your site! Easy to match the branding of your site/business! Very low price! Buy it now HERE!
  6. Using webfonts

    There are many ways you can use fonts on your website,one is to use services such as google fonts where you can simply reference the font from googles repository using their cdn.Another way is to obtain the webfont files yourself and place them onto a server of your own.These files can be stored in a location of your choosing but then you will need to reference these in your css like so.For this example i have used the popular Lato font. /* Webfont: Lato-Black */@font-face { font-family: 'LatoWebBlack'; src: url('http://mysite.com/fonts/Lato-Black.eot'); /* IE9 Compat Modes */ src: url('http://mysite.com/fonts/Lato-Black.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('http://mysite.com/fonts/Lato-Black.woff2') format('woff2'), /* Modern Browsers */ url('http://mysite.com/fonts/Lato-Black.woff') format('woff'), /* Modern Browsers */ url('http://mysite.com/fonts/Lato-Black.ttf') format('truetype'); font-style: normal; font-weight: normal; text-rendering: optimizeLegibility; } /* Webfont: Lato-BlackItalic */@font-face { font-family: 'LatoWebBlack'; src: url('http://mysite.com/fonts/Lato-BlackItalic.eot'); /* IE9 Compat Modes */ src: url('http://mysite.com/fonts/Lato-BlackItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('http://mysite.com/fonts/Lato-BlackItalic.woff2') format('woff2'), /* Modern Browsers */ url('http://mysite.com/fonts/Lato-BlackItalic.woff') format('woff'), /* Modern Browsers */ url('http://mysite.com/fonts/Lato-BlackItalic.ttf') format('truetype'); font-style: italic; font-weight: normal; text-rendering: optimizeLegibility; } /* Webfont: Lato-Bold */@font-face { font-family: 'LatoWebBold'; src: url('http://mysite.com/fonts/Lato-Bold.eot'); /* IE9 Compat Modes */ src: url('http://mysite.com/fonts/Lato-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('http://mysite.com/fonts/Lato-Bold.woff2') format('woff2'), /* Modern Browsers */ url('http://mysite.com/fonts/Lato-Bold.woff') format('woff'), /* Modern Browsers */ url('http://mysite.com/fonts/Lato-Bold.ttf') format('truetype'); font-style: normal; font-weight: normal; text-rendering: optimizeLegibility; } /* Webfont: Lato-BoldItalic */@font-face { font-family: 'LatoWebBold'; src: url('http://mysite.com/fonts/Lato-BoldItalic.eot'); /* IE9 Compat Modes */ src: url('http://mysite.com/fonts/Lato-BoldItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('http://mysite.com/fonts/Lato-BoldItalic.woff2') format('woff2'), /* Modern Browsers */ url('http://mysite.com/fonts/Lato-BoldItalic.woff') format('woff'), /* Modern Browsers */ url('http://mysite.com/fonts/Lato-BoldItalic.ttf') format('truetype'); font-style: italic; font-weight: normal; text-rendering: optimizeLegibility; } /* Webfont: Lato-Hairline */@font-face { font-family: 'LatoWebHairline'; src: url('http://mysite.com/fonts/Lato-Hairline.eot'); /* IE9 Compat Modes */ src: url('http://mysite.com/fonts/Lato-Hairline.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('http://mysite.com/fonts/Lato-Hairline.woff2') format('woff2'), /* Modern Browsers */ url('http://mysite.com/fonts/Lato-Hairline.woff') format('woff'), /* Modern Browsers */ url('http://mysite.com/fonts/Lato-Hairline.ttf') format('truetype'); font-style: normal; font-weight: normal; text-rendering: optimizeLegibility; } /* Webfont: Lato-HairlineItalic */@font-face { font-family: 'LatoWebHairline'; src: url('http://mysite.com/fonts/Lato-HairlineItalic.eot'); /* IE9 Compat Modes */ src: url('http://mysite.com/fonts/Lato-HairlineItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('http://mysite.com/fonts/Lato-HairlineItalic.woff2') format('woff2'), /* Modern Browsers */ url('http://mysite.com/fonts/Lato-HairlineItalic.woff') format('woff'), /* Modern Browsers */ url('http://mysite.com/fonts/Lato-HairlineItalic.ttf') format('truetype'); font-style: italic; font-weight: normal; text-rendering: optimizeLegibility; } /* Webfont: Lato-Heavy */@font-face { font-family: 'LatoWebHeavy'; src: url('http://mysite.com/fonts/Lato-Heavy.eot'); /* IE9 Compat Modes */ src: url('http://mysite.com/fonts/Lato-Heavy.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('http://mysite.com/fonts/Lato-Heavy.woff2') format('woff2'), /* Modern Browsers */ url('http://mysite.com/fonts/Lato-Heavy.woff') format('woff'), /* Modern Browsers */ url('http://mysite.com/fonts/Lato-Heavy.ttf') format('truetype'); font-style: normal; font-weight: normal; text-rendering: optimizeLegibility; } /* Webfont: Lato-HeavyItalic */@font-face { font-family: 'LatoWebHeavy'; src: url('http://mysite.com/fonts/Lato-HeavyItalic.eot'); /* IE9 Compat Modes */ src: url('http://mysite.com/fonts/Lato-HeavyItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('http://mysite.com/fonts/Lato-HeavyItalic.woff2') format('woff2'), /* Modern Browsers */ url('http://mysite.com/fonts/Lato-HeavyItalic.woff') format('woff'), /* Modern Browsers */ url('http://mysite.com/fonts/Lato-HeavyItalic.ttf') format('truetype'); font-style: italic; font-weight: normal; text-rendering: optimizeLegibility; } /* Webfont: Lato-Italic */@font-face { font-family: 'LatoWeb'; src: url('http://mysite.com/fonts/Lato-Italic.eot'); /* IE9 Compat Modes */ src: url('http://mysite.com/fonts/Lato-Italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('http://mysite.com/fonts/Lato-Italic.woff2') format('woff2'), /* Modern Browsers */ url('http://mysite.com/fonts/Lato-Italic.woff') format('woff'), /* Modern Browsers */ url('http://mysite.com/fonts/Lato-Italic.ttf') format('truetype'); font-style: italic; font-weight: normal; text-rendering: optimizeLegibility; } /* Webfont: Lato-Light */@font-face { font-family: 'LatoWebLight'; src: url('http://mysite.com/fonts/Lato-Light.eot'); /* IE9 Compat Modes */ src: url('http://mysite.com/fonts/Lato-Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('http://mysite.com/fonts/Lato-Light.woff2') format('woff2'), /* Modern Browsers */ url('http://mysite.com/fonts/Lato-Light.woff') format('woff'), /* Modern Browsers */ url('http://mysite.com/fonts/Lato-Light.ttf') format('truetype'); font-style: normal; font-weight: normal; text-rendering: optimizeLegibility; } /* Webfont: Lato-LightItalic */@font-face { font-family: 'LatoWebLight'; src: url('http://mysite.com/fonts/Lato-LightItalic.eot'); /* IE9 Compat Modes */ src: url('http://mysite.com/fonts/Lato-LightItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('http://mysite.com/fonts/Lato-LightItalic.woff2') format('woff2'), /* Modern Browsers */ url('http://mysite.com/fonts/Lato-LightItalic.woff') format('woff'), /* Modern Browsers */ url('http://mysite.com/fonts/Lato-LightItalic.ttf') format('truetype'); font-style: italic; font-weight: normal; text-rendering: optimizeLegibility; } /* Webfont: Lato-Medium */@font-face { font-family: 'LatoWebMedium'; src: url('http://mysite.com/fonts/Lato-Medium.eot'); /* IE9 Compat Modes */ src: url('http://mysite.com/fonts/Lato-Medium.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('http://mysite.com/fonts/Lato-Medium.woff2') format('woff2'), /* Modern Browsers */ url('http://mysite.com/fonts/Lato-Medium.woff') format('woff'), /* Modern Browsers */ url('http://mysite.com/fonts/Lato-Medium.ttf') format('truetype'); font-style: normal; font-weight: normal; text-rendering: optimizeLegibility; } /* Webfont: Lato-MediumItalic */@font-face { font-family: 'LatoWebMedium'; src: url('http://mysite.com/fonts/Lato-MediumItalic.eot'); /* IE9 Compat Modes */ src: url('http://mysite.com/fonts/Lato-MediumItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('http://mysite.com/fonts/Lato-MediumItalic.woff2') format('woff2'), /* Modern Browsers */ url('http://mysite.com/fonts/Lato-MediumItalic.woff') format('woff'), /* Modern Browsers */ url('http://mysite.com/fonts/Lato-MediumItalic.ttf') format('truetype'); font-style: italic; font-weight: normal; text-rendering: optimizeLegibility; } /* Webfont: Lato-Regular */@font-face { font-family: 'LatoWeb'; src: url('http://mysite.com/fonts/Lato-Regular.eot'); /* IE9 Compat Modes */ src: url('http://mysite.com/fonts/Lato-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('http://mysite.com/fonts/Lato-Regular.woff2') format('woff2'), /* Modern Browsers */ url('http://mysite.com/fonts/Lato-Regular.woff') format('woff'), /* Modern Browsers */ url('http://mysite.com/fonts/Lato-Regular.ttf') format('truetype'); font-style: normal; font-weight: normal; text-rendering: optimizeLegibility; } /* Webfont: Lato-Semibold */@font-face { font-family: 'LatoWebSemibold'; src: url('http://mysite.com/fonts/Lato-Semibold.eot'); /* IE9 Compat Modes */ src: url('http://mysite.com/fonts/Lato-Semibold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('http://mysite.com/fonts/Lato-Semibold.woff2') format('woff2'), /* Modern Browsers */ url('http://mysite.com/fonts/Lato-Semibold.woff') format('woff'), /* Modern Browsers */ url('http://mysite.com/fonts/Lato-Semibold.ttf') format('truetype'); font-style: normal; font-weight: normal; text-rendering: optimizeLegibility; } /* Webfont: Lato-SemiboldItalic */@font-face { font-family: 'LatoWebSemibold'; src: url('http://mysite.com/fonts/Lato-SemiboldItalic.eot'); /* IE9 Compat Modes */ src: url('http://mysite.com/fonts/Lato-SemiboldItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('http://mysite.com/fonts/Lato-SemiboldItalic.woff2') format('woff2'), /* Modern Browsers */ url('http://mysite.com/fonts/Lato-SemiboldItalic.woff') format('woff'), /* Modern Browsers */ url('http://mysite.com/fonts/Lato-SemiboldItalic.ttf') format('truetype'); font-style: italic; font-weight: normal; text-rendering: optimizeLegibility; } /* Webfont: Lato-Thin */@font-face { font-family: 'LatoWebThin'; src: url('http://mysite.com/fonts/Lato-Thin.eot'); /* IE9 Compat Modes */ src: url('http://mysite.com/fonts/Lato-Thin.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('http://mysite.com/fonts/Lato-Thin.woff2') format('woff2'), /* Modern Browsers */ url('http://mysite.com/fonts/Lato-Thin.woff') format('woff'), /* Modern Browsers */ url('http://mysite.com/fonts/Lato-Thin.ttf') format('truetype'); font-style: normal; font-weight: normal; text-rendering: optimizeLegibility; } /* Webfont: Lato-ThinItalic */@font-face { font-family: 'LatoWebThin'; src: url('http://mysite.com/fonts/Lato-ThinItalic.eot'); /* IE9 Compat Modes */ src: url('http://mysite.com/fonts/Lato-ThinItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('http://mysite.com/fonts/Lato-ThinItalic.woff2') format('woff2'), /* Modern Browsers */ url('http://mysite.com/fonts/Lato-ThinItalic.woff') format('woff'), /* Modern Browsers */ url('http://mysite.com/fonts/Lato-ThinItalic.ttf') format('truetype'); font-style: italic; font-weight: normal; text-rendering: optimizeLegibility; } You then you need to target the elements of your theme with the font and also add this to your css file. For example body { font-family: 'yourfont' ; } I hope this tutorial has helped in some way
  7. Media Queries

    I believe many web designers still have many confusion for the responsive design . Screen resolution? CSS3 Media Queries? Device width? Screen Sizes? And so on. The rapid development of web design and electronic devices in this years which must soon lead to increase an ever expanding workload. For a while you have to be compatible with the PC, Mobile, Android and IOS, and so on. However, the fact is true, the pure web interface design, we do not need to consider too complex response. Because the responsive design rely on front-end engineers. But, we can not ignore this. If you are a team, you will be hacked by front-end developers. Well, you can use Photoshop CC directly create a file with predefined document sizes of different devices, increased design accuracy. Of course, if you do not use Photoshop, you can see the following tables. Tablet and PC Monitor Display Sizes(Data by W3C, Jan 2017) Screen Width Screen Minimal Height Statistics 768px (Tablet) 1024 px(Tablet) – Lower Lower 4.4.00% 1024 px 768 px 3.00% 1280 px 1024 px 5.00% 1280 px 800 px 4.00% 1366 px 768 px 35.00% 1920 px 1080 px 17.00% 2560 px and up 1440 px 31.60% Smartphone Display Sizes(Data by DeviceAtlas, 2016) Smartphone Screen Resolution Nokia 230, Nokia 215, Samsung Xcover 550, LG G350 240 x 320 Alcatel pixi 3, LG Wine Smart 320 x 480 Samsung Galaxy J1 (2016), Samsung Z1, Samsung Z2, Lumia 435, Alcatel Pixi 4, LG Joy, ZTE Blade G 480 x 800 Huawei Y635, Nokia Lumia 635, Sony Xperia E3 480 x 854 Samsung Galaxy J2, Moto E 2nd Gen, Sony Xperia E4, HTC Desire 526 540 x 960 iPhone 4, iPhone 4S 640 x 960 iPhone 5, iPhone 5S, iPhone 5C, iPhone SE 640 x 1136 Samsung Galaxy J5, Samsung Galaxy J3, Moto G4 Play, Xiaomi Redmi 3, Moto G 3rd Gen, Sony Xperia M4 Aqua 720 x 1280 iPhone 6, iPhone 6S, iPhone 7 750 x 1334 iPhone 6S Plus, iPhone 6 Plus, iPhone 7 Plus, Huawei P9, Sony Xperia Z5, Samsung Galaxy A5, Samsung Galaxy A7, Samsung Galaxy S5, Samsung Galaxy A9, HTC One M9, Sony Xperia M5 1080 x 1920 Samsung Galaxy Note 5, Samsung Galaxy S6, Huawei Nexus 6P, LG G5 1440 x 2560 Sony Xperia Z5 Premium 2160 x 3840 General design values with Photoshop: 750 x 1334,1080 x 1920 Well, the core mind of this article came. Or the design is a small matter, the real thing is that front-end development how to make your design support the response which requires some various things. What I am paying attention to do: Improve the responsive design efficiency with front-end developer. Responsive web design breakpoints are an important aspect of the CSS declarations that allow for different layouts to appear at various screen sizes. Try as short as possible for your code. The following code is mine (The following breakpoints are mainly used for self-made Style Sheets when using (or not) the corresponding responsive front-end framework.): 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 /* * The Standard Breakpoints. Working with fluid images. */ @media all and (max-width: 1690px) { ... } @media all and (max-width: 1280px) { ... } @media all and (max-width: 980px) { ... } @media all and (max-width: 736px) { ... } @media all and (max-width: 480px) { ... } /* * The Standard Breakpoints. But possibly this is a slightly complicated situation. */ @media all and (min-width:1200px){ ... } @media all and (min-width: 960px) and (max-width: 1199px) { ... } @media all and (min-width: 768px) and (max-width: 959px) { ... } @media all and (min-width: 480px) and (max-width: 767px){ ... } @media all and (max-width: 599px) { ... } @media all and (max-width: 479px) { ... } /* * The Standard Bootstrap 3.x Breakpoints */ @media all and (max-width: 991px) { ... } @media all and (max-width: 768px) { ... } @media all and (max-width: 480px) { ... } /* * The Standard Bootstrap 4.x Breakpoints */ @media all and (max-width: 1199px) { ... } @media all and (max-width: 991px) { ... } @media all and (max-width: 768px) { ... } @media all and (max-width: 575px) { ... } /* * The Material Design Lite (MDL) Breakpoints */ @media all and (max-width: 1024px) { ... } @media all and (max-width: 839px) { ... } @media all and (max-width: 480px) { ... } /* * Retina Breakpoints(@2x) */ @media(-webkit-min-device-pixel-ratio:1.5),(min--moz-device-pixel-ratio:1.5),(-o-min-device-pixel-ratio:3/2),(min-resolution:1.5dppx){ ... } You should take some time to ask yourself should I use a responsive framework for my site. I hope this article is helpful to you :)
  8. Hello all, we at xtrathemes are proud to announce Juggernaut! Juggernaut is a powerful theme with a lot of options for customization, Two themes 1 price! whether you like it light or dark we can cater for you here with two great options! features listed below Slider with easy to change options in acp ,show globally or forum home only subtle background overlay to add extra flair Colour change options for header bar and various accents and buttons of the site to match Smooth back to top button sticky header with user nav in desktop mode Ideal for many genre of site
  9. Hello friends, we are happy to announce a new theme to be released soon just in time for the new release ips 4.2! juggernaut is an engaging theme that allows for a content slider with many options and also a few other refinements that will subtly change the look and feel of your site. This theme has a clean professional appearance so it is ideal for any kind of site. Easy change colour options to so you can instantly match your site branding . features include Feature rich slider with settings. smooth back to top button. floating header and user controls so you can always use them. colour change options via a pic for various elements . more features to be added also and considering a dark version too. Check out the theme live in our selector at the bottom of the page! we hope you enjoy the theme!
  10. test

    this is a test event
  11. What a guy!!!

    Thanks Steve for the kind words I appreciate the feedback.Your input has helped me a lot.
  12. Background

    ok mate il try and get this finished up for you
  13. Background

    il get something done this weekend i have been really busy im also in the middle of making a new theme.
×