Want responsive but not wide not for large screens?

FirmaSite theme is using Bootstrap responsive feature. I suggest you to read that linked article about what is responsive and how our feature working. Its a good feature but what is solution if you dont want too much wide site for Large displays (1200px and up)? Its actually simple:

@media (min-width: 1200px) { 
.container { width: 940px; }
}

You can use those css codes in your Custom Css setting. This will make your site’s width fixed for Default (980px and up) and Large displays (1200px and up).

Tips & Tricks | Ünsal Korkmaz | | 1 Comment

How to use Google Fonts only on headers

In FirmaSite theme, Google Font selection is affecting all your text font. Maybe you want to use an extreme font that looks good only on big texts like headers. For example; This site is using Ubuntu Condensed named Google Font. If you check our site’s codes you will see this line:

body { font-family: Ubuntu Condensed,sans-serif !important;}

body tag affects all texts in your site but we want to use Google Font on only headers. So we need to define new fonts for body then we need to use our Google Font for headers:

body { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important; }
h1,h2,h3,h4,h5,h6 { font-family: Ubuntu Condensed,sans-serif !important; }

If you want different font for your body, you can check font stacks from cssfontstack.com. This site is showing those font’s browser supports. ( Yeah, welcome to webmaster problems :) Sadly computers dont have same fonts installed always. This is why using Google Font on all texts is a good idea )

 Remember:

  • When you want to  use different Google Font, you need to change your header’s font family with new font name too.
  • You have to use !importantwhen defining fonts. Just check example above.
Tips & Tricks | Ünsal Korkmaz | | Leave a comment

Making your logo-text more cool

When you install FirmaSite theme, you will see your site’s name looks like logo in top-left header. Example:
FirmaSite Theme

If you are not planning to use an image logo, you can make logo-text a bit cooler looking with text shadow. Example:
FirmaSite Theme

 

Solution:

Add this css codes to your Custom Css section in your Theme Customizer:

.logo-text {
	text-shadow: 0 0.01em 0.05em #666,0 0.06em 0em #999,0 0.15em 0.2em rgba(0,0,0,0.75);
}

This code makes your logo-text a bit cooler :)
Live example: http://unsalkorkmaz.com/

Tips & Tricks | Ünsal Korkmaz | | Leave a comment | custom-css

How to fix big logo problem

Sometimes you need to use big image files but need to display it smaller. For example this website’s logo is bigger than what i want to display:

firmasite-logo

Solution:

Add this css codes to your Custom Css section in your Theme Customizer:

#logo-img {
max-height: 110px;
width:auto;
}

This code makes your logo will display with maximum 110px height. You can change 110 number in this code to any height you want.

Tips & Tricks | Ünsal Korkmaz | | Leave a comment | custom-css

Google Fonts limiting by Subsets

You can define subset thats limiting google fonts
Default: 'latin-ext' means theme will only show fonts that have latin-ext support and will load latin-ext while calling that font.
You can use multi subsets with comma seperated. Example:

define('FIRMASITE_SUBSETS', 'cyrillic,cyrillic-ext');

You dont need to define latin. For latin only you can define as empty:

define('FIRMASITE_SUBSETS', '');

Options:

  • Cyrillic: cyrillic
  • Cyrillic Extended: cyrillic-ext
  • Greek: greek
  • Greek Extended: greek-ext
  • Khmer: khmer
  • Latin Extended: latin-ext
  • Vietnamese: vietnamese

 Note: We recommend you to use a Child Theme for this tip.

Tips & Tricks | Ünsal Korkmaz | | Leave a comment | child-php