MyBB Community Forums

I am trying to switch themes here. I am using a very old version of Cerise theme so I am trying to switch to Cerulean.

I am testing it in my localhost of home computer. When I installed the theme I saw that there was no sign of 'My Alerts' in the header beside control panel. So, I copied the code from my old template to the new one in the 'header_welcome_member'. And it appeared as it should be.

Now when I checked the posts. I saw that the like button isn't appearing in the posts. So, then again I copied the code from postbit and pasted in the new template. The problem is that I seeing the button is somehow broken, its appearing but the like icon is merging with the text. Here is an image of it. https://ibb.co/BKb7CSV

I have added these codes in postbit

<div style="{$post['tyl_display']}" id="tyl_{$post['pid']}">{$post['thankyoulike_data']}</div>

and for the button

{$post['button_tyl']}

. For the record I haven't done anything to the template postbit_classic, I know that these code were present there too. So, should I put the code there too?

(2020-01-27, 09:34 AM)vk_knight Wrote: [ -> ]I am trying to switch themes here. I am using a very old version of Cerise theme so I am trying to switch to Cerulean.

I am testing it in my localhost of home computer. When I installed the theme I saw that there was no sign of 'My Alerts' in the header beside control panel. So, I copied the code from my old template to the new one in the 'header_welcome_member'. And it appeared as it should be.

Now when I checked the posts. I saw that the like button isn't appearing in the posts. So, then again I copied the code from postbit and pasted in the new template. The problem is that I seeing the button is somehow broken, its appearing but the like icon is merging with the text. Here is an image of it. https://ibb.co/BKb7CSV

I have added these codes in postbit

<div style="{$post['tyl_display']}" id="tyl_{$post['pid']}">{$post['thankyoulike_data']}</div>

and for the button

{$post['button_tyl']}

. For the record I haven't done anything to the template postbit_classic, I know that these code were present there too. So, should I put the code there too?

I assume you mean eldenrooots thanks plugin, have a read over here https://community.mybb.com/thread-226114...pid1342598 as that shows all what the plugin installs, but since you are in localhost why dont you try my other suggestion in that thread:

Quote:boggled why you didn't just use a fresh version of mybb on your localhost on your comp, install the latest cerise/cerulean theme and the thanks plugin, then export the theme from localhost and use that xml file with the latest theme files to install on your live site with the existing installed plugin and it would work fine due to the plugin inserts being installed in the theme already and have saved time

Yes the icon on the button is slightly misaligned though you can fix that in css as it is an image and the buttons in the theme use font awesome, but yeah you can modify css to align the image or modify the button template to use a  font awesome icon instead

The thankyou plug attaches a stylesheet to each theme that is called thankyoulike.ccss

in there is the button styling

div[id^=tyl_btn_] {
	display: inline-block;
}

a.add_tyl_button span{
	background-image: url(images/thankyoulike/tyl_add.png);
	background-repeat: no-repeat;
	font-weight: bold;
}

a.del_tyl_button span{
	background-image: url(images/thankyoulike/tyl_del.png);
	background-repeat: no-repeat;
	font-weight: normal;
}

Have you tried adding say padding-right to the two images if keeping the images is what you want?

If you want it corrected quickly and to use fa icons like the rest of the buttons then modify this part of css

div[id^=tyl_btn_] {
	display: inline-block;
}

/*
a.add_tyl_button span{
	background-image: url(images/thankyoulike/tyl_add.png);
	background-repeat: no-repeat;
	font-weight: bold;
}

a.del_tyl_button span{
	background-image: url(images/thankyoulike/tyl_del.png);
	background-repeat: no-repeat;
	font-weight: normal;
}
*/

.postbit_buttons a.add_tyl_button span:before {
	content: "\f164";
}
.postbit_buttons a.del_tyl_button span:before {
	content: "\f165";
}

Also modify this part of the plug css like so:

.tyllist{
	/*background-color: #f5f5f5;
    border-top: 1px dotted #ccc;
	border-bottom: 1px dotted #ccc;*/
    background-color: #252525;
    border-top: 1px dotted #303030;
	border-bottom: 1px dotted #303030;
	padding: 2px 5px;
}

.tyllist_classic{
	/*background-color: #f5f5f5;
    border-top: 1px dotted #ccc;
	border-bottom: 1px dotted #ccc;*/
    background-color: #252525;
	border-top: 1px dotted #303030;
	border-bottom: 1px dotted #303030;
	padding: 2px 5px;
}

Vintagedaddyo helpful as always. So, I added this

.postbit_buttons a.add_tyl_button span:before {
	content: "\f164";
}
.postbit_buttons a.del_tyl_button span:before {
	content: "\f165";
}

And modified icon code to

a.add_tyl_button span{
	background-image: url(images/thankyoulike/);
	background-repeat: no-repeat;
	font-weight: bold;
}

a.del_tyl_button span{
	background-image: url(images/thankyoulike/);
	background-repeat: no-repeat;
	font-weight: normal;
}

Yeah, I am not using any fancy looking icon. But this solved the issue swiftly.

And I followed that thread. Apparently I am facing the hovering problem as well. You told that grouppost.css has to be modified. But frankly I didn't understand what code to edit. So, I posted in that thread. Anyway thanks for this.

(2020-01-30, 04:56 AM)vk_knight Wrote: [ -> ]Vintagedaddyo helpful as always. So, I added this

.postbit_buttons a.add_tyl_button span:before {
	content: "\f164";
}
.postbit_buttons a.del_tyl_button span:before {
	content: "\f165";
}

And modified icon code to

a.add_tyl_button span{
	background-image: url(images/thankyoulike/);
	background-repeat: no-repeat;
	font-weight: bold;
}

a.del_tyl_button span{
	background-image: url(images/thankyoulike/);
	background-repeat: no-repeat;
	font-weight: normal;
}

Yeah, I am not using any fancy looking icon. But this solved the issue swiftly.

And I followed that thread. Apparently I am facing the hovering problem as well. You told that grouppost.css has to be modified. But frankly I didn't understand what code to edit. So, I posted in that thread. Anyway thanks for this.

in the other thread you state

Quote:vk_knight: Check my thread. And add the mentioned code as I did.

I did not say this at all:

a.add_tyl_button span{
	background-image: url(images/thankyoulike/);
	background-repeat: no-repeat;
	font-weight: bold;
}

a.del_tyl_button span{
	background-image: url(images/thankyoulike/);
	background-repeat: no-repeat;
	font-weight: normal;
}

I said do this exactly as postbit buttons are already styled to compensate for fontaweesome in the theme

div[id^=tyl_btn_] {
	display: inline-block;
}

/*
a.add_tyl_button span{
	background-image: url(images/thankyoulike/tyl_add.png);
	background-repeat: no-repeat;
	font-weight: bold;
}

a.del_tyl_button span{
	background-image: url(images/thankyoulike/tyl_del.png);
	background-repeat: no-repeat;
	font-weight: normal;
}
*/

.postbit_buttons a.add_tyl_button span:before {
	content: "\f164";
}
.postbit_buttons a.del_tyl_button span:before {
	content: "\f165";
}

Notice the commented out button styling because it is not needed? And the addition of new button styling using :before That is completely different than your method of deleting partial image path thus in a sense a missing image errorr

Define hovering problem? And are you complaining about the blue dashed border on hover for usergroup 3 (3 is registered user usergroup) post borders like the op?

Did you read this in that thread?

Quote:As for the gid post border styling it is defined by usergroup color just like other gid elements in theme existant in the past. And since you are only complaining about the blue dashed border on hover and not the blue border itself? Just like the blue border, that blue dashed hover is for registered usergroup posts so you would edit usergroup 2 ie: gidpostbody_2:hover ie: change border width from 1px to 0px to removed the dashed border on hober. All group post styling is found in grouppost.css

Yes I read that in that thread. And its similar to mine.

When the cursor is moved to any post and also the header of the post (where user info appears) get highlighted its a bit annoying to me. And also the posts have a blue border line (which is fine by me). But when cursor is moved to any post. Along with the highlighted post itself and a blue dotted border line(along with the usual border line) appears to it which I don't want to see.

(2020-01-30, 09:41 AM)vk_knight Wrote: [ -> ]Yes I read that in that thread. And its similar to mine.

When the cursor is moved to any post and also the header of the post (where user info appears) get highlighted its a bit annoying to me. And also the posts have a blue border line (which is fine by me). But when cursor is moved to any post. Along with the highlighted post itself and a blue dotted border line(along with the usual border line) appears to it which I don't want to see.

Similar to what?
What is yours? The two new button styling from me or the commented out button styling that you ignored and instead only deleted the image name ie: breaking the image path thus unfound image error while leaving in conflicting styling that I told you to comment out as part of my fa button additions? Do you even understand that postbit button styling is already defined in the theme so the only thing needed was my two button replacements for fa thus why I provided the snippet as commented out to represent either keep commented out the comment ed out old buttons styling as is or delete the two commented out button codes completely as NONE of the commented out is needed.

from the start of comment out

/*

to the end of comment out

*/

Not needed.

/*
a.add_tyl_button span{
	background-image: url(images/thankyoulike/tyl_add.png);
	background-repeat: no-repeat;
	font-weight: bold;
}

a.del_tyl_button span{
	background-image: url(images/thankyoulike/tyl_del.png);
	background-repeat: no-repeat;
	font-weight: normal;
}
*/

What IS needed

.postbit_buttons a.add_tyl_button span:before {
	content: "\f164";
}
.postbit_buttons a.del_tyl_button span:before {
	content: "\f165";
}

Also note that all posts do not have a blue border only usergroup 2 is blue, as mods and super mods are purple borders and admins are green, just like in the other gid elements as well as has been in several of my old deleted gid based coloring tutorials that I know you aware of. Also exactly what you are describing was designed exactly as intended and was explained exactly as such in the original deleted tutorial I wrote when I made the gid postbody border styling in the first place.Also basic knowledge of css will allow folks to modify the existing gid postbody border styling to thier specific usages, as well as add further custom usergroup postbody border styling or remove it for some gids or all, else if the basic understanding is not there and or they don't like the theme and existing features of such, they could find another theme that would cause them to perhaps complain less. Just saying, food for thought.

Okay as per your wish I commented out the code of 'thankyou' icon.
And also I commented out my dislikings of the grouppost.css, so everything is fine.

Thanks for the suggestion again. And I am not leaving your theme.

(2020-01-30, 12:37 PM)vk_knight Wrote: [ -> ]Okay as per your wish I commented out the code of 'thankyou' icon.
And also I commented out my dislikings of the grouppost.css, so everything is fine.

Thanks for the suggestion again. And I am not leaving your theme.

Yeah thats why just like usertitle.css and groupimage.css for gid , I included individial stylesheets for each so a user can easily find and have room to modify to thier desired needs.

Simple example how quickly gid postbody border styling can be changed

/*
 * MyBB: Cerise Frontend Theme 
 *
 * File: grouppost.css
 * 
 * Author: Vintagedaddyo
 *
 * MyBB Version: 1.8
 *
 * Theme Version: 1.2
 * 
 */

/** Post Hover **/

.post_content:hover, .post_controls:hover, .post_author:hover {
	background: #303030 !important;
}

/** Gid Postbody Border CSS  **/

/** All if needed **/

.gidpostbody {
/*
	margin-top: 2px;
	margin-bottom: 2px;
*/
	margin-top: 6px;
	margin-bottom: 6px;
        padding: 0;
}

/** Define by group id **/

/** Active **/

.gidpostbody_4 {
/* define border gid 4*/
/*
	border: 1px solid #008000;
	outline: 0;
	-webkit-box-shadow: inset 0 1px 1px rgb(0,128,0), 0 0 8px rgba(0,128,0, 0.8);
	box-shadow: inset 0 1px 1px rgba(0,128,0, 0.8), 0 0 8px rgba(0,128,0, 0.8);
*/
       border-left: 3px solid #008000;
}

.gidpostbody_4:hover {
/* define border gid 4 */
/*
   border: 1px dashed #008000;
*/
   border-left: 3px dashed #008000;
}

.gidpostbody_6 {
/* define border gid 6 */
/*
   border: 1px solid #CC00CC;
	outline: 0;
	-webkit-box-shadow: inset 0 1px 1px rgb(204,0,204), 0 0 8px rgba(204,0,204, 0.8);
	box-shadow: inset 0 1px 1px rgba(204,0,204, 0.8), 0 0 8px rgba(204,0,204, 0.8);
*/
   border-left: 3px solid #CC00CC;
}

.gidpostbody_6:hover {
/* define border gid 6 */
/*
   border: 1px dashed #CC00CC;
*/
   border-left: 3px dashed #CC00CC;
}

.gidpostbody_3 {
/* define border gid 3 */
/*
   border: 1px solid #CC00CC;
	outline: 0;
	-webkit-box-shadow: inset 0 1px 1px rgb(204,0,204), 0 0 8px rgba(204,0,204, 0.8);
	box-shadow: inset 0 1px 1px rgba(204,0,204, 0.8), 0 0 8px rgba(204,0,204, 0.8);
*/
   border-left: 3px solid #CC00CC;
}

.gidpostbody_3:hover {
/* define border gid 3 */
/*
   border: 1px dashed #CC00CC;
*/
   border-left: 3px dashed #CC00CC;
}

.gidpostbody_2 {
/* define border gid 2 */

/*
	border: 1px solid #0072BF;
	outline: 0;
	-webkit-box-shadow: inset 0 1px 1px rgb(0,114,191), 0 0 8px rgba(0,114,191, 0.8);
	box-shadow: inset 0 1px 1px rgba(0,114,191, 0.8), 0 0 8px rgba(0,114,191, 0.8);
*/
  border-left: 3px solid #0072BF;
}

.gidpostbody_2:hover {
/* define border gid 2 */
/*
   border: 1px dashed #0072BF;
*/
   border-left: 3px dashed #0072BF;
}