Would like some help to improve appearance of sidebar listings

[daveharte1]

Hi, I’m new here and new to CSS.

I have a website https://jobsource.ie/ . As you can see my featured job listing are listed in the side bar. There is a bug with the theme that prevents it from looking as it should. It should display the company logo and the text should stand out a little more.
I am currently using the code below as a temporary fix given to me by the theme seller to make it look somewhat presentable but i’m hoping someone can help me make it look better. Perhaps the titles in bold and blue and everything centered.

Any help would be greatly appreciated. Thanks

/*
Welcome to Custom CSS!

To learn how this works, see http://wp.me/PEmnE-Bt
*/
.blog .job_listings .job_listing-logo,
.blog .job_listings .job_listing-location,
.blog .job_listings .job_listing-meta {
display: none;
}

.blog .job_listings .job_listing-position {
width: 100%;
}

.page .job_listings .job_listing-logo,
.page .job_listings .job_listing-location,
.page .job_listings .job_listing-meta {
display: none;
}

.page .job_listings .job_listing-position {
width: 100%;
}

[Atelierbram]

More of a WordPress CMS thing I guess. So has-post-thumbnail is set on the .job-listing, but a image tag is nowhere to be seen. Did you set the “so called” featured images in those posts?

Comparing it to this preview of your theme, it seems you want logo images like it is there in “Recent Jobs”.

If this this a WordPress.com site ISO .org, this makes it impossible to tweak the templates, and the only way to make this work with “custom css” is to use background-images for the logo’s. Don’t know if you want to go with that, but if you do we can help you out here.

Noticed another thing, not related, in which you include images with http where it should be https for your site.

[daveharte1]

Hi Atelierbram, Thanks for you’re reply. I got it fixed by downgrading to a previous version of content-widget-job_listing.php

<li <?php job_listing_class(); ?>>
“>

<h3><?php the_title(); ?></h3>

    <ul class="meta">
                    &lt;li class="logo"&gt;&lt;?php the_company_logo(); ?&gt;</li>
        &lt;li class="location"&gt;&lt;?php the_job_location( false ); ?&gt;</li>
        &lt;li class="company"&gt;&lt;?php the_company_name(); ?&gt;</li>
        &lt;li class="job-type &lt;?php echo get_the_job_type() ? sanitize_title( get_the_job_type()-&gt;slug ) : ''; ?&gt;"&gt;&lt;?php the_job_type(); ?&gt;</li>
    </ul>
</a>

And it seems to look ok now.

regarding your second point about http images. I presume it’s because my site wasn’t always https, those images are from before i got the ssl cert. Do you think it could cause me problems?

Regards
David

[Atelierbram]

Are those changes live yet? (I am not seeing logo images in the sidebar on your site yet)

regarding your second point about http images. I presume it’s because my site wasn’t always https, those images are from before i got the ssl cert. Do you think it could cause me problems?

Not really, but it wouldn’t hurt to change the first part of the url paths of those .footer-widgets images. Also because they are served from your own domain (ISO some sort of CDN without a certificate), so it makes sense to fix this. Maybe it could improve the loading speed of those images because then it would be unambiguous using the same protocol, and therefor improve the performance of your site. (Like it is now it just gives warnings in the console of DevTools, not errors.)

[daveharte1]

Yesh it’s live. Actually I added the

<li class=”logo”><?php the_company_logo(); ?>

part myself but the logo’s were a little to large for my liking. I have added the logo line in again for you to view.

Regards
David

[Atelierbram]

Made some small edits in a demo making the logo’s a bit smaller, and it general trying to make that sidebar “look better”

[daveharte1]

wow, thanks Atelierbram, that looks great. I really appreciate your help :)

So, I just copied the css into my edit css. Thats all I need to do , right?

Regards
David

[Atelierbram]

Glad to be of help.

So, I just copied the css into my edit css. Thats all I need to do , right?

Looks fine to me. Some last-minute changes in the demo regarding the background-color of the titles and borders – more of a desaturated light blue – giving it a softer look; but that might not be what you are after. Anyway, have a nice evening, calling it a day now.

[daveharte1]

Thanks again, Atelierbram. Really appreciate you taking the time to help me out.

Regards
David

[Author]

Posts