WordPress.org

Ready to get started?Download WordPress

Forums

Removing rounded corners (3 posts)

  1. dhobeika
    Member
    Posted 3 years ago #

    I am trying to remove the rounded corners when you hover over navigation items on the theme I am using on this website. I don't mind the way they look in Firefox, but they are messing up the design in IE so I want to remove them.

    I am using firebug to examine the css and the rounded edges were not located in any of the css files. It looks like they are created using the jquery.corners.js file, whose code I am pasting below. I am not very familiar with jquery and javascript. Does anyone have any suggestions as to what I can do to get rid of the rounded corners?

    jquery.corners.js code:

    /*!
     * jQuery corner plugin: simple corner rounding
     * Examples and documentation at: http://jquery.malsup.com/corner/
     * version 2.11 (15-JUN-2010)
     * Requires jQuery v1.3.2 or later
     * Dual licensed under the MIT and GPL licenses:
     * http://www.opensource.org/licenses/mit-license.php
     * http://www.gnu.org/licenses/gpl.html
     * Authors: Dave Methvin and Mike Alsup
     */
    
    /**
     *  corner() takes a single string argument:  $('#myDiv').corner("effect corners width")
     *
     *  effect:  name of the effect to apply, such as round, bevel, notch, bite, etc (default is round).
     *  corners: one or more of: top, bottom, tr, tl, br, or bl.  (default is all corners)
     *  width:   width of the effect; in the case of rounded corners this is the radius.
     *           specify this value using the px suffix such as 10px (yes, it must be pixels).
     */
    ;(function($) { 
    
    var style = document.createElement('div').style,
        moz = style['MozBorderRadius'] !== undefined,
        webkit = style['WebkitBorderRadius'] !== undefined,
        radius = style['borderRadius'] !== undefined || style['BorderRadius'] !== undefined,
        mode = document.documentMode || 0,
        noBottomFold = $.browser.msie && (($.browser.version < 8 && !mode) || mode < 8),
    
        expr = $.browser.msie && (function() {
            var div = document.createElement('div');
            try { div.style.setExpression('width','0+0'); div.style.removeExpression('width'); }
            catch(e) { return false; }
            return true;
        })();
    
    $.support = $.support || {};
    $.support.borderRadius = moz || webkit || radius; // so you can do:  if (!$.support.borderRadius) $('#myDiv').corner();
    
    function sz(el, p) {
        return parseInt($.css(el,p))||0;
    };
    function hex2(s) {
        var s = parseInt(s).toString(16);
        return ( s.length < 2 ) ? '0'+s : s;
    };
    function gpc(node) {
        while(node) {
            var v = $.css(node,'backgroundColor'), rgb;
            if (v && v != 'transparent' && v != 'rgba(0, 0, 0, 0)') {
                if (v.indexOf('rgb') >= 0) {
                    rgb = v.match(/\d+/g);
                    return '#'+ hex2(rgb[0]) + hex2(rgb[1]) + hex2(rgb[2]);
                }
                return v;
            }
            if (node.nodeName.toLowerCase() == 'html')
                break;
            node = node.parentNode; // keep walking if transparent
        }
        return '#ffffff';
    };
    
    function getWidth(fx, i, width) {
        switch(fx) {
        case 'round':  return Math.round(width*(1-Math.cos(Math.asin(i/width))));
        case 'cool':   return Math.round(width*(1+Math.cos(Math.asin(i/width))));
        case 'sharp':  return Math.round(width*(1-Math.cos(Math.acos(i/width))));
        case 'bite':   return Math.round(width*(Math.cos(Math.asin((width-i-1)/width))));
        case 'slide':  return Math.round(width*(Math.atan2(i,width/i)));
        case 'jut':    return Math.round(width*(Math.atan2(width,(width-i-1))));
        case 'curl':   return Math.round(width*(Math.atan(i)));
        case 'tear':   return Math.round(width*(Math.cos(i)));
        case 'wicked': return Math.round(width*(Math.tan(i)));
        case 'long':   return Math.round(width*(Math.sqrt(i)));
        case 'sculpt': return Math.round(width*(Math.log((width-i-1),width)));
        case 'dogfold':
        case 'dog':    return (i&1) ? (i+1) : width;
        case 'dog2':   return (i&2) ? (i+1) : width;
        case 'dog3':   return (i&3) ? (i+1) : width;
        case 'fray':   return (i%2)*width;
        case 'notch':  return width;
        case 'bevelfold':
        case 'bevel':  return i+1;
        }
    };
    
    $.fn.corner = function(options) {
        // in 1.3+ we can fix mistakes with the ready state
        if (this.length == 0) {
            if (!$.isReady && this.selector) {
                var s = this.selector, c = this.context;
                $(function() {
                    $(s,c).corner(options);
                });
            }
            return this;
        }
    
        return this.each(function(index){
            var $this = $(this),
                // meta values override options
                o = [$this.attr($.fn.corner.defaults.metaAttr) || '', options || ''].join(' ').toLowerCase(),
                keep = /keep/.test(o),                       // keep borders?
                cc = ((o.match(/cc:(#[0-9a-f]+)/)||[])[1]),  // corner color
                sc = ((o.match(/sc:(#[0-9a-f]+)/)||[])[1]),  // strip color
                width = parseInt((o.match(/(\d+)px/)||[])[1]) || 10, // corner width
                re = /round|bevelfold|bevel|notch|bite|cool|sharp|slide|jut|curl|tear|fray|wicked|sculpt|long|dog3|dog2|dogfold|dog/,
                fx = ((o.match(re)||['round'])[0]),
                fold = /dogfold|bevelfold/.test(o),
                edges = { T:0, B:1 },
                opts = {
                    TL:  /top|tl|left/.test(o),       TR:  /top|tr|right/.test(o),
                    BL:  /bottom|bl|left/.test(o),    BR:  /bottom|br|right/.test(o)
                },
                // vars used in func later
                strip, pad, cssHeight, j, bot, d, ds, bw, i, w, e, c, common, $horz;
    
            if ( !opts.TL && !opts.TR && !opts.BL && !opts.BR )
                opts = { TL:1, TR:1, BL:1, BR:1 };
    
            // support native rounding
            if ($.fn.corner.defaults.useNative && fx == 'round' && (radius || moz || webkit) && !cc && !sc) {
                if (opts.TL)
                    $this.css(radius ? 'border-top-left-radius' : moz ? '-moz-border-radius-topleft' : '-webkit-border-top-left-radius', width + 'px');
                if (opts.TR)
                    $this.css(radius ? 'border-top-right-radius' : moz ? '-moz-border-radius-topright' : '-webkit-border-top-right-radius', width + 'px');
                if (opts.BL)
                    $this.css(radius ? 'border-bottom-left-radius' : moz ? '-moz-border-radius-bottomleft' : '-webkit-border-bottom-left-radius', width + 'px');
                if (opts.BR)
                    $this.css(radius ? 'border-bottom-right-radius' : moz ? '-moz-border-radius-bottomright' : '-webkit-border-bottom-right-radius', width + 'px');
                return;
            }
    
            strip = document.createElement('div');
            $(strip).css({
                overflow: 'hidden',
                height: '1px',
                minHeight: '1px',
                fontSize: '1px',
                backgroundColor: sc || 'transparent',
                borderStyle: 'solid'
            });
    
            pad = {
                T: parseInt($.css(this,'paddingTop'))||0,     R: parseInt($.css(this,'paddingRight'))||0,
                B: parseInt($.css(this,'paddingBottom'))||0,  L: parseInt($.css(this,'paddingLeft'))||0
            };
    
            if (typeof this.style.zoom != undefined) this.style.zoom = 1; // force 'hasLayout' in IE
            if (!keep) this.style.border = 'none';
            strip.style.borderColor = cc || gpc(this.parentNode);
            cssHeight = $(this).outerHeight();
    
            for (j in edges) {
                bot = edges[j];
                // only add stips if needed
                if ((bot && (opts.BL || opts.BR)) || (!bot && (opts.TL || opts.TR))) {
                    strip.style.borderStyle = 'none '+(opts[j+'R']?'solid':'none')+' none '+(opts[j+'L']?'solid':'none');
                    d = document.createElement('div');
                    $(d).addClass('jquery-corner');
                    ds = d.style;
    
                    bot ? this.appendChild(d) : this.insertBefore(d, this.firstChild);
    
                    if (bot && cssHeight != 'auto') {
                        if ($.css(this,'position') == 'static')
                            this.style.position = 'relative';
                        ds.position = 'absolute';
                        ds.bottom = ds.left = ds.padding = ds.margin = '0';
                        if (expr)
                            ds.setExpression('width', 'this.parentNode.offsetWidth');
                        else
                            ds.width = '100%';
                    }
                    else if (!bot && $.browser.msie) {
                        if ($.css(this,'position') == 'static')
                            this.style.position = 'relative';
                        ds.position = 'absolute';
                        ds.top = ds.left = ds.right = ds.padding = ds.margin = '0';
    
                        // fix ie6 problem when blocked element has a border width
                        if (expr) {
                            bw = sz(this,'borderLeftWidth') + sz(this,'borderRightWidth');
                            ds.setExpression('width', 'this.parentNode.offsetWidth - '+bw+'+ "px"');
                        }
                        else
                            ds.width = '100%';
                    }
                    else {
                        ds.position = 'relative';
                        ds.margin = !bot ? '-'+pad.T+'px -'+pad.R+'px '+(pad.T-width)+'px -'+pad.L+'px' :
                                            (pad.B-width)+'px -'+pad.R+'px -'+pad.B+'px -'+pad.L+'px';
                    }
    
                    for (i=0; i < width; i++) {
                        w = Math.max(0,getWidth(fx,i, width));
                        e = strip.cloneNode(false);
                        e.style.borderWidth = '0 '+(opts[j+'R']?w:0)+'px 0 '+(opts[j+'L']?w:0)+'px';
                        bot ? d.appendChild(e) : d.insertBefore(e, d.firstChild);
                    }
    
                    if (fold && $.support.boxModel) {
                        if (bot && noBottomFold) continue;
                        for (c in opts) {
                            if (!opts[c]) continue;
                            if (bot && (c == 'TL' || c == 'TR')) continue;
                            if (!bot && (c == 'BL' || c == 'BR')) continue;
    
                            common = { position: 'absolute', border: 'none', margin: 0, padding: 0, overflow: 'hidden', backgroundColor: strip.style.borderColor };
                            $horz = $('<div/>').css(common).css({ width: width + 'px', height: '1px' });
                            switch(c) {
                            case 'TL': $horz.css({ bottom: 0, left: 0 }); break;
                            case 'TR': $horz.css({ bottom: 0, right: 0 }); break;
                            case 'BL': $horz.css({ top: 0, left: 0 }); break;
                            case 'BR': $horz.css({ top: 0, right: 0 }); break;
                            }
                            d.appendChild($horz[0]);
    
                            var $vert = $('<div/>').css(common).css({ top: 0, bottom: 0, width: '1px', height: width + 'px' });
                            switch(c) {
                            case 'TL': $vert.css({ left: width }); break;
                            case 'TR': $vert.css({ right: width }); break;
                            case 'BL': $vert.css({ left: width }); break;
                            case 'BR': $vert.css({ right: width }); break;
                            }
                            d.appendChild($vert[0]);
                        }
                    }
                }
            }
        });
    };
    
    $.fn.uncorner = function() {
        if (radius || moz || webkit)
            this.css(radius ? 'border-radius' : moz ? '-moz-border-radius' : '-webkit-border-radius', 0);
        $('div.jquery-corner', this).remove();
        return this;
    };
    
    // expose options
    $.fn.corner.defaults = {
        useNative: true, // true if plugin should attempt to use native browser support for border radius rounding
        metaAttr:  'data-corner' // name of meta attribute to use for options
    };
  2. dremeda
    Sucuri Wizard
    Posted 3 years ago #

    Hi there, please use pastebin for larger code snippets in the future.

    Is this an include hard coded in the theme, or is it a plugin?

    If it is hard coded you can probably remove the script from the theme and the effect should stop.

    If it's in a plugin, try disabling the plugin.

    Cheers!

  3. dhobeika
    Member
    Posted 3 years ago #

    Sorry about that! I have never heard of pastebin before, I'll use it from now on.

    It's not a plugin, it's in a js file (jquery.corners.js) that is called upon in the header. I tried removing the line in the header that calls upon the js file, but then it messes up the whole theme. So I need to figure out what area of the jquery.corners.js I can edit to remove the rounded corners effect without messing up the whole theme. I have no knowledge of jquery and javascript so that is where my problem lies. I am looking to see if anyone can look at the jquery.corners.js I pasted into the first post and help instruct me what part I can edit.

    Here is the file on pastebin -- http://pastebin.com/Q4Jdtnk5

Topic Closed

This topic has been closed to new replies.

About this Topic