- #Wordpress theme 2017 header non responsive how to#
- #Wordpress theme 2017 header non responsive install#
- #Wordpress theme 2017 header non responsive update#
- #Wordpress theme 2017 header non responsive code#
#Wordpress theme 2017 header non responsive code#
– Intermediateīefore we go into the advanced steps of messing around with our own code and the page templates of the theme itself, let’s take a look at the out of the box functionality. Also making bigger changes to the design.
#Wordpress theme 2017 header non responsive install#
So head over to the appropriate installation of WordPress, search for the theme and install it. If you want to use this guide to set up a good looking version of the Twenty Seventeen theme on your live website, I would recommend using a (local) development version of WordPress, or a staged version of your site first.
With the things that have changed in the last year in WordPress, it seems like perfect timing to make another one on the Twenty Seventeen theme.
#Wordpress theme 2017 header non responsive how to#
For last year’s theme Twenty Sixteen, we did a comprehensive guide that showed you how to master it, or any theme. If you’re more of a visual person, I’ve recorded this video that walks through this entire process as well.How To Master Twenty Seventeen (Or Any WordPress Theme in 2017)Īnother year, another official theme released by WordPress, this time of course it is Twenty Seventeen. If you are using the Refined or Captivating theme, navigate to Appearance > Customize > Additional CSS, paste this code and publish: Once you’re finished making those changes, click SAVE and you’re ready to go!
#Wordpress theme 2017 header non responsive update#
Update the width here to be exactly half of your uploaded logos width. Look in your style.css file for this section of code: You’ll also need to make some adjustments to the width of the title space to make sure everything stays proportionate. Go back to APPEARANCE > EDITOR and you’ll land on the style.css file for your theme. You’ll need to adjust the settings in two places. First, you’ll for the section of your site that looks similar to this:Īll you’ll want to do here is set the height to exactly half of whatever height you’ve changed your functions file to be. However…until you make changes to your CSS file, your new logo/header image might look a little squashed. A few more changesĪt this point, you could navigate back to the APPEARANCE > CUSTOMIZE option and click on the header image and see that your updated dimensions are there and it will let you upload your logo without cropping. If you would like the logo/header image to appear on your site at 200×200, you would change the numerical value of both the width and the height to 400px, exactly double what you want to be shown, and hit save. Then you’ll scroll down until you see a section of code that looks like this: Go to APPEARANCE > EDITOR > THEME FUNCTIONS. To change the upload size for your logo you’ll want to edit your Theme Functions file. If you find that you need a larger file size, get with your designer and they can provide a larger file for you if needed. A 200 x 200 pixel image can NOT be enlarged to 400 x 400 to “make it bigger.” This causes skewing and blurriness in the image which is the opposite of what we want. Keep in mind that you can not increase an image size without changing the entire size of the photo. For example, if you’re wanting to upload a square logo that is 200 x 200 pixels wide you will actually upload it at 400 x 400. This allows for the image quality to appear in higher resolution while still shrinking the image down so that it doesn’t appear too large. While the upload size for this header is large, the actual display size is exactly half of what you’re uploading.įor example…if you’re uploading a 900 x 420 header, the display on your site is only going to show at 450 x 210. This seems large, doesn’t it? That’s because it’s geared to be sharper and appear more clearly on all retina display screens. In our theme, Dainty, the default dimensions for the header are set at 900 x 420 pixels. Today, we’re going to talk about how you can resize your logo within your theme files for the themes that come with a retina quality logo included.įirst things first, always make sure that before you make any kind of changes to your sites files that you make a copy and save it as a backup. Sooner, rather than later, everyone and everything will be on a sharper, clearer monitor. While not everyone has made that big leap from standard display to retina, it’s the up and coming thing.