Forum Replies Created

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • in reply to: Facebook 'Send' window goes off-screen on mobile phones. #100359

    Thanks for the suggestion, but sadly it didn’t change anything.

    The best solution I’ve tried so far is this:

    .fb_edge_widget_with_comment span.fb_edge_comment_widget {
    left: -45px !important;
    }

    This temporary solution moves the pop-up box to a somewhat centered position under the Send button, which makes it accessible on the mobile.

    This is how it looks like on an iPhone (notice it’s still too a bit too wide for mobile):

    foto_1.png

    Horizontal view on iPhone:

    foto_2.png

    Same page viewed in a PC browser:

    xotc_browser.png

    The small arrow on top of the popup is now no longer aligned with the Send button (due to my css). Notice how it switches position to be on the left or right side of the popup, depending on where it’s viewed (mobile or PC browser).

    (I tried it on a Lumina 920 as well, but gave the same issue as iPhone)

    I hope you wont give up on me, because I can’t find any help on google either (except one other person with the same problem who also didn’t get help) :(

    It makes no sense if I’m the first person who ever had this problem. The WooCommerce style colors are awful.

    Maybe I missed something?

    WooCommerce got the colors Primary, Secondary, Highlight, Content and Subtext in Settings, which I can’t edit (or rather I can’t save them after editing).

    These colors then splits down and controls a large list of css values, including some coding that controls the gradients of buttons.

    Here is the CSS for what the WooCommerce ‘Primary’ color controls:

    a.button.alt, button.button.alt, input.button.alt, #respond input#submit.alt, #content input.button.alt {

    background: #ff2222;

    background: -webkit-gradient(linear, left top, left bottom, from(#ff2222), to(#96588a));

    background: -webkit-linear-gradient(#ad74a2, #96588a);

    background: -moz-linear-gradient(center top, #ff2222 0, #96588a 100%);

    background: -moz-gradient(center top, #ff2222 0, #96588a 100%);

    border-color: #76456c;

    color: #fff;

    text-shadow: 0 -1px 0 rgba(0,0,0,0.6)

    }

    a.button.alt:hover, button.button.alt:hover, input.button.alt:hover, #respond input#submit.alt:hover, #content input.button.alt:hover {

    background: #ff2222;

    background: -webkit-gradient(linear, left top, left bottom, from(#ff2222), to(#864f7b));

    background: -webkit-linear-gradient(#FF0000, #864f7b);

    background: -moz-linear-gradient(center top, #ff2222 0, #864f7b 100%);

    background: -moz-gradient(center top, #ff2222 0, #864f7b 100%);

    color: #fff;

    text-shadow: 0 -1px 0 rgba(0,0,0,0.6)

    }

    .widget_layered_nav ul li.chosen a {

    padding: 0 6px 0 18px;

    border: 1px solid #ff2222;

    background: #ad74a2 url(../images/cross_white.png) no-repeat 6px center;

    box-shadow: inset 0 1px 1px rgba(255,255,255,0.5) #888;

    -webkit-box-shadow: inset 0 1px 1px rgba(255,255,255,0.5) #888;

    -moz-box-shadow: inset 0 1px 1px rgba(255,255,255,0.5) #888;

    color: #fff;

    -webkit-border-radius: 3px;

    -moz-border-radius: 3px;

    border-radius: 3px

    }

    .widget_price_filter .ui-slider .ui-slider-handle {

    position: absolute;

    z-index: 2;

    width: .9em;

    height: .9em;

    -webkit-border-radius: 1em;

    -moz-border-radius: 1em;

    border-radius: 1em;

    border: 1px solid #150d14;

    cursor: pointer;

    background: #ff2222;

    background: -webkit-gradient(linear, left top, left bottom, from(#ff2222), to(#96588a));

    background: -webkit-linear-gradient(#ff2222, #96588a);

    background: -moz-linear-gradient(center top, #ff2222 0, #96588a 100%);

    background: -moz-gradient(center top, #ff2222 0, #96588a 100%);

    outline: 0;

    top: -0.3em;

    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.3), inset 0 0 0 1px rgba(255,255,255,0.65);

    -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.3), inset 0 0 0 1px rgba(255,255,255,0.65);

    box-shadow: 0 1px 2px rgba(0,0,0,0.3), inset 0 0 0 1px rgba(255,255,255,0.65)

    }

    .widget_price_filter .ui-slider .ui-slider-range {

    position: absolute;

    z-index: 1;

    font-size: .7em;

    display: block;

    border: 0;

    background: #ff2222 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAADCAYAAABS3WWCAAAAFUlEQVQIHWP4//9/PRMDA8NzEPEMADLLBU76a5idAAAAAElFTkSuQmCC) top repeat-x;

    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.5);

    -webkit-box-shadow: inset 0 0 0 1px rgba(0,0,0,0.5);

    -moz-box-shadow: inset 0 0 0 1px rgba(0,0,0,0.5);

    -webkit-border-radius: 1em;

    -moz-border-radius: 1em;

    border-radius: 1em

    }

    (+ I have to make a gradient as well, which means LOTS of copy/pasting each time I want to try a new color to match my theme).

    One more question. If you look at another page like this:

    http://www.xotc.dk/testside/smagninger/smagninger/lordag-d-23-feb-kl-19-00-champagnesmagning/

    , you can see there are whites boxes, which I also cannot control. This might also be related to WooCommerce?

    I would like to be able to change these white boxes to a different darker color to match the theme style.

    Sure:

    (please be aware this is still a test site)

    http://www.xotc.dk/testside/

    Again, it is the WooCommerce styles (price colors + color of description text over the prices), that I would like to be in control of.

    At the time I’m writing this, they are #7e9a47 and #fba0f9 according to color picker, and I have no idea why they are these colors.

    Yes, but that’s what leads to my question: How do I control the colors of that plugin? At the moment they seem to change randomly depending on what other colors I use in the theme.

    How can I control the WooCommerce style font colors?

    The current color are horrible and doesn’t match the other colors of the theme.

    Currently the price of a product is a green/brown’ish color, and the description of a product is light pink, and since the WooCommerce Style color settings doesn’t work, I don’t know how I change them to match my Propulsion themed website.

Viewing 6 posts - 1 through 6 (of 6 total)