CHANGING THE TEXT OVER HEAD IMAGE (LODESTAR THEME)

• 

  orlandoshoppers · Member · Apr 7, 2017 at 1:19 pm

  • Copy link
  • Add topic to favorites

  Hi! I just changed my blog to the Lodestar Theme, wich is amazing, and I want to change a few things that can’t be done with the Customization tools.
  One of them is the colour and size of the text that appears over the head
  image, in my case “GUIA DE COMPRAS ORLANDO” and “¡La mejor opción para disfrutar ahorrando!”.
  As you can check they appear in an almost white colour and they are unreadable.

  And then I would like to be able to change colours and sizes of the text on the blog entries in the “home” page. They are all blue right now, and I want to be free to change them to different sizes.

  And the last one is, I wanted to add the social networks logos to the Menu bar, without changing the way it looks now, putting them at the bottom right, but I wasn’t able to do this, even the theme is suppose to allow it.

  I hope you can help me!

  Thanks in advance.

  Santiago

  The blog I need help with is: (visible only to logged in users)

• 

  otpidusprime · Member · Apr 7, 2017 at 3:32 pm

  • Copy link

  Hi @orlandoshoppers,
  • Use this CSS codes to:
  1. Change the color and size of the text that appears over the head
  image:

  // code for "GUIA DE COMPRAS ORLANDO"
  h1.site-title > a {
      font-size: 80px;  //adjust this value to change the font-size according to your needs.
      color: #000000;  //adjust this value to change the text color according to your needs.
  }
  
  // code for "¡La mejor opción para disfrutar ahorrando!"
  .site-description {
      color: #ffffff !important;  //adjust this value to change the font-size according to your needs.
      font-size: 30px;  //adjust this value to change the font-size according to your needs.
  }

  If by changing the colors you still cannot view the text, then you might have to increase the overlay opacity of the image:

  body:not(.no-header-image) .custom-header-image::before, .lodestar-front-page .custom-header-image::before {
      background: rgba(0,0,0,0.4);  // overlay opacity changed from 0.05 to 0.4
  }

  2. Change color and size of the text on the blog entries in the “home” page:

  .entry-content {
      color: #000000;  //adjust this value to change the font-size according to your needs.
      font-size: 18px;  //adjust this value to change the font-size according to your needs.
  }

  • And then, do this to:
  Add Social Network Logo(with links) to the Menu Bar:
  This is a bit tricky i suppose because when, we add the social menu to the top menu bar it appears as a text. It only appears as an icon when we add the social menu into the social menu links area of the theme – which is at the bottom(like you have it now).

  So we have to use some complex CSS editing to make the social menu position on the top menu bar. If you are really comfortable with CSS then follow these instructions to move the social icons from bottom to the top menu bar.

  1. We hide the scrollbar along the x-axis of the browser window so that when we move the icons to the right, the body does not add scrollbar to the browser window:

  body {
      overflow-x: hidden;
  }

  2. Then we add relative position to the header menu-bar:

  .header-top {
      position: relative;
  }

  3. We are using absolute positioning to move the icons container(which contains the icon) to the top, and then we displace these icons 90px from the top so that it stays below the links on the menu bar:

  .menu-redes-sociales-container {
      position: absolute;
      z-index: 1;
      top: 90px;
      right: 0px;
      left: 0;
  }

  4. We then pull these icons from center to right:

  .site-footer .jetpack-social-navigation ul {
      margin-right: -730px;
  }

  5. Finally, we hide the container at the bottom which previously had these icons:

  .jetpack-social-navigation-svg {
      background: transparent;
      border: none;
  }

  Hope this helps and let me know if you do not understand something. :)