Tagged: 

Viewing 22 posts - 1 through 22 (of 22 total)
  • Author
    Posts
  • #561687

    Hello there,

    I’ve been trying to have our blog posts display with the thumbnail image on the left and the title directly to the right of the image on the same column and row. Ultimately we want it to look very similar to the msn.com home page blog posts on the top section of their landing page. I found several php file updates for changing the title above the image however please advise.
    Please see private content below for more specifics.

    Thanks

    #561707

    Hi tlchase!

    Our single author small blog style has that layout, http://kriesi.at/themes/enfold/blog/blog-single-small/.

    Best regards,
    Elliott

    #561787

    Thanks Elliott, I have tried that option and on the “category” page, it is displayed side to side however ive tried that single author small blog style setting when displayed within a column on other pages (like the one on the previous msg) and the image remains on top of the title (with a whitespace to the right of it) and title below. Ive tried inspecting the section and seeing how I can change the css however wothout success.
    You can see how that displays on our site, i also checked to make sure I didnt have a quick css that might be conflicting with that blog posy as well.
    Thanks again!

    #562109

    Please note that we are trying to have only the image thumbnail size on the left with the title on the right within a 1/4 column without an excerpt. If you look real quick on msn.com , they have that configuration towards the top section of the page.

    Thanks again

    #562579

    Hey!

    You can hide it with this CSS.

    .template-blog .entry-content { display: none !important; }
    

    Also, if you wanted to increase the thumbnail size then you can do so around line 100 in the /enfold/functions.php file.

    Cheers!
    Elliott

    #563555

    Thank you Elliott, unfortunately I applied the CSS you sent me however it does not seem to update how the blog post is displayed.
    I am attaching below an image of how it should display the blog feature image and title side by side as well as the link to the page of our site where the blog post is Single Author, small preview Pic.

    Thank you .

    #563661

    Hey!

    When I view your link now it says, “Error establishing database connection”.

    Regards,
    Elliott

    #564050

    It should work now.

    Sorry about that…

    #565153

    Hi!

    Login information does not seem to be working for me now. Can you check it?

    The reason it’s displaying in the middle is because your page is set to a fullwidth layout. If you add a sidebar to the page the image will go back to the left.

    You can use this CSS inside a codeblock element to hide the sidebar on the page.

    <style type = "text/css">
    aside { display: none !important; }
    main { width: 100% !important; border-right: 0px !important; }
    </style>

    Best regards,
    Elliott

    #565775

    Thank you Elliott, I went ahead and updated the credentials below

    #565778

    Please disregard the regular sidebar widget aligning part.

    The blog posts is still quirky though. I added the sidebar settings: left sidebar and it doesn’t display on the page without requiring the CSS inside a codeblock element to hide the sidebar on the page however the format of the blog posts is still not correct (side by side)

    Thanks!

    #565906

    Hi!

    Should be working now.

    Cheers!
    Elliott

    #566230

    Thank you Elliott, the blog posts look great now however the code block appears to have now created a right hand navigation after the third section. Please let me know what else can remove that new section after the blog posts.

    Thank you

    #566302

    Also, I want to have this same blog post layout throughout other sections and other pages. How would I need to adjust the code in the code block to accommodate this blog post layout elsewhere? I tried adjusting the section within the code but without success. I’m trying to have this layout on the top section of a different page (page link and details below).
    Thanks again for all your help and guidance!

    #566419

    Hey!

    Take a screenshot and highlight what your referring to so we can get a better idea.

    Cheers!
    Elliott

    #568069

    Hey there Elliott. Thank you for your prompt reply.

    I have attached an image link below to better explain what we are trying to achieve regarding the blog post layout being similar to the msn.com top section. We are trying to have a similar look on our landing pages.

    The right hand navigation after the third section appears to have disappeared now.

    #568340

    Hi!

    Add this to your custom CSS.

    #main .avia-button {
        box-shadow: 0px 2px 5px black;
    }

    If you want to create some spacing between the buttons and the content beneath them then you can add a whitespace / separator element after the button.

    Best regards,
    Elliott

    • This reply was modified 8 years, 10 months ago by Elliott.
    #568835

    Thank you Elliott, I understand. All of your suggestions have been great!
    Unfortunately this page is still appearing buggy after the code block was added. I am attaching images below of the two sections that are appearing now. Are these two sections appearing because of the sidebar setting and code block perhaps?

    I read the enfold documentation for this and I’m trying to better understand the single author small blog style with the image on the left and title on the right. Since the single author small blog style requires a sidebar if the page is fullwidth layout, what CSS inside a codeblock element can I use that will hide the sidebar in order for the single author small blog style to appear with the feature image on left and title on the right ANYWHERE on that page? I was trying the ones you had sent before but without success.

    Thank you!!

    I’ll go ahead and try to incorporate the single author small blog style to the top section

    #569737

    Hey!

    I fixed those with this CSS, https://kriesi.at/support/topic/blog-post-image-and-title-layout/#post-565153, did you remove it again?

    Best regards,
    Elliott

    #570303

    No, I haven’t changed the code block that you had added on the page. The code block you had added has the following CSS though:
    <style type = “text/css”>
    #after_section_3 { display: none !important; }
    </style>

    the one from https://kriesi.at/support/topic/blog-post-image-and-title-layout/#post-565153 is a bit different:
    <style type = “text/css”>
    aside { display: none !important; }
    main { width: 100% !important; border-right: 0px !important; }
    </style>
    I’m not sure what may have occurred however when I tried adding the CSS from post# 565153 to either the code block or quick CSS, it still didn’t remove the Top blank section above the slider nor the right hand navigation menu at the bottom. =(

    #571831

    Hey!

    Well the top bar your talking about is from the codeblock element. You’ll want to move it down to the bottom of the page.

    And you still do not have the CSS I posted here, https://kriesi.at/support/topic/blog-post-image-and-title-layout/#post-565153, in the codeblock. I’ll go ahead and add it again.

    Cheers!
    Elliott

    #572486

    Thanks Elliott, I wasn’t sure since you have the following code on the post you posted on January 14:
    <style type = “text/css”>
    aside { display: none !important; }
    main { width: 100% !important; border-right: 0px !important; }
    </style>

    but you have this one within the code block now:
    <style type = “text/css”>
    #after_section_3 { display: none !important; }
    aside { display: none !important; }
    </style>

    I’m still learning so I wasn’t sure if they had the same effect.

    Thank you!

Viewing 22 posts - 1 through 22 (of 22 total)
  • The topic ‘Blog Post image and title layout’ is closed to new replies.