CSS Text Alignment

• 

  vlogazul · Member · Jul 22, 2015 at 5:14 am

  • Copy link
  • Add topic to favorites

  Hello, i am using the Expound theme and i would like to know if there’s a CSS snippet for the following.

  In the website’s front page and category pages i have my posts as featured posts. Is there a snippet to make the text of the excerpt body be centered? but only on the front page and category pages.

  If you click on any of my posts, just below the tittle text, there’s an author’s text that says vlogazulcom and a date of the posted date. Is there a snippet to make that text disappear? and for the white space between the tittle text and the beggining of the post to be shorter?

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

• 

  thesacredpath · Member · Jul 22, 2015 at 7:21 am

  • Copy link

  Hi there,

  Hi, on your home and category pages, do to the placement of the featured image, it seems to me that having the title and body text left aligned to the right of the image makes sense. Perhaps I’m missing what you are wanting to accomplish. Can you explain further. The category page I was looking at was for La Mirada Azul.

  On the author and date on single posts, you can add the following to hide them.

  .single .site-content .entry-header .entry-meta {
      display: none;
  }

• 

  vlogazul · Member · Jul 22, 2015 at 7:35 am

  • Copy link

  Thanks for the author and date snippet.

  For example, on the main page, the main featured post of “Fernando Belluschi refuerzo de Cruz Azul para el Apertura 2015” has the featured image to the left. And to the right of it the excerpt text of the tittle of the post, a summary and a blue square with a link inside. I want the tittle, the summary and the blue square to be aligned center of that would be possible not the picture but just the body text of it. I hope I make sense. Thanks

• 

  thesacredpath · Member · Jul 22, 2015 at 5:43 pm

  • Copy link

  Is this what you are looking for?

  .home .entry-summary, .home .entry-title, .home .entry-meta, .archive .entry-summary, .archive .entry-title, .archive .entry-meta {
      text-align: center;
  }

• 

  vlogazul · Member · Jul 22, 2015 at 7:14 pm

  • Copy link

  Thanks, it works perfectly.

  If you go to “La Mirada Azul” category and click on the recent post, you will see that the post has 2 comments. The comment avatar is rounded, is there a snippet to make that avatar be square?

  also, on the main page and category pages there’s a blue square with a link at the bottom that says “Entradas antiguas” can i get a snippet to make that be centered aligned? and can i also change the “Entradas antiguas” text to a text of my own?

• 

  thesacredpath · Member · Jul 23, 2015 at 6:32 am

  • Copy link

  Great!

  For the avatars, add the following.

  .comments-area footer .comment-author .avatar {
      border-radius: 0;
  }

  On the Entradas antiguas button, that is within the content div, along with the featured image, title and excerpt of the post. The button is actually aligned center in relationship to the content area. The only way to move it to the right would be to add left margin, but with a responsive width theme, you can center it at one width and if someone narrows or widens their browser window, the alignment is again off.

• 

  vlogazul · Member · Jul 23, 2015 at 7:59 am

  • Copy link

  Thanks for the avatar snippet. I see, i figured to possibly be a way to align it centered in the centered direction of the wordpress and theme links at the bottom of the site.

  Is there a snippet to make the menu bar have dividers between each category and centered the menu bar?

• 

  thesacredpath · Member · Jul 23, 2015 at 6:38 pm

  • Copy link

  Hi, the following puts divider lines between the menu items, but leaves it off of the last on the right. The last two rules center the menu, but when the menu goes to two lines, the menu will default back to left aligned. Also, I have limited this to screens/windows wider that 600px, which is when the touch device menu activates, and the below changes would cause issues on the touch menu.

  @media screen and (min-width: 601px) {
  .navigation-main li {
      border-right: 1px solid #fff;
  }
  .navigation-main li:last-child {
      border-right: none;
  }
  .navigation-main {
      text-align: center;
  }
  .navigation-main ul {
      display: inline-block;
  }
  }