Install XaFr Grey

Home / Themes / XaFr Grey / Install XaFr Grey

Installation guidelines:

Install on your own risk! I'm not responsible for any errors or data loss!

  1. Requires Twenty Twelve Theme installed on WordPress
  2. Download XaFr Theme archiv
  3. Unzip downloaded file
  4. Copy unzipped folder to /wp-content/themes on your webspace with a ftp-programm like FileZilla
  5. In the WordPress Backend at Appearance -> Themes -> aktivate XaFr Grey
  6. Appearance -> Customize -> Site Title & Tagline -> add Site Title and Tagline, unselect Display Header Text. Then click  save.
  7. Appearance -> Customize -> Header Image add your preferred image.
    The resolution should not be more than 960×125 pixels. With 960 pixel widht the image uses the whole widht. Example
    If the iamge should not expand over the sidebar, like on the screenshots you should pick a 720 pixel width (Example). The resolution of the header-image on the screenshots is 720×115 pixels.
  8. At Appearance -> Menus you have to change the name of the menu to menue_xafr and choose Primary Menu . Then save.


Please watch out for new theme updates here: Theme Changelog

Featured Images:

All Post Images shown in the screenshots were uploaded in a 150×150 pixel resolution


At Appearance -> Widgets you can add the XaFr Search Widget to the Sidebar.
XaFr Search Widget adds a DuckDuckGo site-search. Works with JavaScript disabled too.


Share-Buttons for Facebook, Google+ and Twitter are displayed under every post and do not send any data to social networks until they get clicked. They always link to the page they get clicked on. The images for these buttons are hosted on your own webspace. 

If you don't want these buttons, just delete single.php in the XaFr Grey Theme archiv.

Change color of navigation bar

For example blue:

Navigation bar in blue

Go to XaFr Grey Theme archiv and delete style.css. Then rename uncompressed_style.css in style.css. Open your new style.css in a texteditor look out for
/* Navigation */
.main-navigation {
	padding-left: 15px !important;
        padding-right: 15px !important;
        background: #222222 !important;
	border: 1px solid #222222 !important;
	border-radius: 6px !important;
	margin-top:0px !important;
	margin-top 0rem !important;}
.main-navigation li ul li a {
		background: #222222 !important;
		border-bottom: 0px !important;
		display: block !important;
		font-size: 11px !important;
		font-size: 0.785714286rem !important;
		line-height: 2.0 !important;
		padding: 8px 10px !important;
		padding: 0.571428571rem 0.714285714rem !important;
		width: 180px !important;
		width: 12.85714286rem !important;
		white-space: normal !important;
		color: #b9b9b9 !important;}
change at .main-navigation the lines background and border . At .main-navigation li ul li a the line background. 
Instead of the color-code #222222 you can add your desired one. If you want a blue color like in the screenshot this would be #357ebd. After that, save style.css and upload it as usual.

Links or text in the footer

To add extra text or links to the footer you have to edit the file footer.php in the XaFr Grey folder.
Right in front of
</div><!-- .site-info -->
you can add your content.