3.1.x Extensions Database 3.1 / 3.2[RC] Smilie Signs

<span class="qte-attr qte_31_32-qte">3.1.x &amp; 3.2.x</span>
User avatar

Topic Author
Sniper_E
VIP
VIP
Posts: 1157
Joined: 14 Oct 2014, 19:01
    Android Chrome

Re: Smilie Signs

Post by Sniper_E »

Well hell... thanks for mentioning the Aero style Puchahawa.
I installed Aero and with it's custom css not looking so good.
The pole holding the sign up is the issue.

I know to work around that problem for custom styles now... Thanks!

[ Post made via Samsung Galaxy S5 Active ] Image
Image
No is NEVER an Option and NEVER is the only Option when it comes to Giving Up!™

User avatar

cisco007
Users
Users
Posts: 78
Joined: 26 Nov 2015, 22:01
    Windows 10 Firefox

Re: Smilie Signs

Post by cisco007 »

Looks awesome snipey!!

User avatar

Topic Author
Sniper_E
VIP
VIP
Posts: 1157
Joined: 14 Oct 2014, 19:01
    Windows 10 Firefox

Re: Smilie Signs

Post by Sniper_E »

I put that smiliesign ext on the shelf months ago. I have not looked at it in quite awhile.
I do want to change it over to style dependent layout but I have to re-do all the images. Over 70 images.
I will try to get back to this shortly.

Here is something you can play with...
The main change that makes it style dependent is the bbcode html replacement.

Code: Select all

<div class="signs" style="text-align: center;display: inline-block;">
<div class="forabg" style="padding: 8px;margin: 0;-webkit-border-radius: 26px;-o-border-radius: 26px;-moz-border-radius: 26px;border-radius: 26px;">
<div class="panel" style="text-align: left;padding: 6px 16px;margin: 0;-webkit-border-radius: 20px;-o-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;">{TEXT}</div>
</div>
<div style="background-size: 6px 46px;background-repeat: no-repeat;background-color: transparent;background-position: center top;border: none"><img src="./ext/sniper/smiliesigns/styles/all/theme/images/wood_pole_{SIMPLETEXT}.gif" alt="" style="margin-top: -1px;" /></div>
</div>
But I'm working with new images without that wood pole in it. The wood pole in the images has to be removed.
And no I did not save a .psd file for each image to make the change easy. I have to make new images now.

User avatar

Puchahawa
Users
Users
Posts: 193
Joined: 20 Jun 2015, 17:58
    Windows 7 Chrome

Re: Smilie Signs

Post by Puchahawa »

I added the html replacement to play a bit and this is the outcome before your image change. Thought you would want to see with the aeroblack style.
smile2.png
You do not have the required permissions to view the files attached to this post! Maybe your post count is too low.

User avatar

Topic Author
Sniper_E
VIP
VIP
Posts: 1157
Joined: 14 Oct 2014, 19:01
    Windows 10 Firefox

Re: Smilie Signs

Post by Sniper_E »

In version 1.0.6 I have it setup without borders in the html replacement codes. Some styles do not use borders.
I've added some classes also for those custom styles.

ACP/Posting Tab/Green Button 'Edit' on sign= BBCode HTML Replacement

Code: Select all

<div class="signs" style="text-align: center;display: inline-block;">
<div class="forabg custom-head" style="padding: 8px;margin: 0;-webkit-border-radius: 26px;-o-border-radius: 26px;-moz-border-radius: 26px;border-radius: 26px;">
<div class="panel custom-inner" style="text-align: left;padding: 6px 16px;margin: 0;-webkit-border-radius: 20px;-o-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;">{TEXT}</div>
</div>
<div class="forabg custom-img" style="background-size: 6px 46px;background-repeat: no-repeat;background-color: transparent;background-position: center top;"><img src="./ext/sniper/smiliesigns/styles/all/theme/images/wood_pole_{SIMPLETEXT}.gif" alt="" style="margin-top: -1px;" /></div>
</div>
You will be able to add any special css codes you need for any style in the theme/smiliesigns.css

Looks like you need a light border on that inside wrap... like mine.

Image

theme/smiliesigns.css

Code: Select all

/* Custom classes */
.custom-head { border: 1px solid #555; }
.custom-inner { border: 1px solid #777; }
.custom-img { }
Last edited by Sniper_E on 04 Oct 2016, 05:02, edited 2 times in total.

User avatar

Topic Author
Sniper_E
VIP
VIP
Posts: 1157
Joined: 14 Oct 2014, 19:01
    Windows 10 Firefox

Re: Smilie Signs

Post by Sniper_E »

And I found out that changing forabg to headerbar looks better on some styles for the head and/or img sections.
Play with those classes in your custom styles.

User avatar

Kinsman
Users
Users
Posts: 109
Joined: 18 Aug 2016, 15:38
    Windows 7 Firefox

Re: Smilie Signs

Post by Kinsman »

Where does the html replacement code go?

User avatar

Topic Author
Sniper_E
VIP
VIP
Posts: 1157
Joined: 14 Oct 2014, 19:01
    Windows 10 Firefox

Re: Smilie Signs

Post by Sniper_E »

ACP/Posting Tab/Green Button 'Edit' on sign= BBCode

Updated earlier post.

User avatar

Kinsman
Users
Users
Posts: 109
Joined: 18 Aug 2016, 15:38
    Windows 7 Firefox

Re: Smilie Signs

Post by Kinsman »

Got it thanks, in the end I just took to the original images with a paint brush and very happy how it all turned out. :tumbsyes:

User avatar

Puchahawa
Users
Users
Posts: 193
Joined: 20 Jun 2015, 17:58
    Windows 7 Chrome

Re: Smilie Signs

Post by Puchahawa »

Sniper_E wrote: 04 Oct 2016, 01:54

Code: Select all

<div class="signs" style="text-align: center;display: inline-block;">
<div class="forabg custom-head" style="padding: 8px;margin: 0;-webkit-border-radius: 26px;-o-border-radius: 26px;-moz-border-radius: 26px;border-radius: 26px;">
<div class="panel custom-inner" style="text-align: left;padding: 6px 16px;margin: 0;-webkit-border-radius: 20px;-o-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;">{TEXT}</div>
</div>
<div class="forabg custom-img" style="background-size: 6px 46px;background-repeat: no-repeat;background-color: transparent;background-position: center top;"><img src="./ext/sniper/smiliesigns/styles/all/theme/images/wood_pole_{SIMPLETEXT}.gif" alt="" style="margin-top: -1px;" /></div>
</div>
You will be able to add any special css codes you need for any style in the theme/smiliesigns.css

theme/smiliesigns.css

Code: Select all

/* Custom classes */
.custom-head { border: 1px solid #555; }
.custom-inner { border: 1px solid #777; }
.custom-img { }
Testing, testing. Using 1.0.5 with abbc3, the above html repl and the custom classes.

Added the custom classes to the all/theme/smiliesigns.css and it didn't want to play nice. So I added an aero folder like we did in tables with the custom classes edit and got the below image. Checked in prosilver and it's working correctly so it's aero that's acting up again. The custom classes work as desired, just have the strange box around the smilie. :lol: The pic is w/o the custom inner class as I was looking at the different variations.
latest sign.png
You do not have the required permissions to view the files attached to this post! Maybe your post count is too low.

User avatar

Topic Author
Sniper_E
VIP
VIP
Posts: 1157
Joined: 14 Oct 2014, 19:01
    Windows 10 Firefox

Re: Smilie Signs

Post by Sniper_E »

The .forabg class it uses for the pole, your style css calls for border and box-shadow so you will have to remove that in aero's ssigns css.

Code: Select all

.custom-img { border: none;-moz-box-shadow: none;-webkit-box-shadow: none;box-shadow: none; }
It looks like it has padding in there you may have to adjust.

User avatar

Puchahawa
Users
Users
Posts: 193
Joined: 20 Jun 2015, 17:58
    Windows 7 Chrome

Re: Smilie Signs

Post by Puchahawa »

OK will keep playing. :D

User avatar

Topic Author
Sniper_E
VIP
VIP
Posts: 1157
Joined: 14 Oct 2014, 19:01
    Windows 10 Firefox

Re: Smilie Signs

Post by Sniper_E »

Oh yea, the aero .forabg class has a transparent background... :wtf: Duh!

We know that because you had to add a background-color to the sign.

Aero style needs to use a class for the pole that has a background image AND that will work with prosilver styles.
Try changing that bottom <div in the HTML Replacement to <div class="headerbar custom-img" style="

My custom classes for areo black

Code: Select all

/* Custom classes */
.custom-head { border: 1px solid #777;background-color: #DFDFDF; }
.custom-inner { border: 1px solid #777; }
.custom-img { border: none;-moz-box-shadow: none;-webkit-box-shadow: none;box-shadow: none; }

User avatar

Puchahawa
Users
Users
Posts: 193
Joined: 20 Jun 2015, 17:58
    Windows 7 Chrome

Re: Smilie Signs

Post by Puchahawa »

Interesting results. After making the edit to the html repl and adding the aero custom classes I got this. (ignore the text on pic was just making comments to myself about what I was doing)
smilie-aero.png
So I removed the html repl edit and tried with just the aero custom classes with this result. That should work with the new images your doing right?
aero-css.png
You do not have the required permissions to view the files attached to this post! Maybe your post count is too low.

User avatar

Topic Author
Sniper_E
VIP
VIP
Posts: 1157
Joined: 14 Oct 2014, 19:01
    Windows 10 Firefox

Re: Smilie Signs

Post by Sniper_E »

Did you change that last <div to headerbar? I should see the background image from that class behind that wood pole where that space is.
Clear you cache if you need to. Use this acute smilie for testing that style pole. Image wood_pole_acute.gif

My results: http://sniper-e.com/viewtopic.php?f=6&t=6 - I have style changer in header for aero black.

Post Reply Previous topicNext topic