Jump to content

Bedford template - removing white space at top of blog post; adding logo to title of each blog post

Recommended Posts

Hello SquareSpace community!

This is my first question/post in the Ask SquareSpace site, and I've already gone through existing questions/answers to see if I can find something similar.

I'm using the Bedford template for my site (www.truefocusfilms.com) and I'm trying to make updates to my blog page (www.truefocusfilms.com/blog). Here are the things I'd like to update:

WHITE SPACE AT START OF EACH POSTIs it possible to remove the white space at the top of each blog post? I have a horizontal line separating each post, and it currently looks like this:

horizontal line,space,space,space,date of post,title of post

ADD A LOGO AT THE START OF EACH POST TITLEIn my old blog site (running on blogspot.com), I had my company logo appear at the start of each blog post title. Here's an example:http://truefocusfilms.blogspot.com/2019/01/online-film-streaming-is-now-here.html(my logo is the blue swirly circular camera aperture)Is it possible to do something similar in SquareSpace?

Thanks in advance!Richard

Link to comment
  • Replies 10
  • Views 989
  • Created
  • Last Reply

I'm using the same template. I've compiled CSS from what I read and these are the current three sets I've added to my page (the "/* xxxx */ is comment not code)

/* Code reduces regular line height on text */p { line-height: normal;}

/* Code thins HR padding */ hr { margin: 0px !important; }

/* Code reduces padding of content below header banner */

page {


    padding:30px
 }


I am a dental professional creating a hobby website/blog to share my love of the circular sock knitting machine.

Link to comment

@karenramel Add to Home > Design > Custom CSS


/* White space at start of each post on Blog LIST Page */
.view-list .entry+.entry {
   margin-top: 10px;
}
/* Add logo to SINGLE POST PAGE */
.view-item.collection-type-blog h1.entry-title:before {
   content: "";
   background-image: url(http://i1280.photobucket.com/albums/a484/truefocusfilms/2014%20TFF%20Logo/TFFLogo2014-Favicon40x40_zpsb7c58de9.jpg);
   display: inline-block;
   height: 45px;
   width: 45px;
   background-repeat: no-repeat;
   background-position: center center;
}



Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Thanks for your help on this! The following code worked GREAT! .view-list .entry+.entry { margin-top: 10px;

Going back to the other suggestion you made (about the logo at the start of each blog post), did you mean this should also be added to the Custom CSS page? I tried it, and I don't see a logo appear at the start of each blog post.

Thanks!Rich

Link to comment

Hello @tuanphan. Thanks! I added the following to the the custom CSS, and still no logo:

.view-item.collection-type-blog h1.entry-title:before { content: ""; background-image: url(http://i1280.photobucket.com/albums/a484/truefocusfilms/2014%20TFF%20Logo/TFFLogo2014-Favicon40x40_zpsb7c58de9.jpg); display: inline-block; height: 45px; width: 45px; background-repeat: no-repeat; background-position: center center; }

.sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title { display: block; } .view-list .entry+.entry { margin-top: 30px;}

Link to comment

Hello @tuanphan. Thanks for the feedback and screenshot. I tried loading my blog site (truefocusfilms.com/blog) on three different devices (laptop, desktop, mobile -- with a bunch of different browsers), and I still cannot get the image to appear as you indicate in your screenshot.

I'm trying to understand how you're seeing the logo, but I cannot see it at all!

Thanks in advance!Rich

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.