Adding additional text to site identity

• 

  reysic · Member · Oct 25, 2016 at 3:59 pm

  • Copy link
  • Add topic to favorites

  I would like to add some additional text to my site identity section, such as contact information, potentially with images such as the Skype logo beside my Skype username. I’m using the Tortuga theme. Is this possible with custom CSS?

  Thanks so much!

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

• 

  innisfreehomestead · Member · Oct 25, 2016 at 4:28 pm

  • Copy link

  Hey there!

  Would you mind just specifying for me which area you are referring to? Is it the top social media bar? What other content would you like? I can insert text and images with CSS, but not links unfortunately.

  Let me know,
  Sage

• 

  reysic · Member · Oct 26, 2016 at 2:47 am

  • Copy link

  Hi Sage!

  Text and images would be great. I am referring to the section where it has my logo, name, and tagline. I would like to be able to add some additional text in there.

  Thank you!

• 

  innisfreehomestead · Member · Oct 26, 2016 at 11:53 pm

  • Copy link

  Hey there!

  Is something like this what you were thinking? You’ll need to drop it into your custom CSS area

  .site-description::after {
  	content: "skype username";
  	display: block;
  	background-image: url(https://upload.wikimedia.org/wikipedia/commons/0/05/Skype_t.png);
  	background-repeat: no-repeat;
  	background-size: contain;
  	font-size: 19px;
  	padding-left: 35px;
  }

  Let me know if that doesn’t work,
  Sage

• 

  reysic · Member · Oct 27, 2016 at 12:36 pm

  • Copy link

  YES!

  What would I do to have an additional line after the line with my Skype username? Such as a line with an email icon and my email address.

  Thanks so much Sage!

• 

  innisfreehomestead · Member · Oct 27, 2016 at 4:52 pm

  • Copy link

  That’s great!

  It’s trickier to add another line but I figured out a workaround that should be good for mobile as well. If you remove the previous code I gave you, there were a couple adjustments to that as well:

  .site-description::before {
  	content: "(email visible only to moderators and staff)";
  	display: block;
  	float: right;
  	margin-top: 70px;
  	position: absolute;
  	font-size: 19px;
  	padding-left: 35px;
  	background-image: url(http://www.freeiconspng.com/uploads/email-server-png-3.png);
  	background-size: contain;
  	background-repeat: no-repeat;
  }
  
  .site-description {
  	float: right;
  	display: inline-block;
  	margin: 0.7em 0 0;
  	font-size: 22px;
  	font-size: 1.375rem;
  	height: 111px;
  }
  
  .site-description::after {
  	content: "Reysic";
  	display: block;
  	background-image: url(https://upload.wikimedia.org/wikipedia/commons/0/05/Skype_t.png);
  	background-repeat: no-repeat;
  	background-size: contain;
  	font-size: 19px;
  	padding-left: 35px;
  	text-align: left;
  }

  I suggest you switch the icons urls with ones you save and upload to your site.

  Hope that helps,
  Sage

• 

  reysic · Member · Nov 1, 2016 at 2:40 pm

  • Copy link

  Thanks again Sage!

  Would you know how to vertically center my name beside my logo as well?

• 

  innisfreehomestead · Member · Nov 1, 2016 at 6:53 pm

  • Copy link

  No worries!

  How’s this?

  .site-title {
  	margin-top: 33px;
  }

  Let me know if that doesn’t work,
  Sage

• 

  reysic · Member · Nov 22, 2016 at 4:10 pm

  • Copy link

  Works great! Thank you for all of your help Sage!

• 

  innisfreehomestead · Member · Nov 23, 2016 at 6:21 pm

  • Copy link

  Glad to hear it, and no worries, my pleasure!