Is there a way to seamlessly integrate a profile picture with text (title) on my tumblr theme?
My main challenge lies in getting the alignment right. Additionally, I want it to look good in responsive view. If the title becomes too long, it should wrap underneath - here is a visual representation.
CSS Styles:
#header .user-portrait {
border-radius: 100%;
width: 40px;
height: 40px;
margin-right: 18px;
display: inline-block;
vertical-align: middle;
float: left;
}
#header a {
font-weight: bold;
display: block;
margin-bottom: 34px;
vertical-align: top;
}
#description {
color: {color:Description};
padding-right: {text:Minus width for header in px}px;
}
#page-masthead ul {
margin: 0;
list-style-type: none;
display: block;
clear: both;
line-height: 1.92em;
padding-right: {text:Minus width for header in px}px;
}
HTML Markup:
<div id="page-masthead">
<div id="header">
<a href="/"><img src="{PortraitURL-40}" alt="" class="user-portrait"></a>
{block:IfShowblogtitle}
<a href="/">{Title}</a>
{/block:IfShowblogtitle}
</div>