Docs

[Kalle Johansson]

Hi,

I am an absolute newbie with css trying to make adjustments to the X-child theme’s formatting of the news feed. What I would like to do is i) to center justify the headline “Nyheter” (“News” in Swedish) and ii) reduce the padding below the feed field so as to make the distance to the link (“Alla nyheter här”) below the field shorter – see attachment.

From inspection with Chrome Developer Tools, it appears that the source of the code governing these formattings is “wp-content/themes/x/framework/css/dist/site/stacks/integrity-light.css”

I don’t know how to edit this code. Should I write edits in the (basically empty) “wp-content/themes/x/style.css” file displayed in the WP Appearance Editor panel or edit the integrity-light.css file? In either case, could you advise me on what code to put in?

[Nabeel A]

Hi there,

Thanks for writing in! If you’ve minor CSS changes then I would suggest you to add your CSS in your Customizer via Appearance > Customize > Custom > Edit Global CSS:. If you have some major changes then you can add your CSS code in your Child Theme’s style.css file.

For example if you have code:

.site {
    background-color: #fff;
}

Just add the code in either Customizer or Child Theme’s style.css file. To assist you with code, please provide the URL of your site so we can take a look.

Thanks!

[Kalle Johansson]

Thanks for the directions. The code line I found in the Chrome Dev Tools which should be modified (center aligned) was this:

<h4 class="h-widget">Nyheter</h4>

I managed to center the h4 headline by applying this code in the Customizer:

h4.h-widget
{
  text-align:center;
}

However, I guess any widget will have h4 centered now. I would like to restrict the custom formatting to h4 in the widget “recent-posts-2”. How do I go about that?

The page in question is not published yet and shouldn’t be, so if you can help me using the info presented here, I would be more at ease.

[Lely]

Hello There,

We need to check the page to give you more detailed CSS to use. We need to see your setup. No need to published it, you may just give us access so we can see how it is setup. To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[Kalle Johansson]

This is really more of a general question. I have customized a style class, called “h-widget” such that all instances of “h-widget” when used with header h4 will be formatted in a customized way (here, center aligned). Now I want to restrict this customization so that it only applies to h4.h-widget when used with the widget “recent-posts-2”. How do I do that? Do you really need access to my WP to answer that question?

(I could create a guest account for you, but right now I am more interested in the general problem outlined above).

[Joao]

Hi There,

Please provide your URL and point the sections where you have the elements you want to target.

Thanks

[Kalle Johansson]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for providing the url of the page in question.

#1] To restrict the custom formatting to h4 in the widget “recent-posts-2”, please add the following css code in the customizer, Appearance > Customize > Custom > CSS or insert this code in your child theme’s style.css (if you are using a child theme)

#recent-posts-2 h4.h-widget {
    text-align: center;
}

#2] To decrease the distance between the link (“Alla nyheter här”) and the bottom end of the news feed field, please add the following css code in the customizer, Appearance > Customize > Custom > CSS or insert this code in your child theme’s style.css (if you are using a child theme)

#text-7 {
    margin-top: 1em;
}

And you will need to edit the text widget so that “Alla nyheter här” and “Vårt Facebook-flöde” will have only one space in between. Perhaps like this:

<p class="newslink">Alla nyheter <a href="http://klimatriksdagen.se/db10-nyhetssida/">här</a></p>
<p class="socmed">Vårt Facebook-flöde:</p>

Hope this helps.

[Kalle Johansson]

Thank you for helping me with this. I have one other question. On the news compilation page (http://klimatriksdagen.se/db10/, same password), I would like to change the format of the headers but I can’t find the style to edit. It seems to have something to do with “entry-title and “entry-header” but I can’t find the magic formula.

[Rad]

Hi there,

What styling do you wish to apply? You can use this selector

.blog h2.entry-title, .blog h2.entry-title a {

}

Or you can use Customizer Typography setting for headlines.

Hope this helps.

[Kalle Johansson]

It certainly did, thank you very much (I chose the selector option).

One more thing: How to reduce the spacing between the blog posts? Now that I have reduced the title size, the gaps become excessively large.

[Christopher]

Hi there,

Please add this code :

.hentry {
    margin-top: 1em;
}

Hope it helps.

[Kalle Johansson]

Thanks. I am beginning to get the hang of this. But I have also been asked to try and remove the border around the recent posts feed field in the right hand margin of http://klimatriksdagen.se/db-8/. Can this be done? I have tried to put in “border: none;” with various selectors but without luck.

(a little while later): I could make the borders inside the field go away with

#recent-posts-2 li {
  border: none;
}

However, the surrounding border did not respond to

#recent-posts-2 ul {
  border: none;
}

[Rue Nel]

Hello There,

Thanks for updating in! I have checked your site and I am no longer seeing any border. Please check this: http://prntscr.com/dynw6g

Since you have installed a caching plugin WP Super Cache, please clear your plugin cache before testing your site. This can cause the changes to not take place on the front end. It will eventually show up when the cache regenerates, but it’s not ideal if you’re looking to see your changes immediately. Caching plugins are best to turn on only when you’ve finished building the site.

Hope this helps. Please let us know how it goes.

[Kalle Johansson]

Thanks a bunch…. to think I’ve managed to get it right without being able to notice it.. Emptied the cache now.

[Author]

Posts