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

[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 ]

[cisco007]

Looks awesome snipey!!

[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.

[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

[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.



theme/smiliesigns.css

Code: Select all

/* Custom classes */
.custom-head { border: 1px solid #555; }
.custom-inner { border: 1px solid #777; }
.custom-img { }

[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.

[Kinsman]

Where does the html replacement code go?

[Sniper_E]

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

Updated earlier post.

[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.

[Puchahawa]

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. The pic is w/o the custom inner class as I was looking at the different variations.

latest sign.png

[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.

[Puchahawa]

OK will keep playing.

[Sniper_E]

Oh yea, the aero .forabg class has a transparent background... 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; }

[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

[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. 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.