[perisoyluParticipant]

Dear team:

I would love to change the layout of my blog:
happycoollove/blog

– I don’t like that the background image and the blog entries are seperated by a gap and would like to get rid of the gap/padding (see screenshot)
– I would like the images of each blog post (if they contain one) to be smaller and that there is a border between image of blog posts and the left side of the page, I would like the text to be aligned to the left (as it is right now), however, would like the text to be in the center relative to the image above
– If I click on one of the blog entries, I would love for the image to become the background image and the text to be centered relative to the image
– is there a way to customize the sidebar?

A lot of questions…as always I am grateful for your kind support.
Thanks a lot!

[RupokMember]

Hi there,

Thanks for writing in!

#1. You can add this under Custom > CSS in the Customizer.

.blog .x-container.offset {
  margin: 0 auto;
}
.blog .x-sidebar {
  margin-top: 40px;
}

#2. Let’s use this CSS to control the size of the image :

.blog .has-post-thumbnail .entry-featured {
  max-width: 800px;
}

I didn’t quite get the other request, kindly clarify with a screenshot.

#3. Regretfully, this particular customization request is outside the scope of our support as this is not related to an issue with the theme and instead has to do with your customization of it. As such, you will need to investigate this particular issue on your own or seek help from a developer should you not feel comfortable making these changes yourself. If you have any further questions about the theme, we are more than happy to provide you with assistance on these inquiries.

#4. What kind of customization you need? Let us know a bit so that we could suggest.

Cheers!

[perisoyluParticipant]

Hi and thank your for your support!

#1: worked perfectly, thank you
#2: part one helped to make the image smaller, thank you, part 2: I would love the layout to look like the mockup I have attached
#3: ok, then I will have to think about how to solve this layout dilemma
#4: I want to remove recent comments, tags, calender and categories.
recent posts: I want to change the layout, no borders around echt post title and would love to remove the icon in the header. Can I add an image to the sidebar underneath recent posts?

As always: Thank you so much. You are doing a brilliant job!

[perisoyluParticipant]

Hi there:

One more question: I am trying to get rid of the shadow around the images of my blog entries. Can you help?
Thank you!

[RahulModerator]

Hi There,

Greetings! Would you mind sharing the URL of your website so that I can work out with the CSS customization and provide you the code which will disable the shadows.

Thank you

Cheers!

[perisoyluParticipant]

Hi there:
Sure: http://www.happycoollove.de

Thank you!

[perisoyluParticipant]

Hi and thank your for your support!

#1: worked perfectly, thank you
#2: part one helped to make the image smaller, thank you, part 2: I would love the layout to look like the mockup I have attached
#3: ok, then I will have to think about how to solve this layout dilemma
#4: I want to remove recent comments, tags, calender and categories.
recent posts: I want to change the layout, no borders around echt post title and would love to remove the icon in the header. Can I add an image to the sidebar underneath recent posts?

As always: Thank you so much. You are doing a brilliant job!

[ChristopherModerator]

Hi there,

#2 Please update your code to :

.blog .has-post-thumbnail .entry-featured {
    max-width: 640px;
    max-height: 450px;
    margin-right: auto;
    margin-left: auto;
}

Add this code :

@media (min-width:767px){
.blog .entry-wrap {
    padding: 60px 142px;

}
}

#4 There is no post met date, did you manage to remove it?

#5 Please provide us with URL of page in question.

Hope it helps.

[perisoyluParticipant]

Hi there:

Thank your for your reply.
#2: codes worked out, thank you! Just need to do some fine tuning. 🙂
#4: Yes, I managed to remove calender and the other things. Thank you!
#5: I think I managed that one as well.

However, I have some new questions:
– How do I edit the “read more” link? Need to change the language.
– How do I edit / customize the “leave a reply” option/box beneath each blog post?
Thank you so much!
Kind regards

[ThaiModerator]

Hi There,

Please add the following code under functions.php file locates in your child theme:

add_filter('gettext', 'x_translate_text' , 20, 3);
function x_translate_text ( $translated_text, $text, $domain ) {
	$translation = array(
		'Submit' => 'Your text',
		'Leave a Comment' => 'Your text'
	);

	if( isset( $translation[$text] ) ) {
		return $translation[$text];
	}
	return $translated_text;
}

Regards!
`

[perisoyluParticipant]

Thanks for your response! I might have done something wrong though, because it does not work with my page:
URL: http://www.happycoollove.de
And one more question: can I edit the look of the numbering at the bottom of the blog? (see screenshot)?

Thank you!

[JadeModerator]

Hi there,

Please try this:

add_filter('gettext', 'x_translate_text' , 20, 3);
function x_translate_text ( $translated_text, $text, $domain ) {
	$translation = array(
		'Read More' => 'Your text',
		'Leave a Reply' => 'Your text'
	);

	if( isset( $translation[$text] ) ) {
		return $translation[$text];
	}
	return $translated_text;
}

Hope this helps.

[perisoyluParticipant]

Hi and thank you for your reply!

I am not sure why, but the “add_filter” code does not work for me, however, I tried this
(function($){
$(‘#reply-title.comment-reply-title’).text(‘Your Text Here’);
$(‘.comment-notes’).text(‘Your Text Here’);
$(‘.comment-form-author label’).text(‘Your Text Here *’);
$(‘.comment-form-email label’).text(‘Your Text Here *’);
$(‘.comment-form-url label’).text(‘Your Text Here’);
$(‘.comment-form-comment label’).text(‘Your Text Here’);

})(jQuery)

and this works fine. BUT: I am not sure how to add the submit button (since I’d love to translate the word “submit” as well and the date (currently, all dates are displayed in english) and the “read more” needs translation as well

two more questions:
#1:how do I remove the shadow of the numbering at the end of the blog page? (see attached screenshot), or how do I customize this part of the blog page in general?
#2: i removed the shadow around each blog post – on the site where the blog posts are listed, now I am wondering whether I can separate the entries in the list via a fine line. Is that possible?

Thank you so much.

[JoaoModerator]

Hi There,

Please add the following code to Appearance Customizer Custom CSS

.x-pagination a, .x-pagination span {

    box-shadow: none;
    text-shadow: none;
    border: solid 1px lightgray;
}

.x-pagination span.current {

    box-shadow: none;
    text-shadow: none;
    border: 0;
}

Please add the following code to Appereance Customizer Custom CSS

.blog .entry-wrap {
      border-bottom: solid 1px lightgrey;
}

Hope that helps

[perisoyluParticipant]

Thank you! That worked perfectly for the pagination and the grey line! 🙂

Still one question: I still would love to change the language of the:
– submit button
– the date format
– the read more link

to German. Can you help?

Thanks for your tireless support and patience!

[Author]

Posts