Center widget title

• 

  samueltrepanier1 · Member · Oct 30, 2014 at 2:27 am

  • Copy link
  • Add topic to favorites

  Hey guys,

  I wish to center the title of my widgets.
  The ones on the slidebar doesn’t bother me, but the ones on the sidebar and footer would look way better if center.
  Also, I wish that the “Follow” Button in the Email widget to be center as well.
  The best page example would be that one : https://samueltrepanier10.wordpress.com/biography/

  I would also like to have a linked title (like the facebook widget) for the Instagram widget, would that be possible ? Or where should I suggest that request ?

  Thanks a lot!

  Best,
  Samuel Trepanier

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

• 

  thesacredpath · Member · Oct 30, 2014 at 3:57 am

  • Copy link

  Hi Samuel, to center the widget titles on Port, go to Appearance > Customize > CSS, delete all the informational text in that window, and paste in the following custom CSS.

  .widget-title {
      text-align: center;
  }

  I used the web inspector built into my browser to find the relevant CSS. If you are not familiar with the web inspector in your browser, take a look at our support page on How to Find Your Theme’s CSS where you will find some brief screencasts to get you started with it. I find it an invaluable tool when working with CSS.

• 

  samueltrepanier1 · Member · Oct 30, 2014 at 4:15 am

  • Copy link

  Dear,

  Thanks a lot for your quick response, it worked well.
  Could you suggest a code to center the content of the widget as well ? As you can now see, the footer widget content (except for instagram) looks a bit wear. In other words, I would like to center the Facebook image and LIKE as well as the text and button on the Email widget.

  Thanks again.

  Best,
  Samuel

• 

  thesacredpath · Member · Oct 30, 2014 at 4:22 am

  • Copy link

  Samuel, for the footer widgets, you can center the content with the following.
  .footer-box {
  text-align: center;
  }`

• 

  samueltrepanier1 · Member · Oct 30, 2014 at 4:33 am

  • Copy link

  Done, works well! Can I do the same for the Slidebar menu widget ?

  Samuel

• 

  thesacredpath · Member · Oct 30, 2014 at 1:40 pm

  • Copy link

  Samuel, The menu after you click on the menu icon isn’t actually a widget, but we can center it with the following.

  .menu-main-menu-container ul {
      text-align: center;
  }

• 

  samueltrepanier1 · Member · Oct 30, 2014 at 3:44 pm

  • Copy link

  Great, worked well. But the Email widget is still not center (content and button). Would you have something to fix that?

  Thanks a lot!
  Samuel

• 

  thesacredpath · Member · Oct 30, 2014 at 8:36 pm

  • Copy link

  Hmmm, the email subscription widget is centered for me in Safari, Chrome and Firefox. Where are you seeing it not centered, and are you logged into your account or logged out? What browser and browser version?

• 

  samueltrepanier1 · Member · Oct 30, 2014 at 11:51 pm

  • Copy link

  In the footer and sidebar yes, but I mean in the slidebar. Sorry for the confusion.

  Samuel

• 

  thesacredpath · Member · Oct 31, 2014 at 12:48 am

  • Copy link

  Ah, now I see, when you click on the menu icon at the top. Seems there is another selector we need to set to center alignment. Add this and I think that takes care of the rest.

  .sidebar-box {
      text-align: center;
  }

• 

  samueltrepanier1 · Member · Oct 31, 2014 at 12:54 am

  • Copy link

  All set !
  Many thank :) !

  Best,
  Sam