Customization

[milegeek]

Hi Andrew,

I really like this theme and am planning to buy it for a new site. It is one of the best out-of-box themes I have seen.

Since I am not a designer, I have a few questions on customization and how easy/difficult would it be to implement.

1.) Change the height of header images.
2.) For the sidebar widgets like Recent Comments, have the background color go all the way across rather than cutting off based upon the words length.
3.) Editing the logo file.

Thanks,
Mile Geek

[satori]

Hi Mile Geek!

To answer your questions:

1). Since Fuji is a responsive theme, both the width and the height of the header image needed to be fixed in order to show correctly on different devices, including smartphones and tablets (try resizing the browser to see what I mean) – so they cannot be changed from the theme admin. However, the height of the header image can still be changed by implementing a simple change in the code: I’d need to go to “Appearance – Editor” menu, click on the “lessframework.css” file from the right list (one of the bottom-most entries), and add these lines of code into the textarea, below everything else:

@media only screen and (min-width: 1020px) { #header-image, #header-image img { height: 330px !important; } }
@media only screen and (max-width: 1020px) and (min-width: 767px) { #header-image, #header-image img { height: 242px !important; } }
@media only screen and (max-width: 767px) and (min-width: 480px) { #header-image, #header-image img { height: 150px !important; } }
@media only screen and (max-width: 479px) { #header-image, #header-image img { height: 100px !important; } }

..and replace the numbers after the “height:” selectors with your desired parameters; then click “Save”.

Just in case – if by “header images” you meant the featured images above content in posts – then it’s much simpler – their height is adjusted automatically depending on the uploaded image :)

2). Again, since this is a design feature of the theme, we will need to add a small piece of code: go to “Appearance – Editor” menu, click on the “style.css” file from the right list (one of the bottom-most entries), and add these lines of code into the textarea, below everything else:

.widget-sidebar h3 { width: 100% !important; }

then click “Save”.

3). This one is easy :) The logo is an image; you can change the logo image and upload any image you want (in .jpg or .png format) in the “Page Elements” tab of the “Theme Options” admin menu.

If you have more questions, do not hesitate to ask!

Sincerely,
Andrew | Satori

[satori]

By the way – if you meant that you want to tweak the original logo file from the theme preview – you can simply download it (right-click and “Save As”) and open in a graphic editor which supports layered png files – my favourite is Fireworks by Adobe.

[Author]

Posts