HELP! I'M TRYING 2 LEARN – [simple] Where to put the CSS code to work?

[DJ Carl]

Hi Folks,

I hate bothering people, so I went to https://www.w3schools.com/css and created this table box for a Primary Sidebar widget in the StudioPress METRO theme on a staging site.

I really do not know CSS so I need help as I'm learning/teaching myself...
[1] Have I done the code correctly?
[2] Where do I put the code for the table box to work?

Whatever you send me will be real educational 😉

Can anyone recommend an excellent simple book/DVD series to learn CSS for a beginner like me???

https://djcarl.com/

[Bianca]

Hi There,
You can put the HTML bit of the code (the code between the body tags) in a HTML widget to display it in the sidebar. The CSS (the code between the style tags) can be placed in the Theme customizer's "Extra CSS". That should work.

EDIT: Looking closer, the code will not validate. Try this instead:
Widget HTML

<div class="my-table">
	
<table>
  <tr>
  <td class="td-first"><span>Brands TRUST Music</span></td>
  </tr>
</table>
 <table>
  <tr>
    <td class="td-second"><img title="DJ mix playlists" src="https://djcarl.com/animations/corporate-1.gif" width="110" height="90"></td>
    <td class="td-third"><img title="Emcee hosting" src="https://djcarl.com/animations/corporate-2.gif" width="110" height="90"></td>
  </tr>
  <tr>
    <td class="td-fourth"><img title="Music marketing consulting" src="https://djcarl.com/animations/corporate-3.gif" width="110" height="90"></td>
    <td class="td-fifth"><img title="Event and project management" src="https://djcarl.com/animations/corporate-4.gif"></td>
  </tr>
  </table>
  <table>
   <tr>
  <td class="td-sixth"><span>Expert DJ Carl©</span></td>
  </tr>
  </table>
</div>

Customizer CSS

.my-table{
  background-color: #B0C4DE;
  width: 240px;
  border: 1px solid #4169E1;
  padding: 40px;
  margin: 40px;
}

.my-table td {
	text-align:center;
}

.td-first,
.td-sixth {
	background-color:#B0C4DE;
}

.td-second,
.td-third,
.td-fourth,
.td-fifth {
	background-color:#fff;
	border:1px solid #B0C4DE;
}

.td-first span {
color: #000000; 
font-family: verdana,arial; font-size: 20px;
}

There are several places online to learn CSS. codeacademy.com that has some great free courses. Also take a look at Mozilla https://developer.mozilla.org/en-US/docs/Learn/CSS

---

I am a Marketing Communications specialist at Communics.

Visit my personal website | Follow me on Twitter | Connect on LinkedIn

[DJ Carl]

Thank you so much, Bianca!
The only issue I had was the text did not center?
"Brands TRUST Music"
"Expert DJ Carl"

[Bianca]

You're welcome.
Looks ok to me. Is the text ok now?

---

I am a Marketing Communications specialist at Communics.

Visit my personal website | Follow me on Twitter | Connect on LinkedIn

[DJ Carl]

No, the text is not centered. I used the sublime editor and w3schools CSS editor.

Here is the screenshot

[Bianca]

Can you try this?
Replace

.td-first,
.td-sixth {
	background-color:#B0C4DE;
}

with

td-first,
.td-sixth {
	background-color:#B0C4DE;
	text-align:center;
}

or add

.td-first span,
.td-sixth span{
	text-align:center;
}

---

I am a Marketing Communications specialist at Communics.

Visit my personal website | Follow me on Twitter | Connect on LinkedIn

[DJ Carl]

I really appreciate your help, but the text did not center. This colored box has been an issue. It's late there, have a great night!

[Bianca]

Ok one more shot. I was able to reproduce the not centering.
This code validates (meaning the customizer accepting the html) and centers the text.

<div class="my-table">
	
<table>
  <tr>
  <td class="td-first" width="240"><span>Brands TRUST Music</span></td>
  </tr>
</table>
 <table>
  <tr>
    <td class="td-second"><img title="DJ mix playlists" src="https://djcarl.com/animations/corporate-1.gif" width="110" height="90"></td>
    <td class="td-third"><img title="Emcee hosting" src="https://djcarl.com/animations/corporate-2.gif" width="110" height="90"></td>
  </tr>
  <tr>
    <td class="td-fourth"><img title="Music marketing consulting" src="https://djcarl.com/animations/corporate-3.gif" width="110" height="90"></td>
    <td class="td-fifth"><img title="Event and project management" src="https://djcarl.com/animations/corporate-4.gif"></td>
  </tr>
  </table>
  <table>
   <tr>
  <td class="td-sixth" width="240"><span>Expert DJ Carl©</span></td>
  </tr>
  </table>
</div>

---

I am a Marketing Communications specialist at Communics.

Visit my personal website | Follow me on Twitter | Connect on LinkedIn

[DJ Carl]

It worked. Thank you, Bianca! I love the Netherlands 😉

[Bianca]

Awesome

---

I am a Marketing Communications specialist at Communics.

Visit my personal website | Follow me on Twitter | Connect on LinkedIn

[Author]

Posts