w3-btn and what am I doing wrong?

[hikingwithu2]

On a webpage I'm building the client likes his buttons to be formated with the following -

<button class="w3-btn w3-left-align w3-aqua w3-border w3-border-indigo w3-round-xxlarge w3-small" onclick="myFunction('a')">Answer</button>
<div id="a" class="w3-container w3-hide w3-left-align w3-aqua w3-border w3-border-indigo w3-round-xxlarge w3-small" style="width:65%;">orange</div>
	

Problem is he wants different colors on different pages, and many of them. So in the future changing the colors will be a major drag. Using all those selectors like that defeats the purpose of the css, right? So I am working on making a selector that contains all the details of the w3-btn w3-left-align w3-aqua w3-border etc etc. I have searched the w3-css style sheet version 3 for all relevant attibutes and have come up with this -

	.BtnShowAnswerPink {
border:none;
display:block;
outline:0;
padding:6px 16px;
vertical-align:middle;
overflow:hidden;
text-decoration:none!important;
text-align:center;
cursor:pointer;
white-space:nowrap;
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
box-shadow:none;
float:left;
width:100%;
-webkit-transition:background-color .25s,color .15s,box-shadow .25s,opacity 0.25s,filter 0.25s,border 0.15s;
transition:background-color .25s,color .15s,box-shadow .15s,opacity .25s,filter .25s,border .15s;
color:#000!important;
background-color:#ff9999!important;
border:1px solid #ccc!important;
border-color:#ff3333!important;
border-radius:32px;
font-size:12px!important; }
	.BtnHideAnswerPink {
padding:0.01em 16px;
display:none!important;
color:#000!important;
background-color:#ff9999!important;
border:1px solid #ccc!important;
border-color:#f44336!important;
border-radius:32px;
font-size:12px!important; }
	

Problem is it doesn't actually work. The button does not expand to show the text. After much more experimenting I have found that the first part, .BtnShowAnswerPink, is ok, the problem is in the second section. What is happening is the button does not expand. I have verified the javascript, and it is fine.

So, at this time, this is what I have working -

<li>D: _____, I'm Donna.<button onclick="myFunction('a')" class="BtnShowAnswerPink">Answer</button>
<div id="a" class="w3-container w3-hide w3-left-align w3-pink w3-border w3-border-red w3-round-xxlarge w3-small" style="width:65%;">
Hi (Hello), I'm Donna.
</div>
</li>
	

The javascript also comes from this site, here it is:

	<script>
function myFunction(id) {
    var x = document.getElementById(id);
    if (x.className.indexOf("w3-show") == -1) {
        x.className += " w3-show";
    } else {
        x.className = x.className.replace(" w3-show", "");
    }
}
</script>
	

What am I missing from the second part, .BtnHideAnswerPink?

I can't provide a link to the site as it is not published, yet.

Thanks.

Edited October 22, 2017 by hikingwithu2

[hikingwithu2]

Ok, so after much experimenting I have gotten it to work with this code, not exactly what I was hoping for, but it works -

	<li>J: Where are you ______?<button class="w3-container w3-btn BtnShowAnswerPink" onclick="myFunction('l')">Answer</button>
	<div class="w3-container w3-hide BtnAnswerPink" id="l" style="width:65%;">Where are you from?</div>
</li>
	

So, what would be really nice if including whatever makes up "w3-container" and "w3-btn" into the BtnShowAnswerPink and "w3-container" and "w3-hide" into BtnAnswerPink.

I have tried by copying everything related to those and pasting into the code but it simply doesn't work, as if something is still missing. The buttons don't open.

So at this point, I'm going with the above solution. If anyone knows how to integrate the other bits please post the info here.

 

[dsonesuk]

What i would do is apply a class to parent container, use that class name along with w-3 class colour you wish to target, to give it higher precedence, then change to whatever colour you wish, without messing around with original w-3 css styling and duplicating everything.

you could use w3-color-overide01 on parent then

.w3-color-overide01 .w3-aqua {background-color: lime; }

Edited October 22, 2017 by dsonesuk

[hikingwithu2]

I have gotten it working as I had hoped -

In my .css file I have done this:

	/* the dark blue section */
.section1 {
content:"";
float:left;
width: 66.6666%;
display:table;
clear:both;
padding:0.01em 16px;
border-radius:8px;
color:#fff !important;
background-color:#000066 !important;
border-left:6px solid #0000ff !important; }
	/* right-side column for images and graphics */
.whiteSection {
float:left;
width: 33.3333%;
padding:0 8px;
text-align:center!important;
background-color:#fff!important; }
	

So, what does this do for me? This is what would be needed in every page of the site if using the w3-css properties directly -

  <div class="w3-row">
    <div class="w3-container w3-twothird w3-safety-yellow w3-text-black w3-leftbar w3-border-orange w3-round-large">
        <p>stuff</p>
    </div>
    <div class="w3-container w3-third w3-white w3-center">
        <img src="../images/image.png" alt="image.png" width="250" height="117" />
    </div>    
  </div>

Now all of that is changed to this:

  <div class="w3-row">
    <div class="section1">
        <p>stuff</p>
    </div>
    <div class="whiteSection">
        <img src="../images/image.png" alt="image.png" width="250" height="117" />
    </div>    
  </div>

Obviously a huge simplification of all the webpages and much easier to manage and update later.
Comments and suggestions welcome.

 

[dsonesuk]

Don't give a specific colour name, just 'sectionColor01', 'sectionColor02', that way if you change to different colour, because its not specific named colour, its less confusing, and no need to change named colour description.

[hikingwithu2]

Exactly, that's what I have settled on - names like - section1 (which is dark blue), section2 (which is dark green, etc, and BtnSection1 (for a contrasting button for the dark blue section. I've followed this same pattern for other subsections.  It's been a lot of trial and error experimenting, but it's all coming together now. This whole process is to change an old website to a more modern site, changing not just styles but also formatting. I hope to be done with it next year (I'm working on it alone, between my private language students).

[dsonesuk]

Yet! you have classname 'whiteSection'

[hikingwithu2]

Yes I do, and that particular section will not change as it is for images/graphics that need a white background, rather than making all the images/graphics transparent. So for this site that is acceptable.