Add a color + image to a specific group at the top of posts without JavaScript
5 posters
Page 1 of 1
Add a color + image to a specific group at the top of posts without JavaScript
Hello everyone
With this trick, you can add a color to a specific group that appears at the top of posts
and You can also add photos to a specific group,
I know it's a common trick, but it was using JavaScript
Now you don't need to use JavaScript-jQuery
A trick I discovered that I wanted to share with you
With this trick, you can add a color to a specific group that appears at the top of posts
and You can also add photos to a specific group,
I know it's a common trick, but it was using JavaScript
Now you don't need to use JavaScript-jQuery
A trick I discovered that I wanted to share with you
- phpBB2:
Find the next part in viewtopic_body template- Code:
<!-- BEGIN displayed -->
- Code:
<!-- BEGIN displayed -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0" >
<div class="conan2000-flower">{postrow.displayed.POSTER_NAME}</div>
All versions
-------------
Find the next part in viewtopic_body template
- Code:
<!-- BEGIN displayed -->
replace it with
- Code:
<!-- BEGIN displayed -->
<div class="conan2000-flower">{postrow.displayed.POSTER_NAME}</div>
Save and publish
Installing the CSS
Go to Administration Panel > Display > Colors > CSS stylesheet and paste the following rules in your stylesheet.
- Code:
* {
text-decoration: none;
}
.conan2000-flower [style="color:?????"] {
cursor: default;
color: #0000 !important;
display: block;
background: ?????;
}
.conan2000-flower,.conan2000-flower strong {
cursor: default;
color: #0000 !important;
}
.conan2000-flower {
background: #bcc2c7;
}
CSS: An image of a specific group
- Code:
.conan2000-flower [style="color:?????"] strong {
background: url(https://i.servimg.com/u/f73/11/60/75/36/admini10.png) no-repeat;
}
_____________________________________________________________________
skouliki, YoshiGM, SarkZKalie, TonnyKamper, poesia-verses and King Baldwing IV like this post
Re: Add a color + image to a specific group at the top of posts without JavaScript
Hmm interesting.. We can save some loading resources using a simple template edit instead of a JS.
Good job :p
Good job :p
Re: Add a color + image to a specific group at the top of posts without JavaScript
better is use the group as a reference (demo) but it's a good trick
Re: Add a color + image to a specific group at the top of posts without JavaScript
كونان2000 wrote:Hello everyone
With this trick, you can add a color to a specific group that appears at the top of posts
and You can also add photos to a specific group,
I know it's a common trick, but it was using JavaScript
Now you don't need to use JavaScript-jQuery
A trick I discovered that I wanted to share with you
- phpBB2:
Find the next part in viewtopic_body templatereplace it with
- Code:
<!-- BEGIN displayed -->
- Code:
<!-- BEGIN displayed -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0" >
<div class="conan2000-flower">{postrow.displayed.POSTER_NAME}</div>
All versions
-------------
Find the next part in viewtopic_body template
- Code:
<!-- BEGIN displayed -->
replace it with
- Code:
<!-- BEGIN displayed -->
<div class="conan2000-flower">{postrow.displayed.POSTER_NAME}</div>
Save and publish
Installing the CSS
Go to Administration Panel > Display > Colors > CSS stylesheet and paste the following rules in your stylesheet.Replace question marks in CSS code with group color (HEX color OR color name i.e : red)
- Code:
* {
text-decoration: none;
}
.conan2000-flower [style="color:?????"] {
cursor: default;
color: #0000 !important;
display: block;
background: ?????;
}
.conan2000-flower,.conan2000-flower strong {
cursor: default;
color: #0000 !important;
}
.conan2000-flower {
background: #bcc2c7;
}
CSS: An image of a specific groupReplace question marks in CSS code with group color
- Code:
.conan2000-flower [style="color:?????"] strong {
background: url(https://i.servimg.com/u/f73/11/60/75/36/admini10.png) no-repeat;
}_____________________________________________________________________
Hello,
my suggestion is to make that color for each group for ModernBB and AwesomeBB for the header, where the title is included for the topic creations - and when someone replys (from the staff ofc, to show the color also... and so on!) - and for members to show default color...
كونان2000 likes this post
Re: Add a color + image to a specific group at the top of posts without JavaScript
hi @Mihai
ok
ok
- : AwesomeBB:
- Find the next part in viewtopic_body template
- Code:
<h2>
<i class="material-icons">description</i>
{postrow.displayed.ICON}
<span class="post-heading-wrap">
<a href="{postrow.displayed.POST_URL}">{postrow.displayed.POST_SUBJECT}</a>
<span class="post-date">{postrow.displayed.POST_DATE_NEW}</span>
</span>
</h2>
replace it with- Code:
<span-div class="conan2000-flower">{postrow.displayed.POSTER_NAME}
<h2>
<i class="material-icons">description</i>
{postrow.displayed.ICON}
<span class="post-heading-wrap">
<a href="{postrow.displayed.POST_URL}">{postrow.displayed.POST_SUBJECT}</a>
<span class="post-date">{postrow.displayed.POST_DATE_NEW}</span>
</span>
</h2>
</span-div>
css- Code:
span-div.conan2000-flower [style="color:?????"] {
background: ?????;
font-size: small;left: 0;position: absolute;width: 100%;top: 0px;padding: 16px;z-index: 0;pointer-events: none;cursor: default;color: #0000 !important;display: block;}
span-div.conan2000-flower strong {color: #0000;font-size: 0;pointer-events: none;cursor: default;color: #0000 !important;}
.post-header i,.post-buttons li,.post-header h2 img, .post-header h2 i {position: relative;}
.post-header h2 {margin-left: 0;display: block;}
.post-heading-wrap {display: inline-block;max-width: 50%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;position: absolute;}
TonnyKamper likes this post
Re: Add a color + image to a specific group at the top of posts without JavaScript
can you send an screenshot please? Also the tag </span-div> is totally wrong!كونان2000 wrote:hi @Mihai
ok
- : AwesomeBB:
Find the next part in viewtopic_body template
- Code:
<h2>
<i class="material-icons">description</i>
{postrow.displayed.ICON}
<span class="post-heading-wrap">
<a href="{postrow.displayed.POST_URL}">{postrow.displayed.POST_SUBJECT}</a>
<span class="post-date">{postrow.displayed.POST_DATE_NEW}</span>
</span>
</h2>
replace it with
- Code:
<span-div class="conan2000-flower">{postrow.displayed.POSTER_NAME}
<h2>
<i class="material-icons">description</i>
{postrow.displayed.ICON}
<span class="post-heading-wrap">
<a href="{postrow.displayed.POST_URL}">{postrow.displayed.POST_SUBJECT}</a>
<span class="post-date">{postrow.displayed.POST_DATE_NEW}</span>
</span>
</h2>
</span-div>
css
- Code:
span-div.conan2000-flower [style="color:?????"] {
background: ?????;
font-size: small;left: 0;position: absolute;width: 100%;top: 0px;padding: 16px;z-index: 0;pointer-events: none;cursor: default;color: #0000 !important;display: block;}
span-div.conan2000-flower strong {color: #0000;font-size: 0;pointer-events: none;cursor: default;color: #0000 !important;}
.post-header i,.post-buttons li,.post-header h2 img, .post-header h2 i {position: relative;}
.post-header h2 {margin-left: 0;display: block;}
.post-heading-wrap {display: inline-block;max-width: 50%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;position: absolute;}
Similar topics
» Color specific group
» Adding image to a specific group
» Can I bypass image resizing in specific posts?
» Background color for different group posts
» How do I make someone or a specific group in charge of a specific forum/category?
» Adding image to a specific group
» Can I bypass image resizing in specific posts?
» Background color for different group posts
» How do I make someone or a specific group in charge of a specific forum/category?
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum