• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

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

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › HELP! I'M TRYING 2 LEARN – [simple] Where to put the CSS code to work?

This topic is: resolved

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.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • October 15, 2020 at 1:37 am #501469
    DJ Carl
    Participant

    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/
    November 3, 2020 at 5:57 pm #501729
    Bianca
    Participant

    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

    November 5, 2020 at 12:56 am #501767
    DJ Carl
    Participant

    Thank 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 #501783
    Bianca
    Participant

    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

    November 5, 2020 at 3:52 pm #501787
    DJ Carl
    Participant

    No, 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 #501790
    Bianca
    Participant

    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

    November 5, 2020 at 4:20 pm #501792
    DJ Carl
    Participant

    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!

    November 5, 2020 at 5:19 pm #501794
    Bianca
    Participant

    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

    November 6, 2020 at 12:45 am #501799
    DJ Carl
    Participant

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

    November 6, 2020 at 3:10 am #501802
    Bianca
    Participant

    Awesome


    I am a Marketing Communications specialist at Communics.

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

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble