paulwpxp

There are too many themes to choose form, pls take your time browsing around and pick one that suits you the most.

https://www.ads-software.com/themes/

In case you’re still want to experiment with 2021 theme, there is this plugin that extends its options, the header image option is one on the list titled as background image of the site header (I’ve not tried this myself so I’m not sure if this is exactly what you want).

https://www.ads-software.com/plugins/options-for-twenty-twenty-one/

It’s not removing plugin one by one but rather start with disabling ALL plugins and see if problem goes away, this is to determine if the problem is from any of the plugins or faulty theme or WP core or else. If disabling all plugins makes problem goes away then we re-enable plugin one by one to rule out the culprit.

Anyway, it’s hard to help debug a live site that serves cached page (your site is using LiteSpeed cache), so I hope you follow the debug steps and find the plugin in conflict. Also please make sure to clear browser cache while debugging, sometime problem goes away but we still see cached page from our own browser.

@wine4all , the code is specific to 2017 theme only.

Themes are software and it can be good for a long time (like around 5-10 years) but not forever, each theme will get updated from time to time (if theme author intends to keep it up) but as WP core constantly gets updated, it will get to the point that some old themes will get retired because its internal coding can’t be made compat with the latest WP anymore.

I recommend asking theme related questions in theme’s own forum linked below

Support forum for 2017 theme
https://www.ads-software.com/support/theme/twentyseventeen/

Support forum for 2021 theme
https://www.ads-software.com/support/theme/twentytwentyone/

Post question using the post form down below the page. Browse/search around first, some questions might already be answered.

Try putting this code in Custom CSS section, it will widen the page title and content section which automatically making them center-aligned.

@media screen and (min-width: 48em) {
	.page-two-column .panel-content .entry-header { float: none; width: 100%; }
}

@media screen and (min-width: 48em) {
body:not(.has-sidebar):not(.page-one-column) .page-header, body.has-sidebar.error404 #primary .page-header, body.page-two-column:not(.archive) #primary .entry-header, body.page-two-column.archive:not(.has-sidebar) #primary .page-header { float: none; width: 100%; }
}

@media screen and (min-width: 48em) {
	.page-two-column .panel-content .entry-content { float: none; width: 100%; }
}

@media screen and (min-width: 48em) { 
.blog:not(.has-sidebar) #primary article, .archive:not(.page-one-column):not(.has-sidebar) #primary article, .search:not(.has-sidebar) #primary article, .error404:not(.has-sidebar) #primary .page-content, .error404.has-sidebar #primary .page-content, body.page-two-column:not(.archive) #primary .entry-content, body.page-two-column #comments { float: none; width: 100%; }
}

It’s worth mentioning that when starting a new project, we’d better use new themes over old ones to better suit the updated WP-core and also for longevity of the project. The new theme (2021) can pretty much display the content any way you want, it’s just a matter of setting it up, doesn’t require editing codes (except in some highly complicated designs).

Have you tried disabling all plugins? See if problem goes away and if so re-enable them one by one to identify the culprit.

Firstly, disable LiteSpeed Cache, because the combined/minified CSS/JS might mess up the FontAwesome icon (which is used to show the arrow), also any caching must be disble before debugging.

Secondly, try disabling the ultimate-social-media-icons plugin, it’s the first suspect because it also uses FontAwesome icon which might be in conflict with the theme.

sidebar is fully black and getting “lines” in my site which i added to my site with custom css in customizer in old theme.

Does that Custom CSS belong to previous theme or WP core’s option? If it’s the latter, maybe that CSS is the one messing up the new theme.

There are Ordered list <ol> which will be styled as numbering and Unordered list <ul> as bulletpoints. When we create/edit a post we can choose to use <ol> or <ul> and we can always change it later.

So you can just get to the list part of that post and make this change, and that’s all there is to it.

I could see in the source code that the site is using Elementor text editor, so please refer to the instruction on how to use it, but it will be very straighforward just like any other editor.

Please note, to avoid losing/messing-up content on a live site, be sure to have the content of that post saved as a backup.

Put this code in Appearance > Customize > Additional CSS

Note that the rem values for different viewport sizes shown here are theme’s default, change each of those number to your liking.

/*** screen smaller than 700px ***/
h1, .heading-size-1 { font-size: 3.6rem; }

/*** screen between 700px to 1219px ***/
@media (min-width: 700px) {
	h1, .heading-size-1 { font-size: 6.4rem; }
}

/*** screen 1220px and bigger ***/
@media (min-width: 1220px) {
	h1, .heading-size-1 { font-size: 8.4rem; }
}

What exactly are you trying to achieve?

This code is to have 3 columns equal width. If this is what you’re after, use the code in Additional CSS section.

@media (min-width: 768px) {
	.footer-widgets.col-4 .block {
	width: 32%;
	margin-right: 2%;
	}
}

The site is serving cached pages by W3 Total Cache. Only front page is missing stylesheet and some not completely loaded images, while other pages are fine. This indicates that there might be something wrong at the time the front page was cached. So the first thing to do is to delete cache (all or just the front page), and see how it goes.

No problem, glad that you figured it out ??

Not sure what you’re trying to do. We can’t un-link the link using CSS. We can only change mouseover pointer to unset, when user mouseover on the link, the cursor won’t appear as if it’s a link, but it still is a workable link when clicked.

.custom-logo-link a { cursor: unset; }

If you want to have the logo image as a not-clickable link, just don’t set the logo image. Then use :before CSS pseudo element to .site-title and add image’s url in as it’s content.

The site is using edited (custom) version of Twenty Twelve (2012) theme, not Twenty Twenty (2020) theme.

Use this code in Appearance > Customize > Additional CSS

#searchform {
    position: absolute;
    top: -150px;
    right: 210px;
    background: #1d405e;
    padding: 5px 5px 0;
    margin: 0;
    border-radius: 8px;
}

Please note, the theme in use was customized to be fixed layout (not responsive layout), and it uses absolute position for at least 2 elements in the header already. That’s why the code above works.

This kind of plugins can do that

https://www.ads-software.com/plugins/content-views-query-and-display-post-page/

https://www.ads-software.com/plugins/sogrid/

https://www.ads-software.com/plugins/guten-post-layout/

I misunderstood your 2nd question. You refered to header image, I mistook it as logo image.

For header image, usually theme will use page/post featured image as header image. Did you try assigning featured image for each page? This is how most themes work. Also check theme option thoroughly.

If theme doesn’t have that option, and assigning featured image doesn’t set header image, we can use CSS to fix it.

But before we get to it, please note that this theme uses header image as background to cover the header area. The reason the image looks kind of okay in front page and not as okay in other pages (get cropped) because there are more text in this area of front page. Using different image for other pages can fix this but it will never be perfect, because the area’s height is set by the amount of text and vertical padding, background image will get displayed (exposed) based on this height. So it will always get cropped somehow.

This code below is a simple fix to add more vertical padding to header area (for pages other than front page), this will expose more background image (get cropped less). So try this code first, it doesn’t require different image.

body:not(.home) .hero { padding-top:300px; padding-bottom: 20px; }

I believe the above code will fix the problem already but if it doesn’t satisfy you, use this code below.

body:not(.home) .site-header { 
	background-image: url(https://dummyimage.com/1000x250/ff0000/0011ff.png)!important; 
}

@media only screen and (min-width: 55.063em) { 
	body:not(.home) .site-header {
		background-image: url(https://dummyimage.com/2000x500/ff0000/0011ff.png)!important; 
	}
}

Just replace the image url. First one is for small screen, the second one is for big screen.

As a sidenote, the :not is not well supported yet when used like that, but it works tested with latest Firefox, Chrome, in Windows 10.