Motyw Modularity-Lite – support

Ponieważ świetny motyw WordPressa, który widzicie na tej stronie nie posiada właściwego, bezpłatnego forum pomocowego i ciężko znaleźć informacje jak poprawić błędy w podstawowym kodzie tej skóry postanowiłem na łamach tego właśnie bloga opisać jak rozwiązać niektóre problemy z motywem Modularity-Lite (English version below)

Zapraszam do lektury i zachęcam też do sugestii jeśli widzicie, że rozwiązałem jakiś problem, ale go tu nie opisałem

1. Obrazki mają float:left mimo wyśrodkowania

Zatem pierwszy problem dotyczy sposobu w jaki obrazki wyświetlają się w postach. Pomimo, iż ustawimy im wyśrodkowanie i w ekranie admin panel będą wyglądały OK, na samej stronie obrazki zawsze będą wyrównane do lewej a struktura tekstu będzie je opływać. Rozwiązanie jest mega proste i wielkie dzięki dla amistad18, który pomógł mi rozwiązać ten problem.

Odnajdujemy plik screen.css (tak, to nie literówka i to nie plik style.css, a screen.css w katalogu library/styles)  i znajdujemy linijkę:

p img {float:left; margin:1.5em 1.5em 1.5em 0;padding:0;}

a następnie usuwamy z niej fragment:

float:left;

i problem znika.

2. Czarne tło dla stron i komentarzy – jak się pozbyć?

Piszemy stronę, dodajemy formularz komentarzy i okazuje się,  że piękno tło motywu Modularity Lite jakie widzicie na tej stronie zamienia się w czarną pustkę. Jak sprawić, by w tle stron i komentarzy nie było czarnego pola, ale po prostu obrazek z tła? Rozwiązanie jest banalne !

Znajdujemy w style.css sekcję Comments i usuwamy fragment:

background: #000;

z zapisów:

h3#respond
h3#comments
#commentform

voila !

3. Tylko pierwszy post na stronie głównej wyświetla multimedia, następne już się nie pokazują – jak naprawić?

Piszemy posta, w którym mamy obrazek. Za chwilę piszemy drugiego posta, w którym też jest obrazek i nagle na stronie głównej obrazek z posta poprzedniego już się nie wyświetla. Modularity Lite ma jakąśblokadę i tylko pierwszy obrazek najnowszego posta jest wyświetlony na stronie głównej. Naprawienie tego jest bardzo łatwe:

Odnajdujemy plik apps/blog.php i fragment:

<?php if ($i == 1) {
include (THEMELIB . ‘/apps/multimedia.php’);
the_content();
}

zamieniamy na:

<?php if ($i >= 1) {
include (THEMELIB . ‘/apps/multimedia.php’);
the_content();
}

i problem rozwiązany.

4. Jak usunąć posty ze strony głównej (zobacz próbkę na stronie głównej portfolio)

Czasami może się zdarzyć, że nie będziemy chcieli wyświetlać żadnych postów na stronie głównej. By to ustawić, trzeba zedytować plik index.php i usunąć całą sekcję dotyczącą bloga a więc:

<!– Begin Blog –>
<?php include (THEMELIB . ‘/apps/blog.php’); ?>

5.  Jak zwiększyć ilość zdjęć wyświetlanych w pokazie slajdów na stronie głównej i jak zmienić je na swoje.

Wszystko co dotyczy pokazu slajdów znajduje się w odpowiednim katalogu – a więc w katalogu modularity-lite\images\slideshow mamy pliki image1.jpg …. image5.jpg i te właśnie pliki są wyświetlane. Żeby zamienić ja na swoje, trzeba po prostu zastąpić pliki imageX.jpg (gdzie X to numery od 1 do 5) swoimi plikami, pamiętając, że nazwy plików mają pozostać takie same. Pamiętajcie o rozmiarach obrazków – można je ustawić w opcjach motywu z poziomu panelu admina.

Natomiast jeśli chcemy wyświetlać w pokazie więcej niż 5 zdjęć, wtedy edytujemy plik slideshow-static.php i do fragmentu:

<ul id=”portfolio”>
<li><img src=”<?php bloginfo(‘stylesheet_directory’); ?>/images/slideshow/image1.jpg” alt=”<?php bloginfo(‘name’); ?>” /></li>
<li><img src=”<?php bloginfo(‘stylesheet_directory’); ?>/images/slideshow/image2.jpg” alt=”<?php bloginfo(‘name’); ?>” /></li>
<li><img src=”<?php bloginfo(‘stylesheet_directory’); ?>/images/slideshow/image3.jpg” alt=”<?php bloginfo(‘name’); ?>” /></li>
<li><img src=”<?php bloginfo(‘stylesheet_directory’); ?>/images/slideshow/image4.jpg” alt=”<?php bloginfo(‘name’); ?>” /></li>
<li><img src=”<?php bloginfo(‘stylesheet_directory’); ?>/images/slideshow/image5.jpg” alt=”<?php bloginfo(‘name’); ?>” /></li>
</ul>

dopisujemy kolejną identyczną linijkę zmieniając tylko nazwę pliku na image6.jpg, image7.jpg … image1000.jpg

Powinno działać !

6. Zmiana szerokości obszaru postów kosztem sidebara

Za tą operację koleny raz odpowiedzialny będzie plik screen.css w katalogu library/styles.  Należy odszukać w nim linijki span-15 (odpowiada za szerokość obszaru postów) oraz span-8 (odpowiada za szerokość sidebar’a) i odpowiednio zmodyfikować ich wartości. Pamiętajcie jednak, że całość szerokości to 900px więc wartości jakie przypiszecie span-15 i span-8 muszą w sumie dać właśnie 900px (np span-15 na 750px i span-8 na 150px).

Proste, ale maksymalnie nieintuicyjne rozwiązanie.

7. Logo zamiast tytułu bloga

W lewym górnym rogu wyświetla się tytuł bloga. Jak zamienić go na własne logo?

W header.php odnajdujemy linijki:

<!– Begin Masthead –>
<div id=”masthead”>
<h4><a href=”<?php echo get_settings(‘home’); ?>/” title=”Home”><?php bloginfo(‘name’); ?></a> <span><?php bloginfo(‘description’); ?></span></h4>
</div>

i zmieniamy je na:

<!– Begin Masthead –>
<div id=”masthead”>
<h4 class=”left”><a href=”<?php echo get_settings(‘home’); ?>/” title=”Home”><img src=”PATH TO YOUR IMAGE” alt=”YOUR IMAGE ALT TEXT” /></a>
</h4>
</div>

gdzie PATH TO YOUR IMAGE to ścieżka dostępu do pliku logo np. modularity-lite\logo.jpg

Do tego w pliku style.css trzeba dodać następujące linijki (może być gdzieś na samym dole):

h4 img {
margin-top: 10px;
margin-left: -10px;
}

margin-top i margin-left to pozycja logo w widoku strony, jeśli logo powinno być niżej/wyżej czy bardziej z prawej – kombinujcie z tymi wartościami. Działa !

8. Komentarze nie wyświetlają się poprawnie

Bywa tak, że komentarze zostawione przez użytkowników nie wyświetlają się poprawnie, uciekajądo boku, zachodzą na siebie itd. Rozwiązać ten problem mogą:

w pliku style.css zamiana:

ol.commentlist li .comment-entry{margin: -135px 0 0;border-bottom: 5px solid #eee;padding: 5px 150px 0;line-height: 2em;}

na coś bardziej rozsądnego np.

ol.commentlist li .comment-entry{margin: 5px 0 0;border-bottom: 5px solid #eee;padding: 5px 150px 0;line-height: 2em;}

lub też po prostu włączenie wyświetlania avatarów jeśli jest wyłączone (ustawia się to w opcjach).

Powinno pomóc !

ENGLISH

Modularity-Lite is a great WordPress theme. You can actually see it on this blog. Unfortunately the free version of it means you have no support forum or support whatsoever from the theme’s developers side. It’s not that easy to find answers and fix bugs that are present in the theme’s code from the moment you download it. And that is why I decided I will post a few messages to show how I solved some of the problems I had while working on this blog.

Enjoy the reading and if you see I fixed something but I didn’t describe it here – let me know

1. Images are floating left despite being centered

The first problem I present here is about the way the images are displayed in posts.

Despite we set them as centered while uploading or editing them and despite they look OK in the admin panel once you post them they will all float left and all the text will float around them as well. The solution is really easy to implement, however was not easy to find. Thanks to amistad18 who helped me fix that (and many other problems)

We edit file screen.css (yes, it’s not a typo and that is not style.css file; you will find it in librabry/styles folder) and find line:

p img {float:left; margin:1.5em 1.5em 1.5em 0;padding:0;}

then just delete the following:

float:left;

and the problem disappears.

2. Black background for pages and comments – how to get rid of?

You post a page, or have a comments template and it turns out that the beautiful background that you can see on this website is replaced with just solid black. What to do to get rid of the black background and have the bakcground image there instead? Super easy solution!

In style.css find  Comments section and delete:

background: #000;

from:

h3#respond

h3#comments

#commentform

voila !

3. Only the first post on home page displays multimedia – how to fix it?

You write a post and add an image to it. Then you write another post with a second image in it, and it turns out the image from previous post is not visible anymore. Modularity Lite is somehow blocked and only first image of the latest post will display, the rest will not. Fixing this is easy.

Find apps/blog.php file and look for:

<?php if ($i == 1) {

include (THEMELIB . ‘/apps/multimedia.php’);

the_content();

}

then replace it with:

<?php if ($i >= 1) {

include (THEMELIB . ‘/apps/multimedia.php’);

the_content();

}

problem solved.

4. How to get rid of posts from homepage (see sample in my portfolio)

Sometimes we might need to get rid of posts from main page. To set it up simply edit  index.php file and delete the blog section which is:

<!– Begin Blog –>

<?php include (THEMELIB . ‘/apps/blog.php’); ?>

5. How to replace slideshow images with your own ones and how to increase the number of images displaying in the slideshow

Slideshow images are stored in modularity-lite\images\slideshow folder where you will find  image1.jpg …. image5.jpg files and these are the ones that will be displayed. To change the files to your own ones you need to simply replace them with your ones, remembering that the name imageX.jpg needs to remain the same and that the dimensions should match (you can change the size of slideshow images in the admin panel – theme options)

If you want to add more images to the slideshow then edit slideshow-static.php file adding to:

<ul id=”portfolio”>

<li><img src=”<?php bloginfo(‘stylesheet_directory’); ?>/images/slideshow/image1.jpg” alt=”<?php bloginfo(‘name’); ?>” /></li>

<li><img src=”<?php bloginfo(‘stylesheet_directory’); ?>/images/slideshow/image2.jpg” alt=”<?php bloginfo(‘name’); ?>” /></li>

<li><img src=”<?php bloginfo(‘stylesheet_directory’); ?>/images/slideshow/image3.jpg” alt=”<?php bloginfo(‘name’); ?>” /></li>

<li><img src=”<?php bloginfo(‘stylesheet_directory’); ?>/images/slideshow/image4.jpg” alt=”<?php bloginfo(‘name’); ?>” /></li>

<li><img src=”<?php bloginfo(‘stylesheet_directory’); ?>/images/slideshow/image5.jpg” alt=”<?php bloginfo(‘name’); ?>” /></li>

</ul>

an exact same line changing only the imageX.jpg number to image6.jpg, image7.jpg … image1000.jpg – make sure you actually have those files in the images/slideshow folder.

Should work!

6. Change width of the post area / sidebar area

This operation should be performed in screen.css file in library/styles folder. You need to find lines  span-15 (responsible for post area width) and  span-8 (responsible for sidebar width) and modify their values accordingly. Please note the total width is 900px so the values you adjust for span-15 & span-8 need to add up to 900px (for example span-15 for 750px & span-8 for 150px).

Easy solution, almost impossible to find!

7. Custom logo instead of blog title

There’s a blog title displayed in the upper-left corner. How to change it to a custom logo?

In header.php find lines:

<!– Begin Masthead –>

<div id=”masthead”>

<h4><a href=”<?php echo get_settings(‘home’); ?>/” title=”Home”><?php bloginfo(‘name’); ?></a> <span><?php bloginfo(‘description’); ?></span></h4>

</div>

and replace them with:

<!– Begin Masthead –>

<div id=”masthead”>

<h4 class=”left”><a href=”<?php echo get_settings(‘home’); ?>/” title=”Home”><img src=”PATH TO YOUR IMAGE” alt=”YOUR IMAGE ALT TEXT” /></a>

</h4>

</div>

where PATH TO YOUR IMAGE is the path to your image for example modularity-lite\logo.jpg

Then, in style.css file add the following code (wherever you like):

h4 img {

margin-top: 10px;

margin-left: -10px;

}

margin-top & margin-left position the logo so if you need it lower/higher just play with these numbers. It works !

8. Comments are not displaying properly

It happens that the comments are not displaying properly, they float left, they are placed one on another and basically – they are all messed up. To solve it try either:

edit style.css and replace:

ol.commentlist li .comment-entry{margin: -135px 0 0;border-bottom: 5px solid #eee;padding: 5px 150px 0;line-height: 2em;}

to something more reasonable, like:

ol.commentlist li .comment-entry{margin: 5px 0 0;border-bottom: 5px solid #eee;padding: 5px 150px 0;line-height: 2em;}

or simply turn ON the avatar display in options. If avatars are disabled, comments get messy.

Should help!