• Resolved henkewe

    (@henkewe)


    Hey guys!

    I don’t know what happened but all of a sudden there is a white border around any of the links (text link, image link) when clicked…

    I’ve tried all I could find when searching for this problem at this forum but nothing worked.

    Can someone help? (let me know if I should post my style.css)
    Thanks!

    https://primecreationband.com/

Viewing 5 replies - 1 through 5 (of 5 total)
  • Which browser are you using?
    I am using Google Chrome. I do not see the issue.

    Thread Starter henkewe

    (@henkewe)

    You’re right!

    I tried both Chrome and IE and no problem with any of them so I guess must be a Firefox related problem then since that’s what I’m using.

    Hmm, how to fix that?

    This is this (gray color as it appears) coming out from theme’s inline style

    a:focus, select:focus, input[type="file"]:focus, input[type="radio"]:focus, input[type="submit"]:focus, input[type="checkbox"]:focus {
      outline: 5px auto #beb9a9;
      outline-offset: -1px;
    }

    Also this (red color as default) from the theme’s style

    a:focus {
      outline: 5px auto #ff2a13;
      outline-offset: -1px;
    }

    So just go to theme option where it originates the inline style and disable it.

    This code will disable it but I wouldn’t recommend using it because we should get rid of it from the source rather than override it, but anyway

    a:focus { outline: none !important; }
    Thread Starter henkewe

    (@henkewe)

    Forgot to mention that I’m using a child theme and this is the style.css:

    /*
    
    Theme Name: X – Child Theme
    Theme URI: https://theme.co/x/
    Author: Themeco
    Author URI: https://theme.co/
    Description: Make all of your modifications to X in this child theme.
    Version: 1.0.0
    Template: x
    
    */
    
    /* -------- HEADER -------- */
    .x-logobar {
        background-color: transparent !important; border: none !important;
    }
    
    .x-brand img {
        position: absolute;
        top: -60px;
    }
    
    /* -------- NAVIGATION -------- */
    .x-navbar .desktop .x-nav > li > a:hover, .x-navbar .desktop .x-nav > .x-active > a, .x-navbar .desktop .x-nav > .current-menu-item > a {
      box-shadow: none !important;
    }
    
    .x-boxed-layout-active .site {
    background: url("https://primecreationband.com/wp-content/uploads/2015/04/Background_Paper_header.jpg");
    background-size: 100%;
    background-position: center top;
    }
    
    .x-navbar {
        background: url("https://primecreationband.com/wp-content/uploads/2015/04/leather-stripe-tile.jpg");
        background-size: auto 100%;
        border: none;
        margin-bottom: 60px;
        box-shadow: 0px 5px 20px #000;
    }
    
    @media screen and (max-width: 980px) {
    	.x-navbar {
    	    background: url("https://primecreationband.com/wp-content/uploads/2015/04/Leather-tile.jpg");
    	    background-size: auto 150px;
    	    border: none;
    	    margin-bottom: 60px;
    	    box-shadow: 0px 5px 20px #000;
    	}
    }
    
    .x-btn-navbar {
    margin-top:15px !important;
    }
    
    .x-btn-navbar.collapsed {
     background-color: #000 !important;
     color: #27231e !important;
    }
    
    .x-btn-navbar.collapsed:hover {
      color: #beb9a9 !important;
      background-color: #27231e !important;
    }
    
    .x-navbar .mobile .x-nav {
      margin: 80px 0 !important;
    }
    
    .x-nav li {
    	padding-right:20px;
    }
    /* -------- CONTENT -------- */
    .x-container.offset {
        margin-top:0px;
    }
    
    body {
        background-size: 100%;
    }
    
    .entry-wrap table a, .entry-wrap table a:visited, .entry-wrap table a:active {
      text-decoration: none;
      border-bottom: 1px dotted;
    }
    
    /* -------- EVENTS -------- */
    .p-meta {
    display: none;
    }
    
    /* -------- POSTS -------- */
    a.entry-thumb:hover img {
    	opacity: 1;
    	filter: alpha(opacity=100);
    	zoom: 1;
    }
    
    .entry-thumb:before {
    	background-color:none;
    	content: "";
    	display:none;
    }
    
    .entry-thumb {
        max-height: 600px;
        overflow: hidden;
    }
    
    .date {
    	margin-top:20px;
    }
    
    @media screen and (max-width: 980px) {
        .entry-thumb {
            max-height: 600px;
        }
    }
    
    @media screen and (max-width: 700px) {
        .entry-thumb {
            max-height: 400px;
        }
    }
    
    .entry-featured a:hover {
        opacity: 0.9;
    }
    
    /* -------- WIDGETS -------- */
    
    .widget ul, .entry-wrap, .desktop .sub-menu {
        background: url("https://primecreationband.com/wp-content/uploads/2015/04/Leather-tile.jpg");
        background-size: 150px;
    }
    
    .floating-social-icon {
    width: 38px;
    box-shadow: 0px 0px 5px #000;
    border-radius: 24px;
    margin: 5px;
    }
    
    .social-icon-field {
    text-align: left;
    width: 100%;
    }
    @media screen and (max-width: 980px) {
        .social-icon-field {
        text-align: center;
    }
    }
      .hentry a {
    border-bottom: 1px solid #75674e;
    color: #75674e;
    }
    
    .hentry a:hover {
    border-bottom: 1px solid #beb9a9;
    color: #beb9a9;
    text-decoration: none;
    }
    Thread Starter henkewe

    (@henkewe)

    Yeah, this one solved it:
    a:focus { outline: none !important; }

    Couldn’t find the file where this was located:
    a:focus {
    outline: 5px auto #ff2a13;
    outline-offset: -1px;
    }

    So I just put the solving css line in the theme’s custom field.
    Thanks paulwpxp!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Can't get rid of border around my links’ is closed to new replies.