Logo Content block

Novice78

Hi, Can anybody tell me is it possible to have a logo image and the text to be aligned at the center line of
the logo? If Yes - How can I do that? I'm talking about Logo Content block.

Also, Can I remove the profile image at all? If yes, please advise how.

Here is the link to the site: http://yosyaphoto.smugmug.com

phaserbeam

Novice78 wrote: »

Hi, Can anybody tell me is it possible to have a logo image and the text to be aligned at the center line of the logo?

Also, Can I remove the profile image at all? If yes, please advise how.

Others might have a better solution, but you could add this to your theme css section or add a css content block to entire site:

/* remove empty profile photo */
.sm-page-widget-profile-biophoto-empty {
  display:none;
}
/* align logo and text at base line */
.sm-page-widget-logo-container img {
  margin-bottom:-1em;
}

Novice78

phaserbeam wrote: »

Others might have a better solution, but you could add this to your theme css section or add a css content block to entire site:

/* remove empty profile photo */
.sm-page-widget-profile-biophoto-empty {
  display:none;
}
/* align logo and text at base line */
.sm-page-widget-logo-container img {
  margin-bottom:-1em;
}

Excellent! Thanks! The empty profile image is gone! Any suggestions how to align the logo and the text next to it? I need the text to be on the center line of the logo.

troopers

Novice78 wrote: »

Any suggestions how to align the logo and the text next to it? I need the text to be on the center line of the logo.

I know nothing about code so I'll leave coding solution to others...maybe you can make the text part of the logo?

phaserbeam

Sorry, which logo? Which text?
Currently i can see a small "yosya" logo in the upper left corner, and some text (profile name) "Yosya photography".

Do you want to center the logo and the text in the middle of the screen? If so... when in customize mode click the wrench icon on the logo content block BASIC => Alignment => Center.

For the profile name :

.sm-page-widget-profile-biophoto {
  display:none;
}
.sm-page-widget-profile-header {
  padding:0px!important;
}
.sm-page-widget-profile-hascover,
.sm-page-widget-profile-nocover {
  text-align:center;
}

Novice78

Oops! I was exploring customization options for this template and took off the text by the logo. it's back now. I need to center the logo at the top left corner and text next to it. Thank you! Here is the link to the second design option http://yosyaphoto.smugmug.com

phaserbeam

Novice78 wrote: »

Oops! I was exploring customization options for this template and took off the text by the logo. it's back now. I need to center the logo at the top left corner and text next to it. Thank you! Here is the link to the second design option http://yosyaphoto.smugmug.com

Should also work on mobile phone. On Desktop it will stick in the upper left corner, on smaller screens (less then 640px) it will center horizontally... you can try that with firefox dev tools or just resize your browser window...

@media only screen and (min-width:641px) {
  .sm-page-widget-logo-container {
    width:13em!important;
    text-align:center;
  }
}
.sm-page-widget-logo-img {
  display:block;
  margin-left:auto;
  margin-right:auto;
}
.sm-page-widget-logo-text-container {
  padding:0px!important;
}

Novice78

Thank you for your continuous help! I've put that code and the text moved UNDER the image instead to be at the left of the image. Please take a look: http://yosyaphoto.smugmug.com

phaserbeam

OK, thats what i thought you were asking for... can you remove the code please?
So the text "Photography" whould be on the same bottom line as the logo? I thought i had that on my first CSS code in post #2 or did that not work?

Novice78

I've removed the code. Can you move the text "PHOTOGRAPHY" just up, to the position were it would be on the center line of the logo image? Thank you!

leftquark

This should make it centered:

/* Setup the logo area so it can be aligned */
.sm-page-widget-logo-container {
  position: relative !important;
}

/* Align the text */
.sm-page-widget-logo-text-container {
  position: absolute; /* Setup text to be absolutely positioned */
  top: 50%; /* Move it up 50% of the container */
  transform: translate(0, -50%); /* Move the element up half its weight */
}

I'm not sure what you mean by "on the center line of the logo image. Do you want to move it left as well?

phaserbeam

leftquark wrote: »

This should make it centered:

I'm not sure what you mean by "on the center line of the logo image. Do you want to move it left as well?

I'm also not 100% sure but got this code, may be enough if the text should just be moved up:

.sm-page-widget-logo-text-container h1.sm-page-widget-logo-text {
  position:relative;
  top:-1.5em!important;
}

Would not really center vertically but if it is just the text, why not add it to the logo itself?

Novice78

Excellent! Thank you!
I'd like to keep the logo as an image only, without the text.