Moving header data
-
How do I move the blog posting date from the header image to the topic body, just below the header? I don’t want to obscure the header image with the thumbtack icon and posting date data.
The blog I need help with is: (visible only to logged in users)
-
There is no date on the header image. Every Post you publish will have an embedded datestamp in the URL that cannot be removed. https://en.support.wordpress.com/posts/
-
Would you allow us to send a screen capture? We have not posted any blogs that we have in the draft mode. That is where this problem can be seen. We are afraid to post it with this problem. The date and pushpin icon are superimposed on the header, not below where it is on the live demo.
-
These are threads you have posted https://en.forums.wordpress.com/profile/lindashobe
I typed modlook into the sidebar tags on this thread for Staff help. How do I get a Moderator/Staff reply for my question? https://en.support.wordpress.com/getting-help-in-the-forums/#how-do-i-get-a-moderatorstaff-reply-for-my-question Then please subscribe to this thread so you are notified when they respond. To subscribe look in the sidebar of this thread, find the subscribe to topics link and click it.
-
You can use http://snag.gy/ to share screenshots and link to them here. If you use the WordPress.com guide for screenshots http://en.support.wordpress.com/make-a-screenshot/ you can and upload it to your Media Library, and return to this thread to provide the file name so Staff can examine it.
-
I have uploaded an example screenshot into my Media Library, filename “Screen Shot 2015-10-28 at 9.07.34 PM”. This image shows my current blog page with the problem of post date/push-pin icon superimposed on my header image.
-
-
Hi @lindashobe, many thanks for the screenshot. :)
By design, in Libretto, the post title and date are superimposed over the featured image, or header image if a featured image is not set for the post. It is important that posts and pages have titles for search engines, or they have been known to get cranky and not index a page/post without a title. I would suggest adding titles. The titles can be hidden, if you wish, using CSS. This would hide the title on the post you reference. I’ve used the unique post id CSS class defined in the opening body HTML tag for that particular post.
.postid-60 .title-block h1 { display: none; }After hiding that, we can then move the date down using the following CSS.
.postid-60 .entry-meta { position: relative; top: 140px; } -
If you use the I used the web inspector built into my browser to find the relevant CSS. If you are not familiar with the web inspector in your browser, take a look at our support page on How to Find Your Theme’s CSS where you will find some brief screencasts to get you started with it. I find it an invaluable tool when working with CSS.
In the HTML pane when viewing the post you gave the screenshot for, you will see the opening body selector, and it will start out something like this
<body class="single single-post postid-60...
that is where I got the unique post id CSS body class for that particular post. -
Will pass on this more technical advise to hubby, but I have a question I’m confused on. When I look at the live demo of Libretto, the “word” Libretto is the header, right? Then below that in the white area, we see the post “A classic theme for your blog” with its title and date, and it’s not up in the header, it’s below. Yet y’all are saying its a feature of Libretto to have the title superimposed on the header. I do want it to have the title, I’m just so confused. Lastly, in a recent “blog webinar” I participated in, we were instructed to never start a blog post with an image because SEO’s look for text first. Can you elaborate on this?
-
The Libretto demo site does not have a header image set, and in the Customizer under Site Title, Tagline, and Logo, it is set to display the header text (title and description). If you go into that section in the customizer and check “Display Header Text” you will see your site title and description in the area overlaid on your header image.
If you click on a post title on the demo site and go to a single post page, such as this one, you will see the title and date where the header image or post featured image would be, and because the header text is set to display on the demo site, the title of the site is moved to up and to the left of the navigation.
On the main page on Libretto, it is set to show the latest posts on the main page (blog). Each post on the blog page, an archive page, category or tag page, will be below the header in a reverse chronological order. In this case, with the white background.
On the images issue mentioned in the webinar, I think what they are talking about is not having an image right at the top of the post/page content. The thing is, people on the web have been doing this for a long, long time, and I’m pretty sure the search engines know that and just scan down below the image to look for content, so I’m not entirely sure how much of a problem this is.
If you use featured images on posts or pages, those typically are outside of the content area in the HTML, and generally in the header area, so if the above was even a little bit of an issue, it isn’t with featured images.
Libretto is somewhat of a departure from standard themes since it has slightly different designs for different types of pages. In many (most?) themes, the top header area looks the same on all page types.
-
Question about Libretto please: I have a drawn cartoon image that is very important to the whole Vibe of the blog. Pretty much a logo… but just more detailed than a typical logo. (pen & ink) If I put this image in a slot where a logo would be that would work, but its much to small to be seen well. Is there a way to make it significantly larger as a logo, or is there anyplace on the Libretto theme I can place this cartoon so it can always be seen when someone first clicks on my blog?
Thanks -
@lindashobe, since your question is about a different subject, in the future feel free to start a new thread on your topic. If we discuss different issues in a single thread, it can be confusing to those who come to the thread in a search for a specific topic.
The image is showing as 100px wide, but when I check the image, it is showing as 200px in width. We can use the following CSS to make it show the logo image full sized.
.title-block .site-logo { max-width: 200px; }Give the above a try and see what you think.
-
So sorry. Before starting this blog building project, I’ve never participated in a forum before. (you’re just so good at helping us, I hate to loose communication with you) thank you for your patience and help!
-
No worries, @lindashobe, and I review and look at all CSS threads, so you can’t get rid of me that easily. :)
- The topic ‘Moving header data’ is closed to new replies.
WordPress.com Forums 