How to align Title / Logo when clicking on a post

Help Customization
1

How do I do it so that my logo on my blog (currently an image at https://alit.blog ) when I click on a post it does not align left?

Here is my current CSS:

body footer nav {display: none;}

#blog-title a {
background-image: url(https://i.snap.as/cc4YsgK5.png);
background-position: center;
background-repeat: no-repeat;
color: rgba(0,0,0,0);
display: inline-block;
width: 252px;
height: 103px;
background-size: 252px 103px;

/*color: #2B8BFA;
text-decoration: none;
font-family: 'Montserrat','Open Sans','Segoe UI',Tahoma,Arial,sans-serif;*/
}
#post #blog-title a, #subpage #blog-title a {
/* Change size of logo on post and tags pages */
width: 252px;
height: 103px;
background-size: 252px 103px;
}

.post-title {
font-family: 'Montserrat','Open Sans','Segoe UI',Tahoma,Arial,sans-serif;
}


#post article.sans, .font.sans, body#collection article.sans, body#subpage article.sans, input#title.sans, pre.sans, span.sans, textarea.sans {
font-family: 'Open Sans','Segoe UI',Tahoma,Arial,sans-serif;
}

hr {display: none;}

body {
background-color: #FFFFFF;
color: #000000;
}

a {
color: #000000;
text-decoration: none;
}

header nav a {
color: #000000;
text-decoration: none;
font-family: 'Montserrat','Open Sans','Segoe UI',Tahoma,Arial,sans-serif;
}

a:hover {
color: #000000;
text-decoration: none;
}

header nav a:hover {
color: #000000;
text-decoration: none;
}

#blog-title a { 
color: #000000;
text-decoration: none;

}
#blog-title a:hover { 
color: #000000;
text-decoration: none;
}

body footer nav {
display: none;
}

header p.description {
color: #000000;
font-family: 'Montserrat','Open Sans','Segoe UI',Tahoma,Arial,sans-serif;
}

.post-title {
color: #000000;
}
.post-title a.u-url:link, .post-title a.u-url:visited {
color: #000000;
}

body#collection a.read-more {
text-decoration: none;
}

article p a {
color: #000000;
text-decoration: none;
/*border-bottom: 2px solid #002B36;*/
}

article p a:hover {
/*background-color: #002B36;*/
/*color: #839496;*/
text-decoration: none;
}

img {
display: block;
margin: 0 auto;
}

body#post header {
-moz-opacity: 1;
-khtml-opacity: 1;
-webkit-opacity: 1;
opacity: 1;
}

header nav .views {
display: none;
}

body#post article time.dt-published, body#subpage article time.dt-published {
color: #000000;
}

#emailsub {
color: #000000;
text-decoration: none;
font-weight: bold;
font-family: 'Montserrat','Open Sans','Segoe UI',Tahoma,Arial,sans-serif;
}


 input[type=email], input[type=number], input[type=password], input[type=tel], input[type=text] {
border: 1px solid #999;
color: #000000;
text-decoration: none;
font-family: 'Open Sans','Segoe UI',Tahoma,Arial,sans-serif;
}

a.btn.cta, a.btn.gentlecta, a.btn.submit, a.btn[type=submit], button.cta, button.gentlecta, button.submit, button[type=submit], input.cta, input.gentlecta, input.submit, input[type=submit], select.inputform.cta, select.inputform.gentlecta, select.inputform.submit, select.inputform[type=submit], textarea.inputform.cta, textarea.inputform.gentlecta, textarea.inputform.submit, textarea.inputform[type=submit] {
/*border: 1px solid #2B8BFA;*/
background: #2B8BFA;
color: #FFFFFF;
font-family: 'Open Sans','Segoe UI',Tahoma,Arial,sans-serif;
-webkit-transition: all .2s ease-out;
-moz-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out;
}



a.btn.cta:hover, a.btn.gentlecta:hover, a.btn.submit:hover, a.btn[type=submit]:hover, button.cta:hover, button.gentlecta:hover, button.submit:hover, button[type=submit]:hover, input.cta:hover, input.gentlecta:hover, input.submit:hover, input[type=submit]:hover, select.inputform.cta:hover, select.inputform.gentlecta:hover, select.inputform.submit:hover, select.inputform[type=submit]:hover, textarea.inputform.cta:hover, textarea.inputform.gentlecta:hover, textarea.inputform.submit:hover, textarea.inputform[type=submit]:hover{
 background-color: #226FC8;
 /*border: 1px solid #226FC8;*/
}

and JavaScript but I dunno if its relevant:

var topP = document.createElement("p");

topP.style.textAlign = "center";

topP.innerHTML = '<nav id="hashtag"><a href="https://little.social" class="p-category"><span>āŗ Little</span></a><a href="https://linktr.ee/Little.social" class="p-category"><span>šŸŒ² Linktree</span></a><a href="mailto:hello@little.social" class="p-category"><span>šŸ“§ Contact</span></a></nav>';

if (document.getElementById("manage")) {
    var cont = document.getElementsByTagName("nav")[1];
}
else {
var cont = document.getElementsByTagName("nav")[0];
}

if (cont !== null) {
cont.appendChild(topP);
} 
else
 {
cont = document.getElementById("post-body");
cont.insertAdjacentHTML("afterend", topP.outerHTML);
}

I tried to do all sorts in #post #blog-title a, #subpage #blog-title a {line of the CSS code like inline block, text aligh centre etcā€¦ but nothing works, when you click on a post link on my blog the logo always aligns to the left but I want it aligned in the centre.

2

If anyone is around be great to get some support on this, at the time of writing I still canā€™t get this to work???

3

Hey @idle, adding this to your CSS should do it:

header {
    text-align: center;
}

Let me know if that works!

1 Like
4

That worked perfect and canā€™t believe the solution was so simple lol

5

Following on from this, for the title of the blog, is there anyway to replace it with blank text easily? I tried ā€˜content:ā€™ in the CSS but it didnā€™t work. The issue is, that if I put a blank space on the title of the blog in settings, when I try and post to the blog that I have multiple of with no titles this way its hard to tell which one I am posting to, so it would be much better to hide the blog title using CSS or JS I just canā€™t figure out how to?