WordPress.org

Ready to get started?Download WordPress

Forums

Share Buttons by AddToAny
[resolved] [Plugin: AddToAny: Share/Bookmark/Email Button] [Plugin: AddToAny] Adding custom CSS to themes &quot (9 posts)

  1. LJagermaster
    Member
    Posted 3 years ago #

    Apologies if this has been asked before but I wasn't able to find a solution (maybe WP.org should add a few extensions to make searching for things much less painful ;-) ).

    I tried adding the following code to my themes style.css file (and I unchecked the "Use CSS stylesheet" box):

    var a2a_config = a2a_config || {};
    a2a_config.color_main = "594638";
    a2a_config.color_border = "E4DDAE";
    a2a_config.color_link_text = "E4DDAE";
    a2a_config.color_link_text_hover = "877D66";
    a2a_config.color_arrow = "fff";
    a2a_config.color_arrow_hover = "fff";

    The base code I got off the A2A website and I only changed the colour values (the "arrow" ones I copied from the Menu Styler app on the site as I intend to change them as well). At first glance I thought it didn't look right compared to the rest of the code in the css file, and after implementing it I've noticed no change to the form on my site (http://sin.theweare.net).

    Is there a sample of working css code I can use on my site, or should the above code have worked?

    Thanks in advance,

    Lee C

    P.S.
    On a sidenote (rather than starting another thread) - even when I uncheck the "Only show the menu when the user clicks the Share/Save button" the form still won't show unless I click on the link. Is there a way around this?

  2. micropat
    Member
    Plugin Author

    Posted 3 years ago #

    Hi Lee,

    You're right, that's not CSS code, it's JavaScript code. You'll want to place that code in Settings > Share/Save Buttons > Additional Options box. FYI, alternatively, you can use the Color Chooser from within the same AddToAny settings panel to easily generate the JavaScript code for custom colors.

    You should keep the "Use CSS stylesheet" option checked unless you're very comfortable writing your own CSS code.

    Your click issue might stem from the JavaScript error that's appearing on your site from another plugin: Uncaught ReferenceError: getUserSetting is not defined (editor_plugin.js)

  3. LJagermaster
    Member
    Posted 3 years ago #

    Thanks for the reply. One question though, in previous versions of the A2A plugin I've used whenever the plugin was updated it reset the style code added to the settings page, does this not happen anymore?

    And as for the error, I didn't know there was one (whoops!). There's no error symbol appearing in my browser (mainly use Avant! which runs on IE's Trident engine) but I'll have a closer look with some coding tools I have over the next couple days). Thanks for pointing that out :-)

  4. micropat
    Member
    Plugin Author

    Posted 3 years ago #

    Upgrades should not reset the code in the Additional Options box. Please post whatever details you can if that happens again!

  5. LJagermaster
    Member
    Posted 3 years ago #

    Will do :-) And I noticed that the form appears on mouseover when viewing a post in full, so it only requires a click on the homepage for some reason. It probably is due to that error you alerted me to so once I track down what's causing it I'll be able to find out for sure.

    Just another couple issues though, first off I re-entered the css code into the additional settings box, however, after changing the color values for the arrow it shows up black for both instances. Here's the full css code I'm using:

    a2a_config.color_main = "594638";a2a_config.color_border = "E4DDAE";a2a_config.color_link_text = "E4DDAE";a2a_config.color_link_text_hover = "877D66";a2a_config.color_bg = "54221B";a2a_config.color_arrow = "E4DDAE";a2a_config.color_arrow_hover = "000000";

    Also, I know this is a separate issue but it saves starting yet another thread - when choosing to include post title in the form it displays the code as well as the title:

    <span class='fee-field fee-filter-the_title' data-type='input' data-post_id='7'>You talk too much…</span>

    This happens on the homepage and the full posts page, which suggests it's not being caused by the same issue as the mouse over. Any idea how to rectify this?

    Cheers again,

    Lee C

  6. micropat
    Member
    Plugin Author

    Posted 3 years ago #

    Here's the full css code I'm using

    That's JavaScript code, not CSS code, and you should use the Color Chooser aka Menu Styler to generate the perfect code. The button to launch the Menu Styler is under Settings > Share/Save Buttons > Menu Style.

    Not sure about your latter issue. I looked at your site in Google Chrome, but didn't see the problem - the title is displayed without extraneous code. Maybe it was caused by another plugin or your theme?

  7. LJagermaster
    Member
    Posted 3 years ago #

    The code above is what was generated by the Menu Styler (only parts I changed after generation are the arrow color values), and I put it in the Additional Settings box.

    The title issue did seem to have resolved itself at first, however to make sure the above code was correct I re-generated it once more with the Menu Styler and replaced the above with the new identical code and the issue returned. I had a look at it in Opera, FireFox and Chromium (not Chrome, but Chrome's essentially a clone of Chromium so has identical functionality) and it seems to display ok so maybe there's a bug caused by/in Internet Explorers engine?

    The mouseover issue is still present in all three of the above browsers though, on both the main page and post view page, but bizarrely functions fine in Avant! on the post view page, so if it turns out to be a plugin conflict I'll post it here.

    Thanks again for your help so far :-)

    Lee C

    P.S.
    These are, in effect, not major issues but goes without saying that the presentation of a site is every bit as important as the functionality so if anyone's had these/similar issues and resolved them, share the details in case they help clear these up...

  8. micropat
    Member
    Plugin Author

    Posted 3 years ago #

    Hi Lee, the arrow must be either black or white. No other custom colors for the arrow right now. Quick example for reference:

    a2a_config.color_arrow = "000";
    a2a_config.color_arrow_hover = "fff";
  9. LJagermaster
    Member
    Posted 3 years ago #

    Ah well that would explain it then X-D Would be good to have more choices though :-D

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic