CSS customization of blog

uzmavirgo · August 2019

Hi,

I have the following queries:

1) I am trying to change the heading colour and heading size of individual blogs, however I am unable to do so

2) On the blog page, when i remove the slider revolution image, the blank space is still showing and I am unable to remove it

3) I want to align the box size of the blogs that are showing on the blog page as well as home page - however currently they are all of different sizes

Please help to resolve.

Pablo · August 2019

Hi,
Please always attach a link so we can check it out. If the page is offline(localhost) then our help will be limited, you will have to contact us when the page is online. Also please make sure that the page is not under maintenance before you provide us the link.
It is always a good idea to also attach a screenshot, for that use services like snag.gy or pasteboard.co

thanks

uzmavirgo · August 2019

Hi,

Please find the link to the site below:

https://mydailysugar.info

Regards,
Uzma

Pablo · August 2019

Please tell me:

1) Do you want to change the heading color & size for a single posts or for blog item?

2) It's not a RevSlider - it's just a header.

Please go to the Theme Options > Header & Subheader > Header and turn on the "Minimalist" option.

http://prntscr.com/ouiy34

3) I do not understand at all.

Can you show me the example on a screenshot?

Thanks

uzmavirgo · August 2019

Hi,

Thank you for resolving point 2.

Regarding point 1 - I am trying to change the heading colour and size of Individual blog - Can you please share the CSS class for same?

Regarding point 3 - Please find the link of blog here https://mydailysugar.info/blog/ I want to adjust the size of boxes of individual blogs and make them all uniform.

uzmavirgo · August 2019

Hi,

I have one more query.

4- When I am opening the below site on a mobile phone, the heading is not properly aligned and some words are breaking into the nest line.

Can you please share on how to make the heading responsive?

https://mydailysugar.info/2019/08/13/blood-sugar-monitoring-right-time-right-frequency-right-reporting/

Pablo · August 2019

1) Sure, paste that code into the Theme Options > Custom CSS & Js > CSS

.blog_wrapper h2 a{
  color:red !important;
  font-size:24px !important;
}

3) It's not possible.

The height of the blog item is calculated by the length of the text.

You would have to use the "Classic" type of layout to make the height equal.

4) If I disable the word wrapping, then some of the words will be not visible because they will be behind the "screen".

I suggest you, to turn on the "Decrease Fonts" in Theme Options > Responsive and decrease the font size of H1 tag a little bit.

Thanks

uzmavirgo · August 2019

Hi,

Regarding point 3, can you please share from where do I need to select the classic layout?

uzmavirgo · August 2019

Also, it will be very helpful if you can please share the css class for the following items:

1) Individual blog pages

2) The 'related blogs' that are appearing below individual blog pages

Also, I am not able to see the author name & comments option below each blog - how can i change that?

Bryan · August 2019

Hello,

the classic layout is set in theme options>global>general.

From what I can see the related posts h2 is color red, so the css is working, am I correct?

thanks

uzmavirgo · August 2019

Hi,

Can you please share the CSS class for adjusting the size of images in sliding box so that they are of same size? - https://mydailysugar.info/eat-better-to-live-better/

Regarding your above reply - the related post h2 is not red, it will be great if you can share the css class for same.

Pablo · August 2019

1) You have to crop/resize the images to make them the same size.

It's not possible to make the images the same with the CSS code.

To change the size of the default WordPress gallery images, please go to settings>media

Notice!
Remember to use thumbnail regeneration after you make your changes. Otherwise, the images will not change their size.

Also, you can reupload the images too, but you have to make them the exactly the same size.

2) I've added that CSS code I sent you before and it works.

I do not see the problem.

http://prntscr.com/oxkcuw

Thanks

uzmavirgo · August 2019

Hi,

Sorry but i am unable to work on point 2.

Can you please help me in understanding how can i know the CSS class for individual blog pages.

The blog_wrapper is the css class for the home page blog page that is not working on other pages.

Regards,

Uzma

Pablo · August 2019

You mean the single post?

If you use the "Intro Header" then the color is the same as the "Content background" color in theme options > colors> general.

Of course, you can use this CSS too:

.intro-title{
	color:red !important;
}

But as can I see, you already provided some CSS for it, exactly for h2 tag.

hanks

uzmavirgo · August 2019

Hi,

When I execute this CSS, entry titles of all the blogs are becoming white.

How can i customise the entry titles of different blogs?

What is the CSS class for same?

.intro-title{
	color:red !important;
}

Pablo · August 2019

What do you mean by "Different Blogs" ?

And how it can become "white" when the color applied there is "red" ?

This code is made to change color of every element with class "intro-title", which is included in the "Intro Header" layout type only.

Thanks

uzmavirgo · August 2019

Currently, I have different blog posts like:

https://mydailysugar.info/2019/08/13/blood-sugar-monitoring-right-time-right-frequency-right-reporting/

https://mydailysugar.info/2019/08/27/what-is-diabetes-foot-and-how-can-you-manage-it/

https://mydailysugar.info/2019/07/31/emotionalsideofdiabetes/

The title on top of the page for each blog is becoming white when I apply the above CSS.

I want to know how i can change the title of different blogs by using CSS - i want to have white for titke for the first blog post and black for the other two.

Please let me know if we can have a quick call, if you are unable to understand my question.

Pablo · August 2019

This code I sent you is not working because you already provided the CSS code which is forcing the text to be white.

http://prntscr.com/oyn958

Remove that, and then apply my CSS code.

Thanks

CSS customization of blog

Comments