[AmaravatiParticipant]

Hello!

I have been using the ICONS on buttons, but they come out with different colours/colors! Some take on the stylesheet colouring, some don’t.

Why is that?

Thanks

ps. you will see those buttons on the next private message with the links

[AmaravatiParticipant]

This reply has been marked as private.

[MrinalMember]

This reply has been marked as private.

[AmaravatiParticipant]

Hello!

Well… what can I say (what is inline CSS? I didn’t do anything like that!)

Let me elaborate, the process of getting these buttons is different, but I didn’t use any custom/inline CSS.

1) The PDF leaflet button was made using Visual Editor, by adding element BUTTON and fill in the required settings. The textual output on the backend is like this

[button shape="pill" size="mini" float="none" info="none" info_place="top" info_trigger="hover" href="http://somehwere.com/some_Leaflet_2012.pdf" target="blank" icon_only="true"][icon type="download"] Example annual Leaflet 2012 - PDF[/button]

The html output is like this:

http://prntscr.com/4ewtfa

2) The correct one: download a PDF version is created by using Visual editor, by adding element TEXT and added the following ‘text in this:

[button href="#" title="client Sitemap" target="blank" shape="pill" size="regular" block="false" circle="false" icon_only="true" info="tooltip" info_place="right" info_trigger="hover" info_content="Click here for a PDF (6 MB)"] [icon type="download"] Download a PDF version [/button]

This is the html output
http://prntscr.com/4ewvot

Soooo, I don’t understand why method one, the Icon get styled with color or why there is a so called inline css, I just addd it as [icon type=”download”] behind the text. (what did I do wrong?)

Can you ‘help’?

Thanks

[AmaravatiParticipant]

This reply has been marked as private.

[Paul RModerator]

Hi,

The reply above with your url is now private.

Thanks

[Paul RModerator]

Hi,

To fix the icon color, you can add this under Custom > CSS in the Customizer.

.x-btn .x-icon {
    color:#fff !important;
}

[AmaravatiParticipant]

Hello X,

Yes, FIXED. Thanks.

BUT… this is not an user error right? Something with the Visual Editor or CSS that goes wrong here? (I would like to understand what component adds this the line to define the color.

Thanks,

[Paul RModerator]

Hi,

The icon color changed because it was put inside a span with an inline css style=”color:#555555″.

Please see screenshot

http://screencast.com/t/ZoumTtF7Up

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[AmaravatiParticipant]

This reply has been marked as private.

[Paul RModerator]

Hi,

I was able to remove the span tags that was automatically added on the icon.
What I did is copy the tag [icon type=”download”] then paste it in notepad
to remove some formatting and then paste it back to the button.

Thanks

[AmaravatiParticipant]

Thank you!!!!

So… next time I copy and paste tags, I need to use something like TextEdit/TextWrangler to copy it (in case other tags are tagged along?)

Thanks for helping out!!!

Bye

[Paul RModerator]

You’re welcome.

Yes, just to be sure.

[Author]

Posts