Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #561523

    All of the elements on my website are retina ready and look great except the select image for the contact form (See images) which looks pixelated on my retina devices. I was wondering if you guys will update that image in the future to make it retina ready?

    In the meantime, how can I replace that image with a retina ready image of my own. I already have the image uploaded to my media library and have attached the link below. I have also included a mockup of what I am trying to accomplish. Can you give me some quick css to accomplish this please? Obviously the size of the image will have to be scaled down to fit since it is considerably larger than the current image. Thanks!

    • This topic was modified 8 years, 2 months ago by djshortkut.
    #561729

    Hi djshortkut!

    I don’t think that is one of our images. If you look at it in different browsers you’ll notice it displays differently so it appears to be how the browser displays a select element. You could try looking up tutorials for customizing the select element styling.

    Best regards,
    Elliott

    #561756

    Maybe I didn’t explain clearly enough. What I am talking about is replacing the current image with the one that I have uploaded in my media library. I am able to do so with this code but the problem is that it doesn’t fit within the box the way the mockup that I sent looks. Can you let me know how I can make this work please?

    #top select, #top .avia_ajax_form .select, #top .entry-content-wrapper select, #top .mobileMenu { background-image: url(link-to-your-icons.png); }

    #563000

    Hi!

    Please remove earlier css and try the code below to replace all the select arrows on your site and replace the background URL with correct to your own png image.

    
    select {
        appearance:none;
        -moz-appearance:none; /* Firefox */
        -webkit-appearance:none; /* Safari and Chrome */
        border: none;
        background: transparent url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") no-repeat 96% center !important;
       }
    

    Cheers!
    Vinay

    #563406

    Thank you Vinay! I changed the image in the code to a thinner icon and adjusted the size to 24×24. I really like the way it looks now. The only issue I have is that when I pull up this page on my iPhone and iPad with retina screens the image looks pixelated like the original enfold select image did. I assume this is due to the fact that the size of the image is 24×24 My question is, if I use a larger image size, will I be able to scale it to fit the section like it does now? The larger image I use, the more it fills up the section but doesn’t look good. Basically, how can I make this image retina?

    Here is the icon that I used: https://www.iconfinder.com/icons/296826/arrow_down_icon#size=24

    select {
        appearance:none;
        -moz-appearance:none; /* Firefox */
        -webkit-appearance:none; /* Safari and Chrome */
        border: none;
        background: transparent url("https://cdn0.iconfinder.com/data/icons/slim-square-icons-basics/100/basics-08-24.png") no-repeat 96% center !important;
       }
    
    • This reply was modified 8 years, 2 months ago by djshortkut.
    #563455

    Hey!

    Add a large image say 48px x 48px inside this media query for retina display. The one you added will be displayed as default image and clear cache if you dont see the changes.

    @media only screen and (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi) {
      /* High-res styles go here */
    }

    Best regards,
    Vinay

    #563569

    Thank you Vinay, I tried inputting this code for retina devices in my quick css with this media query. The problem is that when I enlarge the size of the image for retina devices, it also enlarges the size of the icon within the box (which I don’t want) because it ends up being too large. (See images)

    I think the pixelation problem has to do with me scaling down the image so small and that’s why it is showing up pixelated on retina devices. I already have this custom icon uploaded to my theme in the Iconfont Manager, can’t I just access this icon this way. That way, when the icon is scaled down, it will still stay retina and look great on my retina devices since they are .svg files. I already have this icon used on another page on my theme and it shows up retina quality. The color I need the icon is #808080 and size of 24×24 I feel like it would be easier to do it this way. The icon info is below. Can this be done? Thanks for all your help!

    ( 'font' =>'lineicons9', 'icon' => 'ue800');

    #563679

    Hey!

    Yes Icons will be best. Please give us access to your wordpress admin in a private message so i can set this up for you with the correct css.

    Regards,
    Vinay

    #563683

    Thanks Vinay! Here you go.

    Again the icon font I want to use is lineicons9 => ue800 and the color is #808080 in size of 24×24

    #563884

    Hi!

    May i know the exact steps how you added the arrow font icons for some reason it’s not getting picked up by the css.
    for now I have replaced the arrow image with a bigger one do check it out now.

    Regards,
    Vinay

    #564071

    I imported the fonts in the import/export section of the theme under the Iconfont Manager in the Enfold settings (See Images) These were fonts I downloaded from fontello as .svg fonts The one that you uploaded is too large for that section and the wrong color so I put the old one back. Plus it still doesn’t look hi-res on my retina device. I think the only way to make it retina is to use this icon font. Thanks!

    'font' =>'lineicons9', 'icon' => 'ue800'

    • This reply was modified 8 years, 2 months ago by djshortkut.
    #564205

    Hey!

    Hi I tried every thing possible but sorry to say that using entypo icons as pseudo elements on a form is not working. I will keep this ticket open in case if i get any solution i will post it here.

    select{
       -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }
    select:after {
        font-family: lineicons9;
        position:absolute;
        right:5px;
        top:4px;
        content: '\ue800';
        display: block;
        width: 20px;
        height: 20px;  
    }

    Cheers!
    Vinay

    #564321

    Thanks for all the help Vinay! I was actually able to figure it out. I was able to download a plugin that makes it possible to upload .svg icons directly to my media library and then plug that in to the url in the code.

    One last thing, is there a way that I can move the icon over in the datepicker section only? (See Image) Thanks!

    • This reply was modified 8 years, 2 months ago by djshortkut.
    #564459

    Hey!

    Glad you got it figured out and thanks for sharing the tip :)

    To target only the date picker select options please use

    select.ui-datepicker-year {
    /* Your styles here */
    }
    select.ui-datepicker-month {
    /* Your styles here */
    }
    

    Cheers!
    Vinay

    #564853

    Thanks Vinay! You can close this thread.

Viewing 15 posts - 1 through 15 (of 15 total)
  • The topic ‘Contact Form Select Retina Ready Image’ is closed to new replies.