2019-08-05_120246

Some of you have asked how to move the badge from title to above the thumbnail image. It’s quite simple with Template Override and a little CSS.

The fact is, you can override most of theme’s HTML using Child Theme. All you need to do is copy the file you want to override, place it in Child Theme folder. Then you can edit anything you want there. Why using Child Theme? Because when you update new version of Madara (the parent theme), all changes you have made will not be lost.

Child theme is just a theme which takes everything from a Parent Theme, from HTML to features. You install it like a normal theme (go to Appearance > Themes > upload). We have packed a “blank” child theme in the full package of Madara so you can start from there.

Now back to the main issue. The template file you want to override is /madara/madara-core/content/content-archive.php (It is for each item in the loop, or Manga Listing page). Copy that file and put in the same folder in your child theme. So the new file will be /madara-child/madara-core/content/content-archive.php. Now use a text editor (NotePad or NotePad++ or Sublime Text), open that new file, find this line (arround line 84)

Cut the line, and move it to the new position, below the thumbnail image

Now save the file. refresh your manga listing page, you will see a result like this

Now what you need it to add a little custom CSS to make it look good. Go to admin, Appearance > Theme Options > Misc > Custom CSS, add this code

.manga-title-badges{position: absolute; left: 15px; top: 0}

Now refresh the manga listing page again, you got the final result

You can applye the process for other changes you want to make!

SHARE THIS POST

Leave a Reply

Your email address will not be published. Required fields are marked *

*

5 × 1 =