Support » Themes and Templates » two questions: ".grid-thumb img" & "border-radius" .. please :)

  • m3mo3y

    (@m3mo3y)


    hi, first thanks for every one helped me … and sorry for bad Language πŸ˜›

    OK,
    1) when I use “border-radius” code I have a deferent result in firefox and google chrome !!!!

    in firefox look like this..

    in google chrome look like this..

    >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
    2) when I use “.grid-thumb img” code also I have a deferent result in localhost and online host !!!!

    in localhost (and i want this look πŸ™‚) look like this..

    in online host look like this…
    πŸ™

    *** note: i am using a same theme in localhost and online host, it’s Themolio theme ***
    >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

    my style.css file :

    /*
    Theme Name: Themolio
    Theme URI: http://dezineappz.com/themolio
    Author: DezineAppz
    Author URI: http://dezineappz.com
    Description: Beautiful grid layout based theme. Traditional look also available. Completely responsive through a mobile friendly layout. Custom background, logo and favicon feature available. Elegant look and feel with customization options available. Multiple post format support. Support for post thumbnails. Valid XHTML and CSS 2/3. Compatible upto WordPress 3.4.1
    Version: 1.2
    License: GNU General Public License
    License URI: license.txt
    Tags: light, white, two-columns, right-sidebar, fixed-width, custom-background, custom-colors, custom-menu, editor-style, featured-images, full-width-template, post-formats, theme-options, translation-ready
    */
    
    /* Reset */
    
    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video { border: 0; font-size: 100%; font: inherit; vertical-align: baseline; margin: 0; padding: 0; }
    
    article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display: block; }
    body { line-height: 1; text-shadow: none; }
    ol,ul { list-style: none; }
    blockquote,q { quotes: none; }
    blockquote: before,blockquote: after,q: before,q: after { content: none; }
    table { border-collapse: collapse; border-spacing: 0; }
    
    /* Default HTML Elements */
    
    h1,h2,h3,h4,h5,h6 { clear: both; word-wrap: break-word; line-height: 165%; font-weight: 700; }
    p { word-wrap: break-word; line-height: 165%; }
    pre { overflow: auto; font-family: courier,Georgia,Serif; margin: 5px; padding: 5px; }
    pre { white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; _white-space: pre; }
    a { text-decoration: none; }
    abbr, .abbr, acronym { border-bottom: 1px dotted; cursor: help; }
    address { display: block; margin: 0 0 0 1.625em; }
    cite,em,i { font-style: italic; }
    blockquote em,blockquote i,blockquote cite { font-style: normal; }
    blockquote { padding-left: 15px; margin-left: 15px; border-left: 5px #ddd solid; font-family: Georgia, serif; font-style: italic; }
    sup,sub { height: 0; line-height: 1; vertical-align: baseline; position: relative; }
    sup { bottom: 1ex; }
    sub { top: .5ex; }
    dt,strong { font-weight: 700; }
    : focus { outline: 0; }
    del, strike, s { text-decoration: line-through; }
    ins { text-decoration: none; background-color: #feeeaf; }
    a img { border: 0; }
    .clearfix: after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
    * html .clearfix { zoom: 1; } /* IE6 */
    : first-child+html .clearfix { zoom: 1; } /* IE7 */
    .clear { line-height: 1px; height: 0; margin: 0; padding: 0; clear: both; visibility: hidden; }
    input { font-family: Helvetica, Arial, sans-serif; }
    input[type="submit"], input[type="reset"], input[type="button"] { padding: 5px; border: 1px solid; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; font-weight: 700; cursor: pointer; }
    input[type="submit"]::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner { border:0; padding:0; }
    input[type="text"], input[type="password"], textarea { padding: 5px; border: 1px solid; }
    textarea { overflow: auto; font-family: inherit; font-size: 100%; }
    
    /* Body */
    body { background: #e5e5e5 url(images/background.png) repeat; }
    .wrapper { width: 1000px; margin: 0 auto; overflow: hidden; text-align: left; }
    #content .wrapper { padding: 20px; }
    .container { float: left; width: 740px; }
    .fullcontainer { width: 100%; }
    .widget-area { float: left; width: 240px; margin-left: 20px; }
    
    /* Layout helpers */
    .tablayout { width: 100%; }
    .tablayout td { vertical-align: middle; }
    .tablayout td.left { text-align: left; }
    .tablayout td.right { text-align: right; }
    
    /* Header */
    header[role="banner"], header[role="banner"] .wrapper, header[role="banner"] .tablayout { height: 130px; }
    header[role="banner"] { background: url(images/header_bg.png) repeat; padding: 10px; }
    .site-title, .site-desc { display: none; }
    .site-title a, .site-desc { display: none; }
    .site-title { display: none; }
    .site-desc { display: none; }
    .custom-logo { max-height: auto; max-width: auto; }
    header[role="banner"] #s { width: 120px; border-color: #000; background-color: #111; border-right-color: #444; border-bottom-color: #444; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; color: #777; }
    header[role="banner"] #searchsubmit { width: 100px; }
    
    /* Footer */
    .social-link { margin-left: 5px; }
    .social-link img { vertical-align: middle; }
    
    /* Dropdown Menu */
    nav {
          background: url(images/mm.png) repeat-x left top #434142;
          box-shadow: 0 0 5px #dce0e2 inset, 0 0 2px #b2b2b2;
          border:1px solid #606060;
          border-radius: 0 0 50px 50px;
    
    }
    .main-menu { overflow: hidden; }
    .main-menu ul, .main-menu ul ul { list-style: none; margin: 0 !important; }
    .main-menu ul li { float: left; }
    .main-menu ul li a { display: block; font-size: 13px; font-weight: 700; text-transform: capitalize; }
    .main-menu ul ul { visibility: hidden; width: 140px; position: absolute; z-index: 999; }
    .main-menu ul ul li { width: 140px; position: relative; }
    .main-menu ul ul ul { left: 139px; top: 0; position: absolute; }
    .main-menu ul li:hover > ul { visibility: visible; }
    /* styling */
    .main-menu a { padding: 15px 10px; color: #fff; text-shadow: #000 1px 1px; }
    .main-menu li { background: url(images/mn.png) repeat; }
    .main-menu a:hover, .main-menu .current-menu-item a, .main-menu .current-menu-item li a:hover, .main-menu .current_page_item a, .main-menu .current_page_item li a:hover { background: url(images/menu_hover_bg.png) repeat; }
    .main-menu .current-menu-item li a, .main-menu .current_page_item li a { background-image: none; }
    
    /* Posts */
    article.post, article.page, article.type-attachment { margin-bottom: 30px; background-color: #fff; border: 1px #cecece solid; text-shadow: #fff 1px 1px; padding: 20px; }
    .entry-title { font-family: Georgia, serif; color: #333; font-weight: 300; margin-bottom: 10px; font-size: 24px; }
    .entry-title a { color: #555; }
    .entry-title a:hover { color: #111; }
    .entry-meta { font-size: 12px; color: #888; line-height: 10%; padding-bottom: 0; border-bottom: 1px #eee solid; margin-bottom: 0; }
    .entry-meta a:hover { text-decoration: underline; }
    .entry-meta p { margin-top: 5px; }
    .entry-content { line-height: 165%; overflow: hidden; }
    .entry-content a:hover { text-decoration: underline; }
    .entry-content * { margin-bottom: 15px; line-height: 165%; }
    .entry-content *:last-child { margin-bottom: 0; }
    .entry-content .wp-smiley { margin-bottom: 0 !important; }
    .entry-content br { margin-bottom: 0 !important; }
    .entry-content h1 { font-size: 24px; }
    .entry-content h2 { font-size: 20px; }
    .entry-content h3 { font-size: 17px; }
    .entry-content h4 { font-size: 15px; }
    .entry-content h5 { font-size: 13px; }
    .entry-content h6 { font-size: 12px; }
    .entry-content li { margin-bottom: 10px; }
    .entry-content ul, .entry-content ul ul { list-style: disc; margin-left: 20px; }
    .entry-content ol { list-style: decimal; margin-left: 25px; }
    .entry-content ol ol { margin-left: 20px; }
    .entry-content ul ul, .entry-content ol ol { margin-top: 10px; }
    .entry-content ol ol { list-style: upper-alpha; }
    .entry-content ol ol ol { list-style: lower-roman; }
    .entry-content ol ol ol ol { list-style: lower-alpha; }
    .entry-content table { border: 1px #ccc solid; }
    .entry-content table td, .entry-content table th { border: 1px #ccc solid; padding: 5px; }
    .entry-content table th { background-color: #e5e5e5; font-weight: 700; text-shadow: #f5f5f5 1px 1px; }
    .entry-content table caption { border: 1px #ccc solid; padding: 5px; border-bottom: 0 none; }
    .more-link { font-family: Helvetica, Arial, sans-serif !important; clear: both; background: #f5f5f5 url(images/button_bg.png) repeat-x bottom left; position:relative; overflow:visible; display:inline-block; padding: 4px 5px; border: 1px #ccc solid; margin:0; text-decoration:none; text-shadow:1px 1px 0 #fff; font-size: 11px; white-space:nowrap; cursor:pointer; outline:none; zoom:1; *display:inline; color: #555 !important; font-weight: 700; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; }
    .more-link:hover { text-decoration: none !important; color: #fff !important; }
    .page-link { clear: both; }
    .page-link span { font-family: Helvetica, Arial, sans-serif !important; display:inline-block; position:relative; overflow:visible; padding: 6px !important; line-height: 100%; margin-bottom: 0 !important; font-weight: 700; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; border: 1px solid; }
    .page-link a:hover span, .page-link span { background: url(images/button_bg.png) repeat-x top left; color: #fff !important; }
    .page-link a span { background-color: #f5f5f5; border-color: #ccc; color: #555 !important; text-shadow: #fff 1px 1px !important; text-decoration: none !important; }
    .page-link .pages-title { background: none; border: 0 none; text-shadow: none !important; color: #555 !important; }
    .entry-thumb { margin-bottom: 10px; }
    .entry-thumb img { max-width: 100%; height: auto; width: auto; }
    #author-info { clear: both; overflow: hidden; padding-top: 10px; margin-top: 15px; border-top: 1px #eee solid; }
    #author-info a:hover { text-decoration: underline; }
    #author-avatar { float: left; width: 48px; }
    #author-avatar img { margin-top: 7px; }
    #author-description { float: left; width: 85%; margin-left: 15px; }
    #author-description h3 { font-size: 16px; font-family: Georgia, serif; font-weight: 300; }
    .entry-utility { clear: both; padding-top: 10px; margin-top: 15px; border-top: 1px #eee solid; line-height: 165%; }
    .entry-utility a:hover { text-decoration: underline; }
    .utility-title { font-weight: 700; }
    .sticky, .bypostauthor {}
    
    /* Posts: Grid */
    .grid-col { float: left; margin: 0 1%; }
    .grid-col-2 { width: 48%; }
    .grid-col-3 { width: 31%; }
    .grid-col-4 { width: 23%; }
    .grid-horizontal-col-2 { width: 44%; }
    .grid-horizontal-col-3 { width: 27%; }
    .grid-horizontal-col-4 { width: 19%; }
    .grid-col article.post { padding: 10px !important; margin-bottom: 20px; }
    .grid-title { font-size: 18px; margin-bottom: 0; }
    .grid-thumb img { width:99%; height:auto; margin:0; }
    .grid-thumb { margin-bottom: 0; }
    .grid-meta span { display: block; margin-top: 5px; }
    .grid-meta span:first-child { margin-top: 0; }
    .grid-meta .entry-comments { display: inline-block; margin-top: 0; }
    .post-grid-horizontal { padding: 10px !important; margin: 0 1%; margin-bottom: 20px; min-height: 250px; display: -moz-inline-stack; display: inline-block; vertical-align: top; zoom: 1; *display: inline; _height: 250px; }
    
    /* Widget Area */
    .widget { padding: 10px; background-color: #fff; border: 1px #cecece solid; margin-bottom: 30px; }
    .widget-title { font-size: 16px; color: #555; font-family: Georgia, serif; font-weight: 300; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px #eee solid; }
    .widget a:hover { text-decoration: underline; }
    .widget li { line-height: 165%; margin-top: 5px; }
    .widget ul ul { margin-left: 15px; list-style: square; list-style-position: inside; }
    #wp-calendar { width: 100%; }
    #wp-calendar td, #wp-calendar th, #wp-calendar caption { padding: 5px; text-align: center; }
    #wp-calendar td { background-color: #eee; }
    #wp-calendar th { background-color: #777; color: #fff; }
    #wp-calendar #prev { text-align: left; }
    #wp-calendar #next { text-align: right; }
    .widget #s { width: 55%; }
    .widget #searchsubmit { width: 35%; }
    .tagcloud a { margin-bottom: 5px; display: inline-block; font-size: 11px !important; background: #f5f5f5 url(images/button_bg.png) bottom left repeat-x; border: 1px #d5d5d5 solid; color: #666 !important; text-shadow: #fff 1px 1px; padding: 3px 8px; -moz-border-radius: 16px; -webkit-border-radius: 16px; border-radius: 16px; }
    .tagcloud a:hover { color: #fff !important; }
    
    /* Form elements */
    input[type="text"], input[type="password"], textarea { border-color: #cecece; color: #777; }
    input[type="submit"], input[type="reset"], input[type="button"] { background: url(images/button_bg.png) bottom left repeat-x; color: #fff; }
    
    /* Navigation */
    .navigation a, .single-navigation span a { font-family: Helvetica, Arial, sans-serif !important; background: #f5f5f5 url(images/button_bg.png) repeat-x top left; position:relative; overflow:visible; display:inline-block; padding: 7px; border: 1px #cecece solid; margin:0; text-decoration:none; text-shadow: 1px 1px 0 #fff; font-size: 11px; white-space:nowrap; cursor:pointer; outline:none; zoom:1; *display:inline; color: #555 !important; font-weight: 700; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; margin-right: 5px; }
    .navigation a:hover, .navigation .current, .single-navigation span a:hover { color: #fff !important; text-decoration: none !important; }
    
    /* Bread Crumbs */
    #crumbs { margin-bottom: 20px; background-color: #fff; border: 1px #cecece solid; padding: 20px; font-size: 13px; color: #888; font-weight: 700; }
    #crumbs a { color: #555; }
    
    /* Images and alignment */
    .alignnone { margin: 5px 20px 20px 0; }
    .aligncenter,div.aligncenter { display: block; margin: 5px auto; }
    .alignright { float: right; margin: 5px 0 20px 20px; }
    .alignleft { float: left; margin: 5px 20px 20px 0; }
    img.alignleft { margin: 10px 20px 5px 0 !important; display: inline; float: left; }
    img.alignright { margin: 10px 10px 5px 20px !important; display: inline; float: right; }
    img.aligncenter { margin: 10px auto !important; display: block; clear: both; }
    img.alignnone { /* not sure about this one */ }
    .entry-content img, .comment-content img, .widget img { max-width: 100%; }
    img[class*="align"], img[class*="wp-image-"], img[class*="attachment-"] { height: auto; }
    img.size-full, img.size-large { max-width: 100%; width: auto; height: auto; }
    .entry-content embed, .entry-content object, .entry-content iframe { max-width: 100%; }
    .gallery dl, .gallery dt { margin: 0; padding: 0; }
    .gallery-item { text-align: center; }
    .gallery-columns-1 .gallery-item { width: 100%; }
    .gallery-columns-2 .gallery-item { width: 46%; margin: 2%; }
    .gallery-columns-3 .gallery-item { width: 29%; margin: 2%; }
    .gallery-columns-4 .gallery-item { width: 21%; margin: 2%; }
    .gallery-columns-5 .gallery-item { width: 16%; margin: 2%; }
    .gallery-columns-6 .gallery-item { width: 12%; margin: 2%; }
    .gallery .gallery-item { float: left; }
    .entry-attachment { text-align: center; }
    .wp-caption, .entry-attachment { max-width: 100%; background: none !important; border: 0 none !important; padding: 0 !important; }
    .wp-caption img, .entry-attachment img, .gallery-thumb img, .gallery-item img { max-width: 98% !important; height: auto; background: #fff; border: 1px #ddd solid; padding: 4px; }
    .wp-caption .wp-caption-text, .entry-attachment .entry-caption p, .gallery .gallery-caption { font-size: 12px; margin-bottom: 10px; padding: 0 !important; word-wrap: break-word; line-height: 135%; margin-top: 5px; text-align: center; }
    
    /* Comments */
    .comment-title-container { background-color: #fff; border: 1px #cecece solid; margin-top: 30px; }
    .comment-title-container td { padding: 10px 20px; }
    .comments-title { font-family: Georgia, serif; font-size: 20px; font-weight: 300; color: #555; }
    .comments-write-link a { font-size: 13px; font-weight: 300; }
    .comments-write-link a:hover { text-decoration: underline; }
    .comment-navigation { margin-top: 30px; }
    .commentlist li { padding: 20px; background-color: #fff; border: 1px #cecece solid; margin-top: 20px; }
    .commentlist li li { background: none; border: 0 none; padding-bottom: 0; padding-right: 0; }
    .comment-meta a:hover { text-decoration: underline; }
    .comment-meta p { margin-top: 5px; }
    .comment-meta p:first-child { margin-top: 0; }
    .comment-reply, .edit-link, .comment-awaiting-moderation { font-size: 11px; }
    .comment-awaiting-moderation { font-family: Georgia, serif; font-style: italic; color: #333; font-size: 12px; font-weight: 700; }
    .comment-meta { padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px #eee solid; }
    .comment-content, .pingback-content { line-height: 165%; overflow: hidden; }
    .comment-content a:hover,  .pingback-content a:hover { text-decoration: underline; }
    .comment-content *, .pingback-content * { margin-bottom: 15px; line-height: 165%; }
    .comment-content *:last-child, .pingback-content *:last-child { margin-bottom: 0; }
    .comment-content .wp-smiley { margin-bottom: 0 !important; }
    .comment-content br { margin-bottom: 0 !important; }
    .comment-content h1 { font-size: 24px; }
    .comment-content h2 { font-size: 20px; }
    .comment-content h3 { font-size: 17px; }
    .comment-content h4 { font-size: 15px; }
    .comment-content h5 { font-size: 13px; }
    .comment-content h6 { font-size: 12px; }
    .comment-content li { margin-bottom: 10px; padding: 0; }
    .comment-content ul, .comment-content ul ul { list-style: disc; margin-left: 20px; }
    .comment-content ol { list-style: decimal; margin-left: 25px; }
    .comment-content ol ol { margin-left: 20px; }
    .comment-content ul ul, .comment-content ol ol { margin-top: 10px; }
    .comment-content ol ol { list-style: upper-alpha; }
    .comment-content ol ol ol { list-style: lower-roman; }
    .comment-content ol ol ol ol { list-style: lower-alpha; }
    .comment-content table { border: 1px #ccc solid; }
    .comment-content table td, .comment-content table th { border: 1px #ccc solid; padding: 5px; }
    .comment-content table th { background-color: #e5e5e5; font-weight: 700; text-shadow: #f5f5f5 1px 1px; }
    .comment-content table caption { border: 1px #ccc solid; padding: 5px; border-bottom: 0 none; }
    .nocomments, .nopassword { padding: 20px; background-color: #fff; border: 1px #cecece solid; margin-top: 30px; }
    
    /* Comment Form */
    #respond { padding: 20px; background-color: #fff; border: 1px #cecece solid; margin-top: 30px; }
    .form-allowed-tags { display: none; }
    #reply-title { font-family: Georgia, serif; font-size: 20px; font-weight: 300; margin-bottom: 0; line-height:100%; }
    #cancel-comment-reply-link { display: block; line-height: 100%; width: 100px; font-size: 12px; font-weight: 300; margin-top: 10px; display: block; }
    #commentform p { margin-top: 10px; }
    #commentform input, #commentform textarea { margin-top: 5px; display: block; }
    #commentform label { font-weight: 700; }
    .commentlist li #respond { border-color: #e5e5e5 !important; }
    
    /* Footer */
    footer[role="contentinfo"] { background: url(images/header_bg.png) repeat; font-size: 13px; color: #999; text-shadow: #000 1px 1px; }
    footer[role="contentinfo"] .wrapper { padding: 20px 0; }

    thanks for all…. πŸ™‚

Viewing 4 replies - 1 through 4 (of 4 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    I don’t see the difference between the first two screenshots, but are you using the webkit styles?

    Use a CSS3 Generator to create the CSS for you. That linked generator creates the additional -webkit-border-radius.

    If you want old IE support, use a CSS PIE plugin.

    Moderator Jose Castaneda

    (@jcastaneda)

    THEME COFFEE MONKEY

    1. Weird how in Chrome it has a slight background color added to it. Not entirely sure what to say on that or what to make of it.

    2. What seems to be the actual issue? Is it the height of the image? The height of the content box? The text being used doesn’t display right? The localhost seems to be a different weight but I could be wrong.

    3. Please don’t post more than 10 lines of code. If you must please use: pastebin.com to do so. πŸ™‚

    Thread Starter m3mo3y

    (@m3mo3y)

    I don't see the difference between the first two screenshots, but are you using the webkit styles?

    the difference is the menu background in google chrome it is dark !!!

    ———————————————————————–

    Use a CSS3 Generator to create the CSS for you. That linked generator creates the additional -webkit-border-radius.
    
    If you want old IE support, use a CSS PIE plugin.

    i don’t have a knowledge with php, css, or html language πŸ™

    thanks Andrew Nevins for reply πŸ™‚

    Thread Starter m3mo3y

    (@m3mo3y)

    2. What seems to be the actual issue? Is it the height of the image? The height of the content box? The text being used doesn’t display right? The localhost seems to be a different weight but I could be wrong.

    the problem is image size πŸ™ , exactly with height.

    3. Please don’t post more than 10 lines of code. If you must please use: pastebin.com to do so. πŸ™‚

    so sorry about that ^_^

    [ Moderator note: You can receive urgent support at http://jobs.wordpress.net ]

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘two questions: ".grid-thumb img" & "border-radius" .. please :)’ is closed to new replies.