Many of you have asked how to move the manga badge from the title to above the thumbnail image. It’s quite simple using Template Override and a bit of CSS customization.
Why Use a Child Theme?
A Child Theme allows you to override the Madara theme’s HTML without losing your customizations when updating the parent theme. It inherits everything from the Madara Parent Theme, including features and design, while giving you full control over modifications.
If you haven’t set up a child theme yet, install one by navigating to Appearance > Themes > Upload. Madara provides a blank child theme in the full package, making it easy to get started.
Steps to Move Manga Badge from Title to Thumbnail
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}
After applying these changes, refresh the Manga Listing Page, and the manga badge will now appear above the thumbnail instead of the title!
You can applye the process for other changes you want to make!
Final Thoughts
This method allows you to customize manga badge placement easily. You can apply the same process for other modifications in the Madara theme to enhance your site’s layout and functionality.
Let me know if you have any questions! 🚀
