1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Can't find the CSS code where this is

Discussion in 'HTML & Website Design' started by tyankee, Aug 18, 2019.

  1. #1
    I can't find the CSS code that controls the positioning of the social media icons in the header at https://mto2staging.mustangtraderonline.com/

    it seems like it should be in the class called 'site-header' but i can't where in the coding. I want to move the social media icons to the top right instead of right in the middle of the header.
     
    tyankee, Aug 18, 2019 IP
  2. malky66

    malky66 Acclaimed Member

    Messages:
    3,996
    Likes Received:
    2,248
    Best Answers:
    88
    Trophy Points:
    515
    #2
    It's in the "wp-content/themes/journalistic/style.css?ver=5.2.2" on line 1710.
    .home-link {
        width: 100%;
        display: block
    }
    Code (CSS):
     
    malky66, Aug 19, 2019 IP
  3. tyankee

    tyankee Well-Known Member

    Messages:
    1,023
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    150
    #3
    How does that control the placement of those social media icons? I must be missing something. Why are they in the middle of the header and how would I move them to the top of the header?
     
    tyankee, Aug 19, 2019 IP
  4. g.ho3ein

    g.ho3ein Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #5
    hi
    hope you fine

    you should remove padding in .site-header
    and

    .site-header {
    height: 460px;
    }
    Code (markup):
    also don't forget to change height in responsive
     
    g.ho3ein, Aug 19, 2019 IP
  5. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,151
    Likes Received:
    1,656
    Best Answers:
    29
    Trophy Points:
    475
    #5
    Each icon has this class="header-social-media-link". Notice text-align: center; With display: inline-block; you can use text-align to center items.

    
    a.header-social-media-link {
    display: inline-block;
    height: 40px;
    border: 2px solid #fab526;
    width: 40px;
    font-size: 21px;
    border-radius: 50%;
    padding: 3px;
    text-align: center;
    margin: 10px 5px;
    }
    
    Code (markup):
     
    qwikad.com, Aug 19, 2019 IP
    tyankee likes this.
  6. stargazer_100

    stargazer_100 Greenhorn

    Messages:
    12
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    8
    #6
    style.css file - the positioning is being controlled by the top/bottom padding - 170px

    .site-header {
    background: #1b1b1b;
    position: relative;
    width: 100%;
    margin-bottom: 3em;
    overflow: hidden;
    background-size: cover;
    padding: 170px 0 230px;

    }
     
    stargazer_100, Aug 19, 2019 IP
  7. tyankee

    tyankee Well-Known Member

    Messages:
    1,023
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    150
    #7
    I'll give it a try. Thanks
     
    tyankee, Aug 19, 2019 IP
  8. tyankee

    tyankee Well-Known Member

    Messages:
    1,023
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    150
    #8
    Wow, I don't see that height parameter in the css file. that's what I was looking for. I'll have to look more closely.
     
    tyankee, Aug 19, 2019 IP
  9. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #9
    That's because the monument to developer stupidity that is the typical turdpress template has sleazed that code into the markup... where STYLE has zero business even being. 99% of the time you see style="" and 100% of the time you see <style> in your HTML, you're looking at ignorance, incompetence, and ineptitude in action.

    It's not surprising you can't find or control anything -- by using the sleazy off the shelf wordpress markup, you've got over three times the markup and twice the CSS to deal with such a simple layout actually would need.

    Hence why it's vomiting up this 2.07k:

    
    <body class="home page-template-default page page-id-5 page-parent">
      <div id="page" class="hfeed site">
        <header id="masthead"  role="banner">
          <nav class="navbar lh-nav-bg-transform navbar-default navbar-fixed-top navbar-left" role="navigation"> 
            <!-- Brand and toggle get grouped for better mobile display --> 
            <div class="container" id="navigation_menu">
              <div class="navbar-header"> 
                            <a href="https://mto2staging.mustangtraderonline.com/">
                  <div class="navbar-brand">Mustang Trader Online</div>            </a>
              </div> 
              
              </div><!--#container-->
            </nav>
    
                    <div class="site-header">
              <div class="site-branding">   
                <span class="home-link">
                                                <!-- Social media links Start -->
    
            <!-- Facebook link -->
                    <a href="https://facebook.com/mustangtraderonline" target="_blank" class="header-social-media-link">
              <i class="fab fa-facebook" aria-hidden="true"></i>
            </a>
                <!-- Twitter link -->
                <a href="https://twitter.com/mustangtraderz" target="_blank" class="header-social-media-link">
            <i class="fab fa-twitter" aria-hidden="true"></i>
          </a>
          <!-- Instagram link -->
        <a href="https://www.instagram.com/mustangtrader/" target="_blank" class="header-social-media-link">
        <i class="fab fa-instagram" aria-hidden="true"></i>
      </a>
    <!-- Youtube link -->
      <a href="https://www.youtube.com/watch?v=LHCCREGT1sc" target="_blank" class="header-social-media-link">
        <i class="fab fa-youtube" aria-hidden="true"></i>
      </a>
    <!-- Linkedin link -->
    <!-- Twitch link -->
    <!-- Pinterest link -->
      <a href="https://www.pinterest.com/mustangtrader/" target="_blank" class="header-social-media-link">
       <i class="fab fa-pinterest-p" aria-hidden="true"></i>
      </a>
    <!-- Soundcloud link -->
    <!-- Social media links end -->
    
            </span>
          </div><!--.site-branding-->
        </div><!--.site-header--> 
      </header>    
    
    Code (markup):
    Doing the job of this 648 bytes:

    
    <body>
    	<h1><a href="/">Mustang Trader Online</a></h1>
    	<ul id="socialMenu">
    		<li class="facebook">
    			<a href="https://facebook.com/mustangtraderonline">
    				Facebook
    			</a>
    		</li>
    		<li class="twitter">
    			<a href="https://twitter.com/mustangtraderz">
    				Twitter
    			</a>
    		</li>
    		<li class="instagram">
    			<a href="https://www.instagram.com/mustangtrader/">
    				Instagram
    			</a>
    		</li>
    		<li class="youTube">
    			<a href="https://www.youtube.com/watch?v=LHCCREGT1sc">
    				Youtube
    			</a>
    		</li>
    		<li class="pinterest">
    			<a href="https://www.pinterest.com/mustangtrader/">
    				pInterest
    			</a>
    		</li>
    	</ul>
    
    Code (markup):
    A simple "view source" of what Wordpress is vomiting up for HTML there should send any qualified developer recoiling in HORROR. Hence my advice would be to pitch that entire template in the trash and to start over clean... though good luck convincing Turdpress of that since such levels of derpitude are its bread and butter. "For people who know nothing about websites, BY people who know nothing about websites" is not a great plan of action for anything more complex than a blog for grandma.

    The only thing "outstanding" about that theme are the levels of scam artistry and unmitigated GALL "outstandingThemes" has in charging money for that crap.
     
    deathshadow, Aug 19, 2019 IP
  10. stargazer_100

    stargazer_100 Greenhorn

    Messages:
    12
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    8
    #10
    I often wonder how 'developers' work with this junk code, it must be so frustrating.
     
    stargazer_100, Aug 19, 2019 IP
    tyankee likes this.
  11. tyankee

    tyankee Well-Known Member

    Messages:
    1,023
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    150
    #11
    Looks like I'll be changing the theme. Just trying to find a simple theme without all the extra plugins they come with and basterdation of the WordPress structure. There must be one out there.
     
    tyankee, Aug 19, 2019 IP