[Resolved] button focus color

Home Forums Support button focus color

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1464805
    Matthew

    I have a white button to go a red color when it’s clicked, and when it’s clicked again it stays red. What I would like is for the button to return to the white color when it’s clicked again. Only this second button click would return the old color (and not a click onto the page etc.)

    With this way the simple use of color implies an activated or non activated condition and there’s no need for a toggle text.

    thanks,

    #1464974
    David
    Staff
    Customer Support

    Hi there,

    Changing the ‘status’ of a buttons active state would require some JS – wherease a Check Box made to look like a button would not.

    Can we see the a link where the button is displayed so we can look at the options ?

    #1465082
    Matthew

    Thanks David, I sent the link thru the account issue form along with an access password for the ‘Hidemysite’ plug-in.

    Kindly note the code for the button below, inside the template for media attachments:

    <button class="button page-nav red">Image Numbers</button>

    It is hidden by default and is revealed by clicking another button:

    <button class="button page-nav red">Portrayal Gallery</button>

    thanks,

    #1465197
    David
    Staff
    Customer Support

    So would it just be the Image Numbers button that you want the focus color for or also the Portrayal Button?

    #1466200
    Tom
    Lead Developer
    Lead Developer

    Try adding this CSS:

    .button.page-nav.red:active, .button.page-nav.red:focus {
        background: #fff;
        color: #CC2229;
        border: 2px solid #CC2229;
        text-decoration: none;
    }

    Let us know πŸ™‚

    #1466491
    Matthew

    I need the white button to become red when clicked. Then, when clicked a second time, it becomes white. Like a toggle but toggling the color and not text.

    With the above code it stays white.

    I think it might require some script and will have a look if can find something.

    #1466637
    Matthew

    sorted this out with a resource on the ‘net,

    <button class="button gallery" id="select" onclick="colorchange('select'); portrayalControls()" style="background:rgb(204,34,41); margin: 10px 10px">Portrayal Gallery</button>
    <div>
    <button class="button gallery" id="select1" onclick="colorchange('select1')" style="background:rgb(204,34,41);">Image Numbers</button>
    </div>
    <script>
    	function colorchange(id)
    	{
    
    	  var background = document.getElementById(id).style.backgroundColor;
    
    	  if(background == "rgb(204, 34, 41)")
    	  {
    	  document.getElementById(id).style.backgroundColor = "rgb(0,0,0)";
    	  }
    	  if(background == "rgb(0, 0, 0)")
    	  {
    		document.getElementById(id).style.backgroundColor = "rgb(204,34,41)";
    	  }
    
    	}
    </script>

    Buttons turn black when clicked then back to red when clicked again.

    portrayalControls() is another function to open a div which has the second button not yet clicked.

    https://drive.google.com/file/d/1KoMra0yaIF2dlALItBRWgdLsGrMiRpf5/view?usp=sharing

    Took hover, active, focus etc off as confusing with this arrangement.

    #1467615
    Tom
    Lead Developer
    Lead Developer

    Glad you got it sorted πŸ™‚

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.