CENTRE ALIGN & CHANGE COLOUR OF PAGE TITLES

• 

  theartofintegralbeing · Member · Jan 10, 2016 at 4:17 am

  • Copy link
  • Add topic to favorites

  Hello,

  My page titles are not easily visible or centrally positioned, can you share with me some CSS for changing both the alignment and colour of the page titles?

  Also, can you recommend the ideal size of image for the page header images?

  Thanks in advance!
  Gabriella ;-)

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

• 

  thesacredpath · Member · Jan 12, 2016 at 6:14 am

  • Copy link

  I’m seeing your page titles as center aligned right now (about page) and seeing them in a purple color. Is this issue resolved?

• 

  theartofintegralbeing · Member · Jan 12, 2016 at 8:13 am

  • Copy link

  Hello!

  Yes, I actually resolved the page titles, but the problem is that i can’t figure out the code for the featured content slider image titles. At the moment, they are white and not easily visible on the image, I know how to change their position but what the CSS code for changing the colour (so it’s the same as the other page titles)?

  Also, I wonder if there is CSS for changing the position of each title on the slider featured content, some images would be best with the text in the top-right-hand corner, for example, and some better centre-aligned. is it possible?

  Kind regards,
  Gabriella ;-)

• 

  thesacredpath · Member · Jan 12, 2016 at 9:32 am

  • Copy link

  Glad you got the page titles sorted out.

  On the titles on the slider, due to the nature of your images, it is going to be difficult to find a color that will work well on all of them. One suggestion I have is to add a slight text shadow. The existing color of the titles was a slightly transparent white. The following takes them full white and adds the text shadow. In the text shadow, the first two numbers are horizontal and vertical offset and the third is the “blur” radius.

  #featured-content, #featured-content a {
      color: #fff;
      text-shadow: 3px 2px 1px #000;
  }

  If you wish to experiment with different colors for the text, you can do that too and then if you wish, remove the text shadow line if you are not going to use it.

  Due to the way the slider is designed, there is no way to move the titles individually.