Акция! Дизайн «MyBB Technical Support»
Description of categories and pictures in the description of categories
Allows you to add description text, pictures,
as well as to make the category collapse with the opening of the description on hover.
Common settings for all codes
Red number - category number
Attention! if any category is hidden from the user, then the codes will be applied to the next one after it!
catright - is the selector for the block following the category name.
You can insert pictures/descriptions BEFORE the title by replacing this selector with catleft
All codes that you see here are inserted in Administration > Custom style
OR you can paste them in Administration> Preferences> HTML-top, but BETWEEN <style> tags:
<style> here are your codes </style>
First of all, you need to insert the code:
#pun #pun-main div.catright {display: block !important;}
It is inserted because many default styles hide catright (or catleft). If you are using Custom Style, it’s best to make sure you don’t have any codes to hide this selector (or find and remove them).
Description for category
#pun-category1 div.catright:after {
content: 'Test category description'; /* Your text */
color: #3d8bd2; /* Text color */
font-size: 18px; /* font size */
}
Picture in category description
#pun-category1 div.catright:after {
display: block;
background-image: url(https://i.imgur.com/SYiogWH.gif); /* link to picture */
background-repeat: no-repeat;
width: 480px;/* picture width */
height: 60px; /* picture height */
}
Picture + text to the right of the picture in the category description
#pun-category1 div.catright:after {
content: 'Test category description'; /* Your text */
color: #3d8bd2; /* Text color */
font-size: 18px; /* font size */
display: block;
background-image: url(https://i.imgur.com/SYiogWH.gif); /* link to picture */
background-repeat: no-repeat;
padding-left: 480px;/* image width + text indent from the image */
min-height: 60px; /* picture height */
}
Picture + text under the picture in the category description
#pun-category1 div.catright:after {
content: 'Test category description'; /* Your text */
color: #3d8bd2; /* Text color */
font-size: 18px; /* font size */
display: block;
background-image: url(https://i.imgur.com/SYiogWH.gif); /* link to picture */
background-repeat: no-repeat;
width: 480px;/* picture width */
padding-top: 60px; /* picture height + text indent from picture*/
}
Spoiler of categories (description is visible only on hover)
.category h2:before {
content: '';
cursor: help;
display: inline-block;
width: 10px; /* indicator width */
height: 10px; /* indicator height */
margin-right: 5px; /* indicator indent from text */
border-radius: 50%; /* indicator rounding */
background-color: #fff; /* indicator color */
}
.category h2 {
height: 15px; /* category heights (BEFORE cursor hover) */
cursor: help;
overflow: hidden;
transition: all 0.6s;
-webkit-transition: all 0.6s;
}
.category h2 span {
margin-bottom: 5px; /* indentation of descriptions from category text */
display: inline-block;
}
.category h2:hover {height: 145px;} /* category height (AFTER hovering over) */
if the indicator is not needed, you can remove all purple
you can insert an icon-picture instead of the indicator, for this replacebold lines with background-image: url(https://i.imgur.com/SYiogWH.gif);
this code applies to all categories. if necessary, apply to a specific one, replace .category with #pun-category1
after these codes, you can insert a suitable code for the category descriptions.
