Community Forums › Forums › Archived Forums › Design Tips and Tricks › HELP! I'M TRYING 2 LEARN – [simple] Where to put the CSS code to work?
Tagged: Beginner, coding, css, Metro theme., studiopress metro theme, table box, teach, w3schools
- This topic has 9 replies, 2 voices, and was last updated 2 years, 4 months ago by
Bianca.
-
AuthorPosts
-
October 15, 2020 at 1:37 am #501469
DJ Carl
ParticipantHi 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/November 3, 2020 at 5:57 pm #501729Bianca
ParticipantHi 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
November 5, 2020 at 12:56 am #501767DJ Carl
ParticipantThank you so much, Bianca!
The only issue I had was the text did not center?
"Brands TRUST Music"
"Expert DJ Carl"November 5, 2020 at 2:21 pm #501783Bianca
ParticipantYou'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
November 5, 2020 at 3:52 pm #501787DJ Carl
ParticipantNo, the text is not centered. I used the sublime editor and w3schools CSS editor.
Here is the screenshot
November 5, 2020 at 4:03 pm #501790Bianca
ParticipantCan 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
November 5, 2020 at 4:20 pm #501792DJ Carl
ParticipantI 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!
November 5, 2020 at 5:19 pm #501794Bianca
ParticipantOk 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
November 6, 2020 at 12:45 am #501799DJ Carl
ParticipantIt worked. Thank you, Bianca! I love the Netherlands 😉
November 6, 2020 at 3:10 am #501802Bianca
ParticipantAwesome
I am a Marketing Communications specialist at Communics.
Visit my personal website | Follow me on Twitter | Connect on LinkedIn
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.